q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-select/test/q2-select-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 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 OPTIONS_LONG = `
+    <q2-option value="1">Option 1 with a much longer label that will wrap across multiple lines</q2-option>
+    <q2-option value="2">Option 2 with a much longer label that will wrap across multiple lines</q2-option>
+    <q2-option value="3">Option 3</q2-option>
+`;
+const ERRORS = ['This field is required.', 'The value entered is invalid.', 'The value offends me.'];
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-select label="My select" placeholder="Select an option">${OPTIONS}</q2-select>`,
+        states: ['resting', 'focus', 'expanded-option-hover', 'expanded-option-focus'],
+    },
+    {
+        name: 'multiple',
+        html: `<q2-select label="My select" placeholder="Select an option" multiple>${OPTIONS}</q2-select>`,
+        states: ['expanded-option-hover', 'expanded-option-focus'],
+    },
+    {
+        name: 'multiline-options',
+        html: `<q2-select label="My select" placeholder="Select an option" multiline-options>${OPTIONS_LONG}</q2-select>`,
+        states: ['expanded-option-hover', 'expanded-option-focus'],
+    },
+    {
+        name: 'disabled',
+        html: `<q2-select label="My select" placeholder="Select an option" disabled>${OPTIONS}</q2-select>`,
+        states: ['resting'],
+    },
+    {
+        name: 'clearable',
+        html: `<q2-select label="My select" clearable value="2">${OPTIONS}</q2-select>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'errored',
+        html: `<q2-select label="My select" placeholder="Select an option">${OPTIONS}</q2-select>`,
+        states: ['resting'],
+        setup: 'errors',
+    },
+];
+const applySelectSetup = async (page, setup) => {
+    if (!setup)
+        return;
+    await page.evaluate(({ setup, errors }) => {
+        const el = document.querySelector('q2-select');
+        if (setup === 'errors')
+            el.errors = errors;
+    }, { setup, errors: ERRORS });
+};
+const expandSelect = async (page) => {
+    await page.locator('q2-select').click();
+    await page.locator('q2-option[value="1"]').waitFor({ state: 'visible' });
+};
+const setup = (page, variant, theme) => setupPage(page, variant.html, { theme, setupLoc: true }).then(() => applySelectSetup(page, variant.setup));
+const restingCase = (variant, theme) => {
+    test(`q2-select--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-select--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--focus--${theme}.png`);
+    });
+};
+const expandedOptionHoverCase = (variant, theme) => {
+    test(`q2-select--${variant.name}--expanded-option-hover — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await expandSelect(page);
+        await page.locator('q2-option[value="1"]').hover();
+        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--expanded-option-hover--${theme}.png`);
+    });
+};
+// Option focus uses keyboard navigation (click to open, then ArrowDown) so :focus-visible fires.
+const expandedOptionFocusCase = (variant, theme) => {
+    test(`q2-select--${variant.name}--expanded-option-focus — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await expandSelect(page);
+        await page.keyboard.press('ArrowDown');
+        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--expanded-option-focus--${theme}.png`);
+    });
+};
+const CASE_MAP = {
+    resting: restingCase,
+    focus: focusCase,
+    'expanded-option-hover': expandedOptionHoverCase,
+    'expanded-option-focus': expandedOptionFocusCase,
+};
+test.describe('q2-select — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            for (const state of variant.states) {
+                CASE_MAP[state](variant, theme);
+            }
+        }
+    }
+});
+//# sourceMappingURL=q2-select-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-select-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-select/test/q2-select-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, Page } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\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 OPTIONS_LONG = `\n    <q2-option value=\"1\">Option 1 with a much longer label that will wrap across multiple lines</q2-option>\n    <q2-option value=\"2\">Option 2 with a much longer label that will wrap across multiple lines</q2-option>\n    <q2-option value=\"3\">Option 3</q2-option>\n`;\n\ntype Variant = {\n    name: string;\n    html: string;\n    states: Array<'resting' | 'focus' | 'expanded-option-hover' | 'expanded-option-focus'>;\n    // Post-setup hook for props that aren't serializable as attributes (errors)\n    setup?: 'errors';\n};\n\nconst ERRORS = ['This field is required.', 'The value entered is invalid.', 'The value offends me.'];\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-select label=\"My select\" placeholder=\"Select an option\">${OPTIONS}</q2-select>`,\n        states: ['resting', 'focus', 'expanded-option-hover', 'expanded-option-focus'],\n    },\n    {\n        name: 'multiple',\n        html: `<q2-select label=\"My select\" placeholder=\"Select an option\" multiple>${OPTIONS}</q2-select>`,\n        states: ['expanded-option-hover', 'expanded-option-focus'],\n    },\n    {\n        name: 'multiline-options',\n        html: `<q2-select label=\"My select\" placeholder=\"Select an option\" multiline-options>${OPTIONS_LONG}</q2-select>`,\n        states: ['expanded-option-hover', 'expanded-option-focus'],\n    },\n    {\n        name: 'disabled',\n        html: `<q2-select label=\"My select\" placeholder=\"Select an option\" disabled>${OPTIONS}</q2-select>`,\n        states: ['resting'],\n    },\n    {\n        name: 'clearable',\n        html: `<q2-select label=\"My select\" clearable value=\"2\">${OPTIONS}</q2-select>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'errored',\n        html: `<q2-select label=\"My select\" placeholder=\"Select an option\">${OPTIONS}</q2-select>`,\n        states: ['resting'],\n        setup: 'errors',\n    },\n];\n\nconst applySelectSetup = async (page: Page, setup?: 'errors') => {\n    if (!setup) return;\n    await page.evaluate(\n        ({ setup, errors }) => {\n            const el = document.querySelector('q2-select') as HTMLElement & { errors?: string[] };\n            if (setup === 'errors') el.errors = errors;\n        },\n        { setup, errors: ERRORS }\n    );\n};\n\nconst expandSelect = async (page: Page) => {\n    await page.locator('q2-select').click();\n    await page.locator('q2-option[value=\"1\"]').waitFor({ state: 'visible' });\n};\n\nconst setup = (page: Page, variant: Variant, theme: Theme) =>\n    setupPage(page, variant.html, { theme, setupLoc: true }).then(() => applySelectSetup(page, variant.setup));\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-select--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setup(page, variant, theme);\n        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-select--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setup(page, variant, theme);\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst expandedOptionHoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-select--${variant.name}--expanded-option-hover — ${theme}`, async ({ page }) => {\n        await setup(page, variant, theme);\n        await expandSelect(page);\n        await page.locator('q2-option[value=\"1\"]').hover();\n        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--expanded-option-hover--${theme}.png`);\n    });\n};\n\n// Option focus uses keyboard navigation (click to open, then ArrowDown) so :focus-visible fires.\nconst expandedOptionFocusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-select--${variant.name}--expanded-option-focus — ${theme}`, async ({ page }) => {\n        await setup(page, variant, theme);\n        await expandSelect(page);\n        await page.keyboard.press('ArrowDown');\n        await expect(page).toHaveScreenshot(`q2-select--${variant.name}--expanded-option-focus--${theme}.png`);\n    });\n};\n\nconst CASE_MAP = {\n    resting: restingCase,\n    focus: focusCase,\n    'expanded-option-hover': expandedOptionHoverCase,\n    'expanded-option-focus': expandedOptionFocusCase,\n} as const;\n\ntest.describe('q2-select — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            for (const state of variant.states) {\n                CASE_MAP[state](variant, theme);\n            }\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,42 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-stepper-min-height: (<length>) Controls the minimum height of each step list item.
+ * @prop --tct-stepper-list-padding: (<length-percentage>+) Controls the inner padding of the step list.
+ * @prop --tct-stepper-step-width: (<length>) Controls the width of each step within the list.
+ * @prop --tct-stepper-step-gap: (<length-percentage>) Controls the gap between adjacent steps.
+ * @prop --tct-stepper-tween: (*) Controls the transition timing for stepper animations.
+ * @prop --tct-stepper-scroll-arrow-color: (<color>) Controls the stroke color of the scroll arrow icons.
+ * @prop --tct-stepper-btn-border-radius?: (<length-percentage>) Controls the optional corner radius of the step button.
+ * @prop --tct-stepper-btn-focus-visible-box-shadow: (*) Controls the box shadow of the step button when focused via keyboard.
+ * @prop --tct-stepper-btn-icon-size: (<length>) Controls the size of the step bullet icon.
+ * @prop --tct-stepper-btn-icon-visibility: (<custom-ident>) Controls the visibility of the step bullet icons.
+ * @prop --tct-stepper-btn-gap: (<length-percentage>) Controls the gap between the step bullet and the step label.
+ * @prop --tct-stepper-btn-label-font-size: (<length-percentage>) Controls the font size of the step bullet text.
+ * @prop --tct-stepper-active-font-weight: (<number>) Controls the font weight applied to active step labels.
+ * @prop --tct-stepper-bullet-active-background: (<color>) Controls the background color of the active step bullet.
+ * @prop --tct-stepper-bullet-active-font-color: (<color>) Controls the text color inside the active step bullet.
+ * @prop --tct-stepper-bullet-active-font-weight: (<number>) Controls the font weight inside the active step bullet when selected.
+ * @prop --tct-stepper-bullet-active-divider-color: (<color>) Controls the color of the divider line between the active step and adjacent steps.
+ * @prop --tct-stepper-bullet-active-box-shadow: (*) Controls the box shadow of the selected step bullet.
+ * @prop --tct-stepper-bullet-complete-box-shadow: (*) Controls the box shadow of completed step bullets.
+ * @prop --tct-stepper-bullet-error-box-shadow: (*) Controls the box shadow of step bullets in the error state.
+ * @prop --tct-stepper-bullet-inactive-background: (<color>) Controls the background color of inactive step bullets.
+ * @prop --tct-stepper-bullet-inactive-font-color: (<color>) Controls the text color inside inactive step bullets.
+ * @prop --tct-stepper-bullet-disabled-background: (<color>) Controls the background color of disabled step bullets.
+ * @prop --tct-stepper-bullet-disabled-font-color: (<color>) Controls the text color inside disabled step bullets.
+ * @prop --tct-stepper-bullet-disabled-divider-color: (<color>) Controls the color of the divider line adjacent to disabled steps.
+ * @prop --tct-stepper-bullet-disabled-box-shadow?: (*) Controls the optional box shadow of disabled step bullets.
+ * @prop --tct-stepper-label-color: (<color>) Controls the text color of step labels.
+ * @prop --tct-stepper-label-font-size: (<length-percentage>) Controls the font size of step labels.
+ * @prop --tct-stepper-label-font-weight: (<number>) Controls the font weight of step labels.
+ * @prop --tct-stepper-label-line-height: (<number> | <length-percentage>) Controls the line height of step labels.
+ * @prop --tct-stepper-label-line-count: (<integer>) Controls the maximum number of lines for the step label before clamping.
+ * @prop --tct-stepper-description-color: (<color>) Controls the text color of step descriptions.
+ * @prop --tct-stepper-description-font-size: (<length-percentage>) Controls the font size of step descriptions.
+ * @prop --tct-stepper-description-line-count: (<integer>) Controls the maximum number of lines for the step description before clamping.
+ */
 :host {
   display: block;
   position: relative;

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

@@ -280,7 +280,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: '860f07cdd262a6b6710864c1e7fb977cd6c2aeda' }, h("div", { key: 'a77509faf317305acd39cf6ff8e4fac153b68208', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'e77c847ebb1f29b188d8bf0169edfeff45c80a00' }, h("div", { key: '7ccd141727448a90c00dc605add06333ef3d4a44', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '4daefeb015ad3d7556cf0db26355c15c2d710c98', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '874809c160bef85f7cd4b8876d6d32bd17c2d2ae', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '2aecd51118a8523b6a78a1cd4816d68a235cbb03', type: "chevron-left" })), h("q2-btn", { key: '78ed0c8b483ef82a7ff09a129ad728722813e8fc', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'a1641d530c74285bc7e36e3b43a8a37a4292ccba', type: "chevron-right" })))), h("ul", { key: '3f7359edc49e615acc1eb9296537f5eb27fea68b', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'c54a3fa9a910a5bf16e8fa0622c8b81d1631c38b', role: "list" }, h("slot", { key: 'f58510d079329d251e6c92bdee54151cdee699bf', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '34233b3c925a12fbedfc3922a2cedc9686fce462' }, h("div", { key: '10e2762661ebb376975f414b70959a8db4105e4f', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'b34df8429791cc81f709fb09a4f2f30f6de93ba8' }, h("div", { key: '0eea730d963032c238beb5563164c92818c2d4c4', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '5df60884494a4fb1b5466fe7e46a9f3d7ce1c183', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'af0e916faec0f3bae4f2296875bc362529d363f5', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'f657b0533d9fe9fac814560387f04a4ff205362f', type: "chevron-left" })), h("q2-btn", { key: 'a227eee9a8e5a872e0e8cb60e27e03ddc71110fc', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '399596fd1b63e1ffad02e0708f2a7167296f54ac', type: "chevron-right" })))), h("ul", { key: '8d57f0ed69b880eb8d7125a8002f80d3861a7df6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '72cf5bfc72de940d5847a3febd4837cc4075e84f', role: "list" }, h("slot", { key: 'b8a9d655a307712bceb369be2c00971103fbb94e', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,86 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const PANE = (label, body = 'Pane content') => `
+    <q2-stepper-pane label="${label}">${body}</q2-stepper-pane>
+`;
+const PANES_3 = `${PANE('Step 1')}${PANE('Step 2')}${PANE('Step 3')}`;
+const PANES_5 = `${PANE('Step 1')}${PANE('Step 2')}${PANE('Step 3')}${PANE('Step 4')}${PANE('Step 5')}`;
+const PANE_DESC = (label, description) => `
+    <q2-stepper-pane label="${label}" description="${description}">Pane content</q2-stepper-pane>
+`;
+const PANES_DESC = `
+    ${PANE_DESC('Step 1', '1 of 3 steps')}
+    ${PANE_DESC('Step 2', '2 of 3 steps')}
+    ${PANE_DESC('Step 3', '3 of 3 steps')}
+`;
+const VARIANTS = [
+    {
+        name: 'step-1-of-3',
+        html: `<q2-stepper current-step="1">${PANES_3}</q2-stepper>`,
+        states: ['resting'],
+    },
+    {
+        name: 'step-2-of-3',
+        html: `<q2-stepper current-step="2">${PANES_3}</q2-stepper>`,
+        states: ['resting'],
+    },
+    {
+        name: 'step-3-of-3',
+        html: `<q2-stepper current-step="3">${PANES_3}</q2-stepper>`,
+        states: ['resting'],
+    },
+    {
+        name: 'last-enabled-step',
+        html: `<q2-stepper current-step="2" last-enabled-step="4">${PANES_5}</q2-stepper>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'with-descriptions',
+        html: `<q2-stepper current-step="2">${PANES_DESC}</q2-stepper>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-stepper--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-stepper--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-stepper--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        // Step buttons live in q2-stepper's shadow root; hover the third one.
+        const box = await page.locator('q2-stepper').evaluate((el) => {
+            var _a;
+            const btns = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button');
+            if (!btns || btns.length < 3)
+                throw new Error('q2-stepper step buttons not found in shadow DOM');
+            const r = btns[2].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-stepper--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-stepper--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-stepper--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-stepper — 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-stepper-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-stepper-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-stepper/test/q2-stepper-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 PANE = (label: string, body: string = 'Pane content') => `\n    <q2-stepper-pane label=\"${label}\">${body}</q2-stepper-pane>\n`;\n\nconst PANES_3 = `${PANE('Step 1')}${PANE('Step 2')}${PANE('Step 3')}`;\nconst PANES_5 = `${PANE('Step 1')}${PANE('Step 2')}${PANE('Step 3')}${PANE('Step 4')}${PANE('Step 5')}`;\n\nconst PANE_DESC = (label: string, description: string) => `\n    <q2-stepper-pane label=\"${label}\" description=\"${description}\">Pane content</q2-stepper-pane>\n`;\n\nconst PANES_DESC = `\n    ${PANE_DESC('Step 1', '1 of 3 steps')}\n    ${PANE_DESC('Step 2', '2 of 3 steps')}\n    ${PANE_DESC('Step 3', '3 of 3 steps')}\n`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'step-1-of-3',\n        html: `<q2-stepper current-step=\"1\">${PANES_3}</q2-stepper>`,\n        states: ['resting'],\n    },\n    {\n        name: 'step-2-of-3',\n        html: `<q2-stepper current-step=\"2\">${PANES_3}</q2-stepper>`,\n        states: ['resting'],\n    },\n    {\n        name: 'step-3-of-3',\n        html: `<q2-stepper current-step=\"3\">${PANES_3}</q2-stepper>`,\n        states: ['resting'],\n    },\n    {\n        name: 'last-enabled-step',\n        html: `<q2-stepper current-step=\"2\" last-enabled-step=\"4\">${PANES_5}</q2-stepper>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'with-descriptions',\n        html: `<q2-stepper current-step=\"2\">${PANES_DESC}</q2-stepper>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-stepper--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        // Step buttons live in q2-stepper's shadow root; hover the third one.\n        const box = await page.locator('q2-stepper').evaluate((el: HTMLElement) => {\n            const btns = el.shadowRoot?.querySelectorAll<HTMLButtonElement>('button');\n            if (!btns || btns.length < 3) throw new Error('q2-stepper step buttons not found in shadow DOM');\n            const r = btns[2].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-stepper--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper--${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-stepper--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-stepper — 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-stepper-pane/q2-stepper-pane.js

@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '390b7605500bc2f04851fbae962543c92f8b9bb4', role: "listitem" }, h(Fragment, { key: 'a4835085304254d9b9c390c9bee29b67f6e9e1c4' }, h("div", { key: '0a8500ab3d69e3b43945451d9b3b310a05e2d67a', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '3b0622f4661ce6d3737580244dccb33c648238b3' })), h("div", { key: 'a1ffd3ac9ecedc149bf8da797bafd76dc4c8b3e7', hidden: true }, h("slot", { key: '437c72da16cd6e8f4c216f6a0e3255b45f3853b4', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: 'b8c9d86ffd8ede0a8203aea50eb175beee077f6a', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: 'aac91a3bc78567b297f930b5c61178d9d04381bf', name: "children" }))));
+        return (h(Host, { key: '2b2d2ec65ab23f005a4e648e0afc7a90b0530caa', role: "listitem" }, h(Fragment, { key: 'e90487511e6d10527cff42673ebdd46650523069' }, h("div", { key: 'a96a140d38a8a7a01afbc448cb8f7d5d1fa79397', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '379b2102390641f92864a848ffbcefcea5deac11' })), h("div", { key: '4b00ef58d54afa7b011a22fec7a3fa7cb04f387c', hidden: true }, h("slot", { key: '7d4896c01b27561fc5e1f46a8c3b81dd9c35477c', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '1403e0718cedb039ee33ba01df91e288b7464730', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '0d95f987e005b73343ffe8bb38ba86c2671efb1d', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.css

@@ -65,6 +65,37 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-stepper-vertical-layout-gap: (<length-percentage>) Controls the gap between the step list and step content columns.
+ * @prop --tct-stepper-vertical-list-width: (<length-percentage>) Controls the width of the step list column.
+ * @prop --tct-stepper-vertical-tween: (*) Controls the transition timing for vertical stepper animations.
+ * @prop --tct-stepper-vertical-spacer-height: (<length>) Controls the height of the spacer between sibling step groups.
+ * @prop --tct-stepper-vertical-bullet-active-background: (<color>) Controls the background color of the active step bullet.
+ * @prop --tct-stepper-vertical-label-color: (<color>) Controls the text color of the step label in its default state.
+ * @prop --tct-stepper-vertical-description-color: (<color>) Controls the text color of the step description.
+ * @prop --tct-stepper-vertical-description-font-size: (<length-percentage>) Controls the font size of the step description.
+ * @prop --tct-stepper-vertical-btn-height: (<length>) Controls the minimum height of the top-level step button.
+ * @prop --tct-stepper-vertical-btn-font-size: (<length-percentage>) Controls the font size of the top-level step button.
+ * @prop --tct-stepper-vertical-btn-label-font-size: (<length-percentage>) Controls the font size of the step button label text.
+ * @prop --tct-stepper-vertical-btn-active-font-weight: (<number>) Controls the font weight of the step label when the step is selected.
+ * @prop --tct-stepper-vertical-btn-locked-color: (<color>) Controls the text color of the step label when the step is locked or disabled.
+ * @prop --tct-stepper-vertical-btn-text-align: (<custom-ident>) Controls the text alignment of the step button content.
+ * @prop --tct-stepper-vertical-btn-gap: (<length-percentage>) Controls the gap between the step icon and step label.
+ * @prop --tct-stepper-vertical-btn-icon-size: (<length>) Controls the size of the top-level step icon.
+ * @prop --tct-stepper-vertical-btn-icon-visibility: (<custom-ident>) Controls the visibility of the step icons.
+ * @prop --tct-stepper-vertical-child-btn-height: (<length>) Controls the minimum height of child step buttons.
+ * @prop --tct-stepper-vertical-child-btn-font-size: (<length-percentage>) Controls the font size of child step buttons.
+ * @prop --tct-stepper-vertical-child-btn-label-font-size: (<length-percentage>) Controls the font size of child step button labels.
+ * @prop --tct-stepper-vertical-child-btn-icon-size: (<length>) Controls the size of child step icons.
+ * @prop --tct-stepper-vertical-child-btn-left-padding: (<length-percentage>) Controls the left padding of child step buttons.
+ * @prop --tct-stepper-vertical-child-btn-left-border-style: (<custom-ident>) Controls the left border style of child step buttons.
+ * @prop --tct-stepper-vertical-child-btn-left-border-width: (<length>) Controls the left border width of child step buttons.
+ * @prop --tct-stepper-vertical-child-border-color: (<color>) Controls the color of the connecting border between child steps.
+ * @prop --tct-stepper-vertical-child-border-style: (<custom-ident>) Controls the style of the connecting border between child steps.
+ * @prop --tct-stepper-vertical-child-border-width: (<length>) Controls the width of the connecting border between child steps.
+ * @prop --tct-stepper-vertical-step-focus-visible-border-radius?: (<length-percentage>) Controls the optional corner radius applied to the step button when focused via keyboard.
+ * @prop --tct-stepper-vertical-step-focus-visible-box-shadow: (*) Controls the box shadow applied to the step button when focused via keyboard.
+ */
 :host {
   display: grid;
   grid-template-columns: var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js

@@ -296,7 +296,7 @@ export class Q2StepperVertical {
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: 'a790b8dd9980fb56e96b103dbb52b89df222e349' }, h("ul", { key: '25b087f9746601005b9591139f2c13387c75f76a', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'ee1b1f825884fde53c3975c66c60523b28fb87c7', role: "list" }, h("slot", { key: '27b316593c07cd178d0d46f6cc4531ab3a7e89ec' }))));
+        return (h(Fragment, { key: 'b74806bb316b43d35b187507dd784c91ecd9d145' }, h("ul", { key: 'fc2bbe45f3001f32a0d43819aa1e6d6bab24864d', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'f9a80a02cade13ddf7ddbc4bc5f60d0b7dd6ebb1', role: "list" }, h("slot", { key: 'ff6ea3a8a330c204aedd87f77c6cc7eda8bdbdb9' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper-vertical/test/q2-stepper-vertical-test.vr.js

@@ -0,0 +1,97 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const DEFAULT_PANES = `
+    <q2-stepper-pane label="Step 1" id="step-1">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Step 2" id="step-2">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Step 3" id="step-3">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Step 4" id="step-4">Pane content</q2-stepper-pane>
+`;
+const MIXED_STATUS_PANES = `
+    <q2-stepper-pane label="Completed step" id="s1" status="complete">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Error step" id="s2" status="error">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Active step" id="s3">Pane content</q2-stepper-pane>
+    <q2-stepper-pane label="Locked step" id="s4" status="locked">Pane content</q2-stepper-pane>
+`;
+const DESC_PANES = `
+    <q2-stepper-pane label="Start here" id="s1" description="A completed step" status="complete">Content</q2-stepper-pane>
+    <q2-stepper-pane label="Continue" id="s2" description="The active step">Content</q2-stepper-pane>
+    <q2-stepper-pane label="Finish" id="s3" description="The final step">Content</q2-stepper-pane>
+`;
+const NESTED_PANES = `
+    <q2-stepper-pane label="Step 1" id="s1" status="complete">Content</q2-stepper-pane>
+    <q2-stepper-pane label="Parent step" id="parent">
+        <q2-stepper-pane label="Child A" id="child-a" status="complete">Content</q2-stepper-pane>
+        <q2-stepper-pane label="Child B" id="child-b">Content</q2-stepper-pane>
+        <q2-stepper-pane label="Child C" id="child-c">Content</q2-stepper-pane>
+    </q2-stepper-pane>
+    <q2-stepper-pane label="Final step" id="s3">Content</q2-stepper-pane>
+`;
+const SHOW_WITH_CHILDREN_PANES = `
+    <q2-stepper-pane label="Step 1" id="s1" status="complete">Content</q2-stepper-pane>
+    <q2-stepper-pane label="Parent step" id="parent" show-with-children>
+        <q2-stepper-pane label="Child A" id="child-a">Content</q2-stepper-pane>
+        <q2-stepper-pane label="Child B" id="child-b">Content</q2-stepper-pane>
+    </q2-stepper-pane>
+`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-stepper-vertical current-step-id="step-2">${DEFAULT_PANES}</q2-stepper-vertical>`,
+        states: ['resting'],
+    },
+    {
+        name: 'mixed-statuses',
+        html: `<q2-stepper-vertical current-step-id="s3">${MIXED_STATUS_PANES}</q2-stepper-vertical>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'with-descriptions',
+        html: `<q2-stepper-vertical current-step-id="s2">${DESC_PANES}</q2-stepper-vertical>`,
+        states: ['resting'],
+    },
+    {
+        name: 'with-children',
+        html: `<q2-stepper-vertical current-step-id="child-b">${NESTED_PANES}</q2-stepper-vertical>`,
+        states: ['resting'],
+    },
+    {
+        name: 'show-with-children',
+        html: `<q2-stepper-vertical current-step-id="child-a">${SHOW_WITH_CHILDREN_PANES}</q2-stepper-vertical>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-stepper-vertical--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-stepper-vertical--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        // Hover the third pane (the active default-status pane in the mixed-statuses variant).
+        await page.locator('q2-stepper-vertical > q2-stepper-pane').nth(2).hover();
+        await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-stepper-vertical--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-stepper-vertical — 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-stepper-vertical-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-stepper-vertical-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-stepper-vertical/test/q2-stepper-vertical-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 DEFAULT_PANES = `\n    <q2-stepper-pane label=\"Step 1\" id=\"step-1\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Step 2\" id=\"step-2\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Step 3\" id=\"step-3\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Step 4\" id=\"step-4\">Pane content</q2-stepper-pane>\n`;\n\nconst MIXED_STATUS_PANES = `\n    <q2-stepper-pane label=\"Completed step\" id=\"s1\" status=\"complete\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Error step\" id=\"s2\" status=\"error\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Active step\" id=\"s3\">Pane content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Locked step\" id=\"s4\" status=\"locked\">Pane content</q2-stepper-pane>\n`;\n\nconst DESC_PANES = `\n    <q2-stepper-pane label=\"Start here\" id=\"s1\" description=\"A completed step\" status=\"complete\">Content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Continue\" id=\"s2\" description=\"The active step\">Content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Finish\" id=\"s3\" description=\"The final step\">Content</q2-stepper-pane>\n`;\n\nconst NESTED_PANES = `\n    <q2-stepper-pane label=\"Step 1\" id=\"s1\" status=\"complete\">Content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Parent step\" id=\"parent\">\n        <q2-stepper-pane label=\"Child A\" id=\"child-a\" status=\"complete\">Content</q2-stepper-pane>\n        <q2-stepper-pane label=\"Child B\" id=\"child-b\">Content</q2-stepper-pane>\n        <q2-stepper-pane label=\"Child C\" id=\"child-c\">Content</q2-stepper-pane>\n    </q2-stepper-pane>\n    <q2-stepper-pane label=\"Final step\" id=\"s3\">Content</q2-stepper-pane>\n`;\n\nconst SHOW_WITH_CHILDREN_PANES = `\n    <q2-stepper-pane label=\"Step 1\" id=\"s1\" status=\"complete\">Content</q2-stepper-pane>\n    <q2-stepper-pane label=\"Parent step\" id=\"parent\" show-with-children>\n        <q2-stepper-pane label=\"Child A\" id=\"child-a\">Content</q2-stepper-pane>\n        <q2-stepper-pane label=\"Child B\" id=\"child-b\">Content</q2-stepper-pane>\n    </q2-stepper-pane>\n`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-stepper-vertical current-step-id=\"step-2\">${DEFAULT_PANES}</q2-stepper-vertical>`,\n        states: ['resting'],\n    },\n    {\n        name: 'mixed-statuses',\n        html: `<q2-stepper-vertical current-step-id=\"s3\">${MIXED_STATUS_PANES}</q2-stepper-vertical>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'with-descriptions',\n        html: `<q2-stepper-vertical current-step-id=\"s2\">${DESC_PANES}</q2-stepper-vertical>`,\n        states: ['resting'],\n    },\n    {\n        name: 'with-children',\n        html: `<q2-stepper-vertical current-step-id=\"child-b\">${NESTED_PANES}</q2-stepper-vertical>`,\n        states: ['resting'],\n    },\n    {\n        name: 'show-with-children',\n        html: `<q2-stepper-vertical current-step-id=\"child-a\">${SHOW_WITH_CHILDREN_PANES}</q2-stepper-vertical>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper-vertical--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper-vertical--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        // Hover the third pane (the active default-status pane in the mixed-statuses variant).\n        await page.locator('q2-stepper-vertical > q2-stepper-pane').nth(2).hover();\n        await expect(page).toHaveScreenshot(`q2-stepper-vertical--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-stepper-vertical--${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-stepper-vertical--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-stepper-vertical — 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-container/q2-tab-container.css

@@ -65,6 +65,44 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-tab-container-padding: (<length-percentage>+) Controls the inner padding of the tab container list.
+ * @prop --tct-tab-container-margin?: (<length-percentage>+) Controls the optional outer margin of the tab container list.
+ * @prop --tct-tab-container-border-width: (<length>+) Controls the bottom border width of the tab container list.
+ * @prop --tct-tab-container-border-style: (<custom-ident>) Controls the bottom border style of the tab container list.
+ * @prop --tct-tab-container-border-color: (<color>) Controls the bottom border color of the tab container list.
+ * @prop --tct-tab-container-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area.
+ * @prop --tct-tab-container-content-backgrond?: (<color>) Controls the optional background color of the tab content area.
+ * @prop --tct-tab-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area when --tct-tab-container-content-padding is not set.
+ * @prop --tct-tab-focus-visible-box-shadow: (*) Controls the box shadow of a tab button when focused via keyboard.
+ * @prop --tct-tab-gap: (<length-percentage>) Controls the gap between adjacent tab buttons.
+ * @prop --tct-tab-width: (<length-percentage>) Controls the width of inactive tab buttons.
+ * @prop --tct-tab-padding: (<length-percentage>+) Controls the inner padding of tab buttons.
+ * @prop --tct-tab-text-align: (<custom-ident>) Controls the text alignment within tab buttons.
+ * @prop --tct-tab-text-decoration?: (<custom-ident>) Controls the optional text decoration of inactive tab buttons.
+ * @prop --tct-tab-font-size: (<length-percentage>) Controls the font size of tab button text.
+ * @prop --tct-tab-line-height: (<number> | <length-percentage>) Controls the line height of tab button text.
+ * @prop --tct-tab-border-radius?: (<length-percentage>) Controls the optional corner radius of tab buttons.
+ * @prop --tct-tab-inactive-color?: (<color>) Controls the optional text color of inactive tab buttons.
+ * @prop --tct-tab-inactive-background?: (<color>) Controls the optional background color of inactive tab buttons.
+ * @prop --tct-tab-inactive-border-color?: (<color>) Controls the optional border color of inactive tab buttons.
+ * @prop --tct-tab-inactive-border-style: (<custom-ident>) Controls the border style of inactive tab buttons.
+ * @prop --tct-tab-inactive-border-width: (<length>+) Controls the border width of inactive tab buttons.
+ * @prop --tct-tab-hover-color: (<color>) Controls the text color of tab buttons on hover.
+ * @prop --tct-tab-hover-background?: (<color>) Controls the optional background color of tab buttons on hover.
+ * @prop --tct-tab-hover-width: (<length-percentage>) Controls the width of tab buttons on hover.
+ * @prop --tct-tab-active-color: (<color>) Controls the text color of the active tab button.
+ * @prop --tct-tab-active-background?: (<color>) Controls the optional background color of the active tab button.
+ * @prop --tct-tab-active-border-color: (<color>) Controls the border color of the active tab button.
+ * @prop --tct-tab-active-border-style: (<custom-ident>) Controls the border style of the active tab button.
+ * @prop --tct-tab-active-text-decoration?: (<custom-ident>) Controls the optional text decoration of the active tab button.
+ * @prop --tct-tab-active-width: (<length-percentage>) Controls the width of the active tab button.
+ * @prop --tct-tab-alt-active-color?: (<color>) Controls the optional text color of the active tab button when color="alt".
+ * @prop --tct-tab-alt-inactive-color?: (<color>) Controls the optional text color of inactive tab buttons when color="alt".
+ * @prop --tct-tab-section-padding: (<length-percentage>+) Controls the inner padding of tab buttons when type="section".
+ * @prop --tct-tab-section-font-size: (<length-percentage>) Controls the font size of tab buttons when type="section".
+ * @prop --tct-tab-section-line-height: (<number> | <length-percentage>) Controls the line height of tab buttons when type="section".
+ */
 :host {
   display: block;
   position: relative;

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

@@ -266,7 +266,7 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: 'c5efef8307eeed7d15fa97b5a9047f4fc3ceae35' }, h("div", { key: '55200a6028630d7e70f116ace930a09820c096ce', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'c4b8b65a9a4309d5e64a7e25532d63a9d5f6c94a' }, h("div", { key: '8696d2ac259cf64e45f9b709a1ff803efb05c628', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '9dec12e80440127cf874ff19c409fdd431acaad6', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '5e5da65b962028501f8d2f81d23982ff9bbcab93', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '10647cdbf45e406fd74521657db1d54d896edbcf', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'be6a46650c0e1b465589a1aeacf57ca54d19ddcf', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'fa5f6c394e07b52dd6ec84d161d395d9f09bac75', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '187492abc7df25789f0caef9afa6c8c9532b3a06', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '5d703304c29dbbb30264f23b2596ea9f872a15f4', class: "tab-content" }, h("slot", { key: '8d3a5a5b7df932e558fbed17c87a6e8365b51516', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '16187eefd602ce118d150287bc8fcac139d73ac0' }, h("div", { key: '14e00ef9c5d3fadbaae3f424a8bae7121276ad70', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '12c710d0e0a13952c97105a396434cf7cba72845' }, h("div", { key: '8b21adb9b139fa95c4448cc5d13fe13052b1b692', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '5ad7e3da6fcc47508b74a3f2c0207a0b9ba50e51', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'f6a5748de11988791e3c0fc7e981a841c452fde7', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '1862e33ad014a187d9e4061bd8fb13eb90ea85ae', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '0d45040890928446450d372182293350a7a45bb8', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '856ce61ef014fea06abd60d855aa5cff6dfb90b8', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '16e31f57ca849a1ee004932b5bec7b293dc791cf', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '67768f102c97303cd79f4f229b0c139dc5d6458d', class: "tab-content" }, h("slot", { key: '9dc9d71d0126502c5465da730ea6615a45d6a3f4', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }