q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-meter/test/q2-meter-test.vr.js

@@ -0,0 +1,78 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// All variants set animated="false" to keep the loading shimmer out of the snapshot.
+const COMMON = `label="Balance" max-value="$1,000" max-label="Available" animated="false"`;
+const VARIANTS = [
+    {
+        name: 'basic',
+        html: `<q2-meter ${COMMON} completed-value="$300" completed-label="Balance"></q2-meter>`,
+    },
+    {
+        // margin-top reserves vertical space for the completed-dot tooltip in
+        // the dot-tooltip-hover snapshot. Without it the tooltip clips at the
+        // top of the viewport.
+        name: 'with-suggested',
+        html: `<div style="margin-top: 40px;"><q2-meter ${COMMON} completed-value="$300" completed-label="Balance" suggested-value="$500" suggested-label="Pending" dotted></q2-meter></div>`,
+    },
+    {
+        name: 'with-description',
+        html: `<q2-meter ${COMMON} description="Your account balance summary" completed-value="$300" completed-label="Balance" suggested-value="$500" suggested-label="Pending" dotted></q2-meter>`,
+    },
+    {
+        name: 'no-dot',
+        html: `<q2-meter ${COMMON} completed-value="$300" completed-label="Balance" suggested-value="$500" suggested-label="Pending"></q2-meter>`,
+    },
+    {
+        name: 'segments',
+        html: `<q2-meter ${COMMON} completed-value="$700" completed-label="Balance" segments="10" dotted></q2-meter>`,
+    },
+    {
+        name: 'zero-completed',
+        html: `<q2-meter ${COMMON} completed-value="$0" completed-label="Balance" dotted></q2-meter>`,
+    },
+    {
+        name: 'full-completed',
+        html: `<q2-meter ${COMMON} completed-value="$1,000" completed-label="Balance" dotted></q2-meter>`,
+    },
+    {
+        name: 'hide-tooltip',
+        html: `<q2-meter ${COMMON} completed-value="$500" completed-label="Balance" hide-tooltip="true"></q2-meter>`,
+    },
+    {
+        name: 'hero',
+        html: `<q2-meter ${COMMON} description="Your account balance summary" completed-value="$300" completed-label="Balance" suggested-value="$500" suggested-label="Pending" dotted></q2-meter>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-meter--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-meter--${variant.name}--resting--${theme}.png`);
+    });
+};
+const WITH_SUGGESTED = VARIANTS.find(v => v.name === 'with-suggested');
+// Hover the q2-tooltip wrapper around the completed dot. The tooltip is CSS-:hover driven,
+// so dispatching mouseenter on the inner host triggers the popover.
+const dotTooltipHoverCase = (variant, theme) => {
+    test(`q2-meter--${variant.name}--dot-tooltip-hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        const completedTooltip = page.locator('q2-meter').locator('.dot-container.completed q2-tooltip').first();
+        await completedTooltip.hover({ force: true });
+        // Allow tooltip positioning math to settle.
+        await page.waitForTimeout(150);
+        await expect(page).toHaveScreenshot(`q2-meter--${variant.name}--dot-tooltip-hover--${theme}.png`);
+    });
+};
+test.describe('q2-meter — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    if (WITH_SUGGESTED) {
+        for (const theme of THEMES) {
+            dotTooltipHoverCase(WITH_SUGGESTED, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-meter-test.vr.js.map

package/dist/collection/components/q2-meter/test/q2-meter-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-meter-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-meter/test/q2-meter-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\n// All variants set animated=\"false\" to keep the loading shimmer out of the snapshot.\nconst COMMON = `label=\"Balance\" max-value=\"$1,000\" max-label=\"Available\" animated=\"false\"`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'basic',\n        html: `<q2-meter ${COMMON} completed-value=\"$300\" completed-label=\"Balance\"></q2-meter>`,\n    },\n    {\n        // margin-top reserves vertical space for the completed-dot tooltip in\n        // the dot-tooltip-hover snapshot. Without it the tooltip clips at the\n        // top of the viewport.\n        name: 'with-suggested',\n        html: `<div style=\"margin-top: 40px;\"><q2-meter ${COMMON} completed-value=\"$300\" completed-label=\"Balance\" suggested-value=\"$500\" suggested-label=\"Pending\" dotted></q2-meter></div>`,\n    },\n    {\n        name: 'with-description',\n        html: `<q2-meter ${COMMON} description=\"Your account balance summary\" completed-value=\"$300\" completed-label=\"Balance\" suggested-value=\"$500\" suggested-label=\"Pending\" dotted></q2-meter>`,\n    },\n    {\n        name: 'no-dot',\n        html: `<q2-meter ${COMMON} completed-value=\"$300\" completed-label=\"Balance\" suggested-value=\"$500\" suggested-label=\"Pending\"></q2-meter>`,\n    },\n    {\n        name: 'segments',\n        html: `<q2-meter ${COMMON} completed-value=\"$700\" completed-label=\"Balance\" segments=\"10\" dotted></q2-meter>`,\n    },\n    {\n        name: 'zero-completed',\n        html: `<q2-meter ${COMMON} completed-value=\"$0\" completed-label=\"Balance\" dotted></q2-meter>`,\n    },\n    {\n        name: 'full-completed',\n        html: `<q2-meter ${COMMON} completed-value=\"$1,000\" completed-label=\"Balance\" dotted></q2-meter>`,\n    },\n    {\n        name: 'hide-tooltip',\n        html: `<q2-meter ${COMMON} completed-value=\"$500\" completed-label=\"Balance\" hide-tooltip=\"true\"></q2-meter>`,\n    },\n    {\n        name: 'hero',\n        html: `<q2-meter ${COMMON} description=\"Your account balance summary\" completed-value=\"$300\" completed-label=\"Balance\" suggested-value=\"$500\" suggested-label=\"Pending\" dotted></q2-meter>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-meter--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme, setupLoc: true });\n        await expect(page).toHaveScreenshot(`q2-meter--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst WITH_SUGGESTED = VARIANTS.find(v => v.name === 'with-suggested');\n\n// Hover the q2-tooltip wrapper around the completed dot. The tooltip is CSS-:hover driven,\n// so dispatching mouseenter on the inner host triggers the popover.\nconst dotTooltipHoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-meter--${variant.name}--dot-tooltip-hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme, setupLoc: true });\n        const completedTooltip = page.locator('q2-meter').locator('.dot-container.completed q2-tooltip').first();\n        await completedTooltip.hover({ force: true });\n        // Allow tooltip positioning math to settle.\n        await page.waitForTimeout(150);\n        await expect(page).toHaveScreenshot(`q2-meter--${variant.name}--dot-tooltip-hover--${theme}.png`);\n    });\n};\n\ntest.describe('q2-meter — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    if (WITH_SUGGESTED) {\n        for (const theme of THEMES) {\n            dotTooltipHoverCase(WITH_SUGGESTED, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,27 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-modal-background: (<color>) Controls the background color of the modal dialog.
+ * @prop --tct-modal-color: (<color>) Controls the text color of the modal dialog.
+ * @prop --tct-modal-backdrop-background: (<color>) Controls the background color of the modal backdrop.
+ * @prop --tct-modal-border-radius: (<length-percentage>+) Controls the corner radius of the modal dialog.
+ * @prop --tct-modal-box-shadow: (*) Controls the box shadow of the modal dialog.
+ * @prop --tct-modal-padding: (<length-percentage>+) Controls the inner padding of the modal dialog.
+ * @prop --tct-modal-gap: (<length-percentage>) Controls the vertical gap between the modal header, content, and footer.
+ * @prop --tct-modal-header-height: (<length>) Controls the height of the modal header row.
+ * @prop --tct-modal-close-button-size: (<length>) Controls the size of the modal close button.
+ * @prop --tct-modal-content-gradient-height: (<length>) Controls the height of the scroll-edge gradient on the modal content.
+ * @prop --tct-modal-max-width: (<length-percentage>) Controls the maximum width of the modal dialog.
+ * @prop --tct-modal-max-height: (<length-percentage>) Controls the maximum height of the modal dialog.
+ * @prop --tct-modal-min-height: (<length-percentage>) Controls the minimum height of the modal dialog.
+ * @prop --tct-modal-icon-size: (<length>) Controls the height and width of the modal leading icon.
+ * @prop --tct-modal-icon-margin: (<length-percentage>+) Controls the margin around the modal leading icon.
+ * @prop --tct-modal-image-border-radius: (<length-percentage>) Controls the corner radius of the modal image.
+ * @prop --tct-modal-description-font-size: (<length-percentage>) Controls the font size of the modal description text.
+ * @prop --tct-modal-title-font-weight: (<number>) Controls the font weight of the modal title.
+ * @prop --tct-modal-tween: (*) Controls the open/close transition timing of the modal dialog.
+ */
 @keyframes showBackdrop {
   from {
     opacity: 0;

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

@@ -136,7 +136,7 @@ export class Q2Modal {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: 'e7c16406478e632f39057feb8ab86029c2b6ddd7', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'b59510c6a97ac4f8e4820465919e364a924b82e1', class: interiorClasses }, this.title && (h("header", { key: '714904259d422f663d13aa27b715a2de9ab3b12b' }, this.title && h("h2", { key: '69e2f5f487b73fc84ff6e0ca1e9710d7c5f80938', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'e9258c375fd6f077f296a496a6a67903a39f3d8c', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '4c07c70736c25e12d08d6f066507326bc333ad61', type: "close" }))))), h("div", { key: 'a40c63b069c6f8c03682d8626f9a359cb5f7f7fa', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '95bf4a48929080493ed1f375648aa8630931e3be', class: "icon" }, h("q2-icon", { key: '8e7d34940323c625e61eea7509d829d298af82a0', type: this.icon }))), this.imageSrc && (h("div", { key: '9f6fbbd59c14cc5ee93601db161dd7c748e3b5a6', class: "image" }, h("img", { key: 'd97eb1d2dae996c2bcacddf840b984f1ffe05847', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'b7b66ddb181aa333fb88496984a6f35a34077baf', name: "content" }), this.description && h("p", { key: '54dc54b11c8c351b760afc35c714d35277b3e463', class: "description" }, this.description), this.customMarkup && (h("p", { key: '11e8922a3e277f6bb21c8cbcaf1be19de07d3a54', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'f90f8a5569be4c1660c25388a9082e2e40a3e11d' }, h("q2-action-group", { key: '34254d2e03a6093e53324c3d98b0eb2ede3b14f2', "full-width": true }, h("slot", { key: 'a34ad5fa37fc258bd2863f2fd191acdac05de9cb', name: "action" }))))));
+        return (h("dialog", { key: 'f07045cb3a3e85c9ebb018aba4693f1b547da800', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '215739e96bf781f3c9d7b1e67250820ccf858b75', class: interiorClasses }, this.title && (h("header", { key: '77ce6f5b51a36f296fd110e3506c44ff94d72c48' }, this.title && h("h2", { key: 'fe6c7e59889383c6af5615093e66c3837dd24bc4', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '8da0a4c5499caffd385bbf78f2010f77f8c35785', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3526408cfbc99d56d74e3167624049a86dded3a4', type: "close" }))))), h("div", { key: 'ce3c96886c1d28d78040401b3782892c5bda7399', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'e4bae20593b8877f9c713f5bf63e59574042735b', class: "icon" }, h("q2-icon", { key: '466a83589286d503c6a5a36ba1999a73df951c19', type: this.icon }))), this.imageSrc && (h("div", { key: '56a0e413b40319b7a40e79136575ee8849c339c6', class: "image" }, h("img", { key: '0d32cee3447aa42273a816c4cd8941d5df62b3b2', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '3687527d29977c662dd480e6fb9727f47eb3522a', name: "content" }), this.description && h("p", { key: '34b49f5bb615192deec83726391b66680541eb12', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'a44e20822b497cc95e2ad16430f3e3e27f1c164a', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ae01296dc46f5502b1cdfa7b1949639df942c124' }, h("q2-action-group", { key: 'b89615558a7129659ce1574cc026c2bc4d728e8b', "full-width": true }, h("slot", { key: 'f12ed356d57b290222a5dab301c83a85fbdc9c34', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-modal/test/q2-modal-test.vr.js

@@ -0,0 +1,107 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const ACTIONS = `
+    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
+`;
+const MANY_ACTIONS = `
+    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
+    <q2-btn slot="action" intent="workflow-escape" label="Reset 1"></q2-btn>
+    <q2-btn slot="action" intent="workflow-escape" label="Reset 2"></q2-btn>
+    <q2-btn slot="action" intent="workflow-escape" label="Reset 3"></q2-btn>
+`;
+const LONG_DESC = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula.';
+// Inline SVG data URL — stable across runs, no network dependency.
+const STABLE_IMAGE_SRC = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><rect width='100%' height='100%' fill='%237aa9d6'/></svg>";
+// q2-modal hosts default to display:none until openModal() runs, which makes
+// setupPage's `[stencil-hydrated]:visible` wait time out. Prepending any visible
+// hydrated Stencil element lets that wait resolve so we can call openModal().
+// Once the modal opens, its backdrop covers this anchor entirely, so it doesn't
+// pollute the snapshot.
+const VISIBLE_HYDRATION_ANCHOR = `<q2-icon type="info"></q2-icon>`;
+const VARIANTS = [
+    {
+        name: 'basic',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Confirm action" description="Are you sure you want to continue with this action?">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'not-closable',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Required step" description="This step cannot be skipped." closable="false">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'with-icon',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Success!" icon="success-filled" description="Your changes were saved.">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'with-image',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Welcome" image-src="${STABLE_IMAGE_SRC}" description="Take a tour of the new dashboard.">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'no-title',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal description="Body-only modal with no title or close button.">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'long-description',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Terms" description="${LONG_DESC}">${ACTIONS}</q2-modal>`,
+    },
+    {
+        name: 'many-actions',
+        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Confirm action" description="Are you sure you want to continue with this action?">${MANY_ACTIONS}</q2-modal>`,
+    },
+];
+const openModal = async (page) => {
+    await page.locator('q2-modal').evaluate((el) => el.openModal());
+    // showModal() sets dialog.open synchronously. The component then flips to renderStatus
+    // 'is-open' on transitionend, but that event doesn't fire reliably under headless test
+    // automation (animations get paused). Wait for dialog.open + a couple of paint frames so
+    // toHaveScreenshot snaps the steady, fully-rendered modal.
+    await page.locator('q2-modal').evaluate(async (el) => {
+        var _a;
+        const dialog = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');
+        if (!dialog)
+            throw new Error('q2-modal dialog not found in shadow DOM');
+        if (!dialog.open) {
+            await new Promise(resolve => {
+                const observer = new MutationObserver(() => {
+                    if (dialog.open) {
+                        observer.disconnect();
+                        resolve();
+                    }
+                });
+                observer.observe(dialog, { attributes: true, attributeFilter: ['open'] });
+            });
+        }
+        await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    });
+};
+const openCase = (variant, theme) => {
+    test(`q2-modal--${variant.name}--open — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await openModal(page);
+        await expect(page).toHaveScreenshot(`q2-modal--${variant.name}--open--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-modal--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await openModal(page);
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-modal--${variant.name}--focus--${theme}.png`);
+    });
+};
+const BASIC_VARIANT = VARIANTS.find(v => v.name === 'basic');
+test.describe('q2-modal — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            openCase(variant, theme);
+        }
+    }
+    if (BASIC_VARIANT) {
+        for (const theme of THEMES) {
+            focusCase(BASIC_VARIANT, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-modal-test.vr.js.map

package/dist/collection/components/q2-modal/test/q2-modal-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-modal-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-modal/test/q2-modal-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst ACTIONS = `\n    <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\"></q2-btn>\n    <q2-btn slot=\"action\" intent=\"workflow-secondary\" label=\"Cancel\"></q2-btn>\n`;\n\nconst MANY_ACTIONS = `\n    <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\"></q2-btn>\n    <q2-btn slot=\"action\" intent=\"workflow-secondary\" label=\"Cancel\"></q2-btn>\n    <q2-btn slot=\"action\" intent=\"workflow-escape\" label=\"Reset 1\"></q2-btn>\n    <q2-btn slot=\"action\" intent=\"workflow-escape\" label=\"Reset 2\"></q2-btn>\n    <q2-btn slot=\"action\" intent=\"workflow-escape\" label=\"Reset 3\"></q2-btn>\n`;\n\nconst LONG_DESC =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula.';\n\n// Inline SVG data URL — stable across runs, no network dependency.\nconst STABLE_IMAGE_SRC =\n    \"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><rect width='100%' height='100%' fill='%237aa9d6'/></svg>\";\n\n// q2-modal hosts default to display:none until openModal() runs, which makes\n// setupPage's `[stencil-hydrated]:visible` wait time out. Prepending any visible\n// hydrated Stencil element lets that wait resolve so we can call openModal().\n// Once the modal opens, its backdrop covers this anchor entirely, so it doesn't\n// pollute the snapshot.\nconst VISIBLE_HYDRATION_ANCHOR = `<q2-icon type=\"info\"></q2-icon>`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'basic',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Confirm action\" description=\"Are you sure you want to continue with this action?\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'not-closable',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Required step\" description=\"This step cannot be skipped.\" closable=\"false\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'with-icon',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Success!\" icon=\"success-filled\" description=\"Your changes were saved.\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'with-image',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Welcome\" image-src=\"${STABLE_IMAGE_SRC}\" description=\"Take a tour of the new dashboard.\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'no-title',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal description=\"Body-only modal with no title or close button.\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'long-description',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Terms\" description=\"${LONG_DESC}\">${ACTIONS}</q2-modal>`,\n    },\n    {\n        name: 'many-actions',\n        html: `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title=\"Confirm action\" description=\"Are you sure you want to continue with this action?\">${MANY_ACTIONS}</q2-modal>`,\n    },\n];\n\nconst openModal = async (page: import('@playwright/test').Page) => {\n    await page.locator('q2-modal').evaluate((el: HTMLElement & { openModal(): Promise<void> }) => el.openModal());\n    // showModal() sets dialog.open synchronously. The component then flips to renderStatus\n    // 'is-open' on transitionend, but that event doesn't fire reliably under headless test\n    // automation (animations get paused). Wait for dialog.open + a couple of paint frames so\n    // toHaveScreenshot snaps the steady, fully-rendered modal.\n    await page.locator('q2-modal').evaluate(async (el: HTMLElement) => {\n        const dialog = el.shadowRoot?.querySelector('dialog');\n        if (!dialog) throw new Error('q2-modal dialog not found in shadow DOM');\n        if (!dialog.open) {\n            await new Promise<void>(resolve => {\n                const observer = new MutationObserver(() => {\n                    if (dialog.open) {\n                        observer.disconnect();\n                        resolve();\n                    }\n                });\n                observer.observe(dialog, { attributes: true, attributeFilter: ['open'] });\n            });\n        }\n        await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));\n    });\n};\n\nconst openCase = (variant: Variant, theme: Theme) => {\n    test(`q2-modal--${variant.name}--open — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme, setupLoc: true });\n        await openModal(page);\n        await expect(page).toHaveScreenshot(`q2-modal--${variant.name}--open--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-modal--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme, setupLoc: true });\n        await openModal(page);\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-modal--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst BASIC_VARIANT = VARIANTS.find(v => v.name === 'basic');\n\ntest.describe('q2-modal — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            openCase(variant, theme);\n        }\n    }\n    if (BASIC_VARIANT) {\n        for (const theme of THEMES) {\n            focusCase(BASIC_VARIANT, theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js

@@ -92,7 +92,7 @@ export class Q2MutationObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '63a71ae4a0e7d69ea2aaec1244ff89c6d47d6a81', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'e60ef36a762c6af123a91fe6c4def64179663098', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-mutation-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,17 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-optgroup-header-background: (<color>) Controls the background color of the optgroup header.
+ * @prop --tct-optgroup-header-color?: (<color>) Controls the optional text color of the optgroup header.
+ * @prop --tct-optgroup-header-font-size: (<length-percentage>) Controls the font size of the optgroup header.
+ * @prop --tct-optgroup-header-font-weight: (<number>) Controls the font weight of the optgroup header.
+ * @prop --tct-optgroup-header-letter-spacing?: (<length>) Controls the optional letter spacing of the optgroup header.
+ * @prop --tct-optgroup-header-padding: (<length-percentage>+) Controls the inner padding of the optgroup header.
+ * @prop --tct-optgroup-header-position: (<custom-ident>) Controls the CSS position value of the optgroup header.
+ * @prop --tct-optgroup-header-text-transform?: (<custom-ident>) Controls the optional text transform of the optgroup header.
+ * @prop --tct-optgroup-top: (<length>) Controls the top offset of the optgroup header when it is stickied within its scroll container.
+ */
 :host {
   display: block;
 }

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

@@ -55,7 +55,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6f4564d3db59c64b76abc47ceee3663e277b6f55', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'bd28cae7d3893142c8154286d28fb79448e5ca39', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '63eba11bbca923ca6c22281ba31476fb89a709ca', class: "q2-optgroup-options" }, h("slot", { key: '1c27562418e4075f2843e0ec080a138a14d5f191' }))));
+        return (h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,15 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-option-active-background: (<color>) Controls the background color of the option in its active, focused, and hover states.
+ * @prop --tct-option-active-color?: (<color>) Controls the optional text color of the option in its active, focused, and hover states.
+ * @prop --tct-option-content-font-size?: (<length-percentage>) Controls the optional font size of the option content.
+ * @prop --tct-option-focus-box-shadow: (*) Controls the box shadow of the option when focused via keyboard.
+ * @prop --tct-option-padding: (<length-percentage>+) Controls the inner padding of the option.
+ * @prop --tct-option-selected-icon-size: (<length>) Controls the size of the selected indicator icon.
+ * @prop --tct-option-selected-multiline-icon-size: (<length>) Controls the size of the selected indicator icon when multiline is set.
+ */
 :host(:not([separator]):not([separator=false])) {
   --comp-padding: 0 var(--app-scale-2x, 10px);
   --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));

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

@@ -67,11 +67,11 @@ export class Q2Option {
         this.mutationObserver = null;
     }
     componentWillLoad() {
-        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');
         this.separatorChangedHandler(this.separator);
         this.initDisplay();
     }
     componentDidLoad() {
+        hasValidAncestor(this.hostElement, 'q2-select, q2-option-list, q2-pill, q2-dropdown');
         this.initMutationObserver();
     }
     // #endregion

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

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

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

@@ -65,6 +65,9 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-option-list-line-height: (<number> | <length-percentage>) Controls the line height of the option list container.
+ */
 :host {
   position: relative;
   width: 100%;

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

@@ -158,38 +158,47 @@ export class Q2OptionList {
                     }, { once: true });
                     break;
                 case 'ArrowUp':
-                    event.preventDefault();
-                    const firstVisibleOption = allVisibleOptions[0];
-                    const isFirstVisibleOptionActive = firstVisibleOption.active;
-                    if (isFirstVisibleOptionActive)
-                        break;
-                    if (activeIndex === undefined) {
-                        this.setDefaultActiveElement();
-                        break;
-                    }
-                    else {
-                        const nextIndex = this.getNextVisibleIndex(-1);
-                        if (nextIndex === -1)
-                            break;
-                        this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-                        break;
-                    }
                 case 'ArrowDown':
+                    // Guard: only process if an option is currently focused
+                    const focusedOption = document.activeElement;
+                    const isOptionFocused = this.allOptions.some(opt => opt === focusedOption);
+                    if (!isOptionFocused)
+                        return;
                     event.preventDefault();
-                    const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];
-                    const isLastVisibleOptionActive = lastVisibleOption.active;
-                    if (isLastVisibleOptionActive)
-                        break;
-                    if (activeIndex === undefined) {
-                        this.setDefaultActiveElement();
-                        break;
+                    if (key === 'ArrowUp') {
+                        const firstVisibleOption = allVisibleOptions[0];
+                        const isFirstVisibleOptionActive = firstVisibleOption.active;
+                        if (isFirstVisibleOptionActive)
+                            break;
+                        if (activeIndex === undefined) {
+                            this.setDefaultActiveElement();
+                            break;
+                        }
+                        else {
+                            const nextIndex = this.getNextVisibleIndex(-1);
+                            if (nextIndex === -1)
+                                break;
+                            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+                            break;
+                        }
                     }
                     else {
-                        const nextIndex = this.getNextVisibleIndex(1);
-                        if (nextIndex === -1)
+                        // ArrowDown
+                        const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];
+                        const isLastVisibleOptionActive = lastVisibleOption.active;
+                        if (isLastVisibleOptionActive)
                             break;
-                        this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-                        break;
+                        if (activeIndex === undefined) {
+                            this.setDefaultActiveElement();
+                            break;
+                        }
+                        else {
+                            const nextIndex = this.getNextVisibleIndex(1);
+                            if (nextIndex === -1)
+                                break;
+                            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+                            break;
+                        }
                     }
                 case 'Home':
                     event.preventDefault();
@@ -574,7 +583,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '99c8a52ef8c6adbd138bdd4ff40340fabe670903' }, h("div", { key: '632777fab876b3ef838e8658de35df410fc1d3b7', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '97079fcb63d10e57ae3e3f1fcbc0a4c307dcda3c', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '07f07e638defb8427f320db9bf3cfb87f6711f9e' })))));
+        return (h(Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }