q2-tecton-elements 1.49.2 → 1.50.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-loading-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-loading/test/q2-loading-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setup, testDeprecatedAriaLabel } from '@/utils/helpers';\n\ndescribe('q2-loading', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations with only label', async () => {\n            const page = await setup({\n                html: `<q2-loading></q2-loading>`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-loading></q2-loading>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-loading')).toHaveLength(0);\n    });\n\n    it('renders the default loader', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loading></q2-loading>` });\n        const spinner = await page.find('q2-loading >>> .q2-loading-animation');\n\n        expect(spinner).toHaveClass('half-circle-spinner');\n    });\n\n    it('handles the aria-label', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loading></q2-loading>` });\n        const q2Loading = await page.find('q2-loading');\n        const spinner = await page.find('q2-loading >>> .q2-loading-animation');\n\n        expect(spinner).toEqualAttribute('aria-label', 'tecton.element.loading.ariaLabel');\n\n        q2Loading.setProperty('ariaLabel', 'foo');\n        await page.waitForChanges();\n\n        expect(spinner).toEqualAttribute('aria-label', 'foo');\n\n        q2Loading.setProperty('type', 'skeleton');\n        await page.waitForChanges();\n\n        const skeleton = await page.find('q2-loading >>> .q2-loading-skeleton');\n        expect(skeleton).toEqualAttribute('aria-label', 'foo');\n    });\n\n    it('pulls skeleton loaders from dictionary', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loading type=\"skeleton\"></q2-loading>` });\n        const q2Loading = await page.find('q2-loading');\n        const skeleton = await page.find('q2-loading >>> .q2-loading-skeleton');\n        let skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n\n        expect(skeleton).not.toBeNull();\n        expect(skeletonShape).toBeNull();\n\n        q2Loading.setProperty('shape', 'rectangle');\n        await page.waitForChanges();\n\n        skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n\n        expect(skeletonShape).not.toBeNull();\n    });\n\n    describe('skeletons', () => {\n        it('renders circle skeleton', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-loading type=\"skeleton\" shape=\"circle\"></q2-loading>`,\n            });\n\n            const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n\n            expect(skeletonShape).toHaveClass('circle');\n\n            const skeletonStyle = await page.$eval('q2-loading', (element: HTMLElement) => {\n                const { width, height } = element.shadowRoot.querySelector<HTMLElement>('.skeleton-shape').style;\n                return { width, height };\n            });\n\n            expect(skeletonStyle.height).toEqual('100%');\n            expect(skeletonStyle.width).toEqual('100%');\n        });\n\n        it('renders rectangle skeleton', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-loading type=\"skeleton\" shape=\"rectangle\"></q2-loading>`,\n            });\n\n            const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n\n            expect(skeletonShape).toHaveClass('rectangle');\n\n            const skeletonStyle = await page.$eval('q2-loading', (element: HTMLElement) => {\n                const { borderRadius, height } =\n                    element.shadowRoot.querySelector<HTMLDivElement>('.skeleton-shape').style;\n\n                return {\n                    borderRadius,\n                    height,\n                };\n            });\n\n            expect(skeletonStyle.borderRadius).toEqual('var(--tct-border-radius-1, 4px)');\n            expect(skeletonStyle.height).toEqual('100%');\n        });\n\n        describe('table', () => {\n            it('renders according to props', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"table\"></q2-loading>`,\n                });\n\n                const skeletonHeaderColumns = await page.findAll('q2-loading >>> .skeleton-table-header .rectangle');\n                const skeletonBodyRows = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row');\n                const skeletonBodyFirstRow = skeletonBodyRows[0];\n                const skeletonBodyColumns = await skeletonBodyFirstRow.findAll('.rectangle');\n                const skeletonBorders = await page.findAll(\n                    'q2-loading >>> .skeleton-table-body .skeleton-table-row-border'\n                );\n\n                expect(skeletonHeaderColumns).toHaveLength(5);\n                expect(skeletonBodyRows).toHaveLength(5);\n                expect(skeletonBodyColumns).toHaveLength(5);\n                expect(skeletonBorders).toHaveLength(0);\n            });\n\n            it('renders with modifiers', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"table\" modifiers=\"headless\"></q2-loading>`,\n                });\n\n                const q2Loading = await page.find('q2-loading');\n                let skeletonHeader = await page.find('q2-loading >>> .skeleton-table-header');\n                let skeletonBorders = await page.findAll(\n                    'q2-loading >>> .skeleton-table-body .skeleton-table-row-border'\n                );\n\n                expect(skeletonHeader).toBeNull();\n                expect(skeletonBorders).toHaveLength(0);\n\n                q2Loading.setProperty('modifiers', 'bordered');\n                await page.waitForChanges();\n\n                skeletonHeader = await page.find('q2-loading >>> .skeleton-table-header');\n                skeletonBorders = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row-border');\n\n                expect(skeletonHeader).not.toBeNull();\n                expect(skeletonBorders).toHaveLength(5);\n\n                q2Loading.setProperty('modifiers', 'bordered-headless');\n                await page.waitForChanges();\n\n                skeletonHeader = await page.find('q2-loading >>> .skeleton-table-header');\n                skeletonBorders = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row-border');\n\n                expect(skeletonHeader).toBeNull();\n                expect(skeletonBorders).toHaveLength(5);\n            });\n\n            it('renders with counts', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"table\" counts=\"2\"></q2-loading>`,\n                });\n\n                const q2Loading = await page.find('q2-loading');\n                let skeletonHeaderColumns = await page.findAll('q2-loading >>> .skeleton-table-header .rectangle');\n                let skeletonBodyRows = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row');\n                let skeletonBodyFirstRow = skeletonBodyRows[0];\n                let skeletonBodyColumns = await skeletonBodyFirstRow.findAll('.rectangle');\n\n                expect(skeletonHeaderColumns).toHaveLength(2);\n                expect(skeletonBodyRows).toHaveLength(5);\n                expect(skeletonBodyColumns).toHaveLength(2);\n\n                q2Loading.setProperty('counts', '4x10');\n                await page.waitForChanges();\n\n                skeletonHeaderColumns = await page.findAll('q2-loading >>> .skeleton-table-header .rectangle');\n                skeletonBodyRows = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row');\n                skeletonBodyFirstRow = skeletonBodyRows[0];\n                skeletonBodyColumns = await skeletonBodyFirstRow.findAll('.rectangle');\n\n                expect(skeletonHeaderColumns).toHaveLength(4);\n                expect(skeletonBodyRows).toHaveLength(10);\n                expect(skeletonBodyColumns).toHaveLength(4);\n\n                q2Loading.setProperty('counts', 'x7'); // doesn't defaults cols in broken syntax\n                await page.waitForChanges();\n\n                skeletonHeaderColumns = await page.findAll('q2-loading >>> .skeleton-table-header .rectangle');\n                skeletonBodyRows = await page.findAll('q2-loading >>> .skeleton-table-body .skeleton-table-row');\n                expect(skeletonHeaderColumns).toHaveLength(0);\n                expect(skeletonBodyRows).toHaveLength(7);\n            });\n        });\n\n        it('renders field skeleton', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-loading type=\"skeleton\" shape=\"field\"></q2-loading>`,\n            });\n\n            const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n\n            expect(skeletonShape).toHaveClass('field');\n\n            const atoms = await page.findAll('q2-loading >>> .rectangle');\n\n            expect(atoms).toHaveLength(2);\n        });\n\n        it('renders form skeleton', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-loading type=\"skeleton\" shape=\"form\"></q2-loading>`,\n            });\n            const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n            let fields = await page.findAll('q2-loading >>> .field');\n\n            expect(skeletonShape).toHaveClasses(['form', 'columns-1']);\n            expect(fields).toHaveLength(1);\n\n            const q2Loading = await page.find('q2-loading');\n\n            q2Loading.setProperty('counts', '5');\n            await page.waitForChanges();\n            fields = await page.findAll('q2-loading >>> .field');\n\n            expect(skeletonShape).toHaveClass('columns-1');\n            expect(fields).toHaveLength(5);\n\n            q2Loading.setProperty('counts', '2x5');\n            await page.waitForChanges();\n            fields = await page.findAll('q2-loading >>> .field');\n\n            expect(skeletonShape).toHaveClass('columns-2');\n            expect(fields).toHaveLength(10);\n        });\n\n        describe('text skeleton', () => {\n            it('renders according to props', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"text\"></q2-loading>`,\n                });\n                const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n                const header = await page.find('q2-loading >>> .header');\n                let textElements = await page.findAll('q2-loading >>> .text .rectangle:not(.header)');\n\n                expect(skeletonShape).toHaveClass('text');\n                expect(header).toBeNull();\n                expect(textElements).toHaveLength(1);\n\n                const q2Loading = await page.find('q2-loading');\n\n                q2Loading.setProperty('counts', '5');\n                await page.waitForChanges();\n                textElements = await page.findAll('q2-loading >>> .text .rectangle:not(.header)');\n                expect(textElements).toHaveLength(5);\n            });\n\n            it('renders with modifiers', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"text\" modifiers=\"header\"></q2-loading>`,\n                });\n                const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n                const header = await page.find('q2-loading >>> .header');\n\n                expect(skeletonShape).toHaveClass('text');\n                expect(header).not.toBeNull();\n                expect(header).toHaveClass('left');\n\n                const q2Loading = await page.find('q2-loading');\n                q2Loading.setProperty('modifiers', 'header-center-smallheader');\n                await page.waitForChanges();\n\n                expect(header).toHaveClasses(['center', 'smaller']);\n\n                q2Loading.setProperty('modifiers', 'header-center-right-left');\n                await page.waitForChanges();\n\n                expect(header).toHaveClass('center');\n                expect(header).not.toHaveClasses(['left', 'right']); // center takes priority\n\n                q2Loading.setProperty('modifiers', 'header-right-left');\n                await page.waitForChanges();\n\n                expect(header).toHaveClass('right');\n                expect(header).not.toHaveClass('left'); // right takes priority\n            });\n        });\n\n        /* Detailed item */\n        describe('detailed-item skeleton', () => {\n            it('renders with top-level modifiers', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"detailed-item\"></q2-loading>`,\n                });\n                const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n                let detailedItemImage = await page.find('q2-loading >>> .detailed-item-image .skeleton-shape');\n\n                expect(skeletonShape).toHaveClasses(['detailed-item', 'left']);\n                expect(detailedItemImage).toHaveClass('circle');\n\n                const q2Loading = await page.find('q2-loading');\n                q2Loading.setProperty('modifiers', 'center');\n                await page.waitForChanges();\n\n                expect(skeletonShape).toHaveClass('center');\n\n                q2Loading.setProperty('modifiers', 'center-right-left');\n                await page.waitForChanges();\n\n                expect(skeletonShape).toHaveClass('center');\n                expect(skeletonShape).not.toHaveClasses(['left', 'right']); // center takes priority\n\n                q2Loading.setProperty('modifiers', 'right-left');\n                await page.waitForChanges();\n\n                expect(skeletonShape).toHaveClass('right');\n                expect(skeletonShape).not.toHaveClass('left'); // right takes priority\n\n                q2Loading.setProperty('modifiers', 'square');\n                await page.waitForChanges();\n                detailedItemImage = await page.find('q2-loading >>> .detailed-item-image .skeleton-shape');\n\n                expect(detailedItemImage).toHaveClass('rectangle');\n                expect(skeletonShape).not.toHaveClass('circle');\n            });\n\n            it('passes counts and modifiers to text element', async function (): Promise<void> {\n                const page = await setup({\n                    html: `<q2-loading type=\"skeleton\" shape=\"detailed-item\" modifiers=\"header-center\" counts=\"6\"></q2-loading>`,\n                });\n                const textShape = await page.find('q2-loading >>> .skeleton-shape.text');\n                let textHeader = await textShape.find('.header');\n                let textElements = await textShape.findAll('.rectangle:not(.header)');\n\n                expect(textHeader).not.toBeNull();\n                expect(textHeader).toHaveClass('center');\n                expect(textElements).toHaveLength(6);\n\n                const q2Loading = await page.find('q2-loading');\n                q2Loading.setProperty('modifiers', 'right');\n                q2Loading.setProperty('counts', '2');\n                await page.waitForChanges();\n\n                textHeader = await textShape.find('.header');\n                textElements = await textShape.findAll('.rectangle:not(.header)');\n\n                expect(textHeader).toBeNull();\n                expect(textElements).toHaveLength(2);\n            });\n        });\n\n        it('renders label skeleton', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-loading type=\"skeleton\" shape=\"label-value\"></q2-loading>`,\n            });\n            const skeletonShape = await page.find('q2-loading >>> .skeleton-shape');\n            let rectangles = await page.findAll('q2-loading >>> .rectangle');\n\n            expect(skeletonShape).toHaveClass('label-value');\n            expect(rectangles).toHaveLength(2); // defaults to one row if no counts provided\n\n            const q2Loading = await page.find('q2-loading');\n            q2Loading.setProperty('counts', '6');\n            await page.waitForChanges();\n\n            rectangles = await page.findAll('q2-loading >>> .rectangle');\n            expect(rectangles).toHaveLength(12);\n        });\n    });\n\n    describe('Deprecations', () => {\n        it('handles deprecated `ariaLabel` prop', async () => {\n            const label = 'My Label';\n            const page = await setup({ html: `<q2-loading aria-label=\"${label}\" />` });\n            await page.waitForChanges();\n            await testDeprecatedAriaLabel(await page.find('q2-loading'), label);\n            expect(await page.find('q2-loading >>> .q2-loading-animation')).toEqualAttribute('aria-label', label);\n        });\n    });\n});\n"]}

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

@@ -8,7 +8,7 @@ export class Q2Loc {
     // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: '9c804f2ae2b01b8afb6ec80888270955214023d4' }, loc(this.value, this.substitutions));
+        return h("span", { key: 'b27e49dd804dd357eeea627ae4cb0fdb4596495b' }, loc(this.value, this.substitutions));
     }
     static get is() { return "q2-loc"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-loc.js","sourceRoot":"","sources":["../../../../src/components/q2-loc/q2-loc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGhC,MAAM,OAAO,KAAK;;;;;IAWd,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,+DAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;IAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /** The reference to the localization key you would like to display the localized output of. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{loc(this.value, this.substitutions)}</span>;\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-loc.js","sourceRoot":"","sources":["../../../src/components/q2-loc/q2-loc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGhC,MAAM,OAAO,KAAK;;;;;IAWd,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,+DAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;IAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /** The reference to the localization key you would like to display the localized output of. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{loc(this.value, this.substitutions)}</span>;\n    }\n\n    // #endregion\n}\n"]}

package/dist/{test/elements → collection/components/q2-loc/test}/q2-loc-test.e2e.js

@@ -1,4 +1,4 @@
-import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../helpers";
+import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../../../utils/helpers";
 describe('q2-loc', () => {
     describe('[A11y] guideline compliance', () => {
         it('Does not have accessibility violations with only label', async () => {

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-loc-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-loc/test/q2-loc-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-loc', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations with only label', async () => {\n            const page = await setup({ html: `<q2-loc></q2-loc>` });\n            await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n            const q2Loc = await page.find('q2-loc');\n            q2Loc.setProperty('value', 'tecton.element.loc.test');\n            await page.waitForChanges();\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-loc></q2-loc>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-loc')).toHaveLength(0);\n    });\n\n    it('localizes provided string and renders the text in its shadowDOM', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loc></q2-loc>` });\n        await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n\n        const q2Loc = await page.find('q2-loc');\n\n        q2Loc.setProperty('value', 'tecton.element.loc.test');\n\n        await page.waitForChanges();\n\n        // the component renders\n        expect(q2Loc.tagName).toEqual('Q2-LOC');\n\n        const innerContent = await page.find('q2-loc >>> span');\n\n        // nested span renders with localized text\n        expect(innerContent.innerText).toEqual('Test String');\n    });\n\n    it('localizes provided string with substitutions and renders the text in its shadowDOM', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loc id=\"unique-id\"></q2-loc>` });\n        await setTestStrings(page, {\n            'tecton.element.loc.test.substitutions': 'Test String with {0} and {1}',\n        });\n\n        const q2Loc = await page.find('q2-loc');\n        q2Loc.setProperty('value', 'tecton.element.loc.test.substitutions');\n\n        await page.$eval('q2-loc', (element: HTMLQ2LocElement) => {\n            element.substitutions = ['Jane', 'Doe'];\n        });\n\n        await page.waitForChanges();\n\n        // the component renders\n        expect(q2Loc.tagName).toEqual('Q2-LOC');\n\n        const innerContent = await page.find('q2-loc >>> span');\n\n        // nested span renders with localized text\n        expect(innerContent.innerText).toEqual('Test String with Jane and Doe');\n    });\n});\n"]}

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

@@ -57,7 +57,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'e1d18f9049c2db5155c5c0bbc3910b054fe0750b', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'e366d744172d8acf7147ffc281c10fc45631d667', class: "sr" }), h("div", { key: '0b28d2c734f29768c0e9101e237a0770357eee6d', class: "sr message-label" }, messageLabel), h("div", { key: 'bb77d8b0cee0e9ee237be61ec19c6d0d203b8a28', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '7b614a6fc1404bff19231b50059b4313c8c0989f' }))));
+        return (h("div", { key: 'a1f3db0aeec9502c1db92acc0fcd8138c09d5581', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'd12074a170737cc538030798fe98e09051ff9438', class: "sr" }), h("div", { key: 'd05b18b097c7e799c3a858ba2bba1712b8ffe7e4', class: "sr message-label" }, messageLabel), h("div", { key: 'eeaed400418f0bbc2598aefd8773912387d4ca5c', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '2392ce36a05043bc88e87003ecbc54a7d9239b61' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-message.js","sourceRoot":"","sources":["../../../../src/components/q2-message/q2-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-message.js","sourceRoot":"","sources":["../../../src/components/q2-message/q2-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/{test/elements → collection/components/q2-message/test}/q2-message-test.e2e.js

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from "../helpers";
+import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from "../../../utils/helpers";
 describe('q2-message', () => {
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-message></q2-message>' });

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-message-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-message/test/q2-message-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-message', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-message></q2-message>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-message')).toHaveLength(0);\n    });\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations with only label', async () => {\n            const page = await setup({\n                html: '<q2-message type=\"success\"></q2-message>',\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    describe('@Props', () => {\n        describe('type', () => {\n            describe('when omitted', () => {\n                it('defaults to \"info\" type and icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message></q2-message>',\n                    });\n                    const messageElement = await page.find('q2-message');\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageElement.getAttribute('type')).toEqual('info');\n                    expect(await messageIcon.getAttribute('type')).toEqual('info');\n                });\n\n                it('defaults to \"info\" message type label', async () => {\n                    const ariaLabel = 'q2-message aria-label';\n                    const page = await setup({ html: '' });\n                    await setTestStrings(page, {\n                        'tecton.element.message.type.info': ariaLabel,\n                    });\n                    await page.setContent('<q2-message></q2-message>');\n                    await page.waitForChanges();\n                    const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n                    expect(typeLabel).toEqualText(ariaLabel);\n                });\n            });\n\n            describe('when value is \"success\"', () => {\n                it('renders with \"success\" icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message type=\"success\"></q2-message>',\n                    });\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageIcon.getAttribute('type')).toEqual('success');\n                });\n\n                it('renders with \"success\" message type label', async () => {\n                    await expectScreenReaderMessageLabel('success');\n                });\n            });\n\n            describe('when value is \"warning\"', () => {\n                it('renders with \"warning\" icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message type=\"warning\"></q2-message>',\n                    });\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageIcon.getAttribute('type')).toEqual('warning');\n                });\n\n                it('renders with \"warning\" message type label', async () => {\n                    await expectScreenReaderMessageLabel('warning');\n                });\n            });\n\n            describe('when value is \"danger\"', () => {\n                it('renders with \"error\" icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message type=\"danger\"></q2-message>',\n                    });\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageIcon.getAttribute('type')).toEqual('error');\n                });\n\n                it('renders with \"danger\" message type label', async () => {\n                    await expectScreenReaderMessageLabel('danger');\n                });\n            });\n\n            describe('when value is \"error\"', () => {\n                it('renders with \"error\" icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message type=\"error\"></q2-message>',\n                    });\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageIcon.getAttribute('type')).toEqual('error');\n                });\n\n                it('renders with \"error\" message type label', async () => {\n                    await expectScreenReaderMessageLabel('error');\n                });\n            });\n        });\n\n        describe('appearance', () => {\n            describe('when value is \"minimal\"', () => {\n                it('does not render icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message appearance=\"minimal\">Hipster script</q2-message>',\n                    });\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(messageIcon).toBeNull();\n                });\n            });\n\n            describe('when omitted', () => {\n                it('defaults to \"standard\" and renders icon', async () => {\n                    const page = await setup({\n                        html: '<q2-message>Hipster script</q2-message>',\n                    });\n                    const messageElement = await page.find('q2-message');\n                    const messageIcon = await page.find('q2-message >>> .message-icon');\n\n                    expect(await messageElement.getAttribute('appearance')).toEqual('standard');\n                    expect(messageIcon).toBeDefined();\n                });\n            });\n        });\n\n        describe('description', () => {\n            describe('when provided', () => {\n                it('does not add aria-attributes and role', async () => {\n                    const page = await setup({\n                        html: '<q2-message description>Tony Stark</q2-message>',\n                    });\n                    const messageBlock = await page.find('q2-message >>> .message');\n\n                    expect(await messageBlock.getAttribute('role')).toBeNull();\n                    expect(await messageBlock.getAttribute('aria-live')).toBeNull();\n                    expect(await messageBlock.getAttribute('aria-atomic')).toBeNull();\n                });\n            });\n\n            describe('when omitted', () => {\n                it('adds aria-attributes and role', async () => {\n                    const page = await setup({\n                        html: '<q2-message>Tony Stark</q2-message>',\n                    });\n                    const messageBlock = await page.find('q2-message >>> .message');\n\n                    expect(await messageBlock.getAttribute('role')).toEqual('alert');\n                    expect(await messageBlock.getAttribute('aria-live')).toEqual('assertive');\n                    expect(await messageBlock.getAttribute('aria-atomic')).toEqual('true');\n                    expect(await messageBlock.getAttribute('aria-relevant')).toEqual('all');\n                });\n            });\n        });\n    });\n\n    describe('focus transferring', () => {\n        const html = '<q2-message type=\"info\" appearance=\"standard\">Tony Stark</q2-message>';\n\n        it('focuses when focus event dispatched ', async function (): Promise<void> {\n            const page = await setup({ html });\n            await dispatchEvent(page, ['q2-message'], 'focus');\n            const containsClass = await page.$eval('q2-message', el => {\n                return el.shadowRoot.activeElement.classList.contains('message');\n            });\n            expect(containsClass).toBe(true);\n        });\n\n        it('focuses when focus event method called ', async function (): Promise<void> {\n            const page = await setup({ html });\n            const message = await page.find('q2-message');\n            await message.triggerEvent('focus');\n            await page.waitForChanges();\n            const containsClass = await page.$eval('q2-message', el => {\n                return el.shadowRoot.activeElement.classList.contains('message');\n            });\n            expect(containsClass).toBe(true);\n        });\n    });\n});\n\nasync function expectScreenReaderMessageLabel(type: string): Promise<void> {\n    const page = await setup({\n        html: '<q2-message></q2-message>',\n    });\n    const screenReaderLabel = 'q2-message aria-label';\n    await setTestStrings(page, {\n        [`tecton.element.message.type.${type}`]: screenReaderLabel,\n    });\n    const messageElement = await page.find('q2-message');\n    messageElement.setAttribute('type', type);\n    await page.waitForChanges();\n    const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n    expect(typeLabel).toEqualText(screenReaderLabel);\n}\n"]}

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

@@ -43,7 +43,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a6e920d9a1e04c3d1ddb3aa94da8199010d58a94', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7548493124d197bd4deab8585b519d110bed079d', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9dd48c12fb533b2dade166f3d2b71ac9032981fa', class: "q2-optgroup-options" }, h("slot", { key: '429c914a50a62bc0f6140a99e6ddd42dd3a36455' }))));
+        return (h("div", { key: 'a814883de8b62bc48a1345fb94d6936e43ca3827', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '0186214c5c7c2a578591c257b905514e84173a3e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'dbab9d660f63f6c370b127646467ae7f2e27a077', class: "q2-optgroup-options" }, h("slot", { key: 'a8c9a881869bf9da26223f75283b026d0ea7d277' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: 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        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: 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        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/{test/elements → collection/components/q2-optgroup/test}/q2-optgroup-test.e2e.js

@@ -1,4 +1,4 @@
-import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../helpers";
+import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../../../utils/helpers";
 describe('q2-select', () => {
     describe('[A11y] guideline compliance', () => {
         it('Does not have accessibility violations with only label', async () => {

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-optgroup-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/test/q2-optgroup-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-select', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations with only label', async () => {\n            const page = await setup({\n                html: `<q2-select label=\"My Select\">\n                            <q2-optgroup label=\"Option Group\" >\n                                <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                            </q2-optgroup>\n                        </q2-select>`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-select></q2-select>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);\n    });\n\n    it('renders base state', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n\n        // the component renders\n        expect(optGroup.tagName).toEqual('Q2-OPTGROUP');\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n        // label text is rendered in header\n        expect(optGroupLabel.textContent).toEqual('Option Group');\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n\n        // label header id matches container aria-labelledby\n        expect(optGroupLabel.id).toEqual(optGroupContainer.getAttribute('aria-labelledby'));\n\n        const assignedNodesLocalName = await page.$eval('q2-optgroup', group => {\n            return group.shadowRoot.querySelector('slot').assignedElements()[0].localName;\n        });\n\n        // slot renders with provided options\n        expect(assignedNodesLocalName).toEqual('q2-option');\n    });\n\n    it('propagates disabled state to child options', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" disabled>\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const option = await page.find('q2-option');\n        const optionDisabledByGroup = await option.getProperty('disabledGroup');\n\n        expect(optionDisabledByGroup).toEqual(true);\n    });\n\n    it('hides the container if all children are hidden', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n        let containerHidden = await optGroupContainer.getProperty('hidden');\n\n        // container hidden if all options hidden\n        expect(containerHidden).toEqual(true);\n\n        const option = await page.find('q2-option');\n\n        await option.setProperty('hidden', false);\n\n        await page.waitForChanges();\n\n        // container no longer hidden once option isn't hidden\n        // tests mutation observer fires\n        containerHidden = await optGroupContainer.getProperty('hidden');\n        expect(containerHidden).toEqual(false);\n    });\n\n    it('localizes label string', async function () {\n        const page = await setup({\n            html: `<q2-optgroup >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        await setTestStrings(page, {\n            'q2-optGroup.label': 'My Option Group Label',\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n        await optGroup.setProperty('label', 'q2-optGroup.label');\n\n        await page.waitForChanges();\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n\n        expect(optGroupLabel.textContent).toEqual('My Option Group Label');\n    });\n});\n"]}

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

@@ -56,7 +56,7 @@ export class Q2Option {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: 'd37180b8d431ca02e23546058cb3b7da767fa2e3', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '17f7b263cecc7cc67d01bb4b70cf9e52d4a085b6', type: "checkmark" }), h("div", { key: '74b7b92e105beabc72d91673f38e7b5147f74083', class: "content" }, h("slot", { key: 'dcd02124790418d9bdf9a96487dfec2eb19bee7f' }))));
+        return (h(Host, { key: '7b4a32ea1eec13bfbeca88e038d052ba88b109a0', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '9fb687709d27e1ce24ced445d4f9d9e9c19a69e7', type: "checkmark" }), h("div", { key: '1fd40d00eaa09f012bba8afbe915cd53b1194cb6', class: "content" }, h("slot", { key: 'fa4756793e55a1152fdace4c80531d54a7e41bdc' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }

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 } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\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    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ 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    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { 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={this.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 } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\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    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ 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    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { 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={this.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"]}

package/dist/{test/elements → collection/components/q2-option/test}/q2-option-test.e2e.js

@@ -1,4 +1,4 @@
-import { evaluateA11y, getListOfStyleCompilationIssues, setup } from "../helpers";
+import { evaluateA11y, getListOfStyleCompilationIssues, setup } from "../../../utils/helpers";
 describe('q2-option', () => {
     let page;
     let option;

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n    let page: E2EPage;\n    let option: E2EElement;\n    it('renders with default attributes', async () => {\n        page = await setup({\n            html: `<q2-option>My Option</q2-option>`,\n        });\n        option = await page.find('q2-option');\n        expect(option).toEqualAttribute('role', 'option');\n        expect(option).toEqualAttribute('tabindex', '-1');\n    });\n\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-option></q2-option>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n    });\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations with only label', async () => {\n            const page = await setup({\n                html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    describe('@Props', () => {\n        describe('selected', () => {\n            describe('when not provided', () => {\n                it('does not render checkmark icon and adds aria-selected=\"false\"', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n                    expect(option).toEqualAttribute('aria-selected', 'false');\n                    expect(optionIcon).toBeNull();\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with checkmark icon and adds aria-selected=\"true\"', async () => {\n                    page = await setup({\n                        html: `<q2-option selected>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n                    expect(option).toEqualAttribute('aria-selected', 'true');\n                    expect(optionIcon).toBeTruthy();\n                });\n            });\n        });\n\n        describe('disabled', () => {\n            describe('when not provided', () => {\n                it('renders without aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-disabled');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option disabled>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-disabled', 'true');\n                });\n            });\n        });\n\n        describe('disabledGroup', () => {\n            describe('when not provided', () => {\n                it('renders without aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-disabled');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option disabled-group>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-disabled', 'true');\n                });\n            });\n        });\n\n        describe('_multiSelectHidden', () => {\n            describe('when not provided', () => {\n                it('renders without aria-hidden attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-hidden');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-hidden attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option _multiSelectHidden>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-hidden', 'true');\n                });\n            });\n        });\n\n        describe('display', () => {\n            describe('when not provided', () => {\n                it('uses the text content as the display value', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    expect(await option.getProperty('display')).toEqual('My Option');\n                });\n\n                describe('when multiline is provided', () => {\n                    it('does not use the text content as the display value', async () => {\n                        page = await setup({\n                            html: `<q2-option multiline>My Option</q2-option>`,\n                        });\n                        option = await page.find('q2-option');\n                        expect(await option.getProperty('display')).toBeUndefined();\n                    });\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with the provided display value', async () => {\n                    page = await setup({\n                        html: `<q2-option display=\"Foo\">My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    expect(await option.getProperty('display')).toEqual('Foo');\n                });\n            });\n        });\n    });\n});\n"]}

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

@@ -50,7 +50,6 @@ export class Q2OptionList {
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
-                    this.activeIndex = 0;
                     nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
                     if (nextIndex === -1)
                         break;
@@ -58,8 +57,7 @@ export class Q2OptionList {
                     break;
                 case 'ArrowDown':
                     event.preventDefault();
-                    this.activeIndex = 0;
-                    nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);
+                    nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);
                     if (nextIndex === -1)
                         break;
                     this.openDropdownWithActiveElement(nextIndex);
@@ -109,7 +107,7 @@ export class Q2OptionList {
         };
         this.internalKeydownHandler = (event) => {
             event.stopPropagation();
-            const { activeIndex, customSearch, allOptions, multiple } = this;
+            const { activeIndex, customSearch, allOptions, allVisibleOptions, multiple } = this;
             const { key, shiftKey } = event;
             let newOption;
             switch (key) {
@@ -141,8 +139,8 @@ export class Q2OptionList {
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
-                    const isFirstOptionActive = activeIndex === 0;
-                    if (isFirstOptionActive)
+                    const isFirstVisibleOptionActive = allVisibleOptions[0].active;
+                    if (isFirstVisibleOptionActive)
                         break;
                     if (activeIndex === undefined) {
                         this.setDefaultActiveElement();
@@ -157,8 +155,8 @@ export class Q2OptionList {
                     }
                 case 'ArrowDown':
                     event.preventDefault();
-                    const isLastOptionActive = activeIndex === allOptions.length - 1;
-                    if (isLastOptionActive)
+                    const isLastVisibleOptionActive = allVisibleOptions[allVisibleOptions.length - 1].active;
+                    if (isLastVisibleOptionActive)
                         break;
                     if (activeIndex === undefined) {
                         this.setDefaultActiveElement();
@@ -192,6 +190,10 @@ export class Q2OptionList {
                         break;
                     if (this.multiple && this.type === 'listbox')
                         break;
+                    if (this.type === 'menu') {
+                        this.popoverState.emit({ open: false, action: 'close' });
+                        break;
+                    }
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         return;
@@ -460,7 +462,7 @@ export class Q2OptionList {
     }
     scrollToActiveOption() {
         const activeOption = this.allOptions[this.activeIndex];
-        activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+        activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'center' });
     }
     searchOptions(key, shouldSelect) {
         this.searchString = key;
@@ -531,7 +533,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'c96ee2b7016ed9bcb536cca496d16b7f1d82dffc' }, h("div", { key: 'f70955097de59ed340e319a1e2835837bae0deaa', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'd6bffcdc788da1b0f3871a216cff862e157eaa1a', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'bb5f8b8597574fd83b1c2a45438e43072b85d7e1' })))));
+        return (h(Host, { key: 'd0a9a9f08038a8856edbde465e82e5a48dd64925' }, h("div", { key: 'd6caf01cb66a3b2bbc063bfbf7b4f8968f7f5fd6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '6c5c6d4ed0446dd8b92df50d568eadf5ba13100a', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '1ed18df8ed8e395511d1cb9078fcf6eefc886b67' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -662,7 +664,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.49.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/achester/Code/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -734,7 +736,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.49.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/achester/Code/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -797,7 +799,7 @@ export class Q2OptionList {
                             "id": "global::HTMLQ2OptionElement"
                         }
                     },
-                    "return": "Promise<any[]>"
+                    "return": "Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>"
                 },
                 "docs": {
                     "text": "",