q2-tecton-elements 1.53.0 → 1.54.0

package/dist/collection/components/q2-link/test/q2-link-test.spec.js

@@ -0,0 +1,193 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2Link } from "../q2-link";
+function createNewSpecPage(props) {
+    let htmlProps = '';
+    if (!!props.label) {
+        htmlProps += ` label="${props.label}"`;
+    }
+    if (!!props.iconType) {
+        htmlProps += ` icon-type="${props.iconType}"`;
+    }
+    if (!!props.href) {
+        htmlProps += ` href="${props.href}"`;
+    }
+    if (!!props.target) {
+        htmlProps += ` target="${props.target}"`;
+    }
+    if (!!props.variant) {
+        htmlProps += ` variant="${props.variant || 'inline'}"`;
+    }
+    if (!!props.referrerpolicy) {
+        htmlProps += ` referrerpolicy="${props.referrerpolicy}"`;
+    }
+    if (!!props.disabled) {
+        htmlProps += ` disabled=""`;
+    }
+    return newSpecPage({
+        components: [Q2Link],
+        html: `<q2-link ${htmlProps}></q2-link>`,
+    });
+}
+describe('q2-link', () => {
+    let specPage;
+    let linkClass;
+    let linkElement;
+    it('renders', async () => {
+        specPage = await createNewSpecPage({
+            label: 'Click me',
+            href: 'https://q2.com',
+            variant: 'standalone',
+        });
+        expect(specPage.root).toEqualHtml(`
+            <q2-link label="Click me" icon-type="chevron-right" href="https://q2.com" variant="standalone" >
+                <mock:shadow-root>
+                <div aria-label="Click me" class="link-container standalone">
+                    <a class="link" href="https://q2.com" target="_self" test-id="linkAnchor">
+                        <span class="label">Click me</span>
+                        <q2-icon type="chevron-right"></q2-icon>
+                    </a>
+                </div>
+                </mock:shadow-root>
+            </q2-link>
+        `);
+    });
+    describe('Props', () => {
+        it('should render with properties', async () => {
+            specPage = await createNewSpecPage({
+                label: 'Click me',
+                iconType: 'external-link',
+                href: 'https://q2.com',
+                target: '_blank',
+                referrerpolicy: 'no-referrer',
+                variant: 'standalone',
+            });
+            linkElement = specPage.root;
+            expect(linkElement.getAttribute('label')).toBe('Click me');
+            expect(linkElement.getAttribute('icon-type')).toBe('external-link');
+            expect(linkElement.getAttribute('href')).toBe('https://q2.com');
+            expect(linkElement.getAttribute('target')).toBe('_blank');
+            expect(linkElement.getAttribute('variant')).toBe('standalone');
+            expect(linkElement.getAttribute('referrerpolicy')).toBe('no-referrer');
+        });
+        it('should render with standalone variant', async () => {
+            specPage = await createNewSpecPage({
+                label: 'Click me',
+                href: 'https://q2.com',
+                target: '_blank',
+                referrerpolicy: 'no-referrer',
+                variant: 'standalone',
+            });
+            linkElement = specPage.root;
+            const icon = linkElement.shadowRoot.querySelector('q2-icon');
+            expect(linkElement.getAttribute('variant')).toBe('standalone');
+            expect(icon).not.toBeNull();
+        });
+        it('should render with inline variant', async () => {
+            specPage = await createNewSpecPage({
+                label: 'Click me',
+                href: 'https://q2.com',
+                target: '_blank',
+                referrerpolicy: 'no-referrer',
+            });
+            linkElement = specPage.root;
+            const container = linkElement.shadowRoot.querySelector('.link-container');
+            expect(linkElement.getAttribute('variant')).toBe('inline');
+            expect(container.className).toContain('inline');
+        });
+    });
+    describe('Events', () => {
+        describe('tctClick', () => {
+            it('emits with proper data', async () => {
+                specPage = await createNewSpecPage({
+                    label: 'Click me',
+                    href: 'https://q2.com',
+                    target: '_blank',
+                    referrerpolicy: 'no-referrer',
+                });
+                linkClass = specPage.rootInstance;
+                const event = new CustomEvent('tctClick');
+                const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');
+                linkClass.handleClick(event);
+                expect(tctClickSpy).toHaveBeenCalled();
+                expect(tctClickSpy).toHaveBeenCalledWith({
+                    target: '_blank',
+                    referrerpolicy: 'no-referrer',
+                    href: 'https://q2.com',
+                });
+            });
+        });
+    });
+    describe('Local Methods', () => {
+        describe('Getters', () => {
+            describe('classes', () => {
+                it('returns the variant and "link-container"', async () => {
+                    specPage = await createNewSpecPage({
+                        label: 'Click me',
+                        href: 'https://q2.com',
+                        target: '_blank',
+                        referrerpolicy: 'no-referrer',
+                    });
+                    linkClass = specPage.rootInstance;
+                    expect(linkClass.classes).toContain('link-container');
+                    expect(linkClass.classes).toContain('inline');
+                });
+                it('returns the variant when explicitly set to standalone', async () => {
+                    specPage = await createNewSpecPage({
+                        label: 'Click me',
+                        href: 'https://q2.com',
+                        target: '_blank',
+                        referrerpolicy: 'no-referrer',
+                        variant: 'standalone',
+                    });
+                    linkClass = specPage.rootInstance;
+                    expect(linkClass.classes).toContain('standalone');
+                });
+            });
+        });
+        describe('Methods', () => {
+            describe('handleClick()', () => {
+                it('calls stopPropogation', async () => {
+                    specPage = await createNewSpecPage({
+                        label: 'Click me',
+                        href: 'https://q2.com',
+                        target: '_blank',
+                        referrerpolicy: 'no-referrer',
+                    });
+                    linkClass = specPage.rootInstance;
+                    const event = new CustomEvent('tctClick');
+                    const stopPropagationSpy = jest.spyOn(event, 'stopPropagation');
+                    linkClass.handleClick(event);
+                    expect(stopPropagationSpy).toHaveBeenCalled();
+                });
+                it('does not emit tctClick event if disabled is true', async () => {
+                    specPage = await createNewSpecPage({
+                        label: 'Click me',
+                        href: 'https://q2.com',
+                        target: '_blank',
+                        referrerpolicy: 'no-referrer',
+                    });
+                    linkClass = specPage.rootInstance;
+                    linkClass.disabled = true;
+                    const event = new CustomEvent('tctClick');
+                    const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');
+                    linkClass.handleClick(event);
+                    expect(tctClickSpy).not.toHaveBeenCalled();
+                });
+                it('emits the tctClick event when disabled is false', async () => {
+                    specPage = await createNewSpecPage({
+                        label: 'Click me',
+                        href: 'https://q2.com',
+                        target: '_blank',
+                        referrerpolicy: 'no-referrer',
+                    });
+                    linkClass = specPage.rootInstance;
+                    const event = new CustomEvent('tctClick');
+                    const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');
+                    linkClass.handleClick(event);
+                    expect(tctClickSpy).toHaveBeenCalled();
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-link-test.spec.js.map

package/dist/collection/components/q2-link/test/q2-link-test.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-link-test.spec.js","sourceRoot":"","sources":["../../../../src/components/q2-link/test/q2-link-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { Q2Link } from '../q2-link';\n\nfunction createNewSpecPage(props: {\n    label?: string;\n    iconType?: string;\n    href?: string;\n    target?: string;\n    variant?: string;\n    referrerpolicy?: string;\n    disabled?: boolean;\n}) {\n    let htmlProps: string = '';\n    if (!!props.label) {\n        htmlProps += ` label=\"${props.label}\"`;\n    }\n    if (!!props.iconType) {\n        htmlProps += ` icon-type=\"${props.iconType}\"`;\n    }\n    if (!!props.href) {\n        htmlProps += ` href=\"${props.href}\"`;\n    }\n    if (!!props.target) {\n        htmlProps += ` target=\"${props.target}\"`;\n    }\n    if (!!props.variant) {\n        htmlProps += ` variant=\"${props.variant || 'inline'}\"`;\n    }\n    if (!!props.referrerpolicy) {\n        htmlProps += ` referrerpolicy=\"${props.referrerpolicy}\"`;\n    }\n    if (!!props.disabled) {\n        htmlProps += ` disabled=\"\"`;\n    }\n\n    return newSpecPage({\n        components: [Q2Link],\n        html: `<q2-link ${htmlProps}></q2-link>`,\n    });\n}\n\ndescribe('q2-link', () => {\n    let specPage;\n    let linkClass;\n    let linkElement;\n\n    it('renders', async () => {\n        specPage = await createNewSpecPage({\n            label: 'Click me',\n            href: 'https://q2.com',\n            variant: 'standalone',\n        });\n\n        expect(specPage.root).toEqualHtml(`\n            <q2-link label=\"Click me\" icon-type=\"chevron-right\" href=\"https://q2.com\" variant=\"standalone\" >\n                <mock:shadow-root>\n                <div aria-label=\"Click me\" class=\"link-container standalone\">\n                    <a class=\"link\" href=\"https://q2.com\" target=\"_self\" test-id=\"linkAnchor\">\n                        <span class=\"label\">Click me</span>\n                        <q2-icon type=\"chevron-right\"></q2-icon>\n                    </a>\n                </div>\n                </mock:shadow-root>\n            </q2-link>\n        `);\n    });\n\n    describe('Props', () => {\n        it('should render with properties', async () => {\n            specPage = await createNewSpecPage({\n                label: 'Click me',\n                iconType: 'external-link',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            linkElement = specPage.root;\n            expect(linkElement.getAttribute('label')).toBe('Click me');\n            expect(linkElement.getAttribute('icon-type')).toBe('external-link');\n            expect(linkElement.getAttribute('href')).toBe('https://q2.com');\n            expect(linkElement.getAttribute('target')).toBe('_blank');\n            expect(linkElement.getAttribute('variant')).toBe('standalone');\n            expect(linkElement.getAttribute('referrerpolicy')).toBe('no-referrer');\n        });\n\n        it('should render with standalone variant', async () => {\n            specPage = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            linkElement = specPage.root;\n            const icon = linkElement.shadowRoot.querySelector('q2-icon');\n            expect(linkElement.getAttribute('variant')).toBe('standalone');\n            expect(icon).not.toBeNull();\n        });\n\n        it('should render with inline variant', async () => {\n            specPage = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n            });\n            linkElement = specPage.root;\n            const container = linkElement.shadowRoot.querySelector('.link-container');\n            expect(linkElement.getAttribute('variant')).toBe('inline');\n            expect(container.className).toContain('inline');\n        });\n    });\n\n    describe('Events', () => {\n        describe('tctClick', () => {\n            it('emits with proper data', async () => {\n                specPage = await createNewSpecPage({\n                    label: 'Click me',\n                    href: 'https://q2.com',\n                    target: '_blank',\n                    referrerpolicy: 'no-referrer',\n                });\n                linkClass = specPage.rootInstance;\n                const event = new CustomEvent('tctClick');\n                const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');\n                linkClass.handleClick(event);\n                expect(tctClickSpy).toHaveBeenCalled();\n                expect(tctClickSpy).toHaveBeenCalledWith({\n                    target: '_blank',\n                    referrerpolicy: 'no-referrer',\n                    href: 'https://q2.com',\n                });\n            });\n        });\n    });\n\n    describe('Local Methods', () => {\n        describe('Getters', () => {\n            describe('classes', () => {\n                it('returns the variant and \"link-container\"', async () => {\n                    specPage = await createNewSpecPage({\n                        label: 'Click me',\n                        href: 'https://q2.com',\n                        target: '_blank',\n                        referrerpolicy: 'no-referrer',\n                    });\n                    linkClass = specPage.rootInstance;\n                    expect(linkClass.classes).toContain('link-container');\n                    expect(linkClass.classes).toContain('inline');\n                });\n\n                it('returns the variant when explicitly set to standalone', async () => {\n                    specPage = await createNewSpecPage({\n                        label: 'Click me',\n                        href: 'https://q2.com',\n                        target: '_blank',\n                        referrerpolicy: 'no-referrer',\n                        variant: 'standalone',\n                    });\n                    linkClass = specPage.rootInstance;\n                    expect(linkClass.classes).toContain('standalone');\n                });\n            });\n        });\n\n        describe('Methods', () => {\n            describe('handleClick()', () => {\n                it('calls stopPropogation', async () => {\n                    specPage = await createNewSpecPage({\n                        label: 'Click me',\n                        href: 'https://q2.com',\n                        target: '_blank',\n                        referrerpolicy: 'no-referrer',\n                    });\n                    linkClass = specPage.rootInstance;\n                    const event = new CustomEvent('tctClick');\n                    const stopPropagationSpy = jest.spyOn(event, 'stopPropagation');\n                    linkClass.handleClick(event);\n                    expect(stopPropagationSpy).toHaveBeenCalled();\n                });\n\n                it('does not emit tctClick event if disabled is true', async () => {\n                    specPage = await createNewSpecPage({\n                        label: 'Click me',\n                        href: 'https://q2.com',\n                        target: '_blank',\n                        referrerpolicy: 'no-referrer',\n                    });\n                    linkClass = specPage.rootInstance;\n                    linkClass.disabled = true;\n                    const event = new CustomEvent('tctClick');\n                    const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');\n                    linkClass.handleClick(event);\n                    expect(tctClickSpy).not.toHaveBeenCalled();\n                });\n\n                it('emits the tctClick event when disabled is false', async () => {\n                    specPage = await createNewSpecPage({\n                        label: 'Click me',\n                        href: 'https://q2.com',\n                        target: '_blank',\n                        referrerpolicy: 'no-referrer',\n                    });\n                    linkClass = specPage.rootInstance;\n                    const event = new CustomEvent('tctClick');\n                    const tctClickSpy = jest.spyOn(linkClass.tctClick, 'emit');\n                    linkClass.handleClick(event);\n                    expect(tctClickSpy).toHaveBeenCalled();\n                });\n            });\n        });\n    });\n});\n"]}

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

@@ -117,7 +117,7 @@ export class Q2Loading {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Numeric adjustments are available for specific `type` and `shape` combinations.\nThese may impact the number of items, columns, and/or rows that display.\n\nWhen `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n\nWhen `shape=\"table\"`, the `counts` attribute can be used in two ways:\n\n1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n\nWhen `shape=\"form\"`, the `counts` attribute can be used in two ways:\n\n1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns."
+                    "text": "Numeric adjustments are available for specific `type` and `shape` combinations.\nThese may impact the number of items, columns, and/or rows that display.\n\nWhen `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n\nWhen `shape=\"table\"`, the `counts` attribute can be used in two ways:\n\n1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n\nWhen `shape=\"form\"`, the `counts` attribute can be used in two ways:\n\n1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns."
                 },
                 "attribute": "counts",
                 "reflect": true

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

@@ -1 +1 @@
-{"version":3,"file":"q2-loading.js","sourceRoot":"","sources":["../../../src/components/q2-loading/q2-loading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get loader() {\n        const loaderMap = {\n            default: this.spinner,\n            spinner: this.spinner,\n            skeleton: this.skeletonLoader,\n        };\n\n        return loaderMap[this.type] || loaderMap.default;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    get spinnerShape() {\n        const spinnerMap = {\n            default: this.halfCircleSpinner,\n            'half-circle': this.halfCircleSpinner,\n        };\n\n        return spinnerMap[this.type] || spinnerMap.default;\n    }\n\n    halfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                <div class=\"circle circle-1\"></div>\n                <div class=\"circle circle-2\"></div>\n            </div>\n        );\n    };\n\n    skeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n            </div>\n        );\n    };\n\n    spinner = () => {\n        return this.halfCircleSpinner();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.loader();\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-loading.js","sourceRoot":"","sources":["../../../src/components/q2-loading/q2-loading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get loader() {\n        const loaderMap = {\n            default: this.spinner,\n            spinner: this.spinner,\n            skeleton: this.skeletonLoader,\n        };\n\n        return loaderMap[this.type] || loaderMap.default;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    get spinnerShape() {\n        const spinnerMap = {\n            default: this.halfCircleSpinner,\n            'half-circle': this.halfCircleSpinner,\n        };\n\n        return spinnerMap[this.type] || spinnerMap.default;\n    }\n\n    halfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                <div class=\"circle circle-1\"></div>\n                <div class=\"circle circle-2\"></div>\n            </div>\n        );\n    };\n\n    skeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-label={this.localizedLabel}\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n            </div>\n        );\n    };\n\n    spinner = () => {\n        return this.halfCircleSpinner();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.loader();\n    }\n\n    // #endregion\n}\n"]}

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

@@ -65,7 +65,7 @@ button {
   visibility: hidden;
 }
 
-:host {
+:host(:not([separator]):not([separator=false])) {
   --comp-padding: 0 var(--app-scale-2x, 10px);
   --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
   padding: var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));
@@ -79,7 +79,7 @@ button {
 }
 
 :host(:focus),
-:host(:hover),
+:host(:not([separator]):not([separator=false]):hover),
 :host([active]) {
   position: relative;
   z-index: 1;
@@ -109,7 +109,7 @@ button {
   display: grid;
 }
 
-:host(:not([aria-disabled]):hover),
+:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),
 :host([active]),
 :host(:focus) {
   background: var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
@@ -133,4 +133,10 @@ q2-icon {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.separator {
+  --comp-default-separator-margin: 0 var(--tct-scale-1, var(--app-scale-3x, 15px));
+  margin: var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));
+  border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc));
 }

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

@@ -42,6 +42,7 @@ export class Q2Option {
         this.multiline = undefined;
         this.role = 'option';
         this.selected = undefined;
+        this.separator = undefined;
         this.value = undefined;
     }
     // #endregion
@@ -52,6 +53,7 @@ export class Q2Option {
         this.mutationObserver = null;
     }
     componentWillLoad() {
+        this.separatorChangedHandler(this.separator);
         this.initDisplay();
     }
     componentDidLoad() {
@@ -60,6 +62,11 @@ export class Q2Option {
     }
     // #endregion
     // #region Watchers
+    async separatorChangedHandler(separator) {
+        if (!separator)
+            return;
+        this.role = 'separator';
+    }
     async displayChangedHandler() {
         this.display = loc(this.display);
         await this.handleTextContent();
@@ -67,10 +74,16 @@ export class Q2Option {
     }
     // #endregion
     // #region Render Methods
-    render() {
+    renderSeparator() {
+        return h("div", { class: "separator" });
+    }
+    renderOption() {
         const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '70d5ca1da1b82a1406cdeb6f2db5e0f0ade4d727', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { key: '2803339b76a90830b9db0ba482cbaf2a66c1e8a4', type: "checkmark" }), h("div", { key: '77ed1a226afe2f65c3e08d42e4f380e1e3a6e1f4', class: "content" }, h("slot", { key: '569d40708b0736d1ff693104fd7af7fe4842931c' }))));
+        return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+    }
+    render() {
+        return this.separator ? this.renderSeparator() : this.renderOption();
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }
@@ -203,7 +216,7 @@ export class Q2Option {
             },
             "role": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -214,7 +227,7 @@ export class Q2Option {
                 "docs": {
                     "tags": [{
                             "name": "type",
-                            "text": "{('option' | 'menuitem')}"
+                            "text": "{('option' | 'menuitem' | 'separator')}"
                         }, {
                             "name": "private",
                             "text": undefined
@@ -245,6 +258,23 @@ export class Q2Option {
                 "attribute": "selected",
                 "reflect": true
             },
+            "separator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a line in the item instead of text.\nClick events from these items will not have details provided.\nA `separator` allows for quick visual grouping of items, so interactions should not be bound to these options."
+                },
+                "attribute": "separator",
+                "reflect": true
+            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -288,6 +318,9 @@ export class Q2Option {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "separator",
+                "methodName": "separatorChangedHandler"
+            }, {
                 "propName": "display",
                 "methodName": "displayChangedHandler"
             }];

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

@@ -1 +1 @@
-{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-option/test/q2-option-test.spec.js

@@ -295,6 +295,28 @@ describe('q2-option', () => {
                 });
             });
         });
+        describe('separator', () => {
+            describe('when provided', () => {
+                it('renders an element with a class of separator', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Option],
+                        html: '<q2-option separator></q2-option>',
+                    });
+                    expect(specPage.root.shadowRoot.querySelector('.separator')).toBeTruthy();
+                    expect(specPage.root.role).toBe('separator');
+                });
+            });
+            describe('when not provided', () => {
+                it('does not render an element with a class of separator', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Option],
+                        html: '<q2-option></q2-option>',
+                    });
+                    expect(specPage.root.shadowRoot.querySelector('.separator')).toBeNull();
+                    expect(specPage.root.role).toBe('option');
+                });
+            });
+        });
         describe('value', () => {
             describe('when provided', () => {
                 it('sets the value property to the provided value', async () => {