q2-tecton-elements 1.50.1 → 1.51.0

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+export class Q2FormattedText {
+    constructor() {
+        this.value = undefined;
+        this.locale = document.documentElement.lang || 'en-US';
+        this.minimumIntegerDigits = 1;
+        this.minimumFractionDigits = 2;
+        this.maximumFractionDigits = 2;
+        this.signDisplay = 'auto';
+        this.size = undefined;
+        this.slotSize = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.formatValue();
+    }
+    // #endregion
+    // #region Watchers
+    propsUpdated() {
+        this.formatValue();
+    }
+    // #endregion
+    // #region Local Methods
+    get formattedTextClasses() {
+        const classes = ['formatted-text'];
+        const sizeClass = this.size ? this.size : this.slotSize;
+        if (!!sizeClass)
+            classes.push(`formatted-text-${sizeClass}`);
+        return classes.join(' ');
+    }
+    formatValue() {
+        const options = {
+            style: 'decimal',
+            signDisplay: this.signDisplay,
+        };
+        if (!isNaN(this.minimumIntegerDigits))
+            options.minimumIntegerDigits = this.minimumIntegerDigits;
+        if (!isNaN(this.minimumFractionDigits))
+            options.minimumFractionDigits = this.minimumFractionDigits;
+        if (!isNaN(this.maximumFractionDigits))
+            options.maximumFractionDigits = this.maximumFractionDigits;
+        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(this.value).trim();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const { formattedTextClasses } = this;
+        return (h("div", { key: '0deb2247f66e39d44ab56bc889520cd67caf20dc', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '7b8bba7f894f439d4628329082dd41a3629b3f79' }, this.formattedValue)));
+    }
+    static get is() { return "q2-formatted-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-formatted-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-formatted-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value you want formatted."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks."
+                },
+                "attribute": "locale",
+                "reflect": true,
+                "defaultValue": "document.documentElement.lang || 'en-US'"
+            },
+            "minimumIntegerDigits": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum number of integer digits to use."
+                },
+                "attribute": "minimum-integer-digits",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "minimumFractionDigits": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum number of fraction digits to use."
+                },
+                "attribute": "minimum-fraction-digits",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "maximumFractionDigits": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum number of fraction digits to use."
+                },
+                "attribute": "maximum-fraction-digits",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "signDisplay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'never' | 'auto' | 'always' | 'exceptZero'",
+                    "resolved": "\"always\" | \"auto\" | \"exceptZero\" | \"never\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determine how the positive or negative sign should display.\n\nBehavior:\n- `always`: Always display the sign.\n- `auto`: Sign displays for negative numbers only, including negative zero.\n- `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n- `never`: Never display the sign."
+                },
+                "attribute": "sign-display",
+                "reflect": true,
+                "defaultValue": "'auto'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | undefined",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies styling based on the size provided. If no size is provided, it will display as inline text."
+                },
+                "attribute": "size",
+                "reflect": true
+            },
+            "slotSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": "Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts."
+                        }],
+                    "text": ""
+                },
+                "attribute": "slot-size",
+                "reflect": true
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "propsUpdated"
+            }, {
+                "propName": "locale",
+                "methodName": "propsUpdated"
+            }, {
+                "propName": "size",
+                "methodName": "propsUpdated"
+            }, {
+                "propName": "slotSize",
+                "methodName": "propsUpdated"
+            }, {
+                "propName": "signDisplay",
+                "methodName": "propsUpdated"
+            }];
+    }
+}
+//# sourceMappingURL=q2-formatted-text.js.map

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-formatted-text.js","sourceRoot":"","sources":["../../../src/components/q2-formatted-text/q2-formatted-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AAE9E,MAAM,OAAO,eAAe;;;sBAeI,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;oCAIrC,CAAC;qCAIA,CAAC;qCAID,CAAC;2BAYyB,MAAM;;;;IAUhE,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,mBAAmB;IAOnB,YAAY;QACR,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,oBAAoB;QACpB,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxD,IAAI,CAAC,CAAC,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC;QAC7D,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,WAAW;QACP,MAAM,OAAO,GAAe;YACxB,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;YAAE,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAChG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACnG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QAEnG,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IAChG,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QAEtC,OAAO,CACH,4DACI,KAAK,EAAE,oBAAoB,gBACf,IAAI,CAAC,cAAc;YAE/B,+DAAO,IAAI,CAAC,cAAc,CAAQ,CAChC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { IDict } from '@/util';\nimport { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The formatted text to display */\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\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    /** The minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = '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' | undefined;\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get formattedTextClasses(): string {\n        const classes = ['formatted-text'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n        if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n        return classes.join(' ');\n    }\n\n    formatValue() {\n        const options: IDict<any> = {\n            style: 'decimal',\n            signDisplay: this.signDisplay,\n        };\n        if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n        if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n        if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(this.value).trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { formattedTextClasses } = this;\n\n        return (\n            <div\n                class={formattedTextClasses}\n                aria-label={this.formattedValue}\n            >\n                <span>{this.formattedValue}</span>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-formatted-text/test/q2-formatted-text-test.e2e.js

@@ -0,0 +1,430 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { setup, evaluateA11y, getListOfStyleCompilationIssues } from "../../../utils/helpers";
+import { Q2FormattedText } from "../q2-formatted-text";
+function createNewSpecPage(props) {
+    let htmlProps = '';
+    if (!isNaN(props.value)) {
+        htmlProps += ` value=${props.value}`;
+    }
+    if (!!props.locale) {
+        htmlProps += ` locale="${props.locale}"`;
+    }
+    if (!!props.size) {
+        htmlProps += ` size="${props.size}"`;
+    }
+    if (!!props.signDisplay) {
+        htmlProps += ` sign-display="${props.signDisplay}"`;
+    }
+    if (!!props.slotSize) {
+        htmlProps += ` slot-size="${props.slotSize}"`;
+    }
+    if (!!props.slotSize) {
+        htmlProps += ` slot-size="${props.slotSize}"`;
+    }
+    if (!!props.maximumFractionDigits) {
+        htmlProps += ` maximum-fraction-digits="${props.maximumFractionDigits}"`;
+    }
+    if (!!props.minimumFractionDigits) {
+        htmlProps += ` minimum-fraction-digits="${props.minimumFractionDigits}"`;
+    }
+    if (!!props.minimumIntegerDigits) {
+        htmlProps += ` minimum-integer-digits="${props.minimumIntegerDigits}"`;
+    }
+    return newSpecPage({
+        components: [Q2FormattedText],
+        html: `<q2-formatted-text ${htmlProps}></q2-formatted-text>`,
+    });
+}
+describe('q2-formatted-text', () => {
+    it('properly compiles CSS vars and functions', async () => {
+        const page = await setup({ html: '<q2-formatted-text></q2-formatted-text>' });
+        expect(await getListOfStyleCompilationIssues(page, 'q2-formatted-text')).toHaveLength(0);
+    });
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({ html: `<q2-formatted-text value="1234.56" />` });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
+    let page;
+    it('renders', async () => {
+        page = await createNewSpecPage({
+            value: 1234.56,
+            locale: 'en-US',
+        });
+        expect(page.root).toEqualHtml(`
+            <q2-formatted-text value="1234.56" locale="en-US" sign-display="auto">
+                <mock:shadow-root>
+                <div aria-label="1,234.56" class="formatted-text">
+                    <span>1,234.56</span>
+                </mock:shadow-root>
+            </q2-formatted-text>
+        `);
+    });
+    describe('Props', () => {
+        describe('value', () => {
+            it('should render the value', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'en-US',
+                });
+                expect(page.root.value).toBe(1234.56);
+            });
+            it('should accept negative numbers', async () => {
+                page = await createNewSpecPage({
+                    value: -1234.56,
+                    locale: 'en-US',
+                });
+                expect(page.root.value).toBe(-1234.56);
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="-1234.56" locale="en-US" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="-1,234.56" class="formatted-text">
+                            <span>-1,234.56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+        });
+        describe('locale', () => {
+            it('renders according to the locale', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'es-MX',
+                });
+                expect(page.root.locale).toBe('es-MX');
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56" locale="es-MX" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.56" class="formatted-text">
+                            <span>1,234.56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+            it('renders according to the locale', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'pt-BR',
+                });
+                expect(page.root.locale).toBe('pt-BR');
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56" locale="pt-BR" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1.234,56" class="formatted-text">
+                            <span>1.234,56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+        });
+        describe('digits and fractions', () => {
+            it('renders with maximumFractionDigits', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56789,
+                    maximumFractionDigits: 3,
+                });
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56789" locale="en-US" maximum-fraction-digits="3" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.568" class="formatted-text">
+                            <span>1,234.568</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+            it('renders with minimumFractionDigits', async () => {
+                page = await createNewSpecPage({
+                    value: 1234,
+                    minimumFractionDigits: 1,
+                });
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234" locale="en-US" minimum-fraction-digits="1" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.0" class="formatted-text">
+                            <span>1,234.0</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+            it('renders with minimumIntegerDigits', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.5678,
+                    minimumIntegerDigits: 6,
+                    maximumFractionDigits: 3,
+                });
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.5678" locale="en-US" minimum-integer-digits="6" maximum-fraction-digits="3" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="001,234.568" class="formatted-text">
+                            <span>001,234.568</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+        });
+        describe('size', () => {
+            it('renders small', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'en-US',
+                    size: 'small',
+                });
+                expect(page.root.size).toBe('small');
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56" locale="en-US" size="small" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.56" class="formatted-text formatted-text-small">
+                            <span>1,234.56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+            it('renders medium', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'en-US',
+                    size: 'medium',
+                });
+                expect(page.root.size).toBe('medium');
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56" locale="en-US" size="medium" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.56" class="formatted-text formatted-text-medium">
+                            <span>1,234.56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+            it('renders large', async () => {
+                page = await createNewSpecPage({
+                    value: 1234.56,
+                    locale: 'en-US',
+                    size: 'large',
+                });
+                expect(page.root.size).toBe('large');
+                expect(page.root).toEqualHtml(`
+                    <q2-formatted-text value="1234.56" locale="en-US" size="large" sign-display="auto">
+                        <mock:shadow-root>
+                        <div aria-label="1,234.56" class="formatted-text formatted-text-large">
+                            <span>1,234.56</span>
+                        </mock:shadow-root>
+                    </q2-formatted-text>
+                `);
+            });
+        });
+        describe('signDisplay', () => {
+            describe('when currency value is negative', () => {
+                it('renders a negative sign on auto', async () => {
+                    page = await createNewSpecPage({
+                        value: -1234.56,
+                        locale: 'en-US',
+                    });
+                    expect(page.root.signDisplay).toBe('auto');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="-1234.56" locale="en-US" sign-display="auto">
+                            <mock:shadow-root>
+                            <div aria-label="-1,234.56" class="formatted-text">
+                                <span>-1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('renders a negative sign on always', async () => {
+                    page = await createNewSpecPage({
+                        value: -1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'always',
+                    });
+                    expect(page.root.signDisplay).toBe('always');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="-1234.56" locale="en-US" sign-display="always">
+                            <mock:shadow-root>
+                            <div aria-label="-1,234.56" class="formatted-text">
+                                <span>-1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('renders only when value is not zero on exceptZero', async () => {
+                    page = await createNewSpecPage({
+                        value: -0.0,
+                        locale: 'en-US',
+                        signDisplay: 'exceptZero',
+                    });
+                    expect(page.root.signDisplay).toBe('exceptZero');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="0" locale="en-US" sign-display="exceptZero">
+                            <mock:shadow-root>
+                            <div aria-label="0.00" class="formatted-text">
+                                <span>0.00</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                    page = await createNewSpecPage({
+                        value: -1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'exceptZero',
+                    });
+                    expect(page.root.signDisplay).toBe('exceptZero');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="-1234.56" locale="en-US" sign-display="exceptZero">
+                            <mock:shadow-root>
+                            <div aria-label="-1,234.56" class="formatted-text">
+                                <span>-1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('does not render when set to never', async () => {
+                    page = await createNewSpecPage({
+                        value: -1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'never',
+                    });
+                    expect(page.root.signDisplay).toBe('never');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="-1234.56" locale="en-US" sign-display="never">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+            });
+            describe('when currency value is positive', () => {
+                it('does not display positive sign on auto', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                    });
+                    expect(page.root.signDisplay).toBe('auto');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56" locale="en-US" sign-display="auto">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('displays the positive sign on always', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'always',
+                    });
+                    expect(page.root.signDisplay).toBe('always');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56" locale="en-US" sign-display="always">
+                            <mock:shadow-root>
+                            <div aria-label="+1,234.56" class="formatted-text">
+                                <span>+1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('renders sign only when value is not zero on exceptZero', async () => {
+                    page = await createNewSpecPage({
+                        value: 0,
+                        locale: 'en-US',
+                        signDisplay: 'exceptZero',
+                    });
+                    expect(page.root.signDisplay).toBe('exceptZero');
+                    expect(page.root).toEqualHtml(`
+                            <q2-formatted-text value="0" locale="en-US" sign-display="exceptZero">
+                                <mock:shadow-root>
+                                <div aria-label="0.00" class="formatted-text">
+                                    <span>0.00</span>
+                                </mock:shadow-root>
+                            </q2-formatted-text>
+                        `);
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'exceptZero',
+                    });
+                    expect(page.root.signDisplay).toBe('exceptZero');
+                    expect(page.root).toEqualHtml(`
+                            <q2-formatted-text value="1234.56" locale="en-US" sign-display="exceptZero">
+                                <mock:shadow-root>
+                                <div aria-label="+1,234.56" class="formatted-text">
+                                    <span>+1,234.56</span>
+                                </mock:shadow-root>
+                            </q2-formatted-text>
+                        `);
+                });
+                it('does not render when set to never', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                        signDisplay: 'never',
+                    });
+                    expect(page.root.signDisplay).toBe('never');
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56" locale="en-US" sign-display="never">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+            });
+        });
+        describe('slotSize', () => {
+            describe('when provided', () => {
+                it('applies size class to currency', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                        slotSize: 'medium',
+                    });
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56" locale="en-US" slot-size="medium" sign-display="auto">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text formatted-text-medium">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+                it('does NOT apply if the size property is already provided', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                        size: 'large',
+                        slotSize: 'small',
+                    });
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56" locale="en-US" size="large" slot-size="small" sign-display="auto">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text formatted-text-large">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+            });
+            describe('when not provided', () => {
+                it('does NOT apply size class', async () => {
+                    page = await createNewSpecPage({
+                        value: 1234.56,
+                        locale: 'en-US',
+                    });
+                    expect(page.root).toEqualHtml(`
+                        <q2-formatted-text value="1234.56"  locale="en-US" sign-display="auto">
+                            <mock:shadow-root>
+                            <div aria-label="1,234.56" class="formatted-text">
+                                <span>1,234.56</span>
+                            </mock:shadow-root>
+                        </q2-formatted-text>
+                    `);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-formatted-text-test.e2e.js.map