q2-tecton-elements 1.66.1 → 1.67.0

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

@@ -89,6 +89,9 @@ ul {
   transition: opacity var(--app-tween-1, 0.2s ease);
   width: 100%;
 }
+.item-button:focus-visible {
+  box-shadow: var(--tct-legend-item-focus-visible-box-shadow, var(--aesthetic-focus-ring-shadow));
+}
 .item-button:hover {
   cursor: pointer;
 }

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

@@ -110,7 +110,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: 'c3b1288ebd1e0c3371a208b2a0a1658d0f36d3a9', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '5c0cbb9dcfbd3ef8bab0921b8f38a136d3d12f92' }, 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: '2edad285ad14be5cdee30e071d1e5e11337076f0', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '11104022e84eddd37155299b0833c71bc9a0582d' }, 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"; }
@@ -131,13 +131,13 @@ export class Q2Legend {
                 "attribute": "data",
                 "mutable": false,
                 "complexType": {
-                    "original": "IDonutChartData[]",
-                    "resolved": "IDonutChartData[]",
+                    "original": "DonutChartData[]",
+                    "resolved": "DonutChartData[]",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 },
@@ -234,13 +234,13 @@ export class Q2Legend {
                     "text": "Emitted when a legend item is clicked."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }
@@ -258,13 +258,13 @@ export class Q2Legend {
                     "text": "Emitted when the mouse enters a legend item."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }
@@ -282,13 +282,13 @@ export class Q2Legend {
                     "text": "Emitted when the mouse leaves a legend item."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }
@@ -303,13 +303,13 @@ export class Q2Legend {
                     "text": "Emitted when a legend item is clicked."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }
@@ -324,13 +324,13 @@ export class Q2Legend {
                     "text": "Emitted when the mouse enters a legend item."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }
@@ -345,13 +345,13 @@ export class Q2Legend {
                     "text": "Emitted when the mouse leaves a legend item."
                 },
                 "complexType": {
-                    "original": "IDonutChartData",
-                    "resolved": "IDonutChartData",
+                    "original": "DonutChartData",
+                    "resolved": "DonutChartData",
                     "references": {
-                        "IDonutChartData": {
+                        "DonutChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IDonutChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::DonutChartData"
                         }
                     }
                 }

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 { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\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: IDonutChartData[] = [];\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<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<IDonutChartData>;\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: IDonutChartData) {\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: IDonutChartData) {\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: IDonutChartData) {\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    /** 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"]}

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

@@ -168,6 +168,9 @@ button {
 .link-container.standalone.disabled:hover {
   text-decoration: none;
 }
+.link-container.standalone:has(:focus-visible) {
+  box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);
+}
 .link-container.inline {
   margin: 0 var(--tct-link-side-margin, 6px);
   text-decoration: underline;
@@ -191,6 +194,6 @@ button {
   cursor: not-allowed;
   opacity: var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4));
 }
-.link-container.inline:focus-visible .link-container.inline {
-  box-shadow: var(--const-double-focus-ring);
+.link-container.inline:focus-visible {
+  box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);
 }

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

@@ -6,8 +6,6 @@ import { h } from "@stencil/core";
  */
 export class Q2Link {
     constructor() {
-        // #endregion
-        // #region Public Property API
         /** Determines whether the component and `tctClick` event are disabled. */
         this.disabled = false;
         /** If `true`, the label will be truncated with an ellipsis when it's too long. */
@@ -38,6 +36,16 @@ export class Q2Link {
             list.push('disabled');
         return list.join(' ');
     }
+    get composedAriaLabel() {
+        const baseText = this.label || this.hostElement.textContent.trim() || undefined;
+        if (!this._tooltip && !baseText)
+            return undefined;
+        if (!this._tooltip)
+            return this.variant === 'standalone' ? baseText : undefined;
+        if (!baseText)
+            return this._tooltip;
+        return `${baseText} - ${this._tooltip}`;
+    }
     handleClick(event) {
         event.stopPropagation();
         if (this.disabled)
@@ -55,7 +63,7 @@ export class Q2Link {
     // #region Render Methods
     render() {
         const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';
-        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { class: "link", href: !!this.disabled ? undefined : this.href, onClick: e => this.handleClick(e), target: this.target || '_self', rel: this.target === '_blank' ? 'noopener' : undefined, referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: labelClasses }, this.label), this.iconType && h("q2-icon", { type: this.iconType })))) : (h("a", { class: `${this.classes}${this.ellipsis ? ' ellipsis' : ''}`, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
+        return this.variant === 'standalone' ? (h("div", { class: this.classes }, h("a", { class: "link", href: !!this.disabled ? undefined : this.href, onClick: e => this.handleClick(e), target: this.target || '_self', rel: this.target === '_blank' ? 'noopener' : undefined, referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "aria-label": this.composedAriaLabel, "test-id": "linkAnchor" }, h("span", { class: labelClasses }, this.label), this.iconType && h("q2-icon", { type: this.iconType })))) : (h("a", { class: `${this.classes}${this.ellipsis ? ' ellipsis' : ''}`, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "aria-label": this.composedAriaLabel, "test-id": "linkAnchor" }, this.label));
     }
     static get is() { return "q2-link"; }
     static get encapsulation() { return "shadow"; }
@@ -71,6 +79,28 @@ export class Q2Link {
     }
     static get properties() {
         return {
+            "_tooltip": {
+                "type": "string",
+                "attribute": "_tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": "Tooltip text set by a parent q2-tooltip component for accessibility."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "attribute": "disabled",

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

@@ -1 +1 @@
-{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = this.label || this.hostElement.textContent.trim() || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div class={this.classes}>\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    aria-label={this.composedAriaLabel}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                aria-label={this.composedAriaLabel}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}

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: 'e8e7fae7c0cff255a864a13a7ddf97081b056d51', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a0dcecee335fc3253d4d68a294b238f7c4b0fa48', class: this.headerClasses }, h("div", { key: '682c70b0fcfabe5a0d5bc083986d313cbada9367', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '7ed718c00e7ba11e59fa2f2280fe0e5706093df0', name: "filter" }))), h("div", { key: 'ddbd92f6b7ee3979d0fedd097dcc4c7fdde901a3', role: "list" }, h("slot", { key: '9cb1b4a7d4e755b87016920ced5b8cdc17576edb' }))));
+        return (h("div", { key: '627d68ebcba5f0d9dea1ab60481c380916c76ae5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'f5567987b84f12874e4a8c42b846f5785b99e2bb', class: this.headerClasses }, h("div", { key: '0664369f4d92be4486f8d672f62c0d3478c13c2a', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'faa8de8696790abc591632e5bc182228da532562', name: "filter" }))), h("div", { key: '60a4c2980ea5462df148e31251a59142e001b5f3', role: "list" }, h("slot", { key: '935730bc5de751dcd25111cdd4f9cb6b9d00f10b' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,9 +74,11 @@ button {
 }
 
 .message {
-  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, 4px));
-  border-left-style: solid;
   --comp-line-height: var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));
+  border-width: var(--tct-message-border-width, 0);
+  border-style: var(--tct-message-border-style, solid);
+  border-color: var(--tct-message-border-color, transparent);
+  position: relative;
   display: grid;
   gap: var(--tct-message-gap, 8px);
   align-items: flex-start;
@@ -89,6 +91,17 @@ button {
   box-shadow: var(--const-global-focus);
 }
 
+.bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  background: var(--comp-bar-color);
+  width: var(--tct-message-bar-width, var(--t-message-bar-width, 4px));
+  border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));
+}
+
 .message-icon {
   --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);
   --tct-icon-size: var(--comp-icon-size);
@@ -140,10 +153,7 @@ button {
 :host(:not([type])),
 :host([type=info]) {
   --comp-info-color: #0079c1;
-}
-:host(:not([type])) .message,
-:host([type=info]) .message {
-  border-left-color: var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));
+  --comp-bar-color: var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));
 }
 :host(:not([type])) .message-icon,
 :host(:not([type])) .message-icon,
@@ -155,9 +165,7 @@ button {
 
 :host([type=success]) {
   --comp-success-color: #0e8a00;
-}
-:host([type=success]) .message {
-  border-left-color: var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));
+  --comp-bar-color: var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));
 }
 :host([type=success]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));
