npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/cjs/tecton-tab-pane.cjs.entry.js CHANGED Viewed

@@ -55,9 +55,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '58a67b201accff4cdb0cf19172f3a91a6c8effd5', 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 && (index.h("div", { key: '14ea6040e9a7c5c019d982e3f9e84227f0144d19' }, index.h("slot", { key: '2f23163c833f14e5b787f35d7af3fe162a6d3fb7', name: "loading-wrapper" }), index.h("iframe", { key: '9bdaf2ad2df5d0a0763aae906c7227d7e05052b7', 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 ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (index.h("div", { key: '064545f0fed8a7d7b7aac0ec36179d745fc350af', 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 && (index.h("div", { key: 'b74988726b4e15f377d76d9af1921a0c68027d8d' }, index.h("slot", { key: 'e4e020b962bc6d21520a5d394a4b0a4ecc060476', name: "loading-wrapper" }), index.h("iframe", { key: 'c33f35f9c4a49e23bfe5ee9b1ad2100a746e2a1f', 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 ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), index.h("div", { key: '8aeea96ffde0dfb337dd84e0346951d075b4d233', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'c81c5ad3f2c93436284fe928be54b58836ff0fff' }))));
+        }))) : (''))), index.h("div", { key: 'c6e4e3295cbf6dbdcddb7f8109a19bfe3a4975dd', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'd2db52e88ddfe939b119217ca3c69ed93e9d4e38' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -51,6 +51,7 @@
     "components/q2-mutation-observer/q2-mutation-observer.js",
     "components/q2-optgroup/q2-optgroup.js",
     "components/q2-option/q2-option.js",
+    "components/q2-otp/q2-otp.js",
     "components/q2-pagination/q2-pagination.js",
     "components/q2-pill/q2-pill.js",
     "components/q2-relative-time/q2-relative-time.js",

package/dist/collection/components/click-elsewhere/click-elsewhere.js CHANGED Viewed

@@ -18,6 +18,8 @@ export class ClickElsewhere {
             this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;
         };
         this.windowBlurHandler = () => {
+            if (!this.isCurrentlyFocused)
+                return;
             this.isCurrentlyFocused = false;
             mirrorEmit(this, ['change', 'tctChange']);
         };

package/dist/collection/components/click-elsewhere/click-elsewhere.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"click-elsewhere.js","sourceRoot":"","sources":["../../../../src/components/click-elsewhere/click-elsewhere.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC5F,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAM7C,MAAM,OAAO,cAAc;IAJ3B;QAKI,yBAAyB;QAEzB,uBAAkB,GAAY,KAAK,CAAC;QACpC;;WAEG;QACH,mBAAc,GAAa,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QA4DpE,iBAAY,GAAG,CAAC,KAAY,EAAQ,EAAE;YAClC,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;YACzE,MAAM,gBAAgB,GAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAiB,CAAC,CAAC;YAE1G,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,kBAAkB,CAAC,EAAE,CAAC;gBACvE,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;gBAChC,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;gBAC1C,OAAO;YACX,CAAC;YACD,IAAI,CAAC,kBAAkB,GAAG,gBAAgB,IAAI,kBAAkB,CAAC;QACrE,CAAC,CAAC;QAsCF,sBAAiB,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QAC9C,CAAC,CAAC;KACL;~~IAzFG~~,aAAa;IACb,qCAAqC;IAErC,4BAA4B;IAE5B,iBAAiB;QACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,SAAiB,EAAE,EAAE;YAC9C,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,SAAiB,EAAE,EAAE;YAC9C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/D,CAAC;IAED,sHAAsH;IACtH,6BAA6B;IAC7B,iBAAiB,KAAI,CAAC;IAEtB,aAAa;IACb,wBAAwB;IAExB,iBAAiB;QACb,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAc,CAAC;QAC7C,OAAO,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;gBAChD,OAAO,cAAc,CAAC;YAC1B,CAAC;YACD,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC;QAC7D,CAAC;IACL,CAAC;IAeD,iBAAiB,CAAC,MAAe;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACxD,KAAK,MAAM,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1C,MAAM,UAAU,GACZ,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;gBACzE,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;YAEhC,KAAK,MAAM,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;gBAC/C,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC/B,OAAO,IAAI,CAAC;gBAChB,CAAC;YACL,CAAC;QACL,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,cAAc,CAAC,KAAU;QACrB;;WAEG;QAEH,OAAO,IAAI,EAAE,CAAC;YACV,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC7B,OAAO,IAAI,CAAC;YAChB,CAAC;YACD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACT,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,KAAK,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI,CAAC;QAC3C,CAAC;IACL,CAAC;IAED,iBAAiB,CAAC,KAAU;QACxB,OAAO,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;IACnD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAMJ~~","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n // #region Own Properties\n\n isCurrentlyFocused: boolean = false;\n /*\n Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n /\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the user clicks outside the element\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the user clicks outside the element\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n / tslint:enable:no-empty /\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n / TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. /\n / tslint:disable:no-empty /\n componentWillLoad() {}\n\n // #endregion\n // #region Local Methods\n\n findActiveElement(): Element \| null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement \|\| !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) \|\| this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused \|\| isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n mirrorEmit(this, ['change', 'tctChange']);\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused \|\| isCurrentlyFocused;\n };\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) \|\|\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n }\n\n shadowContains(child: any): boolean {\n /\n shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n child = child.parentNode \|\| child.host;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] \|\| event.target;\n }\n\n windowBlurHandler = (): void => {\n this.isCurrentlyFocused = false;\n mirrorEmit(this, ['change', 'tctChange']);\n };\n}\n"]}
1	+ {"version":3,"file":"click-elsewhere.js","sourceRoot":"","sources":["../../../../src/components/click-elsewhere/click-elsewhere.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n@Component({\n tag: 'click-elsewhere',\n shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n // #region Own Properties\n\n isCurrentlyFocused: boolean = false;\n /*\n Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n /\n mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the user clicks outside the element\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the user clicks outside the element\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n / tslint:enable:no-empty /\n\n connectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.addEventListener(eventName, this.mouseHandler);\n });\n window.addEventListener('blur', this.windowBlurHandler);\n }\n\n disconnectedCallback() {\n this.mouseEventList.forEach((eventName: string) => {\n document.removeEventListener(eventName, this.mouseHandler);\n });\n window.removeEventListener('blur', this.windowBlurHandler);\n }\n\n / TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. /\n / tslint:disable:no-empty /\n componentWillLoad() {}\n\n // #endregion\n // #region Local Methods\n\n findActiveElement(): Element \| null {\n let workingElement = document.activeElement!;\n while (true) {\n if (!workingElement \|\| !workingElement.shadowRoot) {\n return workingElement;\n }\n workingElement = workingElement.shadowRoot.activeElement;\n }\n }\n\n mouseHandler = (event: Event): void => {\n const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n const aboutToBeFocused =\n this.shadowContains(this.shadowEventTarget(event)) \|\| this.originatesInSlots(event.target as Element);\n\n if (!aboutToBeFocused && (this.isCurrentlyFocused \|\| isCurrentlyFocused)) {\n this.isCurrentlyFocused = false;\n mirrorEmit(this, ['change', 'tctChange']);\n return;\n }\n this.isCurrentlyFocused = aboutToBeFocused \|\| isCurrentlyFocused;\n };\n\n originatesInSlots(target: Element): boolean {\n const slots = this.hostElement.querySelectorAll('slot');\n for (const currentSlot of Array.from(slots)) {\n const lightNodes =\n (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) \|\|\n this.hostElement.childNodes;\n\n for (const currentNode of Array.from(lightNodes)) {\n if (currentNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n }\n\n shadowContains(child: any): boolean {\n /\n shadow-dom enabled version of Node.contains()\n */\n\n while (true) {\n if (child === this.hostElement) {\n return true;\n }\n if (!child) {\n return false;\n }\n child = child.parentNode \|\| child.host;\n }\n }\n\n shadowEventTarget(event: any): Element {\n return event.composedPath()[0] \|\| event.target;\n }\n\n windowBlurHandler = (): void => {\n if (!this.isCurrentlyFocused) return;\n this.isCurrentlyFocused = false;\n mirrorEmit(this, ['change', 'tctChange']);\n };\n}\n"]}

package/dist/collection/components/q2-action-group/q2-action-group.css CHANGED Viewed

@@ -65,6 +65,20 @@ button {
   visibility: hidden;
 }
+/**
+ * @prop --tct-action-group-margin: (<length-percentage>+) Controls the outer margin of the action group host.
+ * @prop --tct-action-group-gap: (<length-percentage>+) Controls the gap between action group children.
+ * @prop --tct-action-group-coin-column-gap: (<length-percentage>) Controls the column gap when the action group contains q2-btn coin variants.
+ * @prop --tct-action-group-coin-row-gap: (<length-percentage>) Controls the row gap when the action group contains q2-btn coin variants.
+ * @prop --tct-action-group-coin-horizontal-justify-content: (<custom-ident>) Controls the horizontal justify-content when the action group contains q2-btn coin variants.
+ * @prop --tct-action-group-horizontal-align-items: (<custom-ident>) Controls the align-items value of the action group in the horizontal layout.
+ * @prop --tct-action-group-horizontal-flex-direction: (<custom-ident>) Controls the flex-direction of the action group in the horizontal layout.
+ * @prop --tct-action-group-horizontal-flex-wrap: (<custom-ident>) Controls the flex-wrap value of the action group in the horizontal layout.
+ * @prop --tct-action-group-horizontal-justify-content: (<custom-ident>) Controls the justify-content value of the action group in the horizontal layout.
+ * @prop --tct-action-group-vertical-flex-direction: (<custom-ident>) Controls the flex-direction of the action group in the vertical layout.
+ * @prop --tct-action-group-separator-color: (<color>) Controls the color of the separator rendered between non-q2-btn children in the horizontal layout.
+ * @prop --tct-action-group-separator-height: (<length>) Controls the height of the separator rendered between non-q2-btn children in the horizontal layout.
+ */
 :host(:not([hidden])) {
   display: block;
   width: 100%;

package/dist/collection/components/q2-action-sheet/q2-action-sheet.css CHANGED Viewed

@@ -65,6 +65,22 @@ button {
   visibility: hidden;
 }
+/**
+ * @prop --tct-action-sheet-background: (<color>) Controls the background color of the action sheet dialog.
+ * @prop --tct-action-sheet-color: (<color>) Controls the text color of the action sheet dialog.
+ * @prop --tct-action-sheet-backdrop-background: (<color>) Controls the background color of the action sheet backdrop.
+ * @prop --tct-action-sheet-border-radius: (<length-percentage>+) Controls the corner radius of the action sheet dialog.
+ * @prop --tct-action-sheet-box-shadow: (*) Controls the box shadow of the action sheet dialog.
+ * @prop --tct-action-sheet-padding: (<length-percentage>+) Controls the inner padding of the action sheet dialog.
+ * @prop --tct-action-sheet-gap: (<length-percentage>) Controls the vertical gap between the action sheet header, content, and footer.
+ * @prop --tct-action-sheet-header-height: (<length>) Controls the height of the action sheet header row.
+ * @prop --tct-action-sheet-close-button-size: (<length>) Controls the size of the action sheet close button.
+ * @prop --tct-action-sheet-content-gradient-height: (<length>) Controls the height of the scroll-edge gradient on the action sheet content.
+ * @prop --tct-action-sheet-max-width: (<length-percentage>) Controls the maximum width of the action sheet dialog.
+ * @prop --tct-action-sheet-max-height: (<length-percentage>) Controls the maximum height of the action sheet dialog.
+ * @prop --tct-action-sheet-min-height: (<length-percentage>) Controls the minimum height of the action sheet dialog.
+ * @prop --tct-action-sheet-tween: (*) Controls the open/close transition timing of the action sheet dialog.
+ */
 @keyframes showBackdrop {
   from {
     opacity: 0;

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js CHANGED Viewed

@@ -17,6 +17,23 @@ export class Q2ActionSheet {
         // #region State Properties
         this.isScrollable = false;
         this.renderStatus = 'is-closing';
+        /**
+         * Focuses the last visible (non-hidden, non-disabled) option in the option list.
+         * Uses the async getOptions() method, but is invoked after preventDefault() has
+         * already been called synchronously by the caller.
+         */
+        this.focusLastVisibleOption = async () => {
+            if (!this.optionListElement)
+                return;
+            const allOptions = await this.optionListElement.getOptions();
+            const lastVisibleOption = allOptions
+                .slice()
+                .reverse()
+                .find(opt => !opt.hidden && !opt.disabled);
+            if (lastVisibleOption) {
+                lastVisibleOption.focus();
+            }
+        };
         this.generateOptgroup = (option) => {
             const optgroupElement = document.createElement('q2-optgroup');
             if (option.label)
@@ -45,6 +62,91 @@ export class Q2ActionSheet {
             });
             return optionElement;
         };
+        /**
+         * Handles keyboard navigation within the action sheet dialog.
+         * Manages Tab navigation between options and action buttons (close/done).
+         * Allows Tab to exit to browser chrome when reaching boundaries.
+         *
+         * NOTE: This handler is intentionally synchronous. `event.preventDefault()`
+         * must be called before the browser processes the Tab key (i.e., during the
+         * synchronous portion of the keydown event). Introducing an `await` here
+         * allows the browser to shift focus before preventDefault runs, which causes
+         * Tab from the close button to escape the dialog instead of cycling back to
+         * the options.
+         * @param event - The keyboard event.
+         */
+        this.handleDialogKeydown = (event) => {
+            const { data } = this;
+            // Only activate for list appearance with an option list
+            if (!data || data.appearance !== 'list' || !this.optionListElement)
+                return;
+            const { key, shiftKey } = event;
+            if (key !== 'Tab')
+                return;
+            const shadowActiveElement = this.hostElement.shadowRoot.activeElement;
+            const closeButton = this.closeButtonElement;
+            const doneButton = this.doneButtonElement;
+            const isInCloseButton = shadowActiveElement === closeButton;
+            const isInDoneButton = shadowActiveElement === doneButton;
+            // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.
+            // Avoid `await optionListElement.getOptions()` here — that defers the handler past
+            // the browser's default Tab handling, making preventDefault() ineffective.
+            const activeElement = document.activeElement;
+            const isOnOption = !!activeElement &&
+                (activeElement.tagName === 'Q2-OPTION' || activeElement.tagName === 'Q2-DROPDOWN-ITEM') &&
+                this.hostElement.contains(activeElement);
+            if (shiftKey) {
+                // Shift+Tab: if on close button
+                if (isInCloseButton) {
+                    // With a done button (multi-select): allow default to exit to browser.
+                    // Browser Shift+Tab from the URL bar lands on the done button (last
+                    // tabbable in DOM order), which redirects to the last option via
+                    // focusLastVisibleOption — so choices remain reachable.
+                    if (doneButton) {
+                        // Let it bubble - exits to browser chrome
+                        return;
+                    }
+                    // Without a done button (single-select): redirect to the last visible
+                    // option. Otherwise focus would exit to the URL bar and the next
+                    // Shift+Tab back into the page would land on the close button (the
+                    // only tabbable in the modal), trapping the user in URL ↔ close
+                    // with no path back to choices.
+                    event.preventDefault();
+                    this.focusLastVisibleOption();
+                }
+                // Shift+Tab: if on done button, focus last option
+                else if (isInDoneButton) {
+                    event.preventDefault();
+                    this.focusLastVisibleOption();
+                }
+                // Shift+Tab: if on any option, go to close button
+                else if (isOnOption && closeButton) {
+                    event.preventDefault();
+                    closeButton.focus();
+                }
+            }
+            else {
+                // Forward Tab: if on close button, skip to first/selected option
+                if (isInCloseButton) {
+                    event.preventDefault();
+                    this.optionListElement.focus();
+                }
+                // Forward Tab: if on done button, allow default to exit to browser
+                else if (isInDoneButton) {
+                    // Let it bubble - exits to browser chrome
+                    return;
+                }
+                // Forward Tab: if on any option
+                else if (isOnOption) {
+                    if (doneButton) {
+                        // With done button: go to done button
+                        event.preventDefault();
+                        doneButton.focus();
+                    }
+                    // else: No done button - allow default Tab behavior to exit to browser
+                }
+            }
+        };
         this.onCancel = (event) => {
             var _a, _b;
             event.preventDefault();
@@ -89,7 +191,7 @@ export class Q2ActionSheet {
             const { listProps, slotsHtml = [] } = data;
             return (h(Fragment, null, slotsHtml
                 .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
+                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
                 .filter(entry => entry.slot === 'bottom')
                 .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
         };
@@ -104,9 +206,12 @@ export class Q2ActionSheet {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.dialogElement.removeEventListener('cancel', this.onCancel);
+        this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);
     }
     componentDidLoad() {
         this.dialogElement.addEventListener('cancel', this.onCancel);
+        // Use capture phase to intercept Tab before option-list handles it
+        this.dialogElement.addEventListener('keydown', this.handleDialogKeydown, true);
         this.ready.emit();
     }
     // #endregion
@@ -208,7 +313,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '7ef6d64d3f29d01edcc5ba09c6917e08eb27ed0d', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'a7da46ce286106d4a14edd50a2ed926b0adb7c84', class: interiorClasses }, showHeader && (h("header", { key: '8de945c05de298bf044cb01b872e2f0db17d9910' }, h("div", { key: 'b4ec8e173b7109456d927e3f3ceeb8e6e936243d', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'ccb610c96edec66abf9f5b353c973e8af9702472', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '1989ba1b179b5053719a78a1d4b9359734f23f36', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '13fc69d21bf48b27f22555630a25c7019ede5a2e' }, data.description), RenderContent && h(RenderContent, { key: 'ec78bb8ee37838b38c32405c4292b6836e5deb5f', data: this.data }))));
+        return (h("dialog", { key: '4a0e3a165326ab9e724600d7e030fa39095dcda0', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '9848ffb2d692a788ad1cf1d606f3cfd8638501ae', class: interiorClasses }, showHeader && (h("header", { key: '2a573e272202699a8bf225ae74263aea107f4e5d' }, h("div", { key: '6ea6f8b415ecba0414d337efc1ce4cfdb0ec0cc9', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '8f5efe5b235afadcaba63cd9ab0906c01cbb07a0', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'af64434f4d0ec15d183a91501e48cc550fc2532e', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'a2044acff20cfc72cbde4d0899d34e51ac390984' }, data.description), RenderContent && h(RenderContent, { key: '558338b884c43bc014cc577581646fe830b7bc77', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-action-sheet.js","sourceRoot":"","sources":["../../../../src/components/q2-action-sheet/q2-action-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Method,\n h,\n State,\n Event,\n EventEmitter,\n Element,\n Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n ActionSheetListCloseData,\n ActionSheetData,\n ActionSheetListData,\n ActionSheetMessageData,\n ActionSheetSelectedOption,\n ActionSheetListOption,\n ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n /\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n // #region Own Properties\n\n contentElement: HTMLDivElement;\n dialogElement: HTMLDialogElement;\n initialSelectedOptions: ActionSheetSelectedOption[] = [];\n maxHeight: number = 0.75;\n minHeight: number = 0.2;\n optionListElement: HTMLQ2OptionListElement;\n selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n isScrollable: boolean = false;\n\n @State()\n renderStatus: 'is-open' \| 'is-closing' \| 'is-opening' = 'is-closing';\n\n // #endregion\n // #region Public Property API\n\n @Prop({ mutable: true })\n data: ActionSheetData;\n\n @Prop()\n hideClose: boolean;\n\n @Prop()\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the action sheet is closed.\n * @deprecated Use 'tctClose' instead\n /\n @Event()\n close: EventEmitter<ActionSheetListCloseData>;\n\n /\n Emitted when the component has finished rendering.\n * @private\n /\n @Event({ bubbles: false })\n ready: EventEmitter;\n\n /\n Emitted when the action sheet is closed.\n /\n @Event()\n tctClose: EventEmitter<ActionSheetListCloseData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.dialogElement.removeEventListener('cancel', this.onCancel);\n }\n\n componentDidLoad() {\n this.dialogElement.addEventListener('cancel', this.onCancel);\n this.ready.emit();\n }\n\n // #endregion\n // #region Public Methods API\n\n @Method()\n async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n mirrorEmit(this, ['close', 'tctClose'], data);\n this.renderStatus = 'is-closing';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-closing') return;\n this.dialogElement.close();\n this.renderStatus = null;\n this.data = undefined;\n this.initialSelectedOptions = [];\n this.selectedOptions = { values: [], value: '' };\n this.hidePostHook();\n },\n { once: true }\n );\n }\n\n @Method()\n async show() {\n this.showPreHook();\n await waitForNextPaint();\n this.updateDialogMinMaxHeight();\n this.storeInitialValues();\n\n if (this.dialogElement.open) return;\n\n this.dialogElement.showModal();\n this.renderStatus = 'is-opening';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-opening') return;\n this.renderStatus = 'is-open';\n this.focusContent();\n },\n { once: true }\n );\n }\n\n // #endregion\n // #region Local Methods\n\n focusContent() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n const { event } = data;\n if (event instanceof KeyboardEvent) {\n this.optionListElement.handleExternalKeydown(event);\n } else {\n this.optionListElement.focus();\n }\n }\n }\n\n generateOptgroup = (option: ActionSheetListOptgroup) => {\n const optgroupElement = document.createElement('q2-optgroup');\n if (option.label) optgroupElement.setAttribute('label', option.label);\n if (option.disabled) optgroupElement.setAttribute('disabled', '');\n if (!!option.options.length)\n option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n return optgroupElement;\n };\n\n generateOption = (option: ActionSheetListOption) => {\n const optionElement = document.createElement('q2-option');\n const { innerHTML, ...attributes } = option;\n if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n Object.entries(attributes).forEach(([key, value]) => {\n if (value === undefined) return;\n if (typeof value === 'boolean') {\n if (value) optionElement.setAttribute(key, '');\n } else {\n optionElement.setAttribute(key, value);\n }\n });\n return optionElement;\n };\n\n hidePostHook() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.hostElement.innerHTML = null;\n }\n }\n\n onCancel = (event: Event) => {\n event.preventDefault();\n const { initialSelectedOptions } = this;\n this.hide({\n value: initialSelectedOptions?.[0]?.value ?? '',\n values: initialSelectedOptions,\n type: 'cancel',\n });\n };\n\n onClick = (event: MouseEvent) => {\n const eventTarget = event.target as HTMLElement;\n if (!(eventTarget instanceof HTMLElement)) return;\n\n const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n if (isInContent) return;\n this.onCancel(event);\n };\n\n onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n this.selectedOptions = event.detail;\n };\n\n onListDone = () => {\n this.hide({\n ...this.selectedOptions,\n type: 'confirm',\n });\n };\n\n onListPopoverStateChange = (\n event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>\n ) => {\n if (event.detail.open) return;\n\n if (event.detail.action === 'close') {\n this.onCancel(event);\n } else {\n this.onListDone();\n }\n };\n\n showPreHook() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.hostElement.innerHTML = null;\n data.options.forEach(option => {\n this.hostElement.appendChild(\n 'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n );\n });\n }\n }\n\n storeInitialValues() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.initialSelectedOptions = data.listProps.selectedOptions;\n }\n }\n\n updateDialogMinMaxHeight() {\n const windowHeight = window.innerHeight;\n this.dialogElement.style.setProperty(\n '--comp-action-sheet-computed-min-height',\n `${Math.floor(windowHeight this.minHeight)}px`\n );\n this.dialogElement.style.setProperty(\n '--comp-action-sheet-computed-max-height',\n `${Math.floor(windowHeight * this.maxHeight)}px`\n );\n }\n\n // #endregion\n // #region Render Methods\n\n renderList = ({ data }: { data: ActionSheetListData }) => {\n const { listProps, slotsHtml = [] } = data;\n return (\n <Fragment>\n {slotsHtml\n .filter(entry => entry.slot === 'top')\n .map(entry => (\n <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n ))}\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n <q2-option-list\n ref={el => (this.optionListElement = el)}\n multiple={listProps.multiple}\n noSelect={listProps.noSelect}\n onChange={this.onListChange}\n onPopoverState={this.onListPopoverStateChange}\n selectedOptions={listProps.selectedOptions}\n >\n <slot />\n </q2-option-list>\n </div>\n <footer>\n {listProps.multiple && (\n <q2-btn\n test-id=\"btnDone\"\n intent=\"workflow-primary\"\n onClick={this.onListDone}\n >\n {loc('tecton.element.actionSheet.done')}\n </q2-btn>\n )}\n </footer>\n {slotsHtml\n .filter(entry => entry.slot === 'bottom')\n .map(entry => (\n <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n ))}\n </Fragment>\n );\n };\n\n renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n return (\n <q2-message type={data.type}>\n {data.title && <h2>{data.title}</h2>}\n {data.description && <p>{data.description}</p>}\n </q2-message>\n );\n };\n\n renderSlot = () => {\n return (\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n <slot />\n </div>\n );\n };\n\n render() {\n const { data } = this;\n const showHeader = data?.title \|\| this.title \|\| !this.hideClose;\n const renderStatus = this.renderStatus \|\| '';\n\n let RenderContent = null;\n switch (data?.appearance) {\n case 'message':\n RenderContent = this.renderMessage;\n break;\n\n case 'list':\n RenderContent = this.renderList;\n break;\n\n default:\n RenderContent = this.renderSlot;\n break;\n }\n const appearance = data?.appearance \|\| 'slot';\n const interiorClasses = `interior is-${appearance}`;\n return (\n <dialog\n ref={el => (this.dialogElement = el)}\n class={renderStatus}\n onClick={this.onClick}\n >\n <div class={interiorClasses}>\n {showHeader && (\n <header>\n <div class=\"title\">{data?.title \|\| this.title}</div>\n {!this.hideClose && (\n <q2-btn\n class=\"btn-close\"\n test-id=\"btnClose\"\n onClick={this.onCancel}\n label=\"tecton.element.actionSheet.close\"\n hide-label\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n )}\n </header>\n )}\n {this.data?.description && <p>{data.description}</p>}\n {RenderContent && <RenderContent data={this.data} />}\n </div>\n </dialog>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-action-sheet.js","sourceRoot":"","sources":["../../../../src/components/q2-action-sheet/q2-action-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Method,\n h,\n State,\n Event,\n EventEmitter,\n Element,\n Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n ActionSheetListCloseData,\n ActionSheetData,\n ActionSheetListData,\n ActionSheetMessageData,\n ActionSheetSelectedOption,\n ActionSheetListOption,\n ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n /\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n // #region Own Properties\n\n closeButtonElement: HTMLQ2BtnElement;\n contentElement: HTMLDivElement;\n dialogElement: HTMLDialogElement;\n doneButtonElement: HTMLQ2BtnElement;\n initialSelectedOptions: ActionSheetSelectedOption[] = [];\n maxHeight: number = 0.75;\n minHeight: number = 0.2;\n optionListElement: HTMLQ2OptionListElement;\n selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n isScrollable: boolean = false;\n\n @State()\n renderStatus: 'is-open' \| 'is-closing' \| 'is-opening' = 'is-closing';\n\n // #endregion\n // #region Public Property API\n\n @Prop({ mutable: true })\n data: ActionSheetData;\n\n @Prop()\n hideClose: boolean;\n\n @Prop()\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the action sheet is closed.\n * @deprecated Use 'tctClose' instead\n /\n @Event()\n close: EventEmitter<ActionSheetListCloseData>;\n\n /\n Emitted when the component has finished rendering.\n * @private\n /\n @Event({ bubbles: false })\n ready: EventEmitter;\n\n /\n Emitted when the action sheet is closed.\n /\n @Event()\n tctClose: EventEmitter<ActionSheetListCloseData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.dialogElement.removeEventListener('cancel', this.onCancel);\n this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);\n }\n\n componentDidLoad() {\n this.dialogElement.addEventListener('cancel', this.onCancel);\n // Use capture phase to intercept Tab before option-list handles it\n this.dialogElement.addEventListener('keydown', this.handleDialogKeydown, true);\n this.ready.emit();\n }\n\n // #endregion\n // #region Public Methods API\n\n @Method()\n async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n mirrorEmit(this, ['close', 'tctClose'], data);\n this.renderStatus = 'is-closing';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-closing') return;\n this.dialogElement.close();\n this.renderStatus = null;\n this.data = undefined;\n this.initialSelectedOptions = [];\n this.selectedOptions = { values: [], value: '' };\n this.hidePostHook();\n },\n { once: true }\n );\n }\n\n @Method()\n async show() {\n this.showPreHook();\n await waitForNextPaint();\n this.updateDialogMinMaxHeight();\n this.storeInitialValues();\n\n if (this.dialogElement.open) return;\n\n this.dialogElement.showModal();\n this.renderStatus = 'is-opening';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-opening') return;\n this.renderStatus = 'is-open';\n this.focusContent();\n },\n { once: true }\n );\n }\n\n // #endregion\n // #region Local Methods\n\n focusContent() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n const { event } = data;\n if (event instanceof KeyboardEvent) {\n this.optionListElement.handleExternalKeydown(event);\n } else {\n this.optionListElement.focus();\n }\n }\n }\n\n /\n Focuses the last visible (non-hidden, non-disabled) option in the option list.\n * Uses the async getOptions() method, but is invoked after preventDefault() has\n * already been called synchronously by the caller.\n /\n focusLastVisibleOption = async () => {\n if (!this.optionListElement) return;\n const allOptions = await this.optionListElement.getOptions();\n const lastVisibleOption = allOptions\n .slice()\n .reverse()\n .find(opt => !opt.hidden && !opt.disabled);\n if (lastVisibleOption) {\n lastVisibleOption.focus();\n }\n };\n\n generateOptgroup = (option: ActionSheetListOptgroup) => {\n const optgroupElement = document.createElement('q2-optgroup');\n if (option.label) optgroupElement.setAttribute('label', option.label);\n if (option.disabled) optgroupElement.setAttribute('disabled', '');\n if (!!option.options.length)\n option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n return optgroupElement;\n };\n\n generateOption = (option: ActionSheetListOption) => {\n const optionElement = document.createElement('q2-option');\n const { innerHTML, ...attributes } = option;\n if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n Object.entries(attributes).forEach(([key, value]) => {\n if (value === undefined) return;\n if (typeof value === 'boolean') {\n if (value) optionElement.setAttribute(key, '');\n } else {\n optionElement.setAttribute(key, value);\n }\n });\n return optionElement;\n };\n\n /\n Handles keyboard navigation within the action sheet dialog.\n * Manages Tab navigation between options and action buttons (close/done).\n * Allows Tab to exit to browser chrome when reaching boundaries.\n \n NOTE: This handler is intentionally synchronous. `event.preventDefault()`\n * must be called before the browser processes the Tab key (i.e., during the\n * synchronous portion of the keydown event). Introducing an `await` here\n * allows the browser to shift focus before preventDefault runs, which causes\n * Tab from the close button to escape the dialog instead of cycling back to\n * the options.\n * @param event - The keyboard event.\n /\n handleDialogKeydown = (event: KeyboardEvent) => {\n const { data } = this;\n // Only activate for list appearance with an option list\n if (!data \|\| data.appearance !== 'list' \|\| !this.optionListElement) return;\n\n const { key, shiftKey } = event;\n if (key !== 'Tab') return;\n\n const shadowActiveElement = this.hostElement.shadowRoot.activeElement;\n const closeButton = this.closeButtonElement;\n const doneButton = this.doneButtonElement;\n\n const isInCloseButton = shadowActiveElement === closeButton;\n const isInDoneButton = shadowActiveElement === doneButton;\n\n // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.\n // Avoid `await optionListElement.getOptions()` here — that defers the handler past\n // the browser's default Tab handling, making preventDefault() ineffective.\n const activeElement = document.activeElement;\n const isOnOption =\n !!activeElement &&\n (activeElement.tagName === 'Q2-OPTION' \|\| activeElement.tagName === 'Q2-DROPDOWN-ITEM') &&\n this.hostElement.contains(activeElement);\n\n if (shiftKey) {\n // Shift+Tab: if on close button\n if (isInCloseButton) {\n // With a done button (multi-select): allow default to exit to browser.\n // Browser Shift+Tab from the URL bar lands on the done button (last\n // tabbable in DOM order), which redirects to the last option via\n // focusLastVisibleOption — so choices remain reachable.\n if (doneButton) {\n // Let it bubble - exits to browser chrome\n return;\n }\n // Without a done button (single-select): redirect to the last visible\n // option. Otherwise focus would exit to the URL bar and the next\n // Shift+Tab back into the page would land on the close button (the\n // only tabbable in the modal), trapping the user in URL ↔ close\n // with no path back to choices.\n event.preventDefault();\n this.focusLastVisibleOption();\n }\n // Shift+Tab: if on done button, focus last option\n else if (isInDoneButton) {\n event.preventDefault();\n this.focusLastVisibleOption();\n }\n // Shift+Tab: if on any option, go to close button\n else if (isOnOption && closeButton) {\n event.preventDefault();\n closeButton.focus();\n }\n } else {\n // Forward Tab: if on close button, skip to first/selected option\n if (isInCloseButton) {\n event.preventDefault();\n this.optionListElement.focus();\n }\n // Forward Tab: if on done button, allow default to exit to browser\n else if (isInDoneButton) {\n // Let it bubble - exits to browser chrome\n return;\n }\n // Forward Tab: if on any option\n else if (isOnOption) {\n if (doneButton) {\n // With done button: go to done button\n event.preventDefault();\n doneButton.focus();\n }\n // else: No done button - allow default Tab behavior to exit to browser\n }\n }\n };\n\n hidePostHook() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.hostElement.innerHTML = null;\n }\n }\n\n onCancel = (event: Event) => {\n event.preventDefault();\n const { initialSelectedOptions } = this;\n this.hide({\n value: initialSelectedOptions?.[0]?.value ?? '',\n values: initialSelectedOptions,\n type: 'cancel',\n });\n };\n\n onClick = (event: MouseEvent) => {\n const eventTarget = event.target as HTMLElement;\n if (!(eventTarget instanceof HTMLElement)) return;\n\n const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n if (isInContent) return;\n this.onCancel(event);\n };\n\n onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n this.selectedOptions = event.detail;\n };\n\n onListDone = () => {\n this.hide({\n ...this.selectedOptions,\n type: 'confirm',\n });\n };\n\n onListPopoverStateChange = (\n event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>\n ) => {\n if (event.detail.open) return;\n\n if (event.detail.action === 'close') {\n this.onCancel(event);\n } else {\n this.onListDone();\n }\n };\n\n showPreHook() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.hostElement.innerHTML = null;\n data.options.forEach(option => {\n this.hostElement.appendChild(\n 'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n );\n });\n }\n }\n\n storeInitialValues() {\n const { data } = this;\n if (!data) return;\n if (data.appearance === 'list') {\n this.initialSelectedOptions = data.listProps.selectedOptions;\n }\n }\n\n updateDialogMinMaxHeight() {\n const windowHeight = window.innerHeight;\n this.dialogElement.style.setProperty(\n '--comp-action-sheet-computed-min-height',\n `${Math.floor(windowHeight this.minHeight)}px`\n );\n this.dialogElement.style.setProperty(\n '--comp-action-sheet-computed-max-height',\n `${Math.floor(windowHeight * this.maxHeight)}px`\n );\n }\n\n // #endregion\n // #region Render Methods\n\n renderList = ({ data }: { data: ActionSheetListData }) => {\n const { listProps, slotsHtml = [] } = data;\n return (\n <Fragment>\n {slotsHtml\n .filter(entry => entry.slot === 'top')\n .map(entry => (\n <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n ))}\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n <q2-option-list\n ref={el => (this.optionListElement = el)}\n multiple={listProps.multiple}\n noSelect={listProps.noSelect}\n onChange={this.onListChange}\n onPopoverState={this.onListPopoverStateChange}\n selectedOptions={listProps.selectedOptions}\n >\n <slot />\n </q2-option-list>\n </div>\n <footer>\n {listProps.multiple && (\n <q2-btn\n ref={el => (this.doneButtonElement = el)}\n test-id=\"btnDone\"\n intent=\"workflow-primary\"\n onClick={this.onListDone}\n >\n {loc('tecton.element.actionSheet.done')}\n </q2-btn>\n )}\n </footer>\n {slotsHtml\n .filter(entry => entry.slot === 'bottom')\n .map(entry => (\n <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n ))}\n </Fragment>\n );\n };\n\n renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n return (\n <q2-message type={data.type}>\n {data.title && <h2>{data.title}</h2>}\n {data.description && <p>{data.description}</p>}\n </q2-message>\n );\n };\n\n renderSlot = () => {\n return (\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n <slot />\n </div>\n );\n };\n\n render() {\n const { data } = this;\n const showHeader = data?.title \|\| this.title \|\| !this.hideClose;\n const renderStatus = this.renderStatus \|\| '';\n\n let RenderContent = null;\n switch (data?.appearance) {\n case 'message':\n RenderContent = this.renderMessage;\n break;\n\n case 'list':\n RenderContent = this.renderList;\n break;\n\n default:\n RenderContent = this.renderSlot;\n break;\n }\n const appearance = data?.appearance \|\| 'slot';\n const interiorClasses = `interior is-${appearance}`;\n return (\n <dialog\n ref={el => (this.dialogElement = el)}\n class={renderStatus}\n onClick={this.onClick}\n >\n <div class={interiorClasses}>\n {showHeader && (\n <header>\n <div class=\"title\">{data?.title \|\| this.title}</div>\n {!this.hideClose && (\n <q2-btn\n ref={el => (this.closeButtonElement = el)}\n class=\"btn-close\"\n test-id=\"btnClose\"\n onClick={this.onCancel}\n label=\"tecton.element.actionSheet.close\"\n hide-label\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n )}\n </header>\n )}\n {this.data?.description && <p>{data.description}</p>}\n {RenderContent && <RenderContent data={this.data} />}\n </div>\n </dialog>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-avatar/q2-avatar.css CHANGED Viewed

@@ -65,6 +65,30 @@ button {
   visibility: hidden;
 }
+/**
+ * @prop --tct-avatar-background: (<color>) Controls the background color of the avatar shape in its default and fallback states.
+ * @prop --tct-avatar-text-color: (<color>) Controls the text color of the avatar initials.
+ * @prop --tct-avatar-font-size: (<length-percentage>) Controls the font size of the avatar initials.
+ * @prop --tct-avatar-font-weight: (<number>) Controls the font weight of the avatar initials.
+ * @prop --tct-avatar-display: (<custom-ident>) Controls the CSS display value of the avatar image and initials elements.
+ * @prop --tct-avatar-border?: (*) Controls the optional border shorthand applied to the avatar shape.
+ * @prop --tct-avatar-border-radius: (<length-percentage>) Controls the corner radius applied to the avatar via the legacy border-radius fallback chain.
+ * @prop --tct-avatar-img-border-radius: (<length-percentage>) Controls the corner radius of the avatar image and fallback shape.
+ * @prop --tct-avatar-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the avatar initials shape.
+ * @prop --tct-avatar-size: (<length>) Controls both height and width of the medium-size avatar.
+ * @prop --tct-avatar-height: (<length>) Controls the height of the medium-size avatar when --tct-avatar-size is not set.
+ * @prop --tct-avatar-width: (<length>) Controls the width of the medium-size avatar when --tct-avatar-size is not set.
+ * @prop --tct-avatar-small-size: (<length>) Controls both height and width of the small-size avatar.
+ * @prop --tct-avatar-large-size: (<length>) Controls both height and width of the large-size avatar.
+ * @prop --tct-avatar-icon-color: (<color>) Controls the color of the fallback icon when no image or initials are provided.
+ * @prop --tct-avatar-icon-fill?: (<color>) Controls the optional fill color of the fallback icon when no image or initials are provided.
+ * @prop --tct-avatar-icon-size: (<length-percentage>) Controls the size of the fallback icon relative to the avatar.
+ * @prop --tct-avatar-icon-stroke-primary: (<color>) Controls the primary stroke color of the fallback icon.
+ * @prop --tct-avatar-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the fallback icon.
+ * @prop --tct-avatar-decorator-background-color: (<color>) Controls the background color of the decorator badge attached to the avatar.
+ * @prop --tct-avatar-decorator-color: (<color>) Controls the color of the slotted icon inside the decorator badge.
+ * @prop --tct-avatar-decorator-small-icon-size: (<length>) Controls the size of the decorator icon when the avatar is small.
+ */
 .avatar-wrapper {
   position: relative;
   border: 1px solid transparent;

package/dist/collection/components/q2-avatar/test/q2-avatar-test.vr.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// Inline 2x2 solid-blue PNG — keeps the image variant hermetic (no network).
+const IMAGE_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12NkYGD4z8DAwMTAwMDAAAALzAEFwQ7e7AAAAABJRU5ErkJggg==';
+const VARIANTS = [
+    {
+        name: 'icon-small',
+        html: `<q2-avatar size="small" icon="person"></q2-avatar>`,
+    },
+    {
+        name: 'icon-medium',
+        html: `<q2-avatar size="medium" icon="person"></q2-avatar>`,
+    },
+    {
+        name: 'icon-large',
+        html: `<q2-avatar size="large" icon="person"></q2-avatar>`,
+    },
+    {
+        name: 'initials-1',
+        html: `<q2-avatar initials="L"></q2-avatar>`,
+    },
+    {
+        name: 'initials-2',
+        html: `<q2-avatar initials="LS"></q2-avatar>`,
+    },
+    {
+        name: 'initials-3',
+        html: `<q2-avatar initials="LSM"></q2-avatar>`,
+    },
+    {
+        name: 'initials-4',
+        html: `<q2-avatar initials="LSMA"></q2-avatar>`,
+    },
+    {
+        name: 'image',
+        html: `<q2-avatar size="medium" name="Laura Smith" src="${IMAGE_DATA_URI}"></q2-avatar>`,
+    },
+    {
+        name: 'with-decorator',
+        html: `<q2-avatar initials="LS"><q2-icon type="chevron-down" slot="decorator"></q2-icon></q2-avatar>`,
+    },
+    {
+        name: 'icon-custom',
+        html: `<q2-avatar icon="star"></q2-avatar>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-avatar--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-avatar — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-avatar-test.vr.js.map

package/dist/collection/components/q2-avatar/test/q2-avatar-test.vr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-avatar-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-avatar/test/q2-avatar-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAE1E,6EAA6E;AAC7E,MAAM,cAAc,GAChB,oIAAoI,CAAC;AAIzI,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,oDAAoD;KAC7D;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,qDAAqD;KAC9D;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,oDAAoD;KAC7D;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,sCAAsC;KAC/C;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,uCAAuC;KAChD;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,wCAAwC;KACjD;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,yCAAyC;KAClD;IACD;QACI,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,oDAAoD,cAAc,gBAAgB;KAC3F;IACD;QACI,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,+FAA+F;KACxG;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,qCAAqC;KAC9C;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,cAAc,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACtE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,cAAc,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC7F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAChD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\n// Inline 2x2 solid-blue PNG — keeps the image variant hermetic (no network).\nconst IMAGE_DATA_URI =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12NkYGD4z8DAwMTAwMDAAAALzAEFwQ7e7AAAAABJRU5ErkJggg==';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n {\n name: 'icon-small',\n html: `<q2-avatar size=\"small\" icon=\"person\"></q2-avatar>`,\n },\n {\n name: 'icon-medium',\n html: `<q2-avatar size=\"medium\" icon=\"person\"></q2-avatar>`,\n },\n {\n name: 'icon-large',\n html: `<q2-avatar size=\"large\" icon=\"person\"></q2-avatar>`,\n },\n {\n name: 'initials-1',\n html: `<q2-avatar initials=\"L\"></q2-avatar>`,\n },\n {\n name: 'initials-2',\n html: `<q2-avatar initials=\"LS\"></q2-avatar>`,\n },\n {\n name: 'initials-3',\n html: `<q2-avatar initials=\"LSM\"></q2-avatar>`,\n },\n {\n name: 'initials-4',\n html: `<q2-avatar initials=\"LSMA\"></q2-avatar>`,\n },\n {\n name: 'image',\n html: `<q2-avatar size=\"medium\" name=\"Laura Smith\" src=\"${IMAGE_DATA_URI}\"></q2-avatar>`,\n },\n {\n name: 'with-decorator',\n html: `<q2-avatar initials=\"LS\"><q2-icon type=\"chevron-down\" slot=\"decorator\"></q2-icon></q2-avatar>`,\n },\n {\n name: 'icon-custom',\n html: `<q2-avatar icon=\"star\"></q2-avatar>`,\n },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n test(`q2-avatar--${variant.name}--resting — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme });\n await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${theme}.png`);\n });\n};\n\ntest.describe('q2-avatar — variants × themes', () => {\n for (const variant of VARIANTS) {\n for (const theme of THEMES) {\n restingCase(variant, theme);\n }\n }\n});\n"]}

package/dist/collection/components/q2-badge/q2-badge.css CHANGED Viewed

@@ -65,6 +65,36 @@ button {
   visibility: hidden;
 }
+/**
+ * @prop --tct-badge-background: (<color>) Controls the background color of the badge container in its default state.
+ * @prop --tct-badge-color: (<color>) Controls the text color of the badge container in its default state.
+ * @prop --tct-badge-border?: (*) Controls the optional border shorthand of the badge container.
+ * @prop --tct-badge-backdrop-filter?: (*) Controls the optional backdrop-filter of the badge container.
+ * @prop --tct-badge-height: (<length>) Controls the height of the badge container in the default size.
+ * @prop --tct-badge-min-width: (<length>) Controls the minimum width of the badge container in the default size.
+ * @prop --tct-badge-padding: (<length-percentage>+) Controls the inner padding of the badge container in the default size.
+ * @prop --tct-badge-border-radius: (<length-percentage>) Controls the corner radius of the badge container in the default size.
+ * @prop --tct-badge-line-height: (<number> | <length-percentage>) Controls the line height of the badge text in the default size.
+ * @prop --tct-badge-large-height: (<length>) Controls the height of the badge container in the large size.
+ * @prop --tct-badge-large-min-width: (<length>) Controls the minimum width of the badge container in the large size.
+ * @prop --tct-badge-large-padding: (<length-percentage>+) Controls the inner padding of the badge container in the large size.
+ * @prop --tct-badge-large-border-radius: (<length-percentage>) Controls the corner radius of the badge container in the large size.
+ * @prop --tct-badge-large-line-height: (<number> | <length-percentage>) Controls the line height of the badge text in the large size.
+ * @prop --tct-badge-info-background: (<color>) Controls the background color of the badge container when status is info.
+ * @prop --tct-badge-info-color: (<color>) Controls the text color of the badge container when status is info.
+ * @prop --tct-badge-alert-background: (<color>) Controls the background color of the badge container when status is alert.
+ * @prop --tct-badge-alert-color: (<color>) Controls the text color of the badge container when status is alert.
+ * @prop --tct-badge-warning-background: (<color>) Controls the background color of the badge container when status is warning.
+ * @prop --tct-badge-warning-color: (<color>) Controls the text color of the badge container when status is warning.
+ * @prop --tct-badge-success-background: (<color>) Controls the background color of the badge container when status is success.
+ * @prop --tct-badge-success-color: (<color>) Controls the text color of the badge container when status is success.
+ * @prop --tct-badge-primary-background: (<color>) Controls the background color of the badge container when theme is primary.
+ * @prop --tct-badge-primary-color: (<color>) Controls the text color of the badge container when theme is primary.
+ * @prop --tct-badge-secondary-background: (<color>) Controls the background color of the badge container when theme is secondary.
+ * @prop --tct-badge-secondary-color: (<color>) Controls the text color of the badge container when theme is secondary.
+ * @prop --tct-badge-tertiary-background: (<color>) Controls the background color of the badge container when theme is tertiary.
+ * @prop --tct-badge-tertiary-color: (<color>) Controls the text color of the badge container when theme is tertiary.
+ */
 :host {
   display: inline-block;
   line-height: 0;

package/dist/collection/components/q2-badge/test/q2-badge-test.vr.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const THEME_VALUES = ['primary', 'secondary', 'tertiary'];
+const STATUS_VALUES = ['info', 'warning', 'alert', 'success'];
+const VARIANTS = [
+    { name: 'default', html: `<q2-badge value="42"></q2-badge>` },
+    ...THEME_VALUES.map(t => ({
+        name: `theme-${t}`,
+        html: `<q2-badge theme="${t}" value="42"></q2-badge>`,
+    })),
+    ...STATUS_VALUES.map(s => ({
+        name: `status-${s}`,
+        html: `<q2-badge status="${s}" value="42"></q2-badge>`,
+    })),
+    {
+        name: 'size-large',
+        html: `<q2-badge size="large" theme="primary" value="42"></q2-badge>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-badge--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-badge--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-badge — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-badge-test.vr.js.map

package/dist/collection/components/q2-badge/test/q2-badge-test.vr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-badge-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-badge/test/q2-badge-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAU,CAAC;AACnE,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAEvE,MAAM,QAAQ,GAAc;IACxB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,kCAAkC,EAAE;IAC7D,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACtB,IAAI,EAAE,SAAS,CAAC,EAAE;QAClB,IAAI,EAAE,oBAAoB,CAAC,0BAA0B;KACxD,CAAC,CAAC;IACH,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACvB,IAAI,EAAE,UAAU,CAAC,EAAE;QACnB,IAAI,EAAE,qBAAqB,CAAC,0BAA0B;KACzD,CAAC,CAAC;IACH;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,+DAA+D;KACxE;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,aAAa,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACrE,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,aAAa,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IAC5F,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC/C,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst THEME_VALUES = ['primary', 'secondary', 'tertiary'] as const;\nconst STATUS_VALUES = ['info', 'warning', 'alert', 'success'] as const;\n\nconst VARIANTS: Variant[] = [\n { name: 'default', html: `<q2-badge value=\"42\"></q2-badge>` },\n ...THEME_VALUES.map(t => ({\n name: `theme-${t}`,\n html: `<q2-badge theme=\"${t}\" value=\"42\"></q2-badge>`,\n })),\n ...STATUS_VALUES.map(s => ({\n name: `status-${s}`,\n html: `<q2-badge status=\"${s}\" value=\"42\"></q2-badge>`,\n })),\n {\n name: 'size-large',\n html: `<q2-badge size=\"large\" theme=\"primary\" value=\"42\"></q2-badge>`,\n },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n test(`q2-badge--${variant.name}--resting — ${theme}`, async ({ page }) => {\n await setupPage(page, variant.html, { theme });\n await expect(page).toHaveScreenshot(`q2-badge--${variant.name}--resting--${theme}.png`);\n });\n};\n\ntest.describe('q2-badge — variants × themes', () => {\n for (const variant of VARIANTS) {\n for (const theme of THEMES) {\n restingCase(variant, theme);\n }\n }\n});\n"]}