q2-tecton-elements 1.70.2 → 1.71.1

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { isEventFromElement, overrideFocus } from "../../utils/index";
+import { isEventFromElement, isMobile, overrideFocus } from "../../utils/index";
 /**
  * @name Tooltip
  * @category Feedback
@@ -45,7 +45,16 @@ export class Q2Tooltip {
         this.persistOnHoverDismissed = true;
         this.hideTooltip();
     }
+    clickHandler() {
+        this.adjustSide();
+        if (this.persistent || !isMobile())
+            return;
+        this.persistOnHoverDismissed = false;
+        this.focusClass = 'has-touch-click';
+    }
     focusCaptureHandler() {
+        if (this.shouldBeVisible || this.persistent)
+            this.adjustSide();
         this.checkFocusClass();
     }
     focusHandler(event) {
@@ -58,10 +67,7 @@ export class Q2Tooltip {
     focusOutHandler() {
         if (this.shouldBeVisible)
             return;
-        if (this.focusClass === 'has-generic-focus')
-            this.focusClass = 'has-generic-focus-out';
-        else
-            this.focusClass = null;
+        this.focusClass = null;
     }
     // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.
     keyDownDocumentHandler(event) {
@@ -132,11 +138,17 @@ export class Q2Tooltip {
             if (tooltipWidth > distanceRight) {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`);
             }
+            else {
+                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);
+            }
         }
         else if (['nw', 'sw'].includes(this.position)) {
             if (tooltipWidth > distanceLeft) {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`);
             }
+            else {
+                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);
+            }
         }
         else if (['n', 's'].includes(this.position)) {
             if (tooltipWidth / 2 > distanceLeft) {
@@ -166,10 +178,9 @@ export class Q2Tooltip {
     animationEndHandler() {
         this.animationEndCount = this.animationEndCount + 1;
         const { focusClass, animationEndCount } = this;
-        // animationEnd is fired once for :before and once for :after pseudo elements
-        // there are multiple animations defined for .has-generic-focus
-        // so we need to wait for all of them to finish before we can remove the class
-        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {
+        // animationEnd fires once for :before and once for :after, and there
+        // are two animations on .has-touch-click, so wait for all four before clearing.
+        if (focusClass === 'has-touch-click' && animationEndCount >= 4) {
             this.focusClass = null;
             this.animationEndCount = 0;
         }
@@ -226,9 +237,12 @@ export class Q2Tooltip {
         if (!this.shouldBeVisible)
             return;
         const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);
-        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';
-        if (isKeyboardFocus)
+        if (isKeyboardFocus) {
+            this.focusClass = 'has-keyboard-focus';
             return;
+        }
+        if (isMobile())
+            this.focusClass = 'has-touch-click';
     }
     clearTooltipOnChildren() {
         const children = Array.from(this.hostElement.children);
@@ -264,10 +278,7 @@ export class Q2Tooltip {
         return (element === null || element === void 0 ? void 0 : element.matches(':focus-visible')) ? element : null;
     }
     hideTooltip() {
-        if (this.focusClass === 'has-generic-focus')
-            this.focusClass = 'has-generic-focus-out';
-        else
-            this.focusClass = null;
+        this.focusClass = null;
     }
     propagateTooltip() {
         if (this.focusable)
@@ -489,6 +500,12 @@ export class Q2Tooltip {
                 "target": "document",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "click",
+                "method": "clickHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "focus",
                 "method": "focusCaptureHandler",
@@ -525,12 +542,6 @@ export class Q2Tooltip {
                 "target": undefined,
                 "capture": false,
                 "passive": true
-            }, {
-                "name": "click",
-                "method": "handleMouseOver",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const TRIGGER = `<q2-btn intent="workflow-primary"><span>Trigger</span></q2-btn>`;
 // Pad the wrapper so the tooltip has room to render in any direction without clipping.
 const wrap = (inner) => `<div style="padding: 80px; display: inline-block;">${inner}</div>`;
@@ -73,3 +73,15 @@ test.describe('q2-tooltip — variants × themes', () => {
         }
     }
 });
+// 'position-n' exercises --tct-tooltip-font-size (bubble ::after text).
+// Uses immediate so the tooltip is visible at resting state.
+const POSITION_N_VARIANT = VARIANTS.find(v => v.name === 'position-n');
+test.describe(`q2-tooltip — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-tooltip--position-n--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, POSITION_N_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await hoverToShow(page);
+            await expect(page).toHaveScreenshot(`q2-tooltip--position-n--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.css

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 .tab-pane[aria-hidden=true] {
   display: none;
 }

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

@@ -49,9 +49,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6fd41d78c9d8a6e1abf28713f52d92ac214ad8ab', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'b5302bdd5ae8e749e84e4e12505d843c0ba0950a' }, h("slot", { key: '4b935505187b21260398c28ea876ecd64d9ed172', name: "loading-wrapper" }), h("iframe", { key: 'c18b96c8849a6a69abec9ced6d27a6860113b8c7', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '68c7250777ec0c700107df4997634d4aee8f8e91', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '7b8c74b691fc1c599766900125e09afe79e53859' }, h("slot", { key: 'bbf7c58bef21ab334059655e958e976b9bdf327e', name: "loading-wrapper" }), h("iframe", { key: '6a262f757dd78294fcf49242b337b02c13842ee8', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: '1016d617dc6cf49aa8e4bf52010e3cf246191875', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '466d820db179e1b6e350722eff9ec9190be6c869' }))));
+        }))) : (''))), h("div", { key: 'd9be64623c99011b7f30256d0abfaeab23f72c00', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'a1a3a9772b2875c7d4ab510e9014d99b6e036ad3' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/action-sheet.js

@@ -22,6 +22,7 @@ export const shouldShowActionSheet = (component, event) => {
 };
 const parseOptions = (options) => {
     const defaultOption = {
+        _hideSelectedBlock: false,
         disabled: false,
         separator: false,
         display: '',

package/dist/collection/utils/helpers.js

@@ -290,7 +290,22 @@ export const getNestedAssignedElementLength = async (page, selectors) => {
         return (_b = (_a = element === null || element === void 0 ? void 0 : element.assignedElements) === null || _a === void 0 ? void 0 : _a.call(element).length) !== null && _b !== void 0 ? _b : undefined;
     }, selectors);
 };
-export const evaluateA11y = async (page, ...args) => {
+/**
+ * Evaluates accessibility violations on the provided E2EPage using axe-core.
+ *
+ * @param page The E2EPage instance to evaluate.
+ * @param ignoredRules A record of accessibility rules to ignore, with rule IDs as keys and arrays of message
+ *     substrings as values. A violation is ignored when its message contains any one of the provided substrings.
+ * @param args Additional arguments, such as 'webpage' or 'verbose'.
+ * @returns A processed object of accessibility violations, or false if none are found.
+ *
+ * @example
+ * const violations = await evaluateA11y(page, {
+ *     'color-contrast': ['Element has insufficient color contrast'],
+ *     'aria-required-children': ['Required ARIA child role not present', 'aria-owns'],
+ * });
+ */
+export const evaluateA11y = async (page, ignoredRules = {}, ...args) => {
     const isWebpage = args.includes('webpage');
     const config = {
         detailLevel: args.includes('verbose') ? 'verbose' : 'default',
@@ -324,20 +339,28 @@ export const evaluateA11y = async (page, ...args) => {
     const processedViolations = violations.reduce((responseObj, violation) => {
         const { nodes, help, helpUrl, id } = violation;
         const node = nodes[0];
+        const filteredViolations = node.any.reduce((rules, rule) => {
+            const ignoredMessages = ignoredRules[rule.id];
+            if (ignoredMessages && ignoredMessages.some(message => rule.message.includes(message))) {
+                return rules;
+            }
+            rules[rule.id] = rule.message;
+            return rules;
+        }, {});
+        if (!Object.keys(filteredViolations).length) {
+            return responseObj;
+        }
         // Create violation info object
         responseObj[id] = {
             help,
             helpUrl,
             failureSummary: node.failureSummary,
             html: node.html,
-            rulesViolated: node.any.reduce((rules, rule) => {
-                rules[rule.id] = rule.message;
-                return rules;
-            }, {}),
+            rulesViolated: filteredViolations,
         };
         return responseObj;
     }, {});
-    return processedViolations;
+    return Object.keys(processedViolations).length ? processedViolations : false;
 };
 /**
  * This function mocks the fetch API to return a resolved promise with the given icon markup.

package/dist/collection/utils/test/vr-helpers.js

@@ -9,6 +9,10 @@ export const THEMES = [
     'neo-brutalist',
     'standard',
 ];
+/** Base font size (px) used for font-scale VR tests. Change here to update all tests. */
+export const FONT_SCALE_PX = 17;
+/** Snapshot name suffix for font-scale variants. */
+export const FONT_SCALE_SUFFIX = 'scaled-font-size';
 const BASE_THEME_CSS = '../q2-tecton-theme/dist/q2-tecton-theme.css';
 const UTILITIES_CSS = '../q2-tecton-theme/dist/q2-tecton-utilities.css';
 const PLAYWRIGHT_CSS = 'playwright.css';
@@ -111,5 +115,10 @@ export const setupPage = async (page, content, options = {}) => {
     if (options.theme) {
         await page.addStyleTag({ path: aestheticPath(options.theme) });
     }
+    if (options.fontSizePx !== undefined) {
+        await page.addStyleTag({
+            content: `html { font-size: ${options.fontSizePx}px; } :root { --t-px-1: calc(1 / 16 * 1rem); }`,
+        });
+    }
     await page.locator('[stencil-hydrated]').first().waitFor();
 };

package/dist/components/action-sheet.js

@@ -1,14 +1,15 @@
-const shouldShowActionSheet = (n, e) => {
+const shouldShowActionSheet = (e, n) => {
   var t;
   if (!("open" in document.createElement("dialog"))) return !1;
   if (!!!(null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet)) return !1;
-  if (e) {
-    const n = e instanceof KeyboardEvent, t = e instanceof MouseEvent, i = n && [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Enter", " " ].includes(e.key);
-    if (!(t && "click" === e.type || i)) return !1;
+  if (n) {
+    const e = n instanceof KeyboardEvent, t = n instanceof MouseEvent, i = e && [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Enter", " " ].includes(n.key);
+    if (!(t && "click" === n.type || i)) return !1;
   }
-  return !!n.hoist;
-}, parseOptions = n => {
-  const e = {
+  return !!e.hoist;
+}, parseOptions = e => {
+  const n = {
+    _hideSelectedBlock: !1,
     disabled: !1,
     separator: !1,
     display: "",
@@ -16,48 +17,48 @@ const shouldShowActionSheet = (n, e) => {
     multiline: !1,
     value: "",
     innerHTML: ""
-  }, t = Object.keys(e), i = {
+  }, t = Object.keys(n), i = {
     disabled: !1,
     label: "",
     options: []
   }, o = Object.keys(i);
-  return n.map((n => {
-    if ("Q2-OPTGROUP" === n.tagName) {
-      const e = n;
+  return e.map((e => {
+    if ("Q2-OPTGROUP" === e.tagName) {
+      const n = e;
       return o.reduce(((t, i) => {
         if ("options" === i) {
-          const e = Array.from(n.children).filter((n => "Q2-OPTION" === n.tagName || "Q2-OPTGROUP" === n.tagName));
-          t[i] = parseOptions(e);
-        } else t[i] = e[i];
+          const n = Array.from(e.children).filter((e => "Q2-OPTION" === e.tagName || "Q2-OPTGROUP" === e.tagName));
+          t[i] = parseOptions(n);
+        } else t[i] = n[i];
         return t;
       }), {
         ...i
       });
     }
-    if ("Q2-OPTION" === n.tagName || "Q2-DROPDOWN-ITEM" === n.tagName) return t.reduce(((e, t) => (void 0 !== n[t] && (e[t] = n[t]), 
-    e)), {
-      ...e
+    if ("Q2-OPTION" === e.tagName || "Q2-DROPDOWN-ITEM" === e.tagName) return t.reduce(((n, t) => (void 0 !== e[t] && (n[t] = e[t]), 
+    n)), {
+      ...n
     });
   }));
-}, showActionSheetList = async (n, e) => {
+}, showActionSheetList = async (e, n) => {
   var t;
-  const i = await (async (n, e) => {
+  const i = await (async (e, n) => {
     var t;
     return {
       appearance: "list",
-      title: n.label || "",
+      title: e.label || "",
       description: "",
-      event: e,
+      event: n,
       listProps: {
-        multiple: !!n.optionList.multiple,
-        selectedOptions: n.optionList.selectedOptions || [],
-        noSelect: !!n.optionList.noSelect
+        multiple: !!e.optionList.multiple,
+        selectedOptions: e.optionList.selectedOptions || [],
+        noSelect: !!e.optionList.noSelect
       },
-      options: parseOptions(await n.optionList.getContents()),
+      options: parseOptions(await e.optionList.getContents()),
       // static html only
-      slotsHtml: await (null === (t = n._getSlotsHtml) || void 0 === t ? void 0 : t.call(n)) || []
+      slotsHtml: await (null === (t = e._getSlotsHtml) || void 0 === t ? void 0 : t.call(e)) || []
     };
-  })(n, e);
+  })(e, n);
   return null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet(i);
 };
 

package/dist/components/click-elsewhere2.js

@@ -5,7 +5,7 @@ import { m as n } from "./mirror-emit.js";
 const o =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.change = s(this, "change", 7), 
-    this.tctChange = s(this, "tctChange", 7), 
+    this.tctChange = s(this, "tctChange", 5), 
     // #region Own Properties
     this.isCurrentlyFocused = !1, 
     /**

package/dist/components/q2-action-group2.js

@@ -171,7 +171,7 @@ const a =  t(class extends o {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([hidden])){display:block;width:100%;--comp-default-action-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-action-group-margin, var(--comp-default-action-group-margin))}.container{--comp-default-action-group-gap:var(--tct-action-group-gap, var(--app-scale-2x, 10px));--comp-link-gap:var(--tct-action-group-gap, var(--app-scale-4x, 20px));--tct-btn-icon-height:30px;width:100%;display:flex;gap:var(--comp-default-action-group-gap)}.container.has-q2-link{gap:var(--comp-link-gap)}.container.has-q2-btn-coin{column-gap:var(--tct-action-group-coin-column-gap, var(--app-scale-1x, 5px));row-gap:var(--tct-action-group-coin-row-gap, var(--app-scale-5x, 25px))}.container.vertical{flex-direction:var(--tct-action-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-action-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-action-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-action-group-horizontal-align-items, center);flex-wrap:var(--tct-action-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{--tct-action-group-horizontal-justify-content:space-around;flex-wrap:nowrap}.container.horizontal.has-q2-btn-coin{justify-content:var(--tct-action-group-coin-horizontal-justify-content, center);flex-direction:var(--tct-action-group-horizontal-flex-direction, row)}.container.horizontal ::slotted(:not(q2-btn)){position:relative}.container.horizontal ::slotted(:not(q2-btn):not(.is-last-action))::before{content:"";display:inline-block;width:0;height:var(--tct-action-group-separator-height, 20px);border-left:1px solid var(--tct-action-group-separator-color, var(--t-gray-12, #d9d9d9));position:absolute;left:calc(var(--comp-link-gap) * -0.5);top:50%;transform:translateY(-50%)}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}:host([full-width]:not([full-width=false])) .container{justify-content:space-evenly}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host(:not([hidden])){display:block;width:100%;--comp-default-action-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-action-group-margin, var(--comp-default-action-group-margin))}.container{--comp-default-action-group-gap:var(--tct-action-group-gap, var(--app-scale-2x, 10px));--comp-link-gap:var(--tct-action-group-gap, var(--app-scale-4x, 20px));--tct-btn-icon-height:30px;width:100%;display:flex;gap:var(--comp-default-action-group-gap)}.container.has-q2-link{gap:var(--comp-link-gap)}.container.has-q2-btn-coin{column-gap:var(--tct-action-group-coin-column-gap, var(--app-scale-1x, 5px));row-gap:var(--tct-action-group-coin-row-gap, var(--app-scale-5x, 25px))}.container.vertical{flex-direction:var(--tct-action-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-action-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-action-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-action-group-horizontal-align-items, center);flex-wrap:var(--tct-action-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{--tct-action-group-horizontal-justify-content:space-around;flex-wrap:nowrap}.container.horizontal.has-q2-btn-coin{justify-content:var(--tct-action-group-coin-horizontal-justify-content, center);flex-direction:var(--tct-action-group-horizontal-flex-direction, row)}.container.horizontal ::slotted(:not(q2-btn)){position:relative}.container.horizontal ::slotted(:not(q2-btn):not(.is-last-action))::before{content:"";display:inline-block;width:0;height:var(--tct-action-group-separator-height, 20px);border-left:1px solid var(--tct-action-group-separator-color, var(--t-gray-12, #d9d9d9));position:absolute;left:calc(var(--comp-link-gap) * -0.5);top:50%;transform:translateY(-50%)}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}:host([full-width]:not([full-width=false])) .container{justify-content:space-evenly}';
   }
 }, [ 257, "q2-action-group", {
   fullWidth: [ 516, "full-width" ],

package/dist/components/q2-action-sheet.js

@@ -48,7 +48,10 @@ const f =  t(class extends o {
     }, this.generateOption = t => {
       const o = document.createElement("q2-option"), {innerHTML: e, ...i} = t;
       return e && (o.innerHTML = c(e)), Object.entries(i).forEach((([t, e]) => {
-        void 0 !== e && ("boolean" == typeof e ? e && o.setAttribute(t, "") : o.setAttribute(t, e));
+        if (void 0 === e) return;
+        // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
+                const i = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        "boolean" == typeof e ? e && o.setAttribute(i, "") : o.setAttribute(i, e);
       })), o;
     }, 
     /**
@@ -126,25 +129,27 @@ const f =  t(class extends o {
     // #endregion
     // #region Render Methods
     this.renderList = ({data: t}) => {
-      const {listProps: o, slotsHtml: e = []} = t;
-      return i(a, null, e.filter((t => "top" === t.slot)).map((t => i("div", {
+      var o;
+      const {listProps: e, slotsHtml: s = []} = t;
+      return i(a, null, s.filter((t => "top" === t.slot)).map((t => i("div", {
         innerHTML: d(t.html)
       }))), i("div", {
         class: "content",
         ref: t => this.contentElement = t
       }, i("q2-option-list", {
         ref: t => this.optionListElement = t,
-        multiple: o.multiple,
-        noSelect: o.noSelect,
+        multiple: e.multiple,
+        label: (null === (o = this.data) || void 0 === o ? void 0 : o.title) || this.title,
+        noSelect: e.noSelect,
         onChange: this.onListChange,
         onPopoverState: this.onListPopoverStateChange,
-        selectedOptions: o.selectedOptions
-      }, i("slot", null))), i("footer", null, o.multiple && i("q2-btn", {
+        selectedOptions: e.selectedOptions
+      }, i("slot", null))), i("footer", null, e.multiple && i("q2-btn", {
         ref: t => this.doneButtonElement = t,
         "test-id": "btnDone",
         intent: "workflow-primary",
         onClick: this.onListDone
-      }, r("tecton.element.actionSheet.done"))), e.filter((t => "bottom" === t.slot)).map((t => i("div", {
+      }, r("tecton.element.actionSheet.done"))), s.filter((t => "bottom" === t.slot)).map((t => i("div", {
         innerHTML: d(t.html)
       }))));
     }, this.renderMessage = ({data: t}) => i("q2-message", {
@@ -237,20 +242,21 @@ const f =  t(class extends o {
     }
     const r = "interior is-" + ((null == o ? void 0 : o.appearance) || "slot");
     return i("dialog", {
-      key: "4207c46401f472afc8f7a1d8cd57cab33d7769b8",
+      key: "840635222baf3ed3f7193c550bb73675d0b466d4",
       ref: t => this.dialogElement = t,
       class: a,
-      onClick: this.onClick
+      onClick: this.onClick,
+      "aria-labelledby": e ? "title" : void 0
     }, i("div", {
-      key: "13d6461941da7d820b79b2ce52e44d99b50ec1a6",
+      key: "c09338fde8ba753281162bd75714e29e6a8cc936",
       class: r
     }, e && i("header", {
-      key: "683aaafb9fa00f89a8ef7c3b2ba8843e206486ea"
+      key: "d3bb667204c262a28363b71ffe6fba8209454391"
     }, i("div", {
-      key: "d5f07087923ec1752a3e7e0b31e8ab33308b8ca4",
-      class: "title"
+      key: "8981cf55df99b607a49660fd6ecfe8ef827c100e",
+      id: "title"
     }, (null == o ? void 0 : o.title) || this.title), !this.hideClose && i("q2-btn", {
-      key: "baa1d564d30adf8642af125c7dade4eeb3b31569",
+      key: "b4d175a3e7d0382ae9e4630a4fe0f85403af5888",
       ref: t => this.closeButtonElement = t,
       class: "btn-close",
       "test-id": "btnClose",
@@ -258,12 +264,12 @@ const f =  t(class extends o {
       label: "tecton.element.actionSheet.close",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "f33431b52612dcac5fb379bc0388a9df88a08535",
+      key: "95624ea4bcb5a9897a2b09326de718205a32e346",
       type: "close"
     }))), (null === (t = this.data) || void 0 === t ? void 0 : t.description) && i("p", {
-      key: "723f471d393d71ee9331a156fb8e7ca57e95eb57"
+      key: "4f599b2645c604bde96747af50f8d7344db60e11"
     }, o.description), s && i(s, {
-      key: "182d608c4ebc033cd2b5bb59b9ad3053bc821e9b",
+      key: "0878d252923c4c3a8b82cc89f8a88fc3bace794d",
       data: this.data
     })));
   }
@@ -271,7 +277,7 @@ const f =  t(class extends o {
     return this;
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding);margin-bottom:env(safe-area-inset-bottom, 0px)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header #title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';
   }
 }, [ 257, "q2-action-sheet", {
   data: [ 1040 ],

package/dist/components/q2-avatar2.js

@@ -120,7 +120,7 @@ const o =  a(class extends t {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-wrapper{position:relative;border-radius:100%}.avatar-wrapper .decorator{height:var(--app-scale-3x, 15px);width:var(--app-scale-3x, 15px);background-color:var(--tct-avatar-decorator-background-color, var(--t-base, #ffffff));border-radius:100%;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));position:absolute;bottom:0;right:0;display:flex;justify-content:center;align-items:center}.avatar-wrapper .decorator ::slotted(q2-icon){color:var(--tct-avatar-decorator-color, #000000)}.avatar-wrapper.size-small{height:var(--tct-avatar-small-size, 24px);width:var(--tct-avatar-small-size, 24px)}.avatar-wrapper.size-small .decorator{height:var(--app-scale-2x, 10px);width:var(--app-scale-2x, 10px);aspect-ratio:1/1}.avatar-wrapper.size-small .decorator ::slotted(q2-icon){height:var(--tct-avatar-decorator-small-icon-size, 8px);width:var(--tct-avatar-decorator-small-icon-size, 8px);aspect-ratio:1/1}.avatar-wrapper.size-medium{height:var(--tct-avatar-size, var(--tct-avatar-height, 44px));width:var(--tct-avatar-size, var(--tct-avatar-width, 44px))}.avatar-wrapper.size-medium .decorator{height:var(--app-scale-3x, 15px);width:var(--app-scale-3x, 15px);aspect-ratio:1/1}.avatar-wrapper.size-medium .decorator ::slotted(q2-icon){height:var(--app-scale-2x, 10px);width:var(--app-scale-2x, 10px);aspect-ratio:1/1}.avatar-wrapper.size-large{height:var(--tct-avatar-large-size, 64px);width:var(--tct-avatar-large-size, 64px)}.avatar-wrapper.size-large .decorator{height:var(--app-scale-4x, 20px);width:var(--app-scale-4x, 20px);aspect-ratio:1/1}.avatar-wrapper.size-large .decorator ::slotted(q2-icon){height:14px;width:14px;aspect-ratio:1/1}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, block);object-fit:cover;border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none);height:100%;width:100%}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, block);backdrop-filter:var(--tct-avatar-backdrop-filter);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none);height:100%;width:100%}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:100%;width:100%;border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%));border:var(--tct-avatar-border, none);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));display:flex;align-items:center;justify-content:center}.fallback q2-icon{--tct-icon-size:var(--tct-avatar-icon-size, 65%);--tct-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, currentcolor);--tct-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, currentcolor);--tct-icon-fill:var(--tct-avatar-icon-fill);color:var(--tct-avatar-icon-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--tct-avatar-icon-size, var(--tct-icon-size));height:var(--tct-avatar-icon-size, var(--tct-icon-size))}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.avatar-wrapper{position:relative;border-radius:100%}.avatar-wrapper .decorator{height:var(--app-scale-3x, 15px);width:var(--app-scale-3x, 15px);background-color:var(--tct-avatar-decorator-background-color, var(--t-base, #ffffff));border-radius:100%;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));position:absolute;bottom:0;right:0;display:flex;justify-content:center;align-items:center}.avatar-wrapper .decorator ::slotted(q2-icon){color:var(--tct-avatar-decorator-color, #000000)}.avatar-wrapper.size-small{height:var(--tct-avatar-small-size, 24px);width:var(--tct-avatar-small-size, 24px)}.avatar-wrapper.size-small .decorator{height:var(--app-scale-2x, 10px);width:var(--app-scale-2x, 10px);aspect-ratio:1/1}.avatar-wrapper.size-small .decorator ::slotted(q2-icon){height:var(--tct-avatar-decorator-small-icon-size, 8px);width:var(--tct-avatar-decorator-small-icon-size, 8px);aspect-ratio:1/1}.avatar-wrapper.size-medium{height:var(--tct-avatar-size, var(--tct-avatar-height, 44px));width:var(--tct-avatar-size, var(--tct-avatar-width, 44px))}.avatar-wrapper.size-medium .decorator{height:var(--app-scale-3x, 15px);width:var(--app-scale-3x, 15px);aspect-ratio:1/1}.avatar-wrapper.size-medium .decorator ::slotted(q2-icon){height:var(--app-scale-2x, 10px);width:var(--app-scale-2x, 10px);aspect-ratio:1/1}.avatar-wrapper.size-large{height:var(--tct-avatar-large-size, 64px);width:var(--tct-avatar-large-size, 64px)}.avatar-wrapper.size-large .decorator{height:var(--app-scale-4x, 20px);width:var(--app-scale-4x, 20px);aspect-ratio:1/1}.avatar-wrapper.size-large .decorator ::slotted(q2-icon){height:14px;width:14px;aspect-ratio:1/1}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, block);object-fit:cover;border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none);height:100%;width:100%}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, block);backdrop-filter:var(--tct-avatar-backdrop-filter);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none);height:100%;width:100%}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, var(--const-px-40, 40px))}.fallback{height:100%;width:100%;border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%));border:var(--tct-avatar-border, none);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));display:flex;align-items:center;justify-content:center}.fallback q2-icon{--tct-icon-size:var(--tct-avatar-icon-size, 65%);--tct-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, currentcolor);--tct-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, currentcolor);--tct-icon-fill:var(--tct-avatar-icon-fill);color:var(--tct-avatar-icon-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--tct-avatar-icon-size, var(--tct-icon-size));height:var(--tct-avatar-icon-size, var(--tct-icon-size))}';
   }
 }, [ 257, "q2-avatar", {
   icon: [ 1 ],

package/dist/components/q2-badge2.js

@@ -57,7 +57,7 @@ const n =  t(class extends e {
     return this;
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, var(--const-px-12, 12px));--comp-badge-large-font-size:var(--app-font-size, var(--const-px-14, 14px));--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, var(--const-px-14, 14px))}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, var(--const-px-20, 20px))}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}';
   }
 }, [ 257, "q2-badge", {
   maxLength: [ 514, "max-length" ],