import { r as registerInstance, g as getElement, j as jsx, H as Host } from './index-C7YNCRgy.js';

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const textCss = () => `@layer base {   :host .dds-text {     display: inline-block;     font: inherit;     text-box: trim-both cap alphabetic;     font-variant-numeric: var(--dds-text-font-variant-numeric, auto);      ::slotted(em) {       font-style: italic;     }      ::slotted(strong) {       font-weight: var(--dds-font-weight-bold);     }   } }   @layer reset, base; `;

const Text = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get host() { return getElement(this); }
    // 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", {}) }) }));
    }
};
Text.style = resetCss() + textCss();

export { Text as dds_text };
