q2-tecton-elements 1.52.2 → 1.54.0

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

@@ -1 +1 @@
-{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string = 'chevron-right';\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type={this.iconType}></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -1,127 +1,10 @@
-import { newSpecPage } from "@stencil/core/testing";
 import { setup, evaluateA11y, getListOfStyleCompilationIssues } from "../../../utils/helpers";
-import { Q2Link } from "../q2-link";
-function createNewSpecPage(props) {
-    let htmlProps = '';
-    if (!!props.label) {
-        htmlProps += ` label="${props.label}"`;
-    }
-    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', () => {
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-link></q2-link>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-link')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations for inline variant(default)', async () => {
-            const page = await setup({ html: `<q2-link label="Click me" href="https://q2.com" />` });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-        it('Does not have accessibility violations for standalone variant', async () => {
-            const page = await setup({
-                html: `<q2-link label="Click me" href="https://q2.com" variant="standalone" />`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
-    let page;
-    it('renders', async () => {
-        page = await createNewSpecPage({
-            label: 'Click me',
-            href: 'https://q2.com',
-            variant: 'standalone',
-        });
-        expect(page.root).toEqualHtml(`
-            <q2-link label="Click me" 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 () => {
-            page = await createNewSpecPage({
-                label: 'Click me',
-                href: 'https://q2.com',
-                target: '_blank',
-                referrerpolicy: 'no-referrer',
-                variant: 'standalone',
-            });
-            expect(page.root.label).toBe('Click me');
-            expect(page.root.href).toBe('https://q2.com');
-            expect(page.root.target).toBe('_blank');
-            expect(page.root.variant).toBe('standalone');
-            expect(page.root.referrerpolicy).toBe('no-referrer');
-        });
-        it('should render with standalone variant', async () => {
-            page = await createNewSpecPage({
-                label: 'Click me',
-                href: 'https://q2.com',
-                target: '_blank',
-                referrerpolicy: 'no-referrer',
-                variant: 'standalone',
-            });
-            expect(page.root.label).toBe('Click me');
-            expect(page.root).toEqualHtml(`
-                <q2-link label="Click me" href="https://q2.com" variant="standalone" target="_blank" referrerpolicy="no-referrer">
-                    <mock:shadow-root>
-                    <div aria-label="Click me" class="link-container standalone">
-                        <a class="link" href="https://q2.com" target="_blank" referrerpolicy="no-referrer" test-id="linkAnchor">
-                            <span class="label">Click me</span>
-                            <q2-icon type="chevron-right"></q2-icon>
-                        </a>
-                    </div>
-                    </mock:shadow-root>
-                </q2-link>
-            `);
-        });
-        it('should render with inline variant', async () => {
-            page = await createNewSpecPage({
-                label: 'Click me',
-                href: 'https://q2.com',
-                target: '_blank',
-                referrerpolicy: 'no-referrer',
-            });
-            expect(page.root.label).toBe('Click me');
-            expect(page.root).toEqualHtml(`
-                <q2-link label="Click me" href="https://q2.com" variant="inline" target="_blank" referrerpolicy="no-referrer">
-                    <mock:shadow-root>
-                        <a href="https://q2.com" target="_blank" class="link-container inline" referrerpolicy="no-referrer" test-id="linkAnchor">
-                            Click me
-                        </a>
-                    </mock:shadow-root>
-                </q2-link>
-            `);
-        });
-    });
-    describe('Test methods', () => {
+    describe('Test Methods', () => {
         it('clickLink()', async () => {
             const page = await setup({
                 html: `
@@ -141,5 +24,24 @@ describe('q2-link', () => {
             expect(sortSpy).toHaveReceivedEventTimes(1);
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('Does not have accessibility violations for inline variant(default)', async () => {
+                const page = await setup({ html: `<q2-link label="Click me" href="https://q2.com"></q2-link>` });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+            it('Does not have accessibility violations for standalone variant', async () => {
+                const page = await setup({
+                    html: `<q2-link label="Click me" href="https://q2.com" variant="standalone"></q2-link>`,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-link-test.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"q2-link-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-link/test/q2-link-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { setup, evaluateA11y, getListOfStyleCompilationIssues } from '@/utils/helpers';\nimport { Q2Link } from '../q2-link';\n\nfunction createNewSpecPage(props: {\n    label?: 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.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    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-link></q2-link>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-link')).toHaveLength(0);\n    });\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations for inline variant(default)', async () => {\n            const page = await setup({ html: `<q2-link label=\"Click me\" href=\"https://q2.com\" />` });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n        it('Does not have accessibility violations for standalone variant', async () => {\n            const page = await setup({\n                html: `<q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" />`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    let page: SpecPage;\n\n    it('renders', async () => {\n        page = await createNewSpecPage({\n            label: 'Click me',\n            href: 'https://q2.com',\n            variant: 'standalone',\n        });\n\n        expect(page.root).toEqualHtml(`\n            <q2-link label=\"Click me\" 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            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root.href).toBe('https://q2.com');\n            expect(page.root.target).toBe('_blank');\n            expect(page.root.variant).toBe('standalone');\n            expect(page.root.referrerpolicy).toBe('no-referrer');\n        });\n        it('should render with standalone variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                    <div aria-label=\"Click me\" class=\"link-container standalone\">\n                        <a class=\"link\" href=\"https://q2.com\" target=\"_blank\" referrerpolicy=\"no-referrer\" 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        it('should render with inline variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"inline\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                        <a href=\"https://q2.com\" target=\"_blank\" class=\"link-container inline\" referrerpolicy=\"no-referrer\" test-id=\"linkAnchor\">\n                            Click me\n                        </a>\n                    </mock:shadow-root>\n                </q2-link>\n            `);\n        });\n    });\n\n    describe('Test methods', () => {\n        it('clickLink()', async () => {\n            const page = await setup({\n                html: `\n                    <q2-link label=\"Click me\"\n                        href=\"https://q2.com\"\n                        variant=\"inline\"\n                        target=\"_blank\"\n                        referrerpolicy=\"no-referrer\">\n                    </q2-link>\n                `,\n            });\n            await page.waitForChanges();\n            const sortSpy = await page.spyOnEvent('tctClick');\n            const link = await page.find('q2-link');\n            await link.callMethod('clickLink');\n            await page.waitForChanges();\n            expect(sortSpy).toHaveReceivedEventTimes(1);\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-link-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-link/test/q2-link-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,+BAA+B,EAAE,MAAM,iBAAiB,CAAC;AAEvF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAC,CAAC;QAC1D,MAAM,CAAC,MAAM,+BAA+B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC1B,EAAE,CAAC,aAAa,EAAE,KAAK,IAAI,EAAE;YACzB,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;gBACrB,IAAI,EAAE;;;;;;;iBAOL;aACJ,CAAC,CAAC;YACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YAClD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,MAAM,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YACnC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;gBAChF,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,4DAA4D,EAAE,CAAC,CAAC;gBACjG,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;gBAC3E,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;oBACrB,IAAI,EAAE,iFAAiF;iBAC1F,CAAC,CAAC;gBACH,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACzC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setup, evaluateA11y, getListOfStyleCompilationIssues } from '@/utils/helpers';\n\ndescribe('q2-link', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-link></q2-link>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-link')).toHaveLength(0);\n    });\n\n    describe('Test Methods', () => {\n        it('clickLink()', async () => {\n            const page = await setup({\n                html: `\n                    <q2-link label=\"Click me\"\n                        href=\"https://q2.com\"\n                        variant=\"inline\"\n                        target=\"_blank\"\n                        referrerpolicy=\"no-referrer\">\n                    </q2-link>\n                `,\n            });\n            await page.waitForChanges();\n            const sortSpy = await page.spyOnEvent('tctClick');\n            const link = await page.find('q2-link');\n            await link.callMethod('clickLink');\n            await page.waitForChanges();\n            expect(sortSpy).toHaveReceivedEventTimes(1);\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('Does not have accessibility violations for inline variant(default)', async () => {\n                const page = await setup({ html: `<q2-link label=\"Click me\" href=\"https://q2.com\"></q2-link>` });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n\n            it('Does not have accessibility violations for standalone variant', async () => {\n                const page = await setup({\n                    html: `<q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\"></q2-link>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}

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-list/q2-list.css

@@ -167,4 +167,10 @@ button {
   font-size: var(--tct-list-label-font-size, var(--app-font-size, 14px));
   font-weight: var(--tct-list-label-font-weight, 600);
   color: var(--tct-list-label-font-color, var(--t-text, #4d4d4d));
+}
+
+slot:not([name]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tct-list-item-gap, 0);
 }

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));
 }