q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -10,8 +10,6 @@ export class Q2Legend {
         // #region State Properties
         this.hoveredItemIndex = -1;
         this.selectedItemIndex = -1;
-        // #endregion
-        // #region Public Property API
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** The format of the value displayed in the legend. */
@@ -55,6 +53,7 @@ export class Q2Legend {
             return Intl.NumberFormat('en-US', {
                 style: 'currency',
                 currency: 'USD',
+                maximumFractionDigits: this.currencyRound ? 0 : 2,
             }).format(valueAsFloat);
         }
         return Intl.NumberFormat('en-US').format(valueAsFloat);
@@ -110,7 +109,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: 'ab6f88f29a37f3b48c7bee9bc1263142d9376b3c', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'aa6443ae74f0d89965963195c479aab4f95fa667' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '32d4b5a9adfdd824fba84233dd1647236a80d2e7', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '2842a006e6aab9d478bf900e13e0f45c14ec4a67' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }
@@ -126,6 +125,25 @@ export class Q2Legend {
     }
     static get properties() {
         return {
+            "currencyRound": {
+                "type": "boolean",
+                "attribute": "currency-round",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "data": {
                 "type": "unknown",
                 "attribute": "data",

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

@@ -1 +1 @@
-{"version":3,"file":"q2-legend.js","sourceRoot":"","sources":["../../../../src/components/q2-legend/q2-legend.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: DonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<DonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-legend.js","sourceRoot":"","sources":["../../../../src/components/q2-legend/q2-legend.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00. */\n    @Prop()\n    currencyRound: boolean;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: DonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<DonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n                maximumFractionDigits: this.currencyRound ? 0 : 2,\n            }).format(valueAsFloat);\n        }\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -65,6 +65,26 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-link-color-inline: (<color>) Controls the text color of inline-style links.
+ * @prop --tct-link-color-inline-active: (<color>) Controls the text color of inline-style links in the active state.
+ * @prop --tct-link-color-standalone: (<color>) Controls the text color of standalone-style links.
+ * @prop --tct-link-color-standalone-active: (<color>) Controls the text color of standalone-style links in the active state.
+ * @prop --tct-link-color-standalone-disabled-color: (<color>) Controls the text color of standalone-style links when disabled.
+ * @prop --tct-link-color-standalone-disabled-opacity: (<number>) Controls the opacity of standalone-style links when disabled.
+ * @prop --tct-link-disabled-opacity: (<number>) Controls the opacity of inline-style links when disabled.
+ * @prop --tct-link-icon-color?: (<color>) Controls the optional color of the link's trailing icon.
+ * @prop --tct-link-icon-stroke-width: (<number>) Controls the stroke width of the link's trailing icon.
+ * @prop --tct-link-label-icon-gap: (<length-percentage>) Controls the gap between the link label and trailing icon.
+ * @prop --tct-link-font-size?: (<length-percentage>) Controls the optional font size of the link label.
+ * @prop --tct-link-font-weight?: (<number>) Controls the optional font weight of the link label.
+ * @prop --tct-link-font-bold-stroke-width: (<length>) Controls the text stroke width applied when the link is hovered or active (simulates a bold weight).
+ * @prop --tct-link-border-radius?: (<length-percentage>) Controls the optional corner radius of the link container and focus ring.
+ * @prop --tct-link-focus-visible-box-shadow: (*) Controls the box shadow applied to the link when focused via keyboard.
+ * @prop --tct-link-side-margin: (<length>) Controls the horizontal margin applied to inline-style links.
+ * @prop --tct-link-min-height: (<length>) Controls the minimum height of the link in standalone mode.
+ * @prop --tct-link-ellipsis-max-width: (<length-percentage>) Controls the maximum width of the link when ellipsis is enabled.
+ */
 :host {
   display: inline-block;
 }

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

@@ -0,0 +1,70 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'inline-default',
+        html: `<q2-link label="Click here" href="#"></q2-link>`,
+    },
+    {
+        name: 'inline-disabled',
+        html: `<q2-link label="Click here" href="#" disabled></q2-link>`,
+    },
+    {
+        name: 'inline-ellipsis',
+        html: `<q2-link label="A very long link label that should truncate with an ellipsis" href="#" ellipsis style="display:inline-block;width:160px"></q2-link>`,
+    },
+    {
+        name: 'standalone',
+        html: `<q2-link label="Click here" href="#" variant="standalone" icon-type="external-link"></q2-link>`,
+    },
+    {
+        name: 'standalone-no-icon',
+        html: `<q2-link label="Click here" href="#" variant="standalone"></q2-link>`,
+    },
+    {
+        name: 'standalone-disabled',
+        html: `<q2-link label="Click here" href="#" variant="standalone" icon-type="external-link" disabled></q2-link>`,
+    },
+    {
+        name: 'full-width',
+        html: `<q2-link label="Click here" href="#" variant="standalone" full-width></q2-link>`,
+    },
+];
+const HOVER_FOCUS_VARIANTS = ['inline-default', 'standalone'];
+const restingCase = (variant, theme) => {
+    test(`q2-link--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-link--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-link--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-link').hover();
+        await expect(page).toHaveScreenshot(`q2-link--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-link--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-link--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-link — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const variant of VARIANTS) {
+        if (!HOVER_FOCUS_VARIANTS.includes(variant.name))
+            continue;
+        for (const theme of THEMES) {
+            hoverCase(variant, theme);
+            focusCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-link-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-link-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-link/test/q2-link-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'inline-default',\n        html: `<q2-link label=\"Click here\" href=\"#\"></q2-link>`,\n    },\n    {\n        name: 'inline-disabled',\n        html: `<q2-link label=\"Click here\" href=\"#\" disabled></q2-link>`,\n    },\n    {\n        name: 'inline-ellipsis',\n        html: `<q2-link label=\"A very long link label that should truncate with an ellipsis\" href=\"#\" ellipsis style=\"display:inline-block;width:160px\"></q2-link>`,\n    },\n    {\n        name: 'standalone',\n        html: `<q2-link label=\"Click here\" href=\"#\" variant=\"standalone\" icon-type=\"external-link\"></q2-link>`,\n    },\n    {\n        name: 'standalone-no-icon',\n        html: `<q2-link label=\"Click here\" href=\"#\" variant=\"standalone\"></q2-link>`,\n    },\n    {\n        name: 'standalone-disabled',\n        html: `<q2-link label=\"Click here\" href=\"#\" variant=\"standalone\" icon-type=\"external-link\" disabled></q2-link>`,\n    },\n    {\n        name: 'full-width',\n        html: `<q2-link label=\"Click here\" href=\"#\" variant=\"standalone\" full-width></q2-link>`,\n    },\n];\n\nconst HOVER_FOCUS_VARIANTS = ['inline-default', 'standalone'];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-link--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-link--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-link--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.locator('q2-link').hover();\n        await expect(page).toHaveScreenshot(`q2-link--${variant.name}--hover--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-link--${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-link--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-link — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const variant of VARIANTS) {\n        if (!HOVER_FOCUS_VARIANTS.includes(variant.name)) continue;\n        for (const theme of THEMES) {\n            hoverCase(variant, theme);\n            focusCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -132,6 +132,20 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-list-header-min-height: (<length>) Controls the minimum height of the list header.
+ * @prop --tct-list-header-padding: (<length-percentage>+) Controls the inner padding of the list header.
+ * @prop --tct-list-item-border-color: (<color>) Controls the border color of list items when the list is bordered.
+ * @prop --tct-list-item-border-style: (<custom-ident>) Controls the border style of list items when the list is bordered.
+ * @prop --tct-list-item-border-width: (<length>+) Controls the border width of list items when the list is bordered.
+ * @prop --tct-list-item-gap?: (<length-percentage>) Controls the optional gap between list items.
+ * @prop --tct-list-item-padding: (<length-percentage>+) Controls the inner padding of each list item.
+ * @prop --tct-list-label-font-color: (<color>) Controls the text color of the list header label.
+ * @prop --tct-list-label-font-size: (<length-percentage>) Controls the font size of the list header label.
+ * @prop --tct-list-label-font-weight: (<number>) Controls the font weight of the list header label.
+ * @prop --tct-list-label-height: (<length>) Controls the height of the list header label.
+ * @prop --tct-list-label-line-height: (<number> | <length-percentage>) Controls the line height of the list header label.
+ */
 :host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),
 :host([bordered]:not([bordered=false])) .header {
   border-style: var(--tct-list-item-border-style, solid);

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

@@ -69,7 +69,7 @@ export class Q2List {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '5602927af6da7b334c38f7d2cc207633d6089f7c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '23ae73b5b842f17d45f9f82b06db79e8ea5c1796', class: this.headerClasses }, h("div", { key: '428117b7ffeadbfe4a53d39bf95d16cae1c26148', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '3c5c29226478ba20fbe691b4265a2966b43f3fcb', name: "filter" }))), h("div", { key: '358b66a87ce56416c1dd42b8cc8a480996e2bdaf', role: "list" }, h("slot", { key: '8eabad8c7f15fac806588c651abf4ee400994d52' }))));
+        return (h("div", { key: '03d753b9d45921c1660ca81e92612dd742aeb694', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '43124c37dde7bf8079171325c1592f84a9b86d7b', class: this.headerClasses }, h("div", { key: '34005b2b72a15103698731b5bd0076c53410dc90', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'a6a1e1a921aec21da718cac10a1e4643578cc53f', name: "filter" }))), h("div", { key: '8031cab7c441c8dde9102af20ed34c106e83e2a2', role: "list" }, h("slot", { key: '4eacfb475f1f8f7d74210afb5c505282afb0ed13' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,58 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const ITEMS = `
+    <q2-item><span slot="header">Item one</span><span slot="body">Body content</span></q2-item>
+    <q2-item><span slot="header">Item two</span><span slot="body">Body content</span></q2-item>
+    <q2-item><span slot="header">Item three</span><span slot="body">Body content</span></q2-item>
+`;
+const ITEMS_WITH_DECORATOR = `
+    <q2-item><q2-icon slot="decorator" type="dashboard"></q2-icon><span slot="header">Item one</span><span slot="body">Body content</span></q2-item>
+    <q2-item><q2-icon slot="decorator" type="bell"></q2-icon><span slot="header">Item two</span><span slot="body">Body content</span></q2-item>
+    <q2-item><q2-icon slot="decorator" type="heart"></q2-icon><span slot="header">Item three</span><span slot="body">Body content</span></q2-item>
+`;
+const FILTER_PILL = `<q2-pill slot="filter" label="Filter"><q2-option value="1">Option 1</q2-option><q2-option value="2">Option 2</q2-option></q2-pill>`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-list>${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'with-label',
+        html: `<q2-list label="My List">${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'bordered',
+        html: `<q2-list bordered>${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'label-bordered',
+        html: `<q2-list label="My List" bordered>${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'with-filter',
+        html: `<q2-list label="My List" bordered>${FILTER_PILL}${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'filter-only',
+        html: `<q2-list>${FILTER_PILL}${ITEMS}</q2-list>`,
+    },
+    {
+        name: 'item-with-decorator',
+        html: `<q2-list label="My List" bordered>${ITEMS_WITH_DECORATOR}</q2-list>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-list--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-list--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-list — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-list-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-list-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-list/test/q2-list-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,KAAK,GAAG;;;;CAIb,CAAC;AAEF,MAAM,oBAAoB,GAAG;;;;CAI5B,CAAC;AAEF,MAAM,WAAW,GAAG,oIAAoI,CAAC;AAEzJ,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,YAAY,KAAK,YAAY;KACtC;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,4BAA4B,KAAK,YAAY;KACtD;IACD;QACI,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,qBAAqB,KAAK,YAAY;KAC/C;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,qCAAqC,KAAK,YAAY;KAC/D;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,qCAAqC,WAAW,GAAG,KAAK,YAAY;KAC7E;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,YAAY,WAAW,GAAG,KAAK,YAAY;KACpD;IACD;QACI,IAAI,EAAE,qBAAqB;QAC3B,IAAI,EAAE,qCAAqC,oBAAoB,YAAY;KAC9E;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACpE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,YAAY,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC3F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC9C,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst ITEMS = `\n    <q2-item><span slot=\"header\">Item one</span><span slot=\"body\">Body content</span></q2-item>\n    <q2-item><span slot=\"header\">Item two</span><span slot=\"body\">Body content</span></q2-item>\n    <q2-item><span slot=\"header\">Item three</span><span slot=\"body\">Body content</span></q2-item>\n`;\n\nconst ITEMS_WITH_DECORATOR = `\n    <q2-item><q2-icon slot=\"decorator\" type=\"dashboard\"></q2-icon><span slot=\"header\">Item one</span><span slot=\"body\">Body content</span></q2-item>\n    <q2-item><q2-icon slot=\"decorator\" type=\"bell\"></q2-icon><span slot=\"header\">Item two</span><span slot=\"body\">Body content</span></q2-item>\n    <q2-item><q2-icon slot=\"decorator\" type=\"heart\"></q2-icon><span slot=\"header\">Item three</span><span slot=\"body\">Body content</span></q2-item>\n`;\n\nconst FILTER_PILL = `<q2-pill slot=\"filter\" label=\"Filter\"><q2-option value=\"1\">Option 1</q2-option><q2-option value=\"2\">Option 2</q2-option></q2-pill>`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default',\n        html: `<q2-list>${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'with-label',\n        html: `<q2-list label=\"My List\">${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'bordered',\n        html: `<q2-list bordered>${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'label-bordered',\n        html: `<q2-list label=\"My List\" bordered>${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'with-filter',\n        html: `<q2-list label=\"My List\" bordered>${FILTER_PILL}${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'filter-only',\n        html: `<q2-list>${FILTER_PILL}${ITEMS}</q2-list>`,\n    },\n    {\n        name: 'item-with-decorator',\n        html: `<q2-list label=\"My List\" bordered>${ITEMS_WITH_DECORATOR}</q2-list>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-list--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-list--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-list — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -90,6 +90,15 @@ button {
   margin: 0;
 }
 
+/**
+ * @prop --tct-loading-primary-color: (<color>) Controls the stroke color of the loading spinner.
+ * @prop --tct-loading-spinner-size: (<length>) Controls the size of the loading spinner.
+ * @prop --tct-loading-skeleton-element-background: (<color>) Controls the background color of skeleton loading shapes (rectangles and circles).
+ * @prop --tct-loading-skeleton-shimmer-color: (<color>) Controls the color of the shimmer animation overlay on skeleton loading shapes.
+ * @prop --tct-loading-skeleton-rectangle-min-height: (<length>) Controls the minimum height of skeleton loading rectangles.
+ * @prop --tct-loading-skeleton-horizontal-gap: (<length-percentage>) Controls the horizontal gap between skeleton loading elements.
+ * @prop --tct-loading-skeleton-vertical-gap: (<length-percentage>) Controls the vertical gap between skeleton loading elements.
+ */
 :host {
   display: block;
 }

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

@@ -65,6 +65,30 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-message-background: (<color>) Controls the background color of the message container.
+ * @prop --tct-message-font-color?: (<color>) Controls the optional text color of the message content.
+ * @prop --tct-message-font-size?: (<length-percentage>) Controls the optional font size of the message content.
+ * @prop --tct-message-line-height: (<number> | <length-percentage>) Controls the line height of the message content.
+ * @prop --tct-message-box-shadow?: (*) Controls the optional box shadow of the message container.
+ * @prop --tct-message-border-color?: (<color>) Controls the optional border color of the message container.
+ * @prop --tct-message-border-style: (<custom-ident>) Controls the border style of the message container.
+ * @prop --tct-message-border-width?: (<length>+) Controls the optional border width of the message container.
+ * @prop --tct-message-border-radius?: (<length-percentage>) Controls the optional corner radius of the message container.
+ * @prop --tct-message-margin: (<length-percentage>+) Controls the outer margin of the message host in the standard appearance.
+ * @prop --tct-message-padding: (<length-percentage>+) Controls the inner padding of the message container in the standard appearance.
+ * @prop --tct-message-minimal-padding: (<length-percentage>+) Controls the inner padding of the message container in the minimal appearance.
+ * @prop --tct-message-gap: (<length-percentage>) Controls the gap between the message icon and its content.
+ * @prop --tct-message-icon-size: (<length>) Controls the size of the message leading icon.
+ * @prop --tct-message-list-margin: (<length-percentage>+) Controls the margin around a slotted unordered list inside the message.
+ * @prop --tct-message-list-padding: (<length-percentage>+) Controls the inner padding of a slotted unordered list inside the message.
+ * @prop --tct-message-bar-width: (<length>) Controls the width of the colored status bar on the side of the message.
+ * @prop --tct-message-bar-border-radius: (<length-percentage>+) Controls the corner radius of the colored status bar on the side of the message.
+ * @prop --tct-message-info-bar-color: (<color>) Controls the color of the status bar when the message type is info.
+ * @prop --tct-message-success-bar-color: (<color>) Controls the color of the status bar when the message type is success.
+ * @prop --tct-message-warning-bar-color: (<color>) Controls the color of the status bar when the message type is warning.
+ * @prop --tct-message-error-bar-color: (<color>) Controls the color of the status bar when the message type is error or danger.
+ */
 :host {
   display: block;
 }
@@ -82,7 +106,7 @@ button {
   display: grid;
   gap: var(--tct-message-gap, 8px);
   align-items: flex-start;
-  background: var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
+  background: var(--comp-message-background, var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));
   color: var(--tct-message-font-color, var(--t-message-font-color, inherit));
   box-shadow: var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));
   border-radius: var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)));
@@ -154,6 +178,7 @@ button {
 :host([type=info]) {
   --comp-info-color: #0079c1;
   --comp-bar-color: var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));
+  --comp-message-background: var(--tct-message-info-background, #e5f5ff);
 }
 :host(:not([type])) .message-icon,
 :host(:not([type])) .message-icon,
@@ -166,6 +191,7 @@ button {
 :host([type=success]) {
   --comp-success-color: #0e8a00;
   --comp-bar-color: var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));
+  --comp-message-background: var(--tct-message-success-background, #e8ffe5);
 }
 :host([type=success]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));
@@ -175,6 +201,7 @@ button {
 :host([type=warning]) {
   --comp-warning-color: #c35500;
   --comp-bar-color: var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));
+  --comp-message-background: var(--tct-message-warning-background, #ffe2cc);
 }
 :host([type=warning]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));
@@ -185,6 +212,7 @@ button {
 :host([type=danger]) {
   --comp-error-color: #d20a0a;
   --comp-bar-color: var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));
+  --comp-message-background: var(--tct-message-error-background, #fee7e7);
 }
 :host([type=error]) .message-icon,
 :host([type=error]) .message-icon,

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

@@ -66,7 +66,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'b65f9feaee320f96a3f745eb4231510eab67aba6', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '66b9440bf994341ff365766a1241f56556fffe57', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '47269ca27bc9c952249f574ab98e45d026125228', class: "sr" }), h("div", { key: '63a91696622f38741d5d403fe81262e2d5458328', class: "sr message-label" }, messageLabel), h("div", { key: '544cecc85e943f0156b63489cc78a42bec02f7c9', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '36ff0e64df72018818fd8452e847c522ea4c4039' }))));
+        return (h("div", { key: 'e6d294a3ad21e83f33d2e0202e74b66b5d61984f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'c8cad3b93d2d501513d951b0850bf920cfdd2dc8', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '48222cb290731c76a3f68b48c01fcaff5b0fea2a', class: "sr" }), h("div", { key: '2f67a189f90d66ec9478926984cb4e3f97808658', class: "sr message-label" }, messageLabel), h("div", { key: 'f41dd21efa6c822a436328bf4bbf756eec8714fd', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '5668fbb085bfc8403062710a60238ba71c05e7ab' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,57 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const BODY = 'This is your message content.';
+const LONG_BODY = 'A much longer message body that should wrap onto multiple lines to verify how the layout handles overflow when content exceeds the available width and pushes the icon and bar into a multi-line arrangement.';
+const VARIANTS = [
+    {
+        name: 'standard-info',
+        html: `<q2-message type="info">${BODY}</q2-message>`,
+    },
+    {
+        name: 'standard-success',
+        html: `<q2-message type="success">${BODY}</q2-message>`,
+    },
+    {
+        name: 'standard-warning',
+        html: `<q2-message type="warning">${BODY}</q2-message>`,
+    },
+    {
+        name: 'standard-error',
+        html: `<q2-message type="error">${BODY}</q2-message>`,
+    },
+    {
+        name: 'minimal-info',
+        html: `<q2-message type="info" appearance="minimal">${BODY}</q2-message>`,
+    },
+    {
+        name: 'minimal-success',
+        html: `<q2-message type="success" appearance="minimal">${BODY}</q2-message>`,
+    },
+    {
+        name: 'minimal-warning',
+        html: `<q2-message type="warning" appearance="minimal">${BODY}</q2-message>`,
+    },
+    {
+        name: 'minimal-error',
+        html: `<q2-message type="error" appearance="minimal">${BODY}</q2-message>`,
+    },
+    {
+        name: 'long-content',
+        html: `<q2-message type="info">${LONG_BODY}</q2-message>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-message--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-message--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-message — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-message-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-message-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-message/test/q2-message-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,IAAI,GAAG,+BAA+B,CAAC;AAC7C,MAAM,SAAS,GACX,+MAA+M,CAAC;AAEpN,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,2BAA2B,IAAI,eAAe;KACvD;IACD;QACI,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,8BAA8B,IAAI,eAAe;KAC1D;IACD;QACI,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,8BAA8B,IAAI,eAAe;KAC1D;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,4BAA4B,IAAI,eAAe;KACxD;IACD;QACI,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,gDAAgD,IAAI,eAAe;KAC5E;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,mDAAmD,IAAI,eAAe;KAC/E;IACD;QACI,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,mDAAmD,IAAI,eAAe;KAC/E;IACD;QACI,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,iDAAiD,IAAI,eAAe;KAC7E;IACD;QACI,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,2BAA2B,SAAS,eAAe;KAC5D;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,eAAe,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACvE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,eAAe,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC9F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IACjD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst BODY = 'This is your message content.';\nconst LONG_BODY =\n    'A much longer message body that should wrap onto multiple lines to verify how the layout handles overflow when content exceeds the available width and pushes the icon and bar into a multi-line arrangement.';\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'standard-info',\n        html: `<q2-message type=\"info\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'standard-success',\n        html: `<q2-message type=\"success\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'standard-warning',\n        html: `<q2-message type=\"warning\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'standard-error',\n        html: `<q2-message type=\"error\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'minimal-info',\n        html: `<q2-message type=\"info\" appearance=\"minimal\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'minimal-success',\n        html: `<q2-message type=\"success\" appearance=\"minimal\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'minimal-warning',\n        html: `<q2-message type=\"warning\" appearance=\"minimal\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'minimal-error',\n        html: `<q2-message type=\"error\" appearance=\"minimal\">${BODY}</q2-message>`,\n    },\n    {\n        name: 'long-content',\n        html: `<q2-message type=\"info\">${LONG_BODY}</q2-message>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-message--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme, setupLoc: true });\n        await expect(page).toHaveScreenshot(`q2-message--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-message — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,46 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-meter-bar-background-color: (<color>) Controls the background color of the meter track.
+ * @prop --tct-meter-bar-border?: (*) Controls the optional border shorthand of the meter track.
+ * @prop --tct-meter-bar-border-radius: (<length-percentage>) Controls the corner radius of the meter track.
+ * @prop --tct-meter-bar-height: (<length>) Controls the height of the meter track.
+ * @prop --tct-meter-bar-margin: (<length-percentage>+) Controls the outer margin of the meter track.
+ * @prop --tct-meter-bar-shadow?: (*) Controls the optional box shadow of the meter track.
+ * @prop --tct-meter-bar-transition: (*) Controls the transition timing applied to the meter bar fills (completed, suggested, and tick).
+ * @prop --tct-meter-completed-bar-background-color: (<color>) Controls the background color of the completed-progress fill.
+ * @prop --tct-meter-suggested-bar-background-color: (<color>) Controls the background color of the suggested-progress fill.
+ * @prop --tct-meter-dot-background-color: (<color>) Controls the background color of the meter dot indicator.
+ * @prop --tct-meter-dot-border-color: (<color>) Controls the border color of the meter dot indicator.
+ * @prop --tct-meter-dot-border-style: (<custom-ident>) Controls the border style of the meter dot indicator.
+ * @prop --tct-meter-dot-border-width: (<length>+) Controls the border width of the meter dot indicator.
+ * @prop --tct-meter-dot-border-radius: (<length-percentage>) Controls the corner radius of the meter dot indicator.
+ * @prop --tct-meter-dot-size: (<length>) Controls the size of the meter dot indicator.
+ * @prop --tct-meter-dot-box-shadow: (*) Controls the box shadow of the meter dot indicator.
+ * @prop --tct-meter-dot-transition: (*) Controls the transition timing for the meter dot indicator's movement.
+ * @prop --tct-meter-dot-gap: (<length-percentage>) Controls the gap between the meter dot and the adjacent legend label.
+ * @prop --tct-meter-tick-color: (<color>) Controls the color of meter tick marks.
+ * @prop --tct-meter-tick-right-color: (<color>) Controls the color of the rightmost meter tick mark.
+ * @prop --tct-meter-tick-width: (<length>) Controls the width of meter tick marks.
+ * @prop --tct-meter-ticket-height: (<length>) Controls the height of meter tick marks.
+ * @prop --tct-meter-label-color: (<color>) Controls the text color of the meter label.
+ * @prop --tct-meter-label-font-size: (<length-percentage>) Controls the font size of the meter label.
+ * @prop --tct-meter-label-font-weight: (<number>) Controls the font weight of the meter label.
+ * @prop --tct-meter-label-margin: (<length-percentage>+) Controls the outer margin of the meter label.
+ * @prop --tct-meter-description-color: (<color>) Controls the text color of the meter description.
+ * @prop --tct-meter-description-font-size: (<length-percentage>) Controls the font size of the meter description.
+ * @prop --tct-meter-description-font-weight: (<number>) Controls the font weight of the meter description.
+ * @prop --tct-meter-description-line-height: (<number> | <length-percentage>) Controls the line height of the meter description.
+ * @prop --tct-meter-description-margin: (<length-percentage>+) Controls the outer margin of the meter description.
+ * @prop --tct-meter-legend-label-color: (<color>) Controls the text color of meter legend labels.
+ * @prop --tct-meter-legend-font-weight: (<number>) Controls the font weight of meter legend labels.
+ * @prop --tct-meter-legend-margin: (<length-percentage>+) Controls the outer margin of the meter legend row.
+ * @prop --tct-meter-legend-gap: (<length-percentage>) Controls the gap between completed and suggested legend entries.
+ * @prop --tct-meter-legend-bar-height: (<length>) Controls the height of the legend's color swatch.
+ * @prop --tct-meter-legend-bar-width: (<length>) Controls the width of the legend's color swatch.
+ * @prop --tct-meter-legend-dot-radius: (<length-percentage>) Controls the corner radius of the legend's color swatch.
+ */
 :host {
   width: 100%;
 }

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

@@ -114,7 +114,7 @@ export class Q2Meter {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '656e8a53bbaf26529db53e535efcad7a22b9ee01', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '25d53f9a1d387d4b839507239454484d9678061f', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'd5786b4e65ab5b262b82f107bb310ca27b34c4ed', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '015cc474c3113ff248982d64656218a79744e09e', class: "legends" }, h("div", { key: '1af88cd2386058a8c20f3a82d0e40ffafffc4c38', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '22eb4ec7a86114f3f109e4adfb0acbcea9509de8', class: "right" }, h("div", { key: 'b9384865d0ef8c81569243b40ccf320efcd208ec', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '108bd1850c02f17867f51e2a29657e579df01c33', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'baae6e4a58b2fac21ef6099d99402e4cffb03d32', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'dcf9cdf337a50fa4cf145985fbab513114b38019', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'f6214a063456893f3c6f2f014a9ba687ad5b0a81', class: "legends" }, h("div", { key: '1c624e80a27edb22cf39c4ca6345e07c945e48e5', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '63345961e4992b545d617ea5e1b423729fab94f5', class: "right" }, h("div", { key: '897ff512bf5037b17c51c70a5bf901cf516dbccc', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     static get is() { return "q2-meter"; }
     static get encapsulation() { return "shadow"; }