q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-currency/q2-currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-currency.js","sourceRoot":"","sources":["../../../../src/components/q2-currency/q2-currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n/**\n * @name Currency\n * @category Text\n * @summary Use for displaying formatted monetary amounts with proper locale.\n */\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative amounts only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /**\n     * The variant controls how the currency is colored and exposes unique CSS overrides.\n     * The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\n     * The `masked` variant exposes the ability to use gradients and images to color the currency.\n     */\n    @Prop({ reflect: true })\n    variant: 'debit' | 'credit' | 'masked';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to retrieve the displayed currency value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.getAttribute('aria-label') || '';\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    @Watch('variant')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const { size, slotSize, isNegativeAmount, variant } = this;\n        const classes = ['currency'];\n        const sizeClass = size ? size : slotSize;\n        const sign = isNegativeAmount ? 'negative' : 'positive';\n\n        classes.push(sign);\n        if (!!variant) classes.push(variant);\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get isNegativeAmount(): boolean {\n        const hasNegativePart = this.formattedParts.some((part: Intl.NumberFormatPart) => part.type === 'minusSign');\n        const hasNegativeDash = String(this.amount).startsWith('-');\n        return hasNegativePart || hasNegativeDash;\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1]?.value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n            signDisplay,\n            isNegativeAmount,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {signDisplay === 'accounting' && isNegativeAmount && <span>{'('}</span>}\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                {signDisplay === 'accounting' && isNegativeAmount && <span>{')'}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-currency.js","sourceRoot":"","sources":["../../../../src/components/q2-currency/q2-currency.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAsB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACrG;;;;GAIG;AAEH,MAAM,OAAO,UAAU;IADvB;QAsBI,mDAAmD;QAEnD,aAAQ,GAAW,KAAK,CAAC;QAEzB,sGAAsG;QAEtG,WAAM,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO,CAAC;QAErE;;;;;;;;;WASG;QAEH,gBAAW,GAA8D,MAAM,CAAC;KAkNnF;IAhMG,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED,aAAa;IACb,6BAA6B;IAE7B;;;;OAIG;IAEH,KAAK,CAAC,qBAAqB;QACvB,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC7D,CAAC;IAED,aAAa;IACb,mBAAmB;IASnB,YAAY;QACR,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,UAAU;QACV,MAAM,EAAE,cAAc,EAAE,yBAAyB,EAAE,GAAG,IAAI,CAAC;QAC3D,IAAI,MAAM,GAAW,EAAE,CAAC;QAExB,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE,CAAC;YAChC,IACI,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvB,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvB,IAAI,CAAC,IAAI,KAAK,OAAO;gBACrB,IAAI,CAAC,IAAI,KAAK,SAAS,EACzB,CAAC;gBACC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC;YACzB,CAAC;QACL,CAAC;QAED,gEAAgE;QAChE,IAAI,yBAAyB,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG;YAAE,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACjG,gDAAgD;QAChD,MAAM,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAE1B,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,IAAI,eAAe;QACf,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC3D,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,CAAC;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;QACzC,MAAM,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;QAExD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC,CAAC,OAAO;YAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,CAAC,CAAC,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,YAAY,SAAS,EAAE,CAAC,CAAC;QAEvD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,IAAI,eAAe;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QACvG,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC5C,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAI,cAAc;QACd,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACjD,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC1G,MAAM,MAAM,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACnD,OAAO,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC;IACnD,CAAC;IAED,IAAI,QAAQ;QACR,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAChG,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,OAAO,QAAQ,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,IAAI,gBAAgB;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAC3B,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CACzF,CAAC;IACN,CAAC;IAED,IAAI,gBAAgB;QAChB,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAC7G,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5D,OAAO,eAAe,IAAI,eAAe,CAAC;IAC9C,CAAC;IAED,IAAI,aAAa;QACb,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClD,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAE9B,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAC5B,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CACzF,CAAC;QACF,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAI,yBAAyB;;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC/G,MAAM,mBAAmB,GAAG,CAAA,MAAA,IAAI,CAAC,cAAc,CAAC,aAAa,GAAG,CAAC,CAAC,0CAAE,KAAK,MAAK,GAAG,CAAC;QAElF,IAAI,mBAAmB,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY;YAChG,OAAO,KAAK,CAAC;QAEjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,uBAAuB;QACvB,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,IAAI,CAAC;QAE5D,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAI,YAAY;QACZ,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC1C,CAAC;IAED,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjD,CAAC;IAED,cAAc;QACV,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE;YACrD,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;SAC9E,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EACF,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,uBAAuB,EACvB,UAAU,EACV,QAAQ,EACR,yBAAyB,EACzB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,gBAAgB,GACnB,GAAG,IAAI,CAAC;QAET,OAAO,CACH,EAAC,IAAI,mEAAa,gBAAgB;YAC9B,uEACY,iBAAiB,EACzB,KAAK,EAAE,eAAe;gBAErB,WAAW,KAAK,YAAY,IAAI,gBAAgB,IAAI,+DAAO,GAAG,CAAQ;gBACtE,gBAAgB,IAAI,+DAAO,aAAa,CAAQ;gBAChD,eAAe,IAAI,CAChB,6DAAM,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAG,cAAc,CAAQ,CACrF;gBACD,+DAAO,UAAU,CAAQ;gBACzB,6DAAM,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAG,QAAQ,CAAQ;gBAC7E,CAAC,eAAe,IAAI,CACjB,6DAAM,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAG,cAAc,CAAQ,CACrF;gBACA,WAAW,KAAK,YAAY,IAAI,gBAAgB,IAAI,+DAAO,GAAG,CAAQ,CACrE,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, Watch, h, ComponentInterface, Element, Host, Method } from '@stencil/core';\n/**\n * @name Currency\n * @category Text\n * @summary Use for displaying formatted monetary amounts with proper locale.\n */\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative amounts only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /**\n     * The variant controls how the currency is colored and exposes unique CSS overrides.\n     * The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\n     * The `masked` variant exposes the ability to use gradients and images to color the currency.\n     */\n    @Prop({ reflect: true })\n    variant: 'debit' | 'credit' | 'masked';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to retrieve the displayed currency value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        return this.hostElement.getAttribute('aria-label') || '';\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    @Watch('variant')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const { size, slotSize, isNegativeAmount, variant } = this;\n        const classes = ['currency'];\n        const sizeClass = size ? size : slotSize;\n        const sign = isNegativeAmount ? 'negative' : 'positive';\n\n        classes.push(sign);\n        if (!!variant) classes.push(variant);\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get isNegativeAmount(): boolean {\n        const hasNegativePart = this.formattedParts.some((part: Intl.NumberFormatPart) => part.type === 'minusSign');\n        const hasNegativeDash = String(this.amount).startsWith('-');\n        return hasNegativePart || hasNegativeDash;\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1]?.value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n            signDisplay,\n            isNegativeAmount,\n        } = this;\n\n        return (\n            <Host aria-label={readableCurrency}>\n                <div\n                    test-id=\"q2CurrencyInner\"\n                    class={currencyClasses}\n                >\n                    {signDisplay === 'accounting' && isNegativeAmount && <span>{'('}</span>}\n                    {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                    {currencyIsFront && (\n                        <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>\n                    )}\n                    <span>{amountCore}</span>\n                    <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                    {!currencyIsFront && (\n                        <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>\n                    )}\n                    {signDisplay === 'accounting' && isNegativeAmount && <span>{')'}</span>}\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-currency/test/q2-currency-test.vr.js

@@ -0,0 +1,79 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'default-positive-inline',
+        html: `<q2-currency amount="123456.78"></q2-currency>`,
+    },
+    {
+        name: 'default-negative-inline',
+        html: `<q2-currency amount="-123456.78"></q2-currency>`,
+    },
+    {
+        name: 'size-small',
+        html: `<q2-currency amount="123456.78" size="small"></q2-currency>`,
+    },
+    {
+        name: 'size-medium',
+        html: `<q2-currency amount="123456.78" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'size-large',
+        html: `<q2-currency amount="123456.78" size="large"></q2-currency>`,
+    },
+    {
+        name: 'debit-positive',
+        html: `<q2-currency amount="123456.78" variant="debit" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'debit-negative',
+        html: `<q2-currency amount="-123456.78" variant="debit" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'credit-positive',
+        html: `<q2-currency amount="123456.78" variant="credit" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'credit-negative',
+        html: `<q2-currency amount="-123456.78" variant="credit" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'masked-positive',
+        html: `<q2-currency amount="123456.78" variant="masked" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'masked-negative',
+        html: `<q2-currency amount="-123456.78" variant="masked" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'sign-display-accounting-positive',
+        html: `<q2-currency amount="123456.78" sign-display="accounting" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'sign-display-accounting-negative',
+        html: `<q2-currency amount="-123456.78" sign-display="accounting" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'sign-display-always',
+        html: `<q2-currency amount="123456.78" sign-display="always" size="medium"></q2-currency>`,
+    },
+    {
+        name: 'sign-display-never',
+        html: `<q2-currency amount="-123456.78" sign-display="never" size="medium"></q2-currency>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-currency--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-currency--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-currency — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-currency-test.vr.js.map

package/dist/collection/components/q2-currency/test/q2-currency-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-currency-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-currency/test/q2-currency-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,gDAAgD;KACzD;IACD;QACI,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,iDAAiD;KAC1D;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,6DAA6D;KACtE;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,8DAA8D;KACvE;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,6DAA6D;KACtE;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,8EAA8E;KACvF;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,+EAA+E;KACxF;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,+EAA+E;KACxF;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,gFAAgF;KACzF;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,+EAA+E;KACxF;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,gFAAgF;KACzF;IACD;QACI,IAAI,EAAE,kCAAkC;QACxC,IAAI,EAAE,wFAAwF;KACjG;IACD;QACI,IAAI,EAAE,kCAAkC;QACxC,IAAI,EAAE,yFAAyF;KAClG;IACD;QACI,IAAI,EAAE,qBAAqB;QAC3B,IAAI,EAAE,oFAAoF;KAC7F;IACD;QACI,IAAI,EAAE,oBAAoB;QAC1B,IAAI,EAAE,oFAAoF;KAC7F;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,gBAAgB,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACxE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC/F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;IAClD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default-positive-inline',\n        html: `<q2-currency amount=\"123456.78\"></q2-currency>`,\n    },\n    {\n        name: 'default-negative-inline',\n        html: `<q2-currency amount=\"-123456.78\"></q2-currency>`,\n    },\n    {\n        name: 'size-small',\n        html: `<q2-currency amount=\"123456.78\" size=\"small\"></q2-currency>`,\n    },\n    {\n        name: 'size-medium',\n        html: `<q2-currency amount=\"123456.78\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'size-large',\n        html: `<q2-currency amount=\"123456.78\" size=\"large\"></q2-currency>`,\n    },\n    {\n        name: 'debit-positive',\n        html: `<q2-currency amount=\"123456.78\" variant=\"debit\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'debit-negative',\n        html: `<q2-currency amount=\"-123456.78\" variant=\"debit\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'credit-positive',\n        html: `<q2-currency amount=\"123456.78\" variant=\"credit\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'credit-negative',\n        html: `<q2-currency amount=\"-123456.78\" variant=\"credit\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'masked-positive',\n        html: `<q2-currency amount=\"123456.78\" variant=\"masked\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'masked-negative',\n        html: `<q2-currency amount=\"-123456.78\" variant=\"masked\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'sign-display-accounting-positive',\n        html: `<q2-currency amount=\"123456.78\" sign-display=\"accounting\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'sign-display-accounting-negative',\n        html: `<q2-currency amount=\"-123456.78\" sign-display=\"accounting\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'sign-display-always',\n        html: `<q2-currency amount=\"123456.78\" sign-display=\"always\" size=\"medium\"></q2-currency>`,\n    },\n    {\n        name: 'sign-display-never',\n        html: `<q2-currency amount=\"-123456.78\" sign-display=\"never\" size=\"medium\"></q2-currency>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-currency--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-currency--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-currency — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-data-table/q2-data-table.css

@@ -65,6 +65,57 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-data-table-width?: (<length-percentage>) Controls the optional explicit width of the data table.
+ * @prop --tct-data-table-layout: (<custom-ident>) Controls the table-layout algorithm of the data table.
+ * @prop --tct-data-table-background: (<color>) Controls the background color of the data table.
+ * @prop --tct-data-table-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the data table.
+ * @prop --tct-data-table-shadow: (*) Controls the box shadow of the data table when shadowed.
+ * @prop --tct-data-table-cell-padding: (<length-percentage>+) Controls the inner padding of data table cells in the default density.
+ * @prop --tct-data-table-cell-padding-compact: (<length-percentage>+) Controls the inner padding of data table cells when density is compact.
+ * @prop --tct-data-table-cell-padding-comfortable: (<length-percentage>+) Controls the inner padding of data table cells when density is comfortable.
+ * @prop --tct-data-table-cell-font-size?: (<length-percentage>) Controls the optional font size of data table cell content.
+ * @prop --tct-data-table-caption-side: (<custom-ident>) Controls the caption-side of the data table caption.
+ * @prop --tct-data-table-caption-padding: (<length-percentage>+) Controls the inner padding of the data table caption.
+ * @prop --tct-data-table-caption-text-align: (<custom-ident>) Controls the text alignment of the data table caption.
+ * @prop --tct-data-table-caption-font-size?: (<length-percentage>) Controls the optional font size of the data table caption.
+ * @prop --tct-data-table-caption-font-weight: (<number>) Controls the font weight of the data table caption.
+ * @prop --tct-data-table-caption-color?: (<color>) Controls the optional text color of the data table caption.
+ * @prop --tct-data-table-header-background?: (<color>) Controls the optional background color of the data table header row.
+ * @prop --tct-data-table-header-border-color: (<color>) Controls the border color beneath the data table header row.
+ * @prop --tct-data-table-header-border-style: (<custom-ident>) Controls the border style beneath the data table header row.
+ * @prop --tct-data-table-header-border-width: (<length>+) Controls the border width beneath the data table header row.
+ * @prop --tct-data-table-header-content-gap: (<length-percentage>) Controls the gap between header label and sort indicator.
+ * @prop --tct-data-table-header-font-size: (<length-percentage>) Controls the font size of data table header cells.
+ * @prop --tct-data-table-header-font-weight: (<number>) Controls the font weight of data table header cells.
+ * @prop --tct-data-table-header-sortable-icon-size: (<length>) Controls the size of the sort-indicator icon in sortable headers.
+ * @prop --tct-data-table-header-sorted-font-weight: (<number>) Controls the font weight applied to a sorted header column.
+ * @prop --tct-data-table-sticky-header-background: (<color>) Controls the background color of the data table header when sticky.
+ * @prop --tct-data-table-sticky-header-top?: (<length-percentage>) Controls the optional top offset of the sticky header.
+ * @prop --tct-data-table-row-border-color: (<color>) Controls the border color between data table rows.
+ * @prop --tct-data-table-row-border-style: (<custom-ident>) Controls the border style between data table rows.
+ * @prop --tct-data-table-row-border-width: (<length>+) Controls the border width between data table rows.
+ * @prop --tct-data-table-row-even-background: (<color>) Controls the background color of even-numbered rows when striped.
+ * @prop --tct-data-table-row-odd-background?: (<color>) Controls the optional background color of odd-numbered rows when striped.
+ * @prop --tct-data-table-column-border-color: (<color>) Controls the border color between data table columns when bordered.
+ * @prop --tct-data-table-column-border-style: (<custom-ident>) Controls the border style between data table columns when bordered.
+ * @prop --tct-data-table-column-border-width: (<length>+) Controls the border width between data table columns when bordered.
+ * @prop --tct-data-table-clickable-row-hover-background: (<color>) Controls the background color of clickable rows on hover.
+ * @prop --tct-data-table-selected-row-background: (<color>) Controls the background color of selected rows.
+ * @prop --tct-data-table-expandable-row-hover-background: (<color>) Controls the background color of expandable rows on hover.
+ * @prop --tct-data-table-expandable-row-even-hover-background: (<color>) Controls the background color of even-numbered expandable rows on hover.
+ * @prop --tct-data-table-expandable-row-odd-hover-background: (<color>) Controls the background color of odd-numbered expandable rows on hover.
+ * @prop --tct-data-table-expanded-row-background: (<color>) Controls the background color of an expanded row's content area.
+ * @prop --tct-data-table-expanded-row-even-background: (<color>) Controls the background color of an even-numbered expanded row's content area.
+ * @prop --tct-data-table-expanded-row-odd-background?: (<color>) Controls the optional background color of an odd-numbered expanded row's content area.
+ * @prop --tct-data-table-loading-row-background: (<color>) Controls the background color of the loading and empty-state rows.
+ * @prop --tct-data-table-select-column-width: (<length>) Controls the width of the select checkbox column.
+ * @prop --tct-data-table-dropdown-column-width: (<length>) Controls the width of the row-actions dropdown column.
+ * @prop --tct-data-table-dropdown-column-padding: (<length-percentage>+) Controls the inner padding of the row-actions dropdown column cells.
+ * @prop --tct-data-table-expandable-row-control-column-width: (<length>) Controls the width of the expandable-row toggle column.
+ * @prop --tct-data-table-expandable-row-control-column-padding: (<length-percentage>+) Controls the inner padding of the expandable-row toggle column cells.
+ * @prop --tct-data-table-clickable-column-padding: (<length-percentage>+) Controls the inner padding of clickable-row toggle column cells.
+ */
 :host {
   display: block;
 }

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -398,7 +398,7 @@ export class Q2DataTable {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'ee7b81a0e49d8be037696fb1e275f90fe5547f8b', class: "container" }, h("table", { key: 'a5ee5ad79d6ed0b5e911611f9e15fb2130c69894' }, caption && h("caption", { key: 'ba4ea123b1b9fe1bda5734dcd789889db8d992b9', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '616c110e6636c4be4bb29feb636b1804cbdb622f', class: "container" }, h("table", { key: '131bda2f7b698a8c4d09d55be8e054363b2843b4' }, caption && h("caption", { key: '69efd5cdb86237ac380d17f8f4b43890727ef7f3', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

package/dist/collection/components/q2-data-table/test/q2-data-table-test.vr.js

@@ -0,0 +1,79 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const HEADERS_JSON = JSON.stringify([
+    { title: 'Day', key: 'day' },
+    { title: 'Sales', key: 'sales', align: 'center' },
+    { title: 'Revenue', key: 'revenue', align: 'end' },
+]);
+const ROWS_JSON = JSON.stringify([
+    { id: 1, cells: { day: 'Monday', sales: 93, revenue: '$4,650' } },
+    { id: 2, cells: { day: 'Tuesday', sales: 127, revenue: '$6,350' } },
+    { id: 3, cells: { day: 'Wednesday', sales: 121, revenue: '$6,050' } },
+]);
+const buildHtml = (variant) => `
+    <q2-data-table id="dt" caption="Recent Sales" ${variant.attrs}></q2-data-table>
+    <script>
+        (function () {
+            var t = document.getElementById('dt');
+            t.headers = ${HEADERS_JSON};
+            t.rows = ${variant.emptyRows ? '[]' : ROWS_JSON};
+        })();
+    </script>
+`;
+const VARIANTS = [
+    { name: 'default', attrs: '' },
+    { name: 'bordered-true', attrs: 'bordered' },
+    { name: 'bordered-horizontal', attrs: 'bordered="horizontal"' },
+    { name: 'bordered-vertical', attrs: 'bordered="vertical"' },
+    { name: 'striped', attrs: 'striped' },
+    { name: 'shadowed', attrs: 'shadowed' },
+    { name: 'density-compact', attrs: 'density="compact"' },
+    { name: 'density-comfortable', attrs: 'density="comfortable"' },
+    { name: 'clickable', attrs: 'clickable' },
+    { name: 'clickable-hide-clickable', attrs: 'clickable hide-clickable' },
+    { name: 'selectable-multiple-left', attrs: 'selectable select-mode="multiple"' },
+    { name: 'selectable-multiple-right', attrs: 'selectable select-mode="multiple" select-align="right"' },
+    { name: 'selectable-single', attrs: 'selectable select-mode="single"' },
+    { name: 'loading', attrs: 'loading' },
+    { name: 'empty', attrs: '', emptyRows: true },
+    { name: 'hide-caption', attrs: 'hide-caption' },
+    { name: 'combo-stripe-border-shadow', attrs: 'striped bordered shadowed density="compact"' },
+];
+const CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable');
+const SELECTABLE_MULTIPLE_LEFT_VARIANT = VARIANTS.find(v => v.name === 'selectable-multiple-left');
+const restingCase = (variant, theme) => {
+    test(`q2-data-table--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-data-table--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--focus--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-data-table--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });
+        // Hover the first data row to surface clickable-row hover styling.
+        const row = page.locator('q2-data-table tbody tr').first();
+        await row.hover();
+        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--hover--${theme}.png`);
+    });
+};
+test.describe('q2-data-table — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        focusCase(CLICKABLE_VARIANT, theme);
+        hoverCase(CLICKABLE_VARIANT, theme);
+        focusCase(SELECTABLE_MULTIPLE_LEFT_VARIANT, theme);
+    }
+});
+//# sourceMappingURL=q2-data-table-test.vr.js.map

package/dist/collection/components/q2-data-table/test/q2-data-table-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-data-table-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-data-table/test/q2-data-table-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; attrs: string; emptyRows?: boolean };\n\nconst HEADERS_JSON = JSON.stringify([\n    { title: 'Day', key: 'day' },\n    { title: 'Sales', key: 'sales', align: 'center' },\n    { title: 'Revenue', key: 'revenue', align: 'end' },\n]);\n\nconst ROWS_JSON = JSON.stringify([\n    { id: 1, cells: { day: 'Monday', sales: 93, revenue: '$4,650' } },\n    { id: 2, cells: { day: 'Tuesday', sales: 127, revenue: '$6,350' } },\n    { id: 3, cells: { day: 'Wednesday', sales: 121, revenue: '$6,050' } },\n]);\n\nconst buildHtml = (variant: Variant) => `\n    <q2-data-table id=\"dt\" caption=\"Recent Sales\" ${variant.attrs}></q2-data-table>\n    <script>\n        (function () {\n            var t = document.getElementById('dt');\n            t.headers = ${HEADERS_JSON};\n            t.rows = ${variant.emptyRows ? '[]' : ROWS_JSON};\n        })();\n    </script>\n`;\n\nconst VARIANTS: Variant[] = [\n    { name: 'default', attrs: '' },\n    { name: 'bordered-true', attrs: 'bordered' },\n    { name: 'bordered-horizontal', attrs: 'bordered=\"horizontal\"' },\n    { name: 'bordered-vertical', attrs: 'bordered=\"vertical\"' },\n    { name: 'striped', attrs: 'striped' },\n    { name: 'shadowed', attrs: 'shadowed' },\n    { name: 'density-compact', attrs: 'density=\"compact\"' },\n    { name: 'density-comfortable', attrs: 'density=\"comfortable\"' },\n    { name: 'clickable', attrs: 'clickable' },\n    { name: 'clickable-hide-clickable', attrs: 'clickable hide-clickable' },\n    { name: 'selectable-multiple-left', attrs: 'selectable select-mode=\"multiple\"' },\n    { name: 'selectable-multiple-right', attrs: 'selectable select-mode=\"multiple\" select-align=\"right\"' },\n    { name: 'selectable-single', attrs: 'selectable select-mode=\"single\"' },\n    { name: 'loading', attrs: 'loading' },\n    { name: 'empty', attrs: '', emptyRows: true },\n    { name: 'hide-caption', attrs: 'hide-caption' },\n    { name: 'combo-stripe-border-shadow', attrs: 'striped bordered shadowed density=\"compact\"' },\n];\n\nconst CLICKABLE_VARIANT = VARIANTS.find(v => v.name === 'clickable')!;\nconst SELECTABLE_MULTIPLE_LEFT_VARIANT = VARIANTS.find(v => v.name === 'selectable-multiple-left')!;\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-data-table--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });\n        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-data-table--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-data-table--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildHtml(variant), { theme, setupLoc: true });\n        // Hover the first data row to surface clickable-row hover styling.\n        const row = page.locator('q2-data-table tbody tr').first();\n        await row.hover();\n        await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--hover--${theme}.png`);\n    });\n};\n\ntest.describe('q2-data-table — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const theme of THEMES) {\n        focusCase(CLICKABLE_VARIANT, theme);\n        hoverCase(CLICKABLE_VARIANT, theme);\n        focusCase(SELECTABLE_MULTIPLE_LEFT_VARIANT, theme);\n    }\n});\n"]}

package/dist/collection/components/q2-detail/q2-detail.css

@@ -65,6 +65,48 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-detail-gap-column: (<length-percentage>) Controls the column gap between the detail label and description.
+ * @prop --tct-detail-gap-row?: (<length-percentage>) Controls the optional row gap between detail items.
+ * @prop --tct-detail-vertical-alignment: (<custom-ident>) Controls the vertical alignment of detail items in horizontal layouts.
+ * @prop --tct-detail-label-icon-size: (<length>) Controls the size of icons slotted into the detail label area.
+ * @prop --tct-detail-label-font-color: (<color>) Controls the text color of the detail label in its default state.
+ * @prop --tct-detail-description-font-color: (<color>) Controls the text color of the detail description in its default state.
+ * @prop --tct-detail-description-gap-column: (<length-percentage>) Controls the column gap between elements within the detail description.
+ * @prop --tct-detail-label-inline-font-size: (<length-percentage>) Controls the font size of the detail label in the inline size.
+ * @prop --tct-detail-label-inline-font-weight: (<number>) Controls the font weight of the detail label in the inline size.
+ * @prop --tct-detail-description-inline-font-size: (<length-percentage>) Controls the font size of the detail description in the inline size.
+ * @prop --tct-detail-label-xsmall-font-color: (<color>) Controls the text color of the detail label in the xsmall size.
+ * @prop --tct-detail-label-xsmall-font-size: (<length-percentage>) Controls the font size of the detail label in the xsmall size.
+ * @prop --tct-detail-label-xsmall-font-weight: (<number>) Controls the font weight of the detail label in the xsmall size.
+ * @prop --tct-detail-label-small-font-color?: (<color>) Controls the optional text color of the detail label in the small size.
+ * @prop --tct-detail-label-small-font-size: (<length-percentage>) Controls the font size of the detail label in the small size.
+ * @prop --tct-detail-label-small-font-weight: (<number>) Controls the font weight of the detail label in the small size.
+ * @prop --tct-detail-label-medium-font-color?: (<color>) Controls the optional text color of the detail label in the medium size.
+ * @prop --tct-detail-label-medium-font-size: (<length-percentage>) Controls the font size of the detail label in the medium size.
+ * @prop --tct-detail-label-medium-font-weight: (<number>) Controls the font weight of the detail label in the medium size.
+ * @prop --tct-detail-label-large-font-color?: (<color>) Controls the optional text color of the detail label in the large size.
+ * @prop --tct-detail-label-large-font-size: (<length-percentage>) Controls the font size of the detail label in the large size.
+ * @prop --tct-detail-label-large-font-weight: (<number>) Controls the font weight of the detail label in the large size.
+ * @prop --tct-detail-label-xlarge-font-color?: (<color>) Controls the optional text color of the detail label in the xlarge size.
+ * @prop --tct-detail-label-xlarge-font-size: (<length-percentage>) Controls the font size of the detail label in the xlarge size.
+ * @prop --tct-detail-label-xlarge-font-weight: (<number>) Controls the font weight of the detail label in the xlarge size.
+ * @prop --tct-detail-description-xsmall-font-color: (<color>) Controls the text color of the detail description in the xsmall size.
+ * @prop --tct-detail-description-xsmall-font-size: (<length-percentage>) Controls the font size of the detail description in the xsmall size.
+ * @prop --tct-detail-description-xsmall-font-weight: (<number>) Controls the font weight of the detail description in the xsmall size.
+ * @prop --tct-detail-description-small-font-color?: (<color>) Controls the optional text color of the detail description in the small size.
+ * @prop --tct-detail-description-small-font-size: (<length-percentage>) Controls the font size of the detail description in the small size.
+ * @prop --tct-detail-description-small-font-weight: (<number>) Controls the font weight of the detail description in the small size.
+ * @prop --tct-detail-description-medium-font-color?: (<color>) Controls the optional text color of the detail description in the medium size.
+ * @prop --tct-detail-description-medium-font-size: (<length-percentage>) Controls the font size of the detail description in the medium size.
+ * @prop --tct-detail-description-medium-font-weight: (<number>) Controls the font weight of the detail description in the medium size.
+ * @prop --tct-detail-description-large-font-color?: (<color>) Controls the optional text color of the detail description in the large size.
+ * @prop --tct-detail-description-large-font-size: (<length-percentage>) Controls the font size of the detail description in the large size.
+ * @prop --tct-detail-description-large-font-weight: (<number>) Controls the font weight of the detail description in the large size.
+ * @prop --tct-detail-description-xlarge-font-color?: (<color>) Controls the optional text color of the detail description in the xlarge size.
+ * @prop --tct-detail-description-xlarge-font-size: (<length-percentage>) Controls the font size of the detail description in the xlarge size.
+ * @prop --tct-detail-description-xlarge-font-weight: (<number>) Controls the font weight of the detail description in the xlarge size.
+ */
 :host {
   display: block;
 }