@@ -166,9 +174,7 @@ button {
 
 :host([type=warning]) {
   --comp-warning-color: #c35500;
-}
-:host([type=warning]) .message {
-  border-left-color: var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));
+  --comp-bar-color: var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));
 }
 :host([type=warning]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));
@@ -178,10 +184,7 @@ button {
 :host([type=error]),
 :host([type=danger]) {
   --comp-error-color: #d20a0a;
-}
-:host([type=error]) .message,
-:host([type=danger]) .message {
-  border-left-color: var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));
+  --comp-bar-color: var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));
 }
 :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: '339a45e7161f1aff66134e4e391c02f6afaac71d', 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" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '403e03cc8b6b34736e9e30a1eee91ba88f2e50f8', class: "sr" }), h("div", { key: '96b9469f4a0f7428c87231323bfe99583266e282', class: "sr message-label" }, messageLabel), h("div", { key: '2ec851508b85d7806060ba5cbccae4069a931c79', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b4270cdb03394834a4cac6487e6a8310aeaba915' }))));
+        return (h("div", { key: 'aff2483085e25648ba989847f10c91250df281a9', 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: '6f416c44047bfce1f0f788edf7545a1d0da4b55c', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'f144ac7da5821a8c7f5df44d2ed7b16ee35d025c', class: "sr" }), h("div", { key: 'ebff5b28951e94eaf1cb83d67b4376c3636f3143', class: "sr message-label" }, messageLabel), h("div", { key: '40f3902af3e4b79ee61c3f2dc0f63cd209694c83', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '6843ae94d50f20f2599a92d5e31122498cee53a5' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-message.js","sourceRoot":"","sources":["../../../../src/components/q2-message/q2-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-message.js","sourceRoot":"","sources":["../../../../src/components/q2-message/q2-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

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: '6b6e05dc4c575f71b92c767365f03f7955361c32', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'efb35a7a613ab5e627e159746e509006ad309ea0', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '8d8d57b85258385d4afd029e3347b94411bdcd6f', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '4013ef3fcdd86fbc05ea2c04243cd3f1c85806c0', class: "legends" }, h("div", { key: '8f6582f60aede052fb0f1d103b09011104944abc', 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: '588c1613a4b50d8971f9563e7dbe2e224625e820', class: "right" }, h("div", { key: '73d4eb43a171fa67a212e68d4eb57f6152be8f7e', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '1fcdcdac6a15aa52ac302ec40bc5809ab39fdbe6', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'a4cf43a802e84c0ceaf44c697511c206d0611906', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '8b8bdbcc35dbc2de60063cbf871a4a34bbe7548b', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '624342cfe8f534af2396fe6190e24bfcaecdb0c2', class: "legends" }, h("div", { key: '835efacea1cc4d03092cecbbd6914d54b498fa5f', 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: '428535e8b751a3316bfb5b5ad19756d3fc09fcd0', class: "right" }, h("div", { key: 'f175ee347bcd84716c5e1971d657c4fbf7dcbbc1', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     static get is() { return "q2-meter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -170,8 +170,8 @@ dialog[open].is-closing::backdrop {
   width: 100%;
   border-radius: var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px));
 }
-.content .message {
-  font-size: 1rem;
+.content .description {
+  font-size: var(--tct-modal-description-font-size, 14px);
 }
 .content.more-gradient {
   -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);
@@ -204,6 +204,7 @@ dialog[open].is-closing::backdrop {
 header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 header .title {
   text-overflow: ellipsis;
@@ -214,7 +215,6 @@ header .title {
   text-align: left;
   font-weight: var(--tct-modal-title-font-weight, 400);
   margin: 0;
-  padding-top: 0.5rem;
 }
 header .btn-close {
   grid-area: close;