q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -65,6 +65,54 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-radio-margin: (<length-percentage>+) Controls the outer margin of the radio container.
+ * @prop --tct-radio-transition: (*) Controls the transition timing of radio state changes.
+ * @prop --tct-radio-stroke-width: (<number>) Controls the stroke width of the radio circles in the default state.
+ * @prop --tct-radio-stroke-color: (<color>) Controls the stroke color of the radio circles in the default state.
+ * @prop --tct-radio-background-fill?: (<color>) Controls the optional background fill of the radio in the default state.
+ * @prop --tct-radio-background-stroke: (<color>) Controls the stroke color of the radio in the default state.
+ * @prop --tct-radio-background-stroke-width: (<number>) Controls the stroke width of the radio in the default state.
+ * @prop --tct-radio-background-transition: (*) Controls the transition timing applied to the radio fill.
+ * @prop --tct-radio-box-shadow?: (*) Controls the optional box shadow of the radio.
+ * @prop --tct-radio-box-shadow-focus-visible: (*) Controls the box shadow of the radio when focused via keyboard.
+ * @prop --tct-radio-select-fill-default?: (<color>) Controls the optional inner-circle fill in the default state.
+ * @prop --tct-radio-select-fill-checked: (<color>) Controls the inner-circle fill when the radio is checked.
+ * @prop --tct-radio-checked-fill: (<color>) Controls the inner-circle fill when the radio is checked (legacy alias).
+ * @prop --tct-radio-checked-background-fill?: (<color>) Controls the optional background fill when the radio is checked.
+ * @prop --tct-radio-checked-stroke-color: (<color>) Controls the stroke color when the radio is checked.
+ * @prop --tct-radio-selected-fill-active: (<color>) Controls the inner-circle fill when the radio is active.
+ * @prop --tct-radio-background-fill-active?: (<color>) Controls the optional background fill when the radio is active.
+ * @prop --tct-radio-background-stroke-active: (<color>) Controls the stroke color when the radio is active.
+ * @prop --tct-radio-hover-background-fill?: (<color>) Controls the optional background fill when the radio is hovered.
+ * @prop --tct-radio-hover-stroke-color: (<color>) Controls the stroke color when the radio is hovered.
+ * @prop --tct-radio-hover-label-color?: (<color>) Controls the optional label text color when the radio is hovered.
+ * @prop --tct-radio-focus-background-fill?: (<color>) Controls the optional background fill when the radio is focused.
+ * @prop --tct-radio-focus-stroke-color: (<color>) Controls the stroke color when the radio is focused.
+ * @prop --tct-radio-focus-label-color?: (<color>) Controls the optional label text color when the radio is focused.
+ * @prop --tct-radio-label-color-active?: (<color>) Controls the optional label text color when the radio is active.
+ * @prop --tct-radio-label-font-color?: (<color>) Controls the optional label text color in the default state.
+ * @prop --tct-radio-label-font-color-checked?: (<color>) Controls the optional label text color when the radio is checked.
+ * @prop --tct-radio-checked-label-font-color?: (<color>) Controls the optional label text color when the radio is checked (legacy alias).
+ * @prop --tct-radio-label-font-size: (<length-percentage>) Controls the font size of the radio label.
+ * @prop --tct-radio-label-font-weight: (<number>) Controls the font weight of the radio label.
+ * @prop --tct-radio-font-weight: (<number>) Controls the font weight of the radio label (legacy alias).
+ * @prop --tct-radio-label-font-weight-active: (<number>) Controls the label font weight when the radio is active.
+ * @prop --tct-radio-label-font-weight-checked: (<number>) Controls the label font weight when the radio is checked.
+ * @prop --tct-radio-checked-label-font-weight: (<number>) Controls the label font weight when the radio is checked (legacy alias).
+ * @prop --tct-radio-label-letter-spacing: (<length>) Controls the letter spacing of the radio label.
+ * @prop --tct-radio-label-letter-spacing-active: (<length>) Controls the label letter spacing when the radio is active.
+ * @prop --tct-radio-label-letter-spacing-checked: (<length>) Controls the label letter spacing when the radio is checked.
+ * @prop --tct-radio-checked-label-letter-spacing: (<length>) Controls the label letter spacing when the radio is checked (legacy alias).
+ * @prop --tct-radio-label-gap: (<length-percentage>) Controls the gap between the radio circle and label content.
+ * @prop --tct-radio-label-margin-right: (<length-percentage>) Controls the right margin of the radio label.
+ * @prop --tct-radio-hidden-columns: (*) Controls the grid-template-columns when the label is visually hidden.
+ * @prop --tct-radio-tile-border-radius: (<length-percentage>) Controls the corner radius of the radio tile.
+ * @prop --tct-radio-tile-label-font-size: (<length-percentage>) Controls the font size of the radio tile label.
+ * @prop --tct-radio-tile-checked-stroke-color: (<color>) Controls the border color of the radio tile when checked.
+ * @prop --tct-radio-tile-focus-stroke-color: (<color>) Controls the border color of the radio tile when focused.
+ * @prop --tct-radio-tile-focus-box-shadow: (*) Controls the box shadow of the radio tile when focused via keyboard.
+ */
 :host {
   display: block;
 }
@@ -109,7 +157,7 @@ button {
   color: var(---comp-label-content-color);
   font-weight: var(---comp-label-content-font-weight);
   font-size: var(--tct-radio-label-font-size, 14px);
-  align-items: center;
+  align-items: start;
   cursor: pointer;
   margin-right: var(---comp-label-content-margin-right);
   display: grid;
@@ -120,6 +168,9 @@ button {
 .radio-container label[for].label-hidden {
   grid-template-columns: var(--comp-label-hidden-columns);
 }
+.radio-container label[for] .description-content {
+  grid-column: 2;
+}
 .radio-container svg {
   border-radius: 50%;
   transition: var(--comp-svg-transition);

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

@@ -90,7 +90,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b3ff3221d679096f3fd42a318cfadb6233ab0ac5', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: 'ed9d41619e21af0927c1ebef5dedd3546683e677', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '817d5260d720061908c803ff34dc826a9aa954e8', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'aed6e01bca76e33bc6dda009cb78437b75da31df', viewBox: "0 0 18 18" }, h("circle", { key: '12b009b629c2f79b0ff9d973d91eee878680d5e2', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: 'bdb34bf3af2d9b05ac1a2f13d1ba68bc1be34379', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '67348d1852db1ab314e686a6208d3ab66216f002', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'ac58bd184195bc2c2ed79dcab60df89bc0accf62' }))))));
+        return (h("div", { key: '699970d6bed602cbd0e6954d36ca3b03b2122fdc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: 'edaaa6bbba5eb256fed9e02863b3cf3b706b4e73', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'fd0c67c56535a53f3cbbeddd32f3817b430b9075', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '2cfaa2fa7393ff369a319adb780f3667dc11194d', viewBox: "0 0 18 18" }, h("circle", { key: '157a1a5b430a0e63e695aec87bba111f60357444', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '4c4daede7d3414b1e7a9c037ba4d9e919300a9ca', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'e9b3ba9aceb316988bf570a3dd50cf99166fb248', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'a6ae2c01e62af90255f836a69458d530136daccb' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -253,7 +253,7 @@ export class Q2Radio {
                             "name": "warning",
                             "text": "Only use when a visible label is impractical."
                         }],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"q2-radio.js","sourceRoot":"","sources":["../../../../src/components/q2-radio/q2-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-radio.js","sourceRoot":"","sources":["../../../../src/components/q2-radio/q2-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hides the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -0,0 +1,73 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'unchecked',
+        html: `<q2-radio value="1" label="Default"></q2-radio>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'checked',
+        html: `<q2-radio value="1" label="Default" checked></q2-radio>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'disabled-unchecked',
+        html: `<q2-radio value="1" label="Disabled" disabled></q2-radio>`,
+        states: ['resting'],
+    },
+    {
+        name: 'disabled-checked',
+        html: `<q2-radio value="1" label="Disabled" checked disabled></q2-radio>`,
+        states: ['resting'],
+    },
+    {
+        name: 'readonly-unchecked',
+        html: `<q2-radio value="1" label="Read-only" readonly></q2-radio>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'readonly-checked',
+        html: `<q2-radio value="1" label="Read-only" checked readonly></q2-radio>`,
+        states: ['resting'],
+    },
+    {
+        name: 'hide-label',
+        html: `<q2-radio value="1" label="Hidden" hide-label></q2-radio>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-radio--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-radio--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-radio').hover();
+        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-radio--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-radio — 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-radio-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-radio-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-radio/test/q2-radio-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 VARIANTS: Variant[] = [\n    {\n        name: 'unchecked',\n        html: `<q2-radio value=\"1\" label=\"Default\"></q2-radio>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'checked',\n        html: `<q2-radio value=\"1\" label=\"Default\" checked></q2-radio>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'disabled-unchecked',\n        html: `<q2-radio value=\"1\" label=\"Disabled\" disabled></q2-radio>`,\n        states: ['resting'],\n    },\n    {\n        name: 'disabled-checked',\n        html: `<q2-radio value=\"1\" label=\"Disabled\" checked disabled></q2-radio>`,\n        states: ['resting'],\n    },\n    {\n        name: 'readonly-unchecked',\n        html: `<q2-radio value=\"1\" label=\"Read-only\" readonly></q2-radio>`,\n        states: ['resting', 'focus'],\n    },\n    {\n        name: 'readonly-checked',\n        html: `<q2-radio value=\"1\" label=\"Read-only\" checked readonly></q2-radio>`,\n        states: ['resting'],\n    },\n    {\n        name: 'hide-label',\n        html: `<q2-radio value=\"1\" label=\"Hidden\" hide-label></q2-radio>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.locator('q2-radio').hover();\n        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio--${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-radio--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-radio — 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-radio-group/q2-radio-group.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-radio-group-margin: (<length-percentage>+) Controls the outer margin of the radio-group host.
+ * @prop --tct-radio-group-margin-top: (<length-percentage>) Controls the top margin of the radio-group host when --tct-radio-group-margin is not set.
+ * @prop --tct-radio-group-margin-bottom: (<length-percentage>) Controls the bottom margin of the radio-group host when --tct-radio-group-margin is not set.
+ * @prop --tct-radio-group-fieldset-padding?: (<length-percentage>+) Controls the optional inner padding of the radio-group fieldset.
+ * @prop --tct-radio-group-options-margin: (<length-percentage>+) Controls the margin around the radio options container.
+ * @prop --tct-radio-group-options-padding?: (<length-percentage>+) Controls the optional inner padding of the radio options container.
+ * @prop --tct-radio-group-border-radius: (<length-percentage>) Controls the corner radius of the radio options container.
+ * @prop --tct-radio-group-border-width: (<length>+) Controls the border width of the radio options container.
+ * @prop --tct-radio-group-error-border-color: (<color>) Controls the border color of the radio options container in the error state.
+ * @prop --tct-radio-group-tile-gap: (<length-percentage>) Controls the gap between radio tiles in the tile layout.
+ * @prop --tct-radio-group-label-column-gap: (<length-percentage>) Controls the column gap between the radio-group label text and trailing icon.
+ * @prop --tct-radio-group-label-font-color?: (<color>) Controls the optional text color of the radio-group label.
+ * @prop --tct-radio-group-label-font-size?: (<length-percentage>) Controls the optional font size of the radio-group label.
+ * @prop --tct-radio-group-label-font-weight: (<number>) Controls the font weight of the radio-group label.
+ * @prop --tct-radio-group-label-letter-spacing?: (<length>) Controls the optional letter spacing of the radio-group label.
+ * @prop --tct-radio-group-label-text-transform?: (<custom-ident>) Controls the optional text transform of the radio-group label.
+ * @prop --tct-radio-group-label-optional-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
+ * @prop --tct-radio-group-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
+ * @prop --tct-radio-group-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
+ * @prop --tct-radio-group-label-optional-margin-left: (<length-percentage>) Controls the left margin of the "(optional)" indicator next to the label.
+ */
 :host {
   --comp-default-radio-group-margin: var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;

package/dist/collection/components/q2-radio-group/test/q2-radio-group-test.vr.js

@@ -0,0 +1,99 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const RADIOS = `
+    <q2-radio value="1" label="Option 1"></q2-radio>
+    <q2-radio value="2" label="Option 2"></q2-radio>
+    <q2-radio value="3" label="Option 3"></q2-radio>
+`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-radio-group label="Group" name="g1">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'default-with-value',
+        html: `<q2-radio-group label="Group" name="g1" value="2">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'optional',
+        html: `<q2-radio-group label="Group" name="g1" optional>${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'readonly',
+        html: `<q2-radio-group label="Group" name="g1" readonly value="2">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'disabled',
+        html: `<q2-radio-group label="Group" name="g1" disabled value="2">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'has-error',
+        html: `<q2-radio-group label="Group" name="g1" has-error>${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'hide-label',
+        html: `<q2-radio-group label="Hidden" name="g1" hide-label>${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'tile-layout',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout>${RADIOS}</q2-radio-group>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'tile-layout-left',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout tile-alignment="left">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'tile-layout-right',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout tile-alignment="right">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'tile-layout-error',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout has-error>${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-radio-group--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-radio-group--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        // Hover the first radio (a tile when tile-layout is active).
+        await page.locator('q2-radio').first().hover();
+        await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-radio-group--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-radio-group — 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-radio-group-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-radio-group-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-radio-group/test/q2-radio-group-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 RADIOS = `\n    <q2-radio value=\"1\" label=\"Option 1\"></q2-radio>\n    <q2-radio value=\"2\" label=\"Option 2\"></q2-radio>\n    <q2-radio value=\"3\" label=\"Option 3\"></q2-radio>\n`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'default-with-value',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" value=\"2\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'optional',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" optional>${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'readonly',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" readonly value=\"2\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'disabled',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" disabled value=\"2\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'has-error',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" has-error>${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'hide-label',\n        html: `<q2-radio-group label=\"Hidden\" name=\"g1\" hide-label>${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'tile-layout',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" tile-layout>${RADIOS}</q2-radio-group>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'tile-layout-left',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" tile-layout tile-alignment=\"left\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'tile-layout-right',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" tile-layout tile-alignment=\"right\">${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n    {\n        name: 'tile-layout-error',\n        html: `<q2-radio-group label=\"Group\" name=\"g1\" tile-layout has-error>${RADIOS}</q2-radio-group>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio-group--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio-group--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        // Hover the first radio (a tile when tile-layout is active).\n        await page.locator('q2-radio').first().hover();\n        await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-radio-group--${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-radio-group--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-radio-group — 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-relative-time/q2-relative-time.js

@@ -153,7 +153,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '368b5847fd62820031d367eaee690212fa655223' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '0d8c6b23a5af08e1fbb7e8d5c48248bf6676427a' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '185b0be700ed56c383a329811fcde95d4ed2bd34', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'dbf5c5c896f9ab48a32ce58a4ffcf7bf287920e2', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,32 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-section-background: (<color>) Controls the background color of the section host.
+ * @prop --tct-section-font-color: (<color>) Controls the text color of the section host.
+ * @prop --tct-section-border-color?: (<color>) Controls the optional border color of the section host.
+ * @prop --tct-section-border-radius: (<length-percentage>) Controls the corner radius of the section host.
+ * @prop --tct-section-border-style: (<custom-ident>) Controls the border style of the section host.
+ * @prop --tct-section-border-width?: (<length>+) Controls the optional border width of the section host.
+ * @prop --tct-section-margin: (<length-percentage>+) Controls the outer margin of the section host.
+ * @prop --tct-section-print-margin: (<length-percentage>+) Controls the outer margin of the section host in print media.
+ * @prop --tct-section-tween: (*) Controls the transition timing for the section's expand/collapse animation.
+ * @prop --tct-section-wrapper-padding: (<length-percentage>+) Controls the inner padding of the section wrapper.
+ * @prop --tct-section-wrapper-hover-box-shadow?: (*) Controls the optional box shadow applied to the section wrapper on hover.
+ * @prop --tct-section-header-padding: (<length-percentage>+) Controls the inner padding of the section header.
+ * @prop --tct-section-header-print-padding?: (<length-percentage>+) Controls the optional inner padding of the section header in print media.
+ * @prop --tct-section-header-min-height: (<length>) Controls the minimum height of the section header when a header is present.
+ * @prop --tct-section-title-margin?: (<length-percentage>+) Controls the optional outer margin of the section title.
+ * @prop --tct-section-title-font-size: (<length-percentage>) Controls the font size of the section title.
+ * @prop --tct-section-title-font-weight: (<number>) Controls the font weight of the section title.
+ * @prop --tct-section-title-text-transform?: (<custom-ident>) Controls the optional text transform of the section title.
+ * @prop --tct-section-title-letter-spacing?: (<length>) Controls the optional letter spacing of the section title.
+ * @prop --tct-section-content-padding: (<length-percentage>+) Controls the inner padding of the section content area.
+ * @prop --tct-section-content-print-padding?: (<length-percentage>+) Controls the optional inner padding of the section content area in print media.
+ * @prop --tct-section-btn-hover-background: (<color>) Controls the background color of the section header's collapse/expand button on hover.
+ * @prop --tct-section-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the section header's collapse/expand button icon.
+ * @prop --tct-section-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the section header's collapse/expand button icon.
+ */
 :host {
   display: block;
   background: var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));

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

@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'ea31fa3fcb95aeba58b116111a8de973acfc9dd8', class: "wrapper" }, h("header", { key: '599e2c5d97b7e1a8e82d4f67477feaea39bf44a4', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'ec33d8f308ddc45636df221e103972abb4c743e4', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'c16de7c1c6fb720b4bfa43a8a1768480e7d9df0d', class: "title" }, loc(this.label)), h("div", { key: '3ff11259f114b4ca6c6dbd2c05fb35d5f270fb97', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '47b372f49b184db9ecb4aa29a60545f6ec3e1f6b', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '7b7f6e91877c354860d16ec95d39c1cd78ccf48b', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '39c6913339322a55626fba6b72b2305654821b34', type: "chevron-up" })))), h("div", { key: '0212368798fdf64763de5f8507dc5cb1e7ca307f', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: 'a8febda26aacf75f431b73fbde550fe48464f795', class: "wrapper" }, h("header", { key: 'cfa6b6b4b5877bbb29a8378b2b6f3f2712473800', class: hasHeader ? 'has-header' : '' }, h("div", { key: '08a21351630af94e43ece1bb43ec02da1065870e', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'f03e8e974dad67995d0f75e284d9aa2ff4844be9', class: "title" }, loc(this.label)), h("div", { key: '1bcecedcd8bf29a01c0267c6e4dfb5c80175b79a', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '13058e098cb3bd53220ba3f52dc7cb7045802dde', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '141e18cc76c195a6a9695138a7c1565df73c7173', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '13e830f8f773ce4a6d548679f047755cd1c2b0c4', type: "chevron-up" })))), h("div", { key: '6b28ad8fe4a7e058c8ea79abcfaf205a92e582fa', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '32e77e59068e9117454cc158998af16c18b7eda5', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '770db19e692eaafb752ec9109de89d52f4375dca', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '5b8635606705cb71f74db7765efd8d44a66f88fb', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'c99160718c0309eac5739ce3039afa742716a819', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,68 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-section label="Section title"><p>Body content here.</p></q2-section>`,
+        states: ['resting'],
+    },
+    {
+        name: 'collapsible-expanded',
+        html: `<q2-section label="Section title" collapsible expanded><p>Body content here.</p></q2-section>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'collapsible-collapsed',
+        html: `<q2-section label="Section title" collapsible><p>Body content here.</p></q2-section>`,
+        states: ['resting', 'hover', 'focus'],
+    },
+    {
+        name: 'no-collapse-icon',
+        html: `<q2-section label="Section title" collapsible expanded no-collapse-icon><p>Body content here.</p></q2-section>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-section--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-section--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-section--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        // Hover the toggle button inside the shadow root.
+        const box = await page.locator('q2-section').evaluate((el) => {
+            var _a;
+            const btn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[test-id="toggleButton"]');
+            if (!btn)
+                throw new Error('q2-section toggle button not found in shadow DOM');
+            const r = btn.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-section--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-section--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-section--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-section — 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-section-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-section-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-section/test/q2-section-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 VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-section label=\"Section title\"><p>Body content here.</p></q2-section>`,\n        states: ['resting'],\n    },\n    {\n        name: 'collapsible-expanded',\n        html: `<q2-section label=\"Section title\" collapsible expanded><p>Body content here.</p></q2-section>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'collapsible-collapsed',\n        html: `<q2-section label=\"Section title\" collapsible><p>Body content here.</p></q2-section>`,\n        states: ['resting', 'hover', 'focus'],\n    },\n    {\n        name: 'no-collapse-icon',\n        html: `<q2-section label=\"Section title\" collapsible expanded no-collapse-icon><p>Body content here.</p></q2-section>`,\n        states: ['resting'],\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-section--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-section--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-section--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        // Hover the toggle button inside the shadow root.\n        const box = await page.locator('q2-section').evaluate((el: HTMLElement) => {\n            const btn = el.shadowRoot?.querySelector<HTMLButtonElement>('[test-id=\"toggleButton\"]');\n            if (!btn) throw new Error('q2-section toggle button not found in shadow DOM');\n            const r = btn.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-section--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-section--${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-section--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-section — 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-select/q2-select.css

@@ -124,6 +124,23 @@ button {
   display: block;
 }
 
+/**
+ * @prop --tct-select-margin: (<length-percentage>+) Controls the outer margin of the select host.
+ * @prop --tct-select-margin-top: (<length-percentage>) Controls the top margin of the select host when --tct-select-margin is not set.
+ * @prop --tct-select-margin-bottom: (<length-percentage>) Controls the bottom margin of the select host when --tct-select-margin is not set.
+ * @prop --tct-select-input-min-height?: (<length-percentage>) Controls the optional minimum height of the select input.
+ * @prop --tct-select-input-max-height?: (<length-percentage>) Controls the optional maximum height of the select input.
+ * @prop --tct-select-multi-select-option-background?: (<color>) Controls the optional background color of multi-select option chips in their default state.
+ * @prop --tct-select-multi-select-option-color?: (<color>) Controls the optional text color of multi-select option chips in their default state.
+ * @prop --tct-select-multi-select-option-active-background: (<color>) Controls the background color of multi-select option chips when active (checked).
+ * @prop --tct-select-multi-select-option-active-color: (<color>) Controls the text color of multi-select option chips when active (checked).
+ * @prop --tct-select-multi-select-option-hover-background: (<color>) Controls the background color of multi-select option chips on hover.
+ * @prop --tct-select-multi-select-option-hover-color: (<color>) Controls the text color of multi-select option chips on hover.
+ * @prop --tct-select-multi-select-option-disabled-opacity: (<number>) Controls the opacity of multi-select option chips when disabled.
+ * @prop --tct-select-multi-select-option-padding: (<length-percentage>+) Controls the inner padding of multi-select option chips.
+ * @prop --tct-select-multi-select-option-radius: (<length-percentage>) Controls the corner radius of multi-select option chips.
+ * @prop --tct-select-multi-select-option-font-size?: (<length-percentage>) Controls the optional font size of multi-select option chip labels.
+ */
 :host {
   --comp-default-select-margin: var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;