import { jsx as _jsx } from "@stencil/core/jsx-runtime";
import { Host } from "@stencil/core";
/**
 * Displays inline text with specific visual styles or tones.
 * Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.
 */
export class Text {
    host;
    // MARK: Props
    size = "m";
    /**
     * The `font-variant-numeric` property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
     * - `auto`: The default value. The browser determines whether to use alternate glyphs based on the font and context.
     * - `tabular-nums`: Uses fixed-width digits, which are ideal for aligning numbers in tables or lists.
     * - `diagonal-fractions`: Uses diagonal fraction glyphs, which are ideal for displaying fractions in a more compact and visually appealing way.
     * For more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).
     */
    fontVariantNumeric = "auto";
    // MARK: Lifecycle
    // componentDidLoad() {
    //   adoptSharedStyles(this.el);
    // }
    // MARK: Render
    render() {
        const { fontVariantNumeric } = this;
        function handleTextStyles() {
            const textStyles = {};
            const setTextProperty = (value, property, suffix = "") => {
                if (value) {
                    textStyles[`--dds-text-${property}${suffix}`] = value;
                }
            };
            setTextProperty(fontVariantNumeric, "font-variant-numeric");
            return textStyles;
        }
        return (_jsx(Host, { part: "root", children: _jsx("span", { class: "dds-text", style: handleTextStyles(), part: "text", children: _jsx("slot", {}) }) }));
    }
    static get is() { return "dds-text"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../reset.css", "text.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../reset.css", "text.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "\"s\" | \"m\" | \"l\"",
                    "resolved": "\"l\" | \"m\" | \"s\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"m\""
            },
            "fontVariantNumeric": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"auto\" | \"tabular-nums\" | \"diagonal-fractions\"",
                    "resolved": "\"auto\" | \"diagonal-fractions\" | \"tabular-nums\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The `font-variant-numeric` property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\n- `auto`: The default value. The browser determines whether to use alternate glyphs based on the font and context.\n- `tabular-nums`: Uses fixed-width digits, which are ideal for aligning numbers in tables or lists.\n- `diagonal-fractions`: Uses diagonal fraction glyphs, which are ideal for displaying fractions in a more compact and visually appealing way.\nFor more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "font-variant-numeric",
                "defaultValue": "\"auto\""
            }
        };
    }
    static get elementRef() { return "host"; }
}