package/dist/collection/components/q2-detail/q2-detail.js

@@ -107,7 +107,7 @@ export class Q2Detail {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e9fe9f1d23de26052a90b499865c30908942d90e', class: this.detailClasses }, this.hasLabel && (h("div", { key: '74575c0c28fd5493cec9b04e4693f66812863946', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'd9bef4e29bfc54e6149d57322833f6184572b863', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '954f5dadc663b7c525e99ed138c8721215b27bc6', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'e9499b441dae002fbb71d7fca522b9d64d9a345e', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '190d85d561eb86e2267e04e66be8558a39c3e64f', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     static get is() { return "q2-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-dropdown/q2-dropdown.css

@@ -65,6 +65,14 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-dropdown-content-padding?: (<length-percentage>+) Controls the optional padding around the dropdown popover content.
+ * @prop --tct-dropdown-popover-top-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-top slot.
+ * @prop --tct-dropdown-popover-bottom-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-bottom slot.
+ * @prop --tct-dropdown-slot-border-top?: (*) Controls the optional border shorthand rendered below the dropdown's popover-top slot.
+ * @prop --tct-dropdown-slot-border-bottom?: (*) Controls the optional border shorthand rendered above the dropdown's popover-bottom slot.
+ * @prop --tct-dropdown-width?: (<length-percentage>) Controls the optional minimum width of the dropdown popover.
+ */
 :host {
   display: inline-flex;
 }

package/dist/collection/components/q2-dropdown/q2-dropdown.js

@@ -115,10 +115,8 @@ export class Q2Dropdown {
         var _a;
         if (this.open !== open)
             this.open = open;
-        if (open) {
+        if (!open) {
             (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.scrollContainerTo({ top: 0 });
-        }
-        else {
             this.optionList.setActiveElement(null);
         }
     }
@@ -366,7 +364,7 @@ export class Q2Dropdown {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'b6e82a77840792da2ab918048abf38578ec4ccb3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '5c26f1d198bd92ba61ac51080a3f8e2769d07b01', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '4db48630a62011863293587a76a17448a503df9d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '20cf54aca49692025c64ca230433366e14a242df', name: "popover-top" }), h("q2-option-list", { key: 'f2f8b61de7682fda8b18ddee17995fbbe1529ff7', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '380049eda306cad1283f509977cfc32924f86d22' })), h("slot", { key: 'bc02de04e8e0ca08205425ced651183535a80c78', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: '126229197fe6e46bdb7996e231cf8ea56247cd6b', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '09085fa1729f9ac7d6afa69ae30a5078f10f290a', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'b96c783d7dcbb38ee5679ae3b1e1fde489d45cb3', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: 'd769d709d0634cf62123caed5565c82a81327d50', name: "popover-top" }), h("q2-option-list", { key: 'ba46fe90836fd6ffcb4d1611c490073f77060ce0', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'ed9f811ef752a082c6c82d6bff7fbd71e88bfb2c' })), h("slot", { key: '7bb093af52b5f779f43485f219586d7a5e1353c8', name: "popover-bottom" }))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }