q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-tab-container/test/q2-tab-container-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";
+const PANES = (name) => `
+    <q2-tab-pane name="${name}" value="1" label="Tab One"><p>Content one</p></q2-tab-pane>
+    <q2-tab-pane name="${name}" value="2" label="Tab Two"><p>Content two</p></q2-tab-pane>
+    <q2-tab-pane name="${name}" value="3" label="Tab Three"><p>Content three</p></q2-tab-pane>
+`;
+const BADGE_PANES = (name) => `
+    <q2-tab-pane name="${name}" value="1" label="Inbox" badge-count="5"><p>Inbox</p></q2-tab-pane>
+    <q2-tab-pane name="${name}" value="2" label="Sent"><p>Sent</p></q2-tab-pane>
+    <q2-tab-pane name="${name}" value="3" label="Alerts" badge-count="2" badge-status="warning"><p>Alerts</p></q2-tab-pane>
+`;
+const VARIANTS = [
+    {
+        name: 'default-main',
+        html: `<q2-tab-container name="main-tabs" value="1">${PANES('main-tabs')}</q2-tab-container>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'type-section',
+        html: `<q2-tab-container name="section-tabs" value="1" type="section">${PANES('section-tabs')}</q2-tab-container>`,
+        states: ['resting'],
+    },
+    {
+        name: 'color-alt',
+        html: `<q2-tab-container name="alt-tabs" value="1" color="alt">${PANES('alt-tabs')}</q2-tab-container>`,
+        states: ['resting'],
+    },
+    {
+        name: 'with-badges',
+        html: `<q2-tab-container name="badge-tabs" value="1">${BADGE_PANES('badge-tabs')}</q2-tab-container>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-tab-container--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-tab-container--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        // Tab buttons live in q2-tab-container's shadow root; hover the second one.
+        const box = await page.locator('q2-tab-container').evaluate((el) => {
+            var _a;
+            const btns = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button');
+            if (!btns || btns.length < 2)
+                throw new Error('q2-tab-container tab buttons not found in shadow DOM');
+            const r = btns[1].getBoundingClientRect();
+            return { x: r.x, y: r.y, width: r.width, height: r.height };
+        });
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.waitForTimeout(50);
+        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-tab-container--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-tab-container — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('hover'))
+                hoverCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-tab-container-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-tab-container-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-tab-container/test/q2-tab-container-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 State = 'resting' | 'hover' | 'focus';\ntype Variant = { name: string; html: string; states: State[] };\n\nconst PANES = (name: string) => `\n    <q2-tab-pane name=\"${name}\" value=\"1\" label=\"Tab One\"><p>Content one</p></q2-tab-pane>\n    <q2-tab-pane name=\"${name}\" value=\"2\" label=\"Tab Two\"><p>Content two</p></q2-tab-pane>\n    <q2-tab-pane name=\"${name}\" value=\"3\" label=\"Tab Three\"><p>Content three</p></q2-tab-pane>\n`;\n\nconst BADGE_PANES = (name: string) => `\n    <q2-tab-pane name=\"${name}\" value=\"1\" label=\"Inbox\" badge-count=\"5\"><p>Inbox</p></q2-tab-pane>\n    <q2-tab-pane name=\"${name}\" value=\"2\" label=\"Sent\"><p>Sent</p></q2-tab-pane>\n    <q2-tab-pane name=\"${name}\" value=\"3\" label=\"Alerts\" badge-count=\"2\" badge-status=\"warning\"><p>Alerts</p></q2-tab-pane>\n`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default-main',\n        html: `<q2-tab-container name=\"main-tabs\" value=\"1\">${PANES('main-tabs')}</q2-tab-container>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'type-section',\n        html: `<q2-tab-container name=\"section-tabs\" value=\"1\" type=\"section\">${PANES('section-tabs')}</q2-tab-container>`,\n        states: ['resting'],\n    },\n    {\n        name: 'color-alt',\n        html: `<q2-tab-container name=\"alt-tabs\" value=\"1\" color=\"alt\">${PANES('alt-tabs')}</q2-tab-container>`,\n        states: ['resting'],\n    },\n    {\n        name: 'with-badges',\n        html: `<q2-tab-container name=\"badge-tabs\" value=\"1\">${BADGE_PANES('badge-tabs')}</q2-tab-container>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tab-container--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tab-container--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        // Tab buttons live in q2-tab-container's shadow root; hover the second one.\n        const box = await page.locator('q2-tab-container').evaluate((el: HTMLElement) => {\n            const btns = el.shadowRoot?.querySelectorAll<HTMLButtonElement>('button');\n            if (!btns || btns.length < 2) throw new Error('q2-tab-container tab buttons not found in shadow DOM');\n            const r = btns[1].getBoundingClientRect();\n            return { x: r.x, y: r.y, width: r.width, height: r.height };\n        });\n        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);\n        await page.waitForTimeout(50);\n        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tab-container--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-tab-container — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            if (variant.states.includes('resting')) restingCase(variant, theme);\n            if (variant.states.includes('hover')) hoverCase(variant, theme);\n            if (variant.states.includes('focus')) focusCase(variant, theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '9e30ea978de56faef92a68fe53d20bb3c691472e', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '0e89751c2212dfb0a7668c7cb720460022960618' })));
+        return (h("div", { key: '9708be0237a811a3ee3b1b4a4c308bae1032aee9', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'ce7039cace68374f14982564041f18e08dac9eb7' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,35 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-tag-background: (<color>) Controls the background color of the tag in its default state.
+ * @prop --tct-tag-color: (<color>) Controls the text color of the tag in its default state.
+ * @prop --tct-tag-border-color?: (<color>) Controls the optional border color of the tag in its default state.
+ * @prop --tct-tag-border-radius: (<length-percentage>) Controls the corner radius of the tag.
+ * @prop --tct-tag-border-style?: (<custom-ident>) Controls the optional border style of the tag.
+ * @prop --tct-tag-border-width?: (<length>+) Controls the optional border width of the tag.
+ * @prop --tct-tag-font-size?: (<length-percentage>) Controls the optional font size of the tag label.
+ * @prop --tct-tag-font-weight?: (<number>) Controls the optional font weight of the tag label.
+ * @prop --tct-tag-height: (<length>) Controls the height of the tag pill.
+ * @prop --tct-tag-margin: (<length-percentage>+) Controls the trailing inline margin between sibling tags.
+ * @prop --tct-tag-padding-inline: (<length-percentage>+) Controls the inline padding of the tag label.
+ * @prop --tct-tag-btn-size: (<length>) Controls the size of the tag's close button icon.
+ * @prop --tct-tag-clickable-size: (<length>) Controls the size of the tag's close button hit target.
+ * @prop --tct-tag-focus-visible-box-shadow: (*) Controls the box shadow of the tag when focused via keyboard.
+ * @prop --tct-tag-decorator-icon-primary-stroke?: (<color>) Controls the optional primary stroke color of the slotted decorator icon in the default theme.
+ * @prop --tct-tag-decorator-icon-secondary-stroke?: (<color>) Controls the optional secondary stroke color of the slotted decorator icon in the default theme.
+ * @prop --tct-tag-primary-background: (<color>) Controls the background color of the tag when theme is primary.
+ * @prop --tct-tag-primary-font-color: (<color>) Controls the text color of the tag when theme is primary.
+ * @prop --tct-tag-primary-border-color: (<color>) Controls the border color of the tag when theme is primary.
+ * @prop --tct-tag-primary-decorator-icon-primary-stroke?: (<color>) Controls the optional primary stroke color of the slotted decorator icon when theme is primary.
+ * @prop --tct-tag-primary-decorator-icon-secondary-stroke?: (<color>) Controls the optional secondary stroke color of the slotted decorator icon when theme is primary.
+ * @prop --tct-tag-secondary-background: (<color>) Controls the background color of the tag when theme is secondary.
+ * @prop --tct-tag-secondary-font-color: (<color>) Controls the text color of the tag when theme is secondary.
+ * @prop --tct-tag-secondary-border-color: (<color>) Controls the border color of the tag when theme is secondary.
+ * @prop --tct-tag-tertiary-background: (<color>) Controls the background color of the tag when theme is tertiary.
+ * @prop --tct-tag-tertiary-font-color: (<color>) Controls the text color of the tag when theme is tertiary.
+ * @prop --tct-tag-tertiary-border-color: (<color>) Controls the border color of the tag when theme is tertiary.
+ */
 :host {
   display: inline-block;
   position: relative;
@@ -84,7 +113,7 @@ button {
   color: var(--comp-tag-color);
   border-radius: var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));
   border-width: var(--tct-tag-border-width, 0);
-  border-style: var(--tct-tag-border-style, 0);
+  border-style: var(--tct-tag-border-style, none);
   border-color: var(--comp-tag-border-color);
   font-size: var(--tct-tag-font-size, inherit);
   font-weight: var(--tct-tag-font-weight, inherit);

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

@@ -198,7 +198,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '4c8e6f24bb68ab17d54896ad3ba6fb1f963f09e3' }, h("click-elsewhere", { key: '390cc4ed1ea29105303051d334752e8825a92d1b', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '47a36ed4d61e060057dfdd9ab5ea209210bae7b1', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'fdb74513951317be67174d656f7b89e2e6ee5561', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '3848cc9302b88fac6abb996c9f0d91d6e71f9ae2' })))))));
+        return (h(Host, { key: 'ac010dec21b5c071855f2a504579aee1e75f7748' }, h("click-elsewhere", { key: 'fb32e3ba62d2cd1e9e2114c8891dc4a646a9c402', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '122b59874ab5674ac67e82ee4d489737394aad84', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '7f6249e823190a11c5e28912b874393a970d7902', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'a244785b7e8c4f626070e8389da3d74ca94fb717' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,83 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const OPTIONS = `
+    <q2-option value="1">Option 1</q2-option>
+    <q2-option value="2">Option 2</q2-option>
+    <q2-option value="3">Option 3</q2-option>
+`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-tag label="My Tag"></q2-tag>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'theme-primary',
+        html: `<q2-tag label="My Tag" theme="primary"></q2-tag>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'theme-secondary',
+        html: `<q2-tag label="My Tag" theme="secondary"></q2-tag>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'theme-tertiary',
+        html: `<q2-tag label="My Tag" theme="tertiary"></q2-tag>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'with-icon',
+        html: `<q2-tag label="My Tag"><q2-icon slot="decorator" type="star"></q2-icon></q2-tag>`,
+        states: ['resting'],
+    },
+    {
+        name: 'with-badge',
+        html: `<q2-tag label="My Tag"><q2-badge slot="decorator" value="TCT" theme="primary"></q2-badge></q2-tag>`,
+        states: ['resting'],
+    },
+    {
+        // popover-alignment="left" so the dropdown opens rightward into the viewport.
+        // Expanded state intentionally not snapshotted: the dropdown's text rendering
+        // against translucent backgrounds (glassmorphism, flat) drifts >0.1% between
+        // runs, which is too unstable for VR. Popover open behavior is covered by
+        // q2-pill and q2-select VR tests.
+        name: 'with-options',
+        html: `<q2-tag label="My Tag" popover-alignment="left">${OPTIONS}</q2-tag>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-tag--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-tag--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-tag').hover();
+        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-tag--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-tag — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('hover'))
+                hoverCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-tag-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-tag-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-tag/test/q2-tag-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 State = 'resting' | 'hover' | 'focus';\ntype Variant = { name: string; html: string; states: State[] };\n\nconst OPTIONS = `\n    <q2-option value=\"1\">Option 1</q2-option>\n    <q2-option value=\"2\">Option 2</q2-option>\n    <q2-option value=\"3\">Option 3</q2-option>\n`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-tag label=\"My Tag\"></q2-tag>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'theme-primary',\n        html: `<q2-tag label=\"My Tag\" theme=\"primary\"></q2-tag>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'theme-secondary',\n        html: `<q2-tag label=\"My Tag\" theme=\"secondary\"></q2-tag>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'theme-tertiary',\n        html: `<q2-tag label=\"My Tag\" theme=\"tertiary\"></q2-tag>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'with-icon',\n        html: `<q2-tag label=\"My Tag\"><q2-icon slot=\"decorator\" type=\"star\"></q2-icon></q2-tag>`,\n        states: ['resting'],\n    },\n    {\n        name: 'with-badge',\n        html: `<q2-tag label=\"My Tag\"><q2-badge slot=\"decorator\" value=\"TCT\" theme=\"primary\"></q2-badge></q2-tag>`,\n        states: ['resting'],\n    },\n    {\n        // popover-alignment=\"left\" so the dropdown opens rightward into the viewport.\n        // Expanded state intentionally not snapshotted: the dropdown's text rendering\n        // against translucent backgrounds (glassmorphism, flat) drifts >0.1% between\n        // runs, which is too unstable for VR. Popover open behavior is covered by\n        // q2-pill and q2-select VR tests.\n        name: 'with-options',\n        html: `<q2-tag label=\"My Tag\" popover-alignment=\"left\">${OPTIONS}</q2-tag>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tag--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tag--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.locator('q2-tag').hover();\n        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tag--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-tag — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            if (variant.states.includes('resting')) restingCase(variant, theme);\n            if (variant.states.includes('hover')) hoverCase(variant, theme);\n            if (variant.states.includes('focus')) focusCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,86 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-textarea-margin: (<length-percentage>+) Controls the outer margin of the textarea host.
+ * @prop --tct-textarea-margin-top: (<length-percentage>) Controls the top margin of the textarea host when --tct-textarea-margin is not set.
+ * @prop --tct-textarea-margin-bottom: (<length-percentage>) Controls the bottom margin of the textarea host when --tct-textarea-margin is not set.
+ * @prop --tct-textarea-padding: (<length-percentage>+) Controls the inner padding of the textarea element.
+ * @prop --tct-textarea-font-color: (<color>) Controls the text color of the textarea content.
+ * @prop --tct-textarea-font-size?: (<length-percentage>) Controls the optional font size of the textarea content.
+ * @prop --tct-textarea-font-weight: (<number>) Controls the font weight of the textarea content.
+ * @prop --tct-textarea-background: (<color>) Controls the background color of the textarea in its default state.
+ * @prop --tct-textarea-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in its default state.
+ * @prop --tct-textarea-border-color: (<color>) Controls the border color of the textarea in its default state.
+ * @prop --tct-textarea-border-top-width: (<length>) Controls the top border width of the textarea.
+ * @prop --tct-textarea-border-right-width: (<length>) Controls the right border width of the textarea.
+ * @prop --tct-textarea-border-bottom-width: (<length>) Controls the bottom border width of the textarea.
+ * @prop --tct-textarea-border-left-width: (<length>) Controls the left border width of the textarea.
+ * @prop --tct-textarea-border-top-left-radius: (<length-percentage>) Controls the top-left corner radius of the textarea.
+ * @prop --tct-textarea-border-top-right-radius: (<length-percentage>) Controls the top-right corner radius of the textarea.
+ * @prop --tct-textarea-border-bottom-right-radius: (<length-percentage>) Controls the bottom-right corner radius of the textarea.
+ * @prop --tct-textarea-border-bottom-left-radius: (<length-percentage>) Controls the bottom-left corner radius of the textarea.
+ * @prop --tct-textarea-box-shadow?: (*) Controls the optional box shadow of the textarea in its default state.
+ * @prop --tct-textarea-min-height: (<length>) Controls the minimum height of the textarea.
+ * @prop --tct-textarea-min-width: (<length>) Controls the minimum width of the textarea.
+ * @prop --tct-textarea-tween: (*) Controls the transition timing of textarea state changes (background, border, etc.).
+ * @prop --tct-textarea-placeholder-font-color: (<color>) Controls the placeholder text color of the textarea.
+ * @prop --tct-textarea-disabled-opacity: (<number>) Controls the opacity of the textarea when disabled.
+ * @prop --tct-textarea-disabled-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea when disabled.
+ * @prop --tct-textarea-hover-background: (<color>) Controls the background color of the textarea on hover.
+ * @prop --tct-textarea-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea on hover.
+ * @prop --tct-textarea-hover-border-color: (<color>) Controls the border color of the textarea on hover.
+ * @prop --tct-textarea-hover-box-shadow: (*) Controls the box shadow of the textarea on hover.
+ * @prop --tct-textarea-hover-ring-color?: (<color>) Controls the optional outer ring color of the textarea hover effect.
+ * @prop --tct-textarea-hover-label-font-color?: (<color>) Controls the optional label text color when the textarea is hovered.
+ * @prop --tct-textarea-focus-background: (<color>) Controls the background color of the textarea on focus.
+ * @prop --tct-textarea-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea on focus.
+ * @prop --tct-textarea-focus-border-color: (<color>) Controls the border color of the textarea on focus.
+ * @prop --tct-textarea-focus-box-shadow: (*) Controls the box shadow of the textarea on focus.
+ * @prop --tct-textarea-focus-label-font-color?: (<color>) Controls the optional label text color when the textarea is focused.
+ * @prop --tct-textarea-error-background: (<color>) Controls the background color of the textarea in the error state.
+ * @prop --tct-textarea-error-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error state.
+ * @prop --tct-textarea-error-border-color: (<color>) Controls the border color of the textarea in the error state.
+ * @prop --tct-textarea-error-box-shadow?: (*) Controls the optional box shadow of the textarea in the error state.
+ * @prop --tct-textarea-error-label-font-color?: (<color>) Controls the optional label text color in the error state.
+ * @prop --tct-textarea-error-focus-background: (<color>) Controls the background color of the textarea in the error+focus state.
+ * @prop --tct-textarea-error-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error+focus state.
+ * @prop --tct-textarea-error-focus-border-color: (<color>) Controls the border color of the textarea in the error+focus state.
+ * @prop --tct-textarea-error-focus-box-shadow: (*) Controls the box shadow of the textarea in the error+focus state.
+ * @prop --tct-textarea-error-focus-label-font-color?: (<color>) Controls the optional label text color in the error+focus state.
+ * @prop --tct-textarea-error-hover-background: (<color>) Controls the background color of the textarea in the error+hover state.
+ * @prop --tct-textarea-error-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the textarea in the error+hover state.
+ * @prop --tct-textarea-error-hover-border-color: (<color>) Controls the border color of the textarea in the error+hover state.
+ * @prop --tct-textarea-error-hover-box-shadow: (*) Controls the box shadow of the textarea in the error+hover state.
+ * @prop --tct-textarea-error-hover-label-font-color?: (<color>) Controls the optional label text color in the error+hover state.
+ * @prop --tct-textarea-label-font-color?: (<color>) Controls the optional text color of the textarea label.
+ * @prop --tct-textarea-label-font-size?: (<length-percentage>) Controls the optional font size of the textarea label.
+ * @prop --tct-textarea-label-font-weight: (<number>) Controls the font weight of the textarea label.
+ * @prop --tct-textarea-label-letter-spacing?: (<length>) Controls the optional letter spacing of the textarea label.
+ * @prop --tct-textarea-label-text-transform?: (<custom-ident>) Controls the optional text transform of the textarea label.
+ * @prop --tct-textarea-label-padding: (<length-percentage>+) Controls the inner padding of the textarea label.
+ * @prop --tct-textarea-label-margin: (<length-percentage>+) Controls the outer margin of the textarea label.
+ * @prop --tct-textarea-label-optional-margin: (<length-percentage>+) Controls the outer margin of the "(optional)" indicator next to the label.
+ * @prop --tct-textarea-label-optional-font-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
+ * @prop --tct-textarea-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
+ * @prop --tct-textarea-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
+ * @prop --tct-textarea-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the textarea.
+ * @prop --tct-textarea-message-box-shadow: (*) Controls the box shadow of the textarea messages container.
+ * @prop --tct-textarea-messages-font-color?: (<color>) Controls the optional text color of the textarea messages container.
+ * @prop --tct-textarea-messages-margin-top: (<length-percentage>) Controls the top margin of the textarea messages container.
+ * @prop --tct-textarea-messages-tween: (*) Controls the transition timing of the textarea messages container.
+ * @prop --tct-textarea-max-length-color: (<color>) Controls the text color of the max-length counter.
+ * @prop --tct-textarea-max-length-font-size: (<length-percentage>) Controls the font size of the max-length counter.
+ * @prop --tct-textarea-resize-btn-background?: (<color>) Controls the optional background color of the resize handle button.
+ * @prop --tct-textarea-resize-btn-height: (<length>) Controls the height of the resize handle button.
+ * @prop --tct-textarea-resize-btn-width: (<length>) Controls the width of the resize handle button.
+ * @prop --tct-textarea-resize-color: (<color>) Controls the stroke color of the resize handle icon.
+ * @prop --tct-textarea-resize-icon-size: (<length>) Controls the size of the resize handle icon.
+ * @prop --tct-textarea-resize-icon-padding: (<length-percentage>) Controls the padding around the resize handle icon.
+ * @prop --tct-textarea-resize-stroke-width: (<number>) Controls the stroke width of the resize handle icon.
+ * @prop --tct-textarea-resize-right: (<length-percentage>) Controls the right offset of the resize handle button.
+ * @prop --tct-textarea-resize-bottom: (<length-percentage>) Controls the bottom offset of the resize handle button.
+ */
 :host {
   --comp-default-textarea-margin: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;

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

@@ -0,0 +1,102 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-textarea label="Memo"></q2-textarea>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'with-value',
+        html: `<q2-textarea label="Memo" value="Some content here"></q2-textarea>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'optional',
+        html: `<q2-textarea label="Memo" optional></q2-textarea>`,
+        states: ['resting'],
+    },
+    {
+        name: 'readonly',
+        html: `<q2-textarea label="Memo" readonly value="Read-only content"></q2-textarea>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'disabled',
+        html: `<q2-textarea label="Memo" disabled value="Disabled content"></q2-textarea>`,
+        states: ['resting'],
+    },
+    {
+        name: 'hide-label',
+        html: `<q2-textarea label="Hidden" hide-label placeholder="Type here..."></q2-textarea>`,
+        states: ['resting'],
+    },
+    {
+        name: 'with-maxlength',
+        html: `<q2-textarea label="Memo" maxlength="200" value="Some content"></q2-textarea>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'with-hints',
+        html: `<q2-textarea label="Memo"></q2-textarea>`,
+        states: ['focus'],
+        setup: 'with-hints',
+    },
+    {
+        name: 'with-errors',
+        html: `<q2-textarea label="Memo"></q2-textarea>`,
+        states: ['resting', 'focus'],
+        setup: 'with-errors',
+    },
+    {
+        name: 'resize-none',
+        html: `<q2-textarea label="Memo" resize="none"></q2-textarea>`,
+        states: ['resting'],
+    },
+    {
+        name: 'rows-custom',
+        html: `<q2-textarea label="Memo" rows="5" value="Line one\nLine two\nLine three"></q2-textarea>`,
+        states: ['resting'],
+    },
+];
+const applySetup = async (page, setup) => {
+    if (!setup)
+        return;
+    if (setup === 'with-hints') {
+        await page.locator('q2-textarea').evaluate((el) => {
+            el.hints = ['This is a helpful hint.', 'Another hint to consider.'];
+        });
+    }
+    else if (setup === 'with-errors') {
+        await page.locator('q2-textarea').evaluate((el) => {
+            el.errors = ['This field is required.', 'Value must be at least 10 characters.'];
+        });
+    }
+};
+const restingCase = (variant, theme) => {
+    test(`q2-textarea--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await applySetup(page, variant.setup);
+        await expect(page).toHaveScreenshot(`q2-textarea--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-textarea--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await applySetup(page, variant.setup);
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-textarea--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-textarea — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-textarea-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-textarea-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-textarea/test/q2-textarea-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 State = 'resting' | 'focus';\ntype Variant = {\n    name: string;\n    html: string;\n    states: State[];\n    /** Optional setup hook to apply array props (errors/hints) after the element is in the DOM. */\n    setup?: 'with-hints' | 'with-errors';\n};\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-textarea label=\"Memo\"></q2-textarea>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'with-value',\n        html: `<q2-textarea label=\"Memo\" value=\"Some content here\"></q2-textarea>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'optional',\n        html: `<q2-textarea label=\"Memo\" optional></q2-textarea>`,\n        states: ['resting'],\n    },\n    {\n        name: 'readonly',\n        html: `<q2-textarea label=\"Memo\" readonly value=\"Read-only content\"></q2-textarea>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'disabled',\n        html: `<q2-textarea label=\"Memo\" disabled value=\"Disabled content\"></q2-textarea>`,\n        states: ['resting'],\n    },\n    {\n        name: 'hide-label',\n        html: `<q2-textarea label=\"Hidden\" hide-label placeholder=\"Type here...\"></q2-textarea>`,\n        states: ['resting'],\n    },\n    {\n        name: 'with-maxlength',\n        html: `<q2-textarea label=\"Memo\" maxlength=\"200\" value=\"Some content\"></q2-textarea>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'with-hints',\n        html: `<q2-textarea label=\"Memo\"></q2-textarea>`,\n        states: ['focus'],\n        setup: 'with-hints',\n    },\n    {\n        name: 'with-errors',\n        html: `<q2-textarea label=\"Memo\"></q2-textarea>`,\n        states: ['resting', 'focus'],\n        setup: 'with-errors',\n    },\n    {\n        name: 'resize-none',\n        html: `<q2-textarea label=\"Memo\" resize=\"none\"></q2-textarea>`,\n        states: ['resting'],\n    },\n    {\n        name: 'rows-custom',\n        html: `<q2-textarea label=\"Memo\" rows=\"5\" value=\"Line one\\nLine two\\nLine three\"></q2-textarea>`,\n        states: ['resting'],\n    },\n];\n\nconst applySetup = async (page: import('@playwright/test').Page, setup?: Variant['setup']) => {\n    if (!setup) return;\n    if (setup === 'with-hints') {\n        await page.locator('q2-textarea').evaluate((el: HTMLElement & { hints: string[] }) => {\n            el.hints = ['This is a helpful hint.', 'Another hint to consider.'];\n        });\n    } else if (setup === 'with-errors') {\n        await page.locator('q2-textarea').evaluate((el: HTMLElement & { errors: string[] }) => {\n            el.errors = ['This field is required.', 'Value must be at least 10 characters.'];\n        });\n    }\n};\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-textarea--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await applySetup(page, variant.setup);\n        await expect(page).toHaveScreenshot(`q2-textarea--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-textarea--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await applySetup(page, variant.setup);\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-textarea--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-textarea — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            if (variant.states.includes('resting')) restingCase(variant, theme);\n            if (variant.states.includes('focus')) focusCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,21 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-toast-background: (<color>) Controls the background color of the toast container.
+ * @prop --tct-toast-text: (<color>) Controls the primary text color of the toast.
+ * @prop --tct-toast-subtle: (<color>) Controls the subtle/secondary text color of the toast (description, footer).
+ * @prop --tct-toast-border: (<color>) Controls the border color of the toast container in its default theme.
+ * @prop --tct-toast-icon-bg: (<color>) Controls the background color of the toast leading icon circle in its default theme.
+ * @prop --tct-toast-shadow: (*) Controls the box shadow of the toast container.
+ * @prop --tct-toast-gap: (<length-percentage>) Controls the gap between the toast header and body.
+ * @prop --tct-toast-padding: (<length-percentage>+) Controls the inner padding of the toast content container.
+ * @prop --tct-toast-padding-small: (<length-percentage>+) Controls the inner padding of the toast content container in the small size.
+ * @prop --tct-toast-footer-gap: (<length-percentage>) Controls the top margin between the toast body and footer.
+ * @prop --tct-toast-footer-spacing: (<length-percentage>) Controls the gap between items within the toast footer.
+ * @prop --tct-toast-actions-gap: (<length-percentage>) Controls the gap between action buttons in the toast footer.
+ * @prop --tct-toast-close-offset: (<length>) Controls the left margin offset of the toast close button.
+ */
 :host {
   display: block;
 }

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

@@ -65,6 +65,22 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-tooltip-background: (<color>) Controls the background color of the tooltip bubble and arrow.
+ * @prop --tct-tooltip-color: (<color>) Controls the text color of the tooltip bubble.
+ * @prop --tct-tooltip-font-size: (<length-percentage>) Controls the font size of the tooltip bubble text.
+ * @prop --tct-tooltip-font-weight: (<number>) Controls the font weight of the tooltip bubble text.
+ * @prop --tct-tooltip-padding: (<length-percentage>+) Controls the inner padding of the tooltip bubble.
+ * @prop --tct-tooltip-border-radius: (<length-percentage>) Controls the corner radius of the tooltip bubble.
+ * @prop --tct-tooltip-arrow-size: (<length>) Controls the size of the tooltip arrow.
+ * @prop --tct-tooltip-offset: (<length-percentage>) Controls the positional offset of the tooltip arrow relative to its target.
+ * @prop --tct-tooltip-body-offset: (<length-percentage>) Controls the positional offset of the tooltip bubble relative to its arrow.
+ * @prop --tct-tooltip-position: (<length-percentage>) Controls the distance the tooltip bubble sits away from its target.
+ * @prop --tct-tooltip-max-width: (<length-percentage>) Controls the maximum width of the tooltip bubble in multiline mode.
+ * @prop --tct-tooltip-transition-duration: (<time>) Controls the show/hide transition duration of the tooltip.
+ * @prop --tct-tooltip-transition-delay: (<time>) Controls the show/hide transition delay of the tooltip.
+ * @prop --tct-tooltip-transition-visible-duration: (<time>) Controls how long the tooltip remains visible after appearing via focus.
+ */
 :host {
   display: inline-block;
 }
@@ -159,6 +175,16 @@ button {
   animation-duration: var(--comp-duration);
   animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));
 }
+.tooltip.has-generic-focus:hover:focus-within:before, .tooltip.has-generic-focus:hover:focus-within:after {
+  animation-name: tooltippedFade;
+  animation-direction: normal;
+  animation-delay: 0ms;
+}
+:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:before, :host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:after {
+  animation-name: tooltippedFade;
+  animation-direction: normal;
+  animation-delay: 0ms;
+}
 .tooltip.has-generic-focus-out:before, .tooltip.has-generic-focus-out:after {
   visibility: visible;
   opacity: 0;
@@ -169,6 +195,11 @@ button {
   animation-direction: reverse;
   animation-duration: var(--comp-duration);
 }
+.tooltip.dismissed:before, .tooltip.dismissed:after {
+  visibility: hidden;
+  opacity: 0;
+  animation-name: none;
+}
 :host([multiline]) .tooltip:after {
   width: max-content;
   max-width: var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));