q2-tecton-elements 1.44.1 → 1.45.0

package/dist/test/elements/q2-detail/q2-item-test.e2e.js

@@ -0,0 +1,223 @@
+import { evaluateA11y, setup } from "../../helpers";
+describe('q2-item', () => {
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({ html: `<q2-item />` });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
+    describe('Props', () => { });
+    describe('Slots', () => {
+        describe('action', () => {
+            it('when set content displayed as action', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="action">Test Action</div>
+                        </q2-item>
+                    `,
+                });
+                const item = await page.find('q2-item');
+                const action = await page.find('q2-item >>> .action');
+                expect(item).toEqualText('Test Action');
+                expect(action).toBeTruthy();
+            });
+            it('when removed conatiner removed', async () => {
+                const page = await setup({
+                    html: `
+                    <q2-item>
+                        <div slot="action">Test Body</div>
+                    </q2-item>
+                    `,
+                });
+                let actionSlot = await page.find('q2-item > [slot="action"]');
+                let actionContainer = await page.find('q2-item >>> .action');
+                expect(actionSlot).toBeTruthy();
+                expect(actionContainer).toBeTruthy();
+                await page.evaluate(() => {
+                    const actionSlot = document.querySelector('q2-item > [slot="action"]');
+                    if (actionSlot && actionSlot.parentNode) {
+                        actionSlot.parentNode.removeChild(actionSlot);
+                    }
+                });
+                await page.waitForChanges();
+                actionSlot = await page.find('q2-item > [slot="action"]');
+                actionContainer = await page.find('q2-item >>> .action');
+                expect(actionSlot).toBeFalsy();
+                expect(actionContainer).toBeFalsy();
+            });
+            it('when not set action not present', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item />
+                    `,
+                });
+                const action = await page.find('q2-item >>> .action');
+                expect(action).toBeFalsy();
+            });
+            it('when not set CSS grid adjusted', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="body">Test Body</div>
+                            <div slot="bullet">Test Bullet</div>
+                            <div slot="footer">Test Footer</div>
+                        </q2-item>
+                    `,
+                });
+                const itemContainer = await page.find('q2-item >>> .item');
+                const footer = await page.find('q2-item >>> .footer');
+                expect(itemContainer).toHaveClass('item-no-action');
+                expect(footer).toHaveClass('footer-no-action');
+            });
+        });
+        describe('body', () => {
+            it('when set content displayed as body', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="body">Test Body</div>
+                        </q2-item>
+                    `,
+                });
+                const item = await page.find('q2-item');
+                const body = await page.find('q2-item >>> .body');
+                expect(item).toEqualText('Test Body');
+                expect(body).toBeTruthy();
+            });
+            it('when not set body not present', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item />
+                    `,
+                });
+                const body = await page.find('q2-item >>> .body');
+                expect(body).toBeFalsy();
+            });
+        });
+        describe('bullet', () => {
+            it('when set content displayed as bullet', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="bullet">Test Bullet</div>
+                        </q2-item>
+                    `,
+                });
+                const item = await page.find('q2-item');
+                const bullet = await page.find('q2-item >>> .bullet');
+                expect(item).toEqualText('Test Bullet');
+                expect(bullet).toBeTruthy();
+            });
+            it('when not set bullet not present', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item />
+                    `,
+                });
+                const bullet = await page.find('q2-item >>> .bullet');
+                expect(bullet).toBeFalsy();
+            });
+            it('when not set CSS grid adjusted', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="action">Test Action</div>
+                            <div slot="body">Test Body</div>
+                            <div slot="footer">Test Footer</div>
+                        </q2-item>
+                    `,
+                });
+                const itemContainer = await page.find('q2-item >>> .item');
+                const action = await page.find('q2-item >>> .action');
+                const main = await page.find('q2-item >>> .main');
+                const footer = await page.find('q2-item >>> .footer');
+                expect(itemContainer).toHaveClass('item-no-bullet');
+                expect(action).toHaveClass('action-no-bullet');
+                expect(main).toHaveClass('main-no-bullet');
+                expect(footer).toHaveClass('footer-no-bullet');
+            });
+        });
+        describe('footer', () => {
+            it('when set content displayed as footer', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="footer">Test Footer</div>
+                        </q2-item>
+                    `,
+                });
+                const item = await page.find('q2-item');
+                const footer = await page.find('q2-item >>> .footer');
+                expect(item).toEqualText('Test Footer');
+                expect(footer).toBeTruthy();
+            });
+            it('when not set footer not present', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item />
+                    `,
+                });
+                const footer = await page.find('q2-item >>> .footer');
+                expect(footer).toBeFalsy();
+            });
+            it('when not set CSS grid adjusted', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="action">Test Action</div>
+                            <div slot="body">Test Body</div>
+                            <div slot="bullet">Test Bullet</div>
+                        </q2-item>
+                    `,
+                });
+                const itemContainer = await page.find('q2-item >>> .item');
+                const bullet = await page.find('q2-item >>> .bullet');
+                expect(itemContainer).toHaveClass('item-no-footer');
+                expect(bullet).toHaveClass('bullet-no-footer');
+            });
+        });
+        describe('header/defalult', () => {
+            it('when set content displayed as header', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="header">Test Header</div>
+                        </q2-item>
+                    `,
+                });
+                const item = await page.find('q2-item');
+                const header = await page.find('q2-item >>> .header');
+                expect(item).toEqualText('Test Header');
+                expect(header).toBeTruthy();
+            });
+            it('when not set header not present', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item />
+                    `,
+                });
+                const header = await page.find('q2-item >>> .header');
+                expect(header).toBeFalsy();
+            });
+            it('when action and bullet missing CSS grid adjusted', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <div slot="header">Test Header</div>
+                            <div slot="footer">Test Footer</div>
+                        </q2-item>
+                    `,
+                });
+                const itemContainer = await page.find('q2-item >>> .item');
+                const main = await page.find('q2-item >>> .main');
+                const footer = await page.find('q2-item >>> .footer');
+                expect(itemContainer).toHaveClass('item-no-action-nor-bullet');
+                expect(main).toHaveClass('main-no-action-nor-bullet');
+                expect(footer).toHaveClass('footer-no-action-nor-bullet');
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-item-test.e2e.js.map

package/dist/test/elements/q2-detail/q2-item-test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-item-test.e2e.js","sourceRoot":"","sources":["../../../../test/elements/q2-detail/q2-item-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, setup } from '../../helpers';\n\ndescribe('q2-item', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations', async () => {\n            const page = await setup({ html: `<q2-item />` });\n            const hasViolations = await evaluateA11y(page);\n\n            expect(hasViolations).toBe(false);\n        });\n    });\n    describe('Props', () => {});\n    describe('Slots', () => {\n        describe('action', () => {\n            it('when set content displayed as action', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const action = await page.find('q2-item >>> .action');\n\n                expect(item).toEqualText('Test Action');\n                expect(action).toBeTruthy();\n            });\n            it('when removed conatiner removed', async () => {\n                const page = await setup({\n                    html: `\n                    <q2-item>\n                        <div slot=\"action\">Test Body</div>\n                    </q2-item>\n                    `,\n                });\n                let actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                let actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeTruthy();\n                expect(actionContainer).toBeTruthy();\n\n                await page.evaluate(() => {\n                    const actionSlot = document.querySelector('q2-item > [slot=\"action\"]');\n                    if (actionSlot && actionSlot.parentNode) {\n                        actionSlot.parentNode.removeChild(actionSlot);\n                    }\n                });\n                await page.waitForChanges();\n                actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeFalsy();\n                expect(actionContainer).toBeFalsy();\n            });\n            it('when not set action not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const action = await page.find('q2-item >>> .action');\n\n                expect(action).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action');\n                expect(footer).toHaveClass('footer-no-action');\n            });\n        });\n        describe('body', () => {\n            it('when set content displayed as body', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const body = await page.find('q2-item >>> .body');\n\n                expect(item).toEqualText('Test Body');\n                expect(body).toBeTruthy();\n            });\n            it('when not set body not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const body = await page.find('q2-item >>> .body');\n\n                expect(body).toBeFalsy();\n            });\n        });\n        describe('bullet', () => {\n            it('when set content displayed as bullet', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(item).toEqualText('Test Bullet');\n                expect(bullet).toBeTruthy();\n            });\n            it('when not set bullet not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(bullet).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const action = await page.find('q2-item >>> .action');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-bullet');\n                expect(action).toHaveClass('action-no-bullet');\n                expect(main).toHaveClass('main-no-bullet');\n                expect(footer).toHaveClass('footer-no-bullet');\n            });\n        });\n        describe('footer', () => {\n            it('when set content displayed as footer', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(item).toEqualText('Test Footer');\n                expect(footer).toBeTruthy();\n            });\n            it('when not set footer not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(footer).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(itemContainer).toHaveClass('item-no-footer');\n                expect(bullet).toHaveClass('bullet-no-footer');\n            });\n        });\n        describe('header/defalult', () => {\n            it('when set content displayed as header', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const header = await page.find('q2-item >>> .header');\n\n                expect(item).toEqualText('Test Header');\n                expect(header).toBeTruthy();\n            });\n            it('when not set header not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const header = await page.find('q2-item >>> .header');\n\n                expect(header).toBeFalsy();\n            });\n            it('when action and bullet missing CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action-nor-bullet');\n                expect(main).toHaveClass('main-no-action-nor-bullet');\n                expect(footer).toHaveClass('footer-no-action-nor-bullet');\n            });\n        });\n    });\n});\n"]}

package/dist/test/elements/q2-detail/q2-list-test.e2e.js

@@ -0,0 +1,92 @@
+import { evaluateA11y, setup } from "../../helpers";
+describe('q2-list', () => {
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({ html: `<q2-list />` });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
+    describe('Props', () => { });
+    describe('Slots', () => {
+        it('when label and filter presents', async () => {
+            const page = await setup({
+                html: `
+                    <q2-list label="My list">
+                        <div slot="filter">
+                            <q2-pill label="My options" popover-alignment="right">
+                                <q2-option value="1" aria-selected="false">Option 1</q2-option>
+                                <q2-option value="2" aria-selected="false">Option 2</q2-option>
+                                <q2-option value="3" aria-selected="false">Option 3</q2-option>
+                                <q2-option value="4" aria-selected="false">Option 4</q2-option>
+                            </q2-pill>
+                        </div>
+                    </q2-list>
+                `,
+            });
+            const filterSlot = await page.find('q2-list > [slot="filter"]');
+            const pill = await filterSlot.find('q2-pill');
+            const label = await page.find('q2-list >>> .label');
+            expect(filterSlot).toBeTruthy();
+            expect(pill).toBeTruthy();
+            expect(label).toEqualText('My list');
+        });
+        it('when items presents', async () => {
+            const page = await setup({
+                html: `
+                    <q2-list label="My list">
+                        <div slot="filter">
+                            <q2-pill label="My options" popover-alignment="right">
+                                <q2-option value="1" aria-selected="false">Option 1</q2-option>
+                                <q2-option value="2" aria-selected="false">Option 2</q2-option>
+                                <q2-option value="3" aria-selected="false">Option 3</q2-option>
+                                <q2-option value="4" aria-selected="false">Option 4</q2-option>
+                            </q2-pill>
+                        </div>
+                        <q2-item>
+                            <div slot="bullet">
+                                <q2-avatar icon="home">
+                                </q2-avatar>
+                            </div>
+                            <div slot="header">Header Text</div>
+                            <div slot="body">Body Text</div>
+                            <div slot="footer">Footer Text</div>
+                            <div slot="action">
+                                <q2-dropdown type="icon" label="My dropdown" icon="options" popover-alignment="left" hide-label="">
+                                <q2-dropdown-item value="first">First</q2-dropdown-item>
+                                <q2-dropdown-item value="second">Second</q2-dropdown-item>
+                                <q2-dropdown-item separator="">
+                                </q2-dropdown-item>
+                                <q2-dropdown-item value="third">Third</q2-dropdown-item>
+                                <q2-dropdown-item value="fourth">Fourth</q2-dropdown-item>
+                                </q2-dropdown>
+                            </div>
+                        </q2-item>
+                        <q2-item>
+                            <div slot="bullet">
+                                <q2-avatar icon="home">
+                                </q2-avatar>
+                            </div>
+                            <div slot="header">Header Text</div>
+                            <div slot="body">Body Text</div>
+                            <div slot="footer">Footer Text</div>
+                            <div slot="action">
+                                <q2-dropdown type="icon" label="My dropdown" icon="options" popover-alignment="left" hide-label="">
+                                <q2-dropdown-item value="first">First</q2-dropdown-item>
+                                <q2-dropdown-item value="second">Second</q2-dropdown-item>
+                                <q2-dropdown-item separator="">
+                                </q2-dropdown-item>
+                                <q2-dropdown-item value="third">Third</q2-dropdown-item>
+                                <q2-dropdown-item value="fourth">Fourth</q2-dropdown-item>
+                                </q2-dropdown>
+                            </div>
+                        </q2-item>
+                    </q2-list>
+                `,
+            });
+            const items = await page.findAll('q2-list q2-item');
+            expect(items.length).toEqual(2);
+        });
+    });
+});
+//# sourceMappingURL=q2-list-test.e2e.js.map

package/dist/test/elements/q2-detail/q2-list-test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-list-test.e2e.js","sourceRoot":"","sources":["../../../../test/elements/q2-detail/q2-list-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACrB,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;YACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;YAClD,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;YAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;QACnB,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;YAC5C,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;gBACrB,IAAI,EAAE;;;;;;;;;;;iBAWL;aACJ,CAAC,CAAC;YACH,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAChE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACpD,MAAM,CAAC,UAAU,CAAC,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;YAC1B,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;YACjC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;gBACrB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiDL;aACJ,CAAC,CAAC;YACH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;YACpD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { evaluateA11y, setup } from '../../helpers';\n\ndescribe('q2-list', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations', async () => {\n            const page = await setup({ html: `<q2-list />` });\n            const hasViolations = await evaluateA11y(page);\n\n            expect(hasViolations).toBe(false);\n        });\n    });\n    describe('Props', () => {});\n    describe('Slots', () => {\n        it('when label and filter presents', async () => {\n            const page = await setup({\n                html: `\n                    <q2-list label=\"My list\">\n                        <div slot=\"filter\">\n                            <q2-pill label=\"My options\" popover-alignment=\"right\">\n                                <q2-option value=\"1\" aria-selected=\"false\">Option 1</q2-option>\n                                <q2-option value=\"2\" aria-selected=\"false\">Option 2</q2-option>\n                                <q2-option value=\"3\" aria-selected=\"false\">Option 3</q2-option>\n                                <q2-option value=\"4\" aria-selected=\"false\">Option 4</q2-option>\n                            </q2-pill>\n                        </div>\n                    </q2-list>\n                `,\n            });\n            const filterSlot = await page.find('q2-list > [slot=\"filter\"]');\n            const pill = await filterSlot.find('q2-pill');\n            const label = await page.find('q2-list >>> .label');\n            expect(filterSlot).toBeTruthy();\n            expect(pill).toBeTruthy();\n            expect(label).toEqualText('My list');\n        });\n\n        it('when items presents', async () => {\n            const page = await setup({\n                html: `\n                    <q2-list label=\"My list\">\n                        <div slot=\"filter\">\n                            <q2-pill label=\"My options\" popover-alignment=\"right\">\n                                <q2-option value=\"1\" aria-selected=\"false\">Option 1</q2-option>\n                                <q2-option value=\"2\" aria-selected=\"false\">Option 2</q2-option>\n                                <q2-option value=\"3\" aria-selected=\"false\">Option 3</q2-option>\n                                <q2-option value=\"4\" aria-selected=\"false\">Option 4</q2-option>\n                            </q2-pill>\n                        </div>\n                        <q2-item>\n                            <div slot=\"bullet\">\n                                <q2-avatar icon=\"home\">\n                                </q2-avatar>\n                            </div>\n                            <div slot=\"header\">Header Text</div>\n                            <div slot=\"body\">Body Text</div>\n                            <div slot=\"footer\">Footer Text</div>\n                            <div slot=\"action\">\n                                <q2-dropdown type=\"icon\" label=\"My dropdown\" icon=\"options\" popover-alignment=\"left\" hide-label=\"\">\n                                <q2-dropdown-item value=\"first\">First</q2-dropdown-item>\n                                <q2-dropdown-item value=\"second\">Second</q2-dropdown-item>\n                                <q2-dropdown-item separator=\"\">\n                                </q2-dropdown-item>\n                                <q2-dropdown-item value=\"third\">Third</q2-dropdown-item>\n                                <q2-dropdown-item value=\"fourth\">Fourth</q2-dropdown-item>\n                                </q2-dropdown>\n                            </div>\n                        </q2-item>\n                        <q2-item>\n                            <div slot=\"bullet\">\n                                <q2-avatar icon=\"home\">\n                                </q2-avatar>\n                            </div>\n                            <div slot=\"header\">Header Text</div>\n                            <div slot=\"body\">Body Text</div>\n                            <div slot=\"footer\">Footer Text</div>\n                            <div slot=\"action\">\n                                <q2-dropdown type=\"icon\" label=\"My dropdown\" icon=\"options\" popover-alignment=\"left\" hide-label=\"\">\n                                <q2-dropdown-item value=\"first\">First</q2-dropdown-item>\n                                <q2-dropdown-item value=\"second\">Second</q2-dropdown-item>\n                                <q2-dropdown-item separator=\"\">\n                                </q2-dropdown-item>\n                                <q2-dropdown-item value=\"third\">Third</q2-dropdown-item>\n                                <q2-dropdown-item value=\"fourth\">Fourth</q2-dropdown-item>\n                                </q2-dropdown>\n                            </div>\n                        </q2-item>\n                    </q2-list>\n                `,\n            });\n            const items = await page.findAll('q2-list q2-item');\n            expect(items.length).toEqual(2);\n        });\n    });\n});\n"]}

package/dist/test/elements/q2-icon-test.e2e.js

@@ -4,84 +4,6 @@ import { Q2Icon } from "../../src/components/q2-icon/q2-icon";
 describe('q2-icon', () => {
     let e2ePage;
     let specPage;
-    // Remove once out of beta
-    describe('LEGACY', () => {
-        let standardLoadedEventSpy;
-        let statusLoadedEventSpy;
-        beforeEach(async () => {
-            e2ePage = await setup({
-                html: '',
-            });
-            e2ePage.setDefaultTimeout(5000);
-            e2ePage.setContent(`<q2-icon type="close"></q2-icon>`);
-            standardLoadedEventSpy = await e2ePage.spyOnEvent('tct-loaded-standard');
-            statusLoadedEventSpy = await e2ePage.spyOnEvent('tct-loaded-status');
-            await e2ePage.waitForChanges();
-        });
-        it('does not create the sprite container', async () => {
-            const spriteContainers = await e2ePage.findAll('#tecton-sprites');
-            expect(spriteContainers).toHaveLength(0);
-        });
-        it('does not add the sprite', async () => {
-            const spriteElements = await e2ePage.findAll('#tecton-sprites > svg');
-            expect(spriteElements).toHaveLength(0);
-        });
-        it('does not fire the loaded event', async () => {
-            expect(standardLoadedEventSpy).toHaveReceivedEventTimes(0);
-            expect(statusLoadedEventSpy).toHaveReceivedEventTimes(0);
-        });
-        it('does not render the use element in the SVG', async () => {
-            const useElement = await e2ePage.find('q2-icon >>> use');
-            expect(useElement).toBeNull();
-        });
-        it('renders the SVG content inline', async () => {
-            const symbolElements = await e2ePage.findAll('q2-icon >>> symbol');
-            expect(symbolElements).toHaveLength(0);
-            const svgElement = await e2ePage.find('q2-icon >>> svg');
-            expect(svgElement).toBeTruthy();
-            expect(svgElement).toEqualHtml(`
-                <svg aria-hidden="true" role="img" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
-                    <path class="stroke-primary" d="M20 6L6 20M20 20L6 6"></path>
-                </symbol>
-            `);
-        });
-        describe('when icon is updated to one in a separate sprite', () => {
-            beforeEach(async () => {
-                const icon = await e2ePage.find('q2-icon');
-                await icon.setProperty('type', 'success');
-                await e2ePage.waitForChanges();
-            });
-            it('does a new sprite container', async () => {
-                const spriteContainers = await e2ePage.findAll('#tecton-sprites');
-                expect(spriteContainers).toHaveLength(0);
-            });
-            it('does not add any sprites', async () => {
-                const spriteElements = await e2ePage.findAll('#tecton-sprites > svg');
-                expect(spriteElements).toHaveLength(0);
-            });
-            it('does not fire the loaded event', async () => {
-                expect(standardLoadedEventSpy).toHaveReceivedEventTimes(0);
-                expect(statusLoadedEventSpy).toHaveReceivedEventTimes(0);
-            });
-            it('does not render the use element in the SVG', async () => {
-                const useElement = await e2ePage.find('q2-icon >>> use');
-                expect(useElement).toBeNull();
-            });
-            it('renders the SVG content inline', async () => {
-                const symbolElements = await e2ePage.findAll('q2-icon >>> symbol');
-                expect(symbolElements).toHaveLength(0);
-                const svgElement = await e2ePage.find('q2-icon >>> svg');
-                expect(svgElement).toBeTruthy();
-                expect(svgElement).toEqualHtml(`
-                    <svg aria-hidden="true" role="img" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
-                        <g class="filled">
-                            <path d="M13.501 2.267c6.075 0 11 4.925 11 11 0 6.076-4.925 11-11 11s-11-4.924-11-11c0-6.075 4.925-11 11-11Zm0 2.2a8.8 8.8 0 1 0 0 17.6 8.8 8.8 0 0 0 0-17.6Zm4.722 4.72 1.556 1.555L12.4 18.12l-4.078-4.078 1.556-1.556 2.522 2.522 5.822-5.822Z"></path>
-                        </g>
-                    </svg>
-                `);
-            });
-        });
-    });
     describe('SVG Sprite', () => {
         let standardLoadedEventSpy;
         let statusLoadedEventSpy;
@@ -90,7 +12,7 @@ describe('q2-icon', () => {
                 html: '',
             });
             e2ePage.setDefaultTimeout(5000);
-            e2ePage.setContent(`<q2-icon beta type="close"></q2-icon>`);
+            e2ePage.setContent(`<q2-icon type="close"></q2-icon>`);
             standardLoadedEventSpy = await e2ePage.spyOnEvent('tct-loaded-standard');
             statusLoadedEventSpy = await e2ePage.spyOnEvent('tct-loaded-status');
             await e2ePage.waitForSelector('#tecton-sprites');
@@ -187,7 +109,7 @@ describe('q2-icon', () => {
         describe('inline', () => {
             it('uses the default width and height when false', async () => {
                 e2ePage = await setup({
-                    html: `<q2-icon beta type="a11y"></q2-icon>`,
+                    html: `<q2-icon type="a11y"></q2-icon>`,
                 });
                 const icon = await e2ePage.find('q2-icon');
                 const iconComputedStyle = await icon.getComputedStyle();
@@ -196,7 +118,7 @@ describe('q2-icon', () => {
             });
             it('sets the width and height to 1em when true', async () => {
                 e2ePage = await setup({
-                    html: `<q2-icon beta type="a11y" inline></q2-icon>`,
+                    html: `<q2-icon type="a11y" inline></q2-icon>`,
                 });
                 const icon = await e2ePage.find('q2-icon');
                 const iconComputedStyle = await icon.getComputedStyle();
@@ -220,10 +142,10 @@ describe('q2-icon', () => {
             it('renders the expected output when provided', async () => {
                 specPage = await newSpecPage({
                     components: [Q2Icon],
-                    html: '<q2-icon beta label="Iron Man" type="close"></q2-icon>',
+                    html: '<q2-icon label="Iron Man" type="close"></q2-icon>',
                 });
                 expect(specPage.root).toEqualHtml(`
-                    <q2-icon beta label="Iron Man" type="close">
+                    <q2-icon label="Iron Man" type="close">
                         <mock:shadow-root>
                             <svg aria-labelledby="label" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <title id="label">
@@ -259,21 +181,21 @@ describe('q2-icon', () => {
             it('renders nothing when not provided', async () => {
                 specPage = await newSpecPage({
                     components: [Q2Icon],
-                    html: '<q2-icon beta></q2-icon>',
+                    html: '<q2-icon></q2-icon>',
                 });
                 expect(specPage.root).toEqualHtml(emptyIconMarkup);
             });
             it('renders expected output when provided', async () => {
                 specPage = await newSpecPage({
                     components: [Q2Icon],
-                    html: '<q2-icon beta type="close"></q2-icon>',
+                    html: '<q2-icon type="close"></q2-icon>',
                 });
                 expect(specPage.root).toEqualHtml(closeIconMarkup);
             });
             it('clears the content when removed', async () => {
                 specPage = await newSpecPage({
                     components: [Q2Icon],
-                    html: '<q2-icon beta type="close"></q2-icon>',
+                    html: '<q2-icon type="close"></q2-icon>',
                 });
                 expect(specPage.root).toEqualHtml(closeIconMarkup);
                 specPage.root.type = undefined;
@@ -283,7 +205,7 @@ describe('q2-icon', () => {
             it('updates the content when added', async () => {
                 specPage = await newSpecPage({
                     components: [Q2Icon],
-                    html: '<q2-icon beta></q2-icon>',
+                    html: '<q2-icon></q2-icon>',
                 });
                 expect(specPage.root).toEqualHtml(emptyIconMarkup);
                 specPage.root.type = 'close';
@@ -295,7 +217,7 @@ describe('q2-icon', () => {
                     specPage = await newSpecPage({
                         components: [Q2Icon],
                         html: `
-                            <q2-icon beta type="custom">
+                            <q2-icon type="custom">
                                 <svg viewBox="0 0 34 34">
                                     <circle cx="17" cy="17" r="10" />
                                 </svg>
@@ -308,7 +230,7 @@ describe('q2-icon', () => {
                     expect(svg).toEqualAttribute('aria-hidden', 'true');
                     expect(svg).not.toHaveAttribute('aria-labelledby');
                     expect(specPage.root).toEqualHtml(`
-                        <q2-icon beta type="custom">
+                        <q2-icon type="custom">
                             <mock:shadow-root>
                                 <slot />
                             </mock:shadow-root>
@@ -322,7 +244,7 @@ describe('q2-icon', () => {
                     specPage = await newSpecPage({
                         components: [Q2Icon],
                         html: `
-                            <q2-icon beta type="custom" label="Iron Man">
+                            <q2-icon type="custom" label="Iron Man">
                                 <svg viewBox="0 0 34 34">
                                     <circle cx="17" cy="17" r="10" />
                                 </svg>
@@ -335,7 +257,7 @@ describe('q2-icon', () => {
                     expect(svg).not.toHaveAttribute('aria-hidden');
                     expect(svg).toHaveAttribute('aria-labelledby');
                     expect(specPage.root).toEqualHtml(`
-                        <q2-icon beta label="Iron Man" type="custom">
+                        <q2-icon label="Iron Man" type="custom">
                             <mock:shadow-root>
                                 <slot />
                             </mock:shadow-root>
@@ -355,7 +277,7 @@ describe('q2-icon', () => {
         describe('fill', () => {
             it('uses fallback color when override not provided', async () => {
                 e2ePage = await setup({
-                    html: `<q2-icon beta type="brand-facebook-color"></q2-icon>`,
+                    html: `<q2-icon type="brand-facebook-color"></q2-icon>`,
                 });
                 const pathElements = await e2ePage.findAll('q2-icon >>> path');
                 const pathOneStyle = await pathElements[0].getComputedStyle();
@@ -365,7 +287,7 @@ describe('q2-icon', () => {
             });
             it('uses override color when provided', async () => {
                 e2ePage = await setup({
-                    html: `<q2-icon beta type="brand-facebook-color" style="--tct-icon-brand-fill-primary: blue; --tct-icon-brand-fill-secondary: red;"></q2-icon>`,
+                    html: `<q2-icon type="brand-facebook-color" style="--tct-icon-brand-fill-primary: blue; --tct-icon-brand-fill-secondary: red;"></q2-icon>`,
                 });
                 const pathElements = await e2ePage.findAll('q2-icon >>> path');
                 const pathOneStyle = await pathElements[0].getComputedStyle();
@@ -523,7 +445,7 @@ describe('q2-icon', () => {
     });
 });
 const closeIconMarkup = `
-    <q2-icon beta type="close">
+    <q2-icon type="close">
         <mock:shadow-root>
             <svg aria-hidden="true" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <use href="#tct-close"></use>
@@ -539,7 +461,7 @@ const closeIconMarkup = `
     </q2-icon>
 `;
 const emptyIconMarkup = `
-    <q2-icon beta>
+    <q2-icon>
         <mock:shadow-root>
             <svg aria-hidden="true" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <g></g>