q2-tecton-elements 1.65.0 → 1.66.0

package/dist/collection/components/q2-action-group/q2-action-group.js

@@ -10,6 +10,7 @@ export class Q2ActionGroup {
         // #endregion
         // #region State Properties
         this.autoOrientation = 'vertical';
+        this.slottedElements = [];
         /**
          * The orientation of the buttons, which will override the auto orientation.
          *
@@ -35,51 +36,87 @@ export class Q2ActionGroup {
             const assignedElements = Array.from(this.hostElement.children);
             if (!assignedElements.length)
                 return;
-            // Remove all elements that are not Q2-BTN or Q2-LINK
-            const approvedElements = ['Q2-BTN', 'Q2-LINK', 'SLOT'];
-            const { tagName, isCoinIntent } = assignedElements.reduce((acc, el) => {
-                if (el.tagName === 'SLOT') {
-                    const slotAssignedElements = el.assignedElements({ flatten: true });
-                    slotAssignedElements.forEach(slotEl => {
-                        if (!approvedElements.includes(slotEl.tagName))
-                            slotEl.remove();
-                    });
-                    return acc;
+            // Remove all elements that are not approved Tecton components
+            const approvedElements = ['Q2-BTN', 'Q2-LINK', 'Q2-DROPDOWN', 'Q2-TOOLTIP'];
+            let flattened = this.flattenElements(assignedElements).filter(el => {
+                // Handle Q2-TOOLTIP validation
+                if (el.tagName === 'Q2-TOOLTIP') {
+                    if (el.children.length !== 1) {
+                        console.warn('Q2-ACTION-GROUP: Q2-TOOLTIP is only allowed a single child inside Q2-ACTION-GROUP.');
+                        el.remove();
+                        return false;
+                    }
+                    if (el.children[0] && !['Q2-BTN', 'Q2-LINK'].includes(el.children[0].tagName)) {
+                        console.warn('Q2-ACTION-GROUP: Q2-TOOLTIP is only allowed to have a Q2-BTN or a Q2-LINK inside Q2-ACTION-GROUP.');
+                        el.remove();
+                        return false;
+                    }
+                    return true;
                 }
-                if (!acc.tagName && approvedElements.includes(el.tagName)) {
-                    acc.tagName = el.tagName;
-                    acc.isCoinIntent = el.getAttribute('intent') === 'coin';
-                }
-                const intent = el.getAttribute('intent');
-                const tagNameMismatch = acc.tagName !== el.tagName;
-                const coinIntentMismatch = acc.isCoinIntent && intent !== 'coin';
-                if (tagNameMismatch || coinIntentMismatch)
+                const allowed = approvedElements.includes(el.tagName);
+                if (!allowed)
                     el.remove();
-                return acc;
-            }, { tagName: null, isCoinIntent: false });
-            const incompatibleOrientation = computedOrientation === 'vertical' && (tagName === 'Q2-LINK' || isCoinIntent);
+                return allowed;
+            });
+            // Filter out non-coined buttons if coin exists
+            if (this.hasCoin(flattened)) {
+                flattened = flattened.filter(el => {
+                    let tagName = el.tagName;
+                    let intent = el.getAttribute('intent');
+                    if (el.tagName === 'Q2-TOOLTIP') {
+                        tagName = el.children[0].tagName;
+                        intent = el.children[0].getAttribute('intent');
+                    }
+                    if (tagName === 'Q2-BTN' && intent === 'coin') {
+                        return true;
+                    }
+                    else {
+                        el.remove();
+                        return false;
+                    }
+                });
+            }
+            const incompatibleOrientation = computedOrientation === 'vertical' && !this.hasBtnOnly(flattened);
             if (incompatibleOrientation) {
-                console.warn('Q2-ACTION-GROUP: "Vertical" orientation is not supported for Q2-LINK or Q2-BTN with intent="coin". Orientation will be set to "horizontal".');
+                console.warn('Q2-ACTION-GROUP: "Vertical" orientation is supported only for Q2-BTN (not coin intent), otherwise orientation will be set to "horizontal".');
                 this.orientation = 'horizontal';
             }
-            if (!tagName)
-                return;
-            const combinedTagName = isCoinIntent ? `${tagName}-coin` : tagName;
-            this.slottedTagName = combinedTagName === null || combinedTagName === void 0 ? void 0 : combinedTagName.toLowerCase();
+            this.slottedElements = flattened;
         };
-        this.handleQ2LinkSeparator = () => {
-            const q2Links = this.slotElements.filter(el => el.tagName === 'Q2-LINK');
-            q2Links.forEach((link, index) => {
-                link.classList.remove('is-last-action');
-                if (index === q2Links.length - 1)
-                    link.classList.add('is-last-action');
+        this.flattenElements = (assignedElements) => {
+            const flattened = [];
+            assignedElements.forEach(el => {
+                if (el.tagName === 'SLOT') {
+                    const slotAssignedElements = el.assignedElements({ flatten: true });
+                    slotAssignedElements.forEach(slotEl => {
+                        flattened.push(slotEl);
+                    });
+                }
+                else {
+                    flattened.push(el);
+                }
             });
+            return flattened;
         };
         this.handleResize = (event) => {
             const width = event.detail.entries[0].contentRect.width;
             const shouldBeVertical = this.orientationThreshold > width;
             this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';
         };
+        this.handleSeparator = () => {
+            const list = this.slottedElements.filter(el => {
+                let tagName = el.tagName;
+                if (el.tagName === 'Q2-TOOLTIP') {
+                    tagName = el.children[0].tagName;
+                }
+                return ['Q2-LINK', 'Q2-DROPDOWN'].includes(tagName);
+            });
+            list.forEach((link, index) => {
+                link.classList.remove('is-last-action');
+                if (index === list.length - 1)
+                    link.classList.add('is-last-action');
+            });
+        };
         this.initMutationObserver = () => {
             if (!('MutationObserver' in window))
                 return;
@@ -106,7 +143,7 @@ export class Q2ActionGroup {
         this.initMutationObserver();
     }
     componentDidRender() {
-        this.handleQ2LinkSeparator();
+        this.handleSeparator();
     }
     // #endregion
     // #region Watchers
@@ -134,27 +171,66 @@ export class Q2ActionGroup {
         if (!orientation)
             orientation = 'auto';
         // these are not supported in a 'vertical' orientation, so we will disable resizing
-        if (['q2-btn-coin', 'q2-link'].includes(this.slottedTagName))
+        if (!this.hasBtnOnly(this.slottedElements))
             return true;
         return orientation !== 'auto';
     }
-    get slotElements() {
-        if (!('HTMLSlotElement' in window))
-            return [];
-        const slot = this.hostElement.shadowRoot.querySelector('slot');
-        return Array.from((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
+    handleFullWidth(fullWidth) {
+        this.slottedElements.forEach(el => {
+            const element = el.tagName === 'Q2-TOOLTIP' ? el.children[0] : el;
+            if (['Q2-LINK', 'Q2-DROPDOWN'].includes(element.tagName)) {
+                if (fullWidth)
+                    element.setAttribute('full-width', '');
+                else
+                    element.removeAttribute('full-width');
+            }
+        });
+    }
+    hasBtnOnly(elements) {
+        return elements.every(el => {
+            let tagName = el.tagName;
+            let intent = el.getAttribute('intent');
+            if (el.tagName === 'Q2-TOOLTIP') {
+                tagName = el.children[0].tagName;
+                intent = el.children[0].getAttribute('intent');
+            }
+            return tagName === 'Q2-BTN' && intent !== 'coin';
+        });
+    }
+    hasCoin(elements) {
+        return elements.find(el => {
+            let tagName = el.tagName;
+            let intent = el.getAttribute('intent');
+            if (el.tagName === 'Q2-TOOLTIP') {
+                tagName = el.children[0].tagName;
+                intent = el.children[0].getAttribute('intent');
+            }
+            return tagName === 'Q2-BTN' && intent === 'coin';
+        });
     }
     // #endregion
     // #region Render Methods
     render() {
-        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedTagName } = this;
+        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedElements } = this;
         const containerClassNames = ['container'];
         if (fullWidth && computedOrientation === 'horizontal')
             containerClassNames.push('full-width');
-        if (slottedTagName)
-            containerClassNames.push(`has-${slottedTagName}`);
         containerClassNames.push(computedOrientation);
-        return (h("q2-resize-observer", { key: '7f6be6b77ba30dd169986c7876f0eb1fb6a4d7f6', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '94a110a6087fd76846ad8416c732649bd1c8a468', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'b27723666e9aadd3fc9942aa954213ec8e738efb' }))));
+        slottedElements.forEach(el => {
+            let tagName = el.tagName.toLowerCase();
+            let intent = el.getAttribute('intent');
+            if (tagName === 'q2-tooltip') {
+                tagName = el.children[0].tagName.toLowerCase();
+                intent = el.children[0].getAttribute('intent');
+                if (!containerClassNames.includes('has-q2-tooltip'))
+                    containerClassNames.push('has-q2-tooltip');
+            }
+            const className = `has-${tagName}${tagName === 'q2-btn' && intent === 'coin' ? '-coin' : ''}`;
+            if (!containerClassNames.includes(className))
+                containerClassNames.push(className);
+        });
+        this.handleFullWidth(!!fullWidth);
+        return (h("q2-resize-observer", { key: '1f234887657142b616d3c3a448c6bfe69deabb81', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '0298fbe6f835d81f3949dbc593e49f9127dc8869', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '20a11efddeae42e71a0c08804176c2ce9f6ef017' }))));
     }
     static get is() { return "q2-action-group"; }
     static get encapsulation() { return "shadow"; }
@@ -186,7 +262,7 @@ export class Q2ActionGroup {
                             "name": "warning",
                             "text": "This will prevent the buttons from wrapping when the container is too small to fit all buttons."
                         }],
-                    "text": "Whether the buttons should take up the full width of the container when in horizontal orientation."
+                    "text": "Whether the slotted elements should take up the full width of the container when in horizontal orientation."
                 },
                 "getter": false,
                 "setter": false,
@@ -246,7 +322,7 @@ export class Q2ActionGroup {
     static get states() {
         return {
             "autoOrientation": {},
-            "slottedTagName": {}
+            "slottedElements": {}
         };
     }
     static get elementRef() { return "hostElement"; }

package/dist/collection/components/q2-action-group/q2-action-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-action-group.js","sourceRoot":"","sources":["../../../../src/components/q2-action-group/q2-action-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n/**\n * @name Action Group\n * @category Display\n * @summary Use for laying out groups of buttons or links with consistent spacing.\n */\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    slottedTagName: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     * @warning\n     * Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/)\n     * or `\"coin\"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to \"horizontal\".\n     */\n    @Prop({ reflect: true, mutable: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    componentDidRender() {\n        this.handleQ2LinkSeparator();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        if (!container) return;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n                this.filterSlottedElements();\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        // these are not supported in a 'vertical' orientation, so we will disable resizing\n        if (['q2-btn-coin', 'q2-link'].includes(this.slottedTagName)) return true;\n        return orientation !== 'auto';\n    }\n\n    get slotElements(): Element[] {\n        if (!('HTMLSlotElement' in window)) return [];\n        const slot = this.hostElement.shadowRoot.querySelector('slot');\n        return Array.from(slot?.assignedElements({ flatten: true }) || []);\n    }\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const { computedOrientation } = this;\n        // get the elements of the hostElement\n        const assignedElements = Array.from(this.hostElement.children);\n        if (!assignedElements.length) return;\n\n        // Remove all elements that are not Q2-BTN or Q2-LINK\n        const approvedElements = ['Q2-BTN', 'Q2-LINK', 'SLOT'];\n        const { tagName, isCoinIntent } = assignedElements.reduce(\n            (acc, el) => {\n                if (el.tagName === 'SLOT') {\n                    const slotAssignedElements = (el as HTMLSlotElement).assignedElements({ flatten: true });\n                    slotAssignedElements.forEach(slotEl => {\n                        if (!approvedElements.includes(slotEl.tagName)) slotEl.remove();\n                    });\n                    return acc;\n                }\n\n                if (!acc.tagName && approvedElements.includes(el.tagName)) {\n                    acc.tagName = el.tagName;\n                    acc.isCoinIntent = el.getAttribute('intent') === 'coin';\n                }\n                const intent = el.getAttribute('intent');\n                const tagNameMismatch = acc.tagName !== el.tagName;\n                const coinIntentMismatch = acc.isCoinIntent && intent !== 'coin';\n\n                if (tagNameMismatch || coinIntentMismatch) el.remove();\n\n                return acc;\n            },\n            { tagName: null, isCoinIntent: false }\n        );\n\n        const incompatibleOrientation = computedOrientation === 'vertical' && (tagName === 'Q2-LINK' || isCoinIntent);\n        if (incompatibleOrientation) {\n            console.warn(\n                'Q2-ACTION-GROUP: \"Vertical\" orientation is not supported for Q2-LINK or Q2-BTN with intent=\"coin\". Orientation will be set to \"horizontal\".'\n            );\n            this.orientation = 'horizontal';\n        }\n        if (!tagName) return;\n        const combinedTagName = isCoinIntent ? `${tagName}-coin` : tagName;\n\n        this.slottedTagName = combinedTagName?.toLowerCase();\n    };\n\n    handleQ2LinkSeparator = () => {\n        const q2Links = this.slotElements.filter(el => el.tagName === 'Q2-LINK');\n        q2Links.forEach((link, index) => {\n            link.classList.remove('is-last-action');\n            if (index === q2Links.length - 1) link.classList.add('is-last-action');\n        });\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedTagName } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (slottedTagName) containerClassNames.push(`has-${slottedTagName}`);\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-action-group.js","sourceRoot":"","sources":["../../../../src/components/q2-action-group/q2-action-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n/**\n * @name Action Group\n * @category Display\n * @summary Use for laying out groups of buttons or links with consistent spacing.\n */\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    slottedElements: HTMLElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the slotted elements should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     * @warning\n     * Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/)\n     * or `\"coin\"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to \"horizontal\".\n     */\n    @Prop({ reflect: true, mutable: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    componentDidRender() {\n        this.handleSeparator();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        if (!container) return;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n                this.filterSlottedElements();\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        // these are not supported in a 'vertical' orientation, so we will disable resizing\n        if (!this.hasBtnOnly(this.slottedElements)) return true;\n        return orientation !== 'auto';\n    }\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const { computedOrientation } = this;\n        // get the elements of the hostElement\n        const assignedElements = Array.from(this.hostElement.children);\n        if (!assignedElements.length) return;\n\n        // Remove all elements that are not approved Tecton components\n        const approvedElements = ['Q2-BTN', 'Q2-LINK', 'Q2-DROPDOWN', 'Q2-TOOLTIP'];\n        let flattened = this.flattenElements(assignedElements).filter(el => {\n            // Handle Q2-TOOLTIP validation\n            if (el.tagName === 'Q2-TOOLTIP') {\n                if (el.children.length !== 1) {\n                    console.warn('Q2-ACTION-GROUP: Q2-TOOLTIP is only allowed a single child inside Q2-ACTION-GROUP.');\n                    el.remove();\n                    return false;\n                }\n                if (el.children[0] && !['Q2-BTN', 'Q2-LINK'].includes(el.children[0].tagName)) {\n                    console.warn(\n                        'Q2-ACTION-GROUP: Q2-TOOLTIP is only allowed to have a Q2-BTN or a Q2-LINK inside Q2-ACTION-GROUP.'\n                    );\n                    el.remove();\n                    return false;\n                }\n                return true;\n            }\n\n            const allowed = approvedElements.includes(el.tagName);\n            if (!allowed) el.remove();\n            return allowed;\n        });\n\n        // Filter out non-coined buttons if coin exists\n        if (this.hasCoin(flattened)) {\n            flattened = flattened.filter(el => {\n                let tagName = el.tagName;\n                let intent = el.getAttribute('intent');\n                if (el.tagName === 'Q2-TOOLTIP') {\n                    tagName = el.children[0].tagName;\n                    intent = el.children[0].getAttribute('intent');\n                }\n                if (tagName === 'Q2-BTN' && intent === 'coin') {\n                    return true;\n                } else {\n                    el.remove();\n                    return false;\n                }\n            });\n        }\n\n        const incompatibleOrientation = computedOrientation === 'vertical' && !this.hasBtnOnly(flattened);\n        if (incompatibleOrientation) {\n            console.warn(\n                'Q2-ACTION-GROUP: \"Vertical\" orientation is supported only for Q2-BTN (not coin intent), otherwise orientation will be set to \"horizontal\".'\n            );\n            this.orientation = 'horizontal';\n        }\n        this.slottedElements = flattened;\n    };\n\n    flattenElements = (assignedElements: Element[]): HTMLElement[] => {\n        const flattened = [];\n        assignedElements.forEach(el => {\n            if (el.tagName === 'SLOT') {\n                const slotAssignedElements = (el as HTMLSlotElement).assignedElements({ flatten: true });\n                slotAssignedElements.forEach(slotEl => {\n                    flattened.push(slotEl);\n                });\n            } else {\n                flattened.push(el);\n            }\n        });\n        return flattened;\n    };\n\n    handleFullWidth(fullWidth: boolean) {\n        this.slottedElements.forEach(el => {\n            const element = el.tagName === 'Q2-TOOLTIP' ? el.children[0] : el;\n            if (['Q2-LINK', 'Q2-DROPDOWN'].includes(element.tagName)) {\n                if (fullWidth) element.setAttribute('full-width', '');\n                else element.removeAttribute('full-width');\n            }\n        });\n    }\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    handleSeparator = () => {\n        const list = this.slottedElements.filter(el => {\n            let tagName = el.tagName;\n            if (el.tagName === 'Q2-TOOLTIP') {\n                tagName = el.children[0].tagName;\n            }\n            return ['Q2-LINK', 'Q2-DROPDOWN'].includes(tagName);\n        });\n        list.forEach((link, index) => {\n            link.classList.remove('is-last-action');\n            if (index === list.length - 1) link.classList.add('is-last-action');\n        });\n    };\n\n    hasBtnOnly(elements: HTMLElement[]) {\n        return elements.every(el => {\n            let tagName = el.tagName;\n            let intent = el.getAttribute('intent');\n            if (el.tagName === 'Q2-TOOLTIP') {\n                tagName = el.children[0].tagName;\n                intent = el.children[0].getAttribute('intent');\n            }\n            return tagName === 'Q2-BTN' && intent !== 'coin';\n        });\n    }\n\n    hasCoin(elements: HTMLElement[]) {\n        return elements.find(el => {\n            let tagName = el.tagName;\n            let intent = el.getAttribute('intent');\n            if (el.tagName === 'Q2-TOOLTIP') {\n                tagName = el.children[0].tagName;\n                intent = el.children[0].getAttribute('intent');\n            }\n            return tagName === 'Q2-BTN' && intent === 'coin';\n        });\n    }\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedElements } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        containerClassNames.push(computedOrientation);\n        slottedElements.forEach(el => {\n            let tagName = el.tagName.toLowerCase();\n            let intent = el.getAttribute('intent');\n            if (tagName === 'q2-tooltip') {\n                tagName = el.children[0].tagName.toLowerCase();\n                intent = el.children[0].getAttribute('intent');\n                if (!containerClassNames.includes('has-q2-tooltip')) containerClassNames.push('has-q2-tooltip');\n            }\n            const className = `has-${tagName}${tagName === 'q2-btn' && intent === 'coin' ? '-coin' : ''}`;\n            if (!containerClassNames.includes(className)) containerClassNames.push(className);\n        });\n        this.handleFullWidth(!!fullWidth);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -184,6 +184,14 @@ dialog[open].is-closing::backdrop {
   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;

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

@@ -1,6 +1,6 @@
 import { h, Fragment, } from "@stencil/core";
 import { loc, waitForNextPaint } from "../../utils/index";
-import sanitizeHTMLString from "../../utils/sanitize-html-string";
+import sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from "../../utils/sanitize-html-string";
 import mirrorEmit from "../../utils/mirror-emit";
 /**
  * @name Action Sheet
@@ -86,8 +86,12 @@ export class Q2ActionSheet {
         // #endregion
         // #region Render Methods
         this.renderList = ({ data }) => {
-            const { listProps } = data;
-            return (h(Fragment, null, 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'))))));
+            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
+                .filter(entry => entry.slot === 'bottom')
+                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
         };
         this.renderMessage = ({ data }) => {
             return (h("q2-message", { type: data.type }, data.title && h("h2", null, data.title), data.description && h("p", null, data.description)));
@@ -204,7 +208,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: '1eec8f04fc0509124e0893051b548e2c7a0c654f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '6c5d16824ac57275d0b5fc80c6049043bd27af1a', class: interiorClasses }, showHeader && (h("header", { key: '33f441644cb04c92746717bf58dee8d3bd064994' }, h("div", { key: '728c1739ebd3df9d68c8bc024417a88b71262aa9', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'a50edc83baa4970bf08249d4b3b0417857728205', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'd3e0f3ed13beeb3b2e5b78430b9a447d512d6ad2', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'b3926a995c3348f25e132e9e0904816c4fee10dc' }, data.description), RenderContent && h(RenderContent, { key: '1ab91a994c3396f622b0757c09a1ebf1820dc2ed', data: this.data }))));
+        return (h("dialog", { key: '94fc384fe3294c65180803cba588b2a62a49134e', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '0a9f4c75b07a2fe561e470466eae7afee5cec939', class: interiorClasses }, showHeader && (h("header", { key: '1ae290edbfbfd146867a19b9a926bfd596cfe4e8' }, h("div", { key: 'e297191a3d9a4b351c8f3527174b6823e5bc9b1b', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '3b8caf287bbfb9d2faa3de15a987a30a4d6487eb', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '6b5d8c410bef11176960292f90d51f9176c62d1c', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '2fe29408f3a3af7ac25f3af9d6ae495ae113846c' }, data.description), RenderContent && h(RenderContent, { key: 'c1494556026b26cf295f322d885787698ed7e8c9', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -226,7 +230,7 @@ export class Q2ActionSheet {
                 "mutable": true,
                 "complexType": {
                     "original": "ActionSheetData",
-                    "resolved": "{ appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; }",
+                    "resolved": "{ appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; slotsHtml?: ActionSheetStaticHtmlData[]; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; slotsHtml?: ActionSheetStaticHtmlData[]; }",
                     "references": {
                         "ActionSheetData": {
                             "location": "import",

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

@@ -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    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString 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 } = data;\n\n        return (\n            <Fragment>\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            </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\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"]}
+{"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"]}

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

@@ -70,6 +70,7 @@ button {
   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%)));
+  box-shadow: var(--tct-avatar-img-box-shadow, --tct-avatar-box-shadow, none);
   border: var(--tct-avatar-border, none);
 }
 .avatar-img.size-small,
@@ -97,6 +98,7 @@ button {
   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%);
+  box-shadow: var(--tct-avatar-box-shadow, none);
   border: var(--tct-avatar-border, none);
 }
 .avatar-initials.size-small {
@@ -159,6 +161,7 @@ text {
 
 .fallback {
   border-radius: var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));
+  box-shadow: var(--tct-avatar-fallback-box-shadow, --tct-avatar-box-shadow, none);
   border: var(--tct-avatar-border, none);
   background: var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));
   display: flex;

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

@@ -57,7 +57,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'cf56a17ddc7e294299a3b540df4851757b0dc3cc' }, showImg && (h("img", { key: '18df2efdc0e99df846845623cd36b41769cab922', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'ace26eb6b093cbc09f00de7ee91c7059b7eac866', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${this.size} initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '3b9bb91f4ded92dfe751ff0928157c0cf06aa354', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '06ab09669d3313d12b14de40eee1c264f29aea83', "test-id": "fallbackIcon", class: `fallback size-${this.size}` }, h("q2-icon", { key: '14e4fdbabc7a071d5c2d0050fc64a3fe97d6ee89', type: this.icon })))));
+        return (h("div", { key: '94273ca97001170f452ae90810f2d3db43eb8e60' }, showImg && (h("img", { key: 'f90aacf67a84589a3f297ccf62f41499c009c9b8', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '284f5171c1b6ee0d5db5aaf3e49fa51d2311ea35', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${this.size} initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'd13905145287fd6f261956da5d45c2ca106f07ee', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '92afb9b635813edc6a95086eaa976d5f1c9305f1', "test-id": "fallbackIcon", class: `fallback size-${this.size}` }, h("q2-icon", { key: '9d2f6cf04199e38449462b566117d253092c59df', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -215,6 +215,7 @@ button {
   transition: var(--comp-btn-tween);
   transition-property: background, color, box-shadow, fill, border-color, border-width;
   outline: 0;
+  min-height: var(--tct-btn-min-height, none);
 }
 button:disabled {
   opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
@@ -250,6 +251,7 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
 :host([size=small]) button {
   padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));
   font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px));
+  min-height: var(--tct-btn-min-height-small, none);
 }
 :host([size=small]) button:not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-small, 16px);
@@ -257,6 +259,7 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
 :host([size=medium]) button {
   padding: var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));
   font-size: var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px));
+  min-height: var(--tct-btn-min-height-medium, none);
 }
 :host([size=medium]) button:not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-medium, unset);
@@ -264,6 +267,7 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
 :host([size=large]) button {
   padding: var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));
   font-size: var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px));
+  min-height: var(--tct-btn-min-height-large, none);
 }
 :host([size=large]) button:not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-large, unset);
@@ -835,16 +839,20 @@ button.intent-coin {
   --tct-avatar-width: var(--tct-btn-coin-width, 44px);
   --tct-avatar-fallback-background: var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));
   --tct-icon-stroke-primary: var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));
+  --tct-icon-stroke-secondary: var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));
+  --tct-avatar-icon-stroke-primary: var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));
+  --tct-avatar-icon-stroke-secondary: var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));
   --tct-avatar-text-color: var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));
   --tct-icon-stroke-width: var(--tct-btn-coin-icon-stroke-width, 1px);
   --tct-btn-padding: 0;
   --tct-avatar-border: var(--tct-btn-coin-border, 0);
   --tct-avatar-fallback-border-radius: var(--tct-btn-coin-border-radius, 50%);
+  --tct-btn-border-radius: var(--tct-btn-coin-border-radius, 50%);
   width: auto;
   backdrop-filter: var(--tct-btn-coin-backdrop-filter);
   box-shadow: var(--tct-btn-coin-box-shadow);
 }
-button.intent-coin:hover:not([disabled]) {
+button.intent-coin:hover:not([disabled]), button.intent-coin:hover:focus:not(:active):not([disabled]) {
   --const-double-focus-ring: 0 0 0 2px #ffffff,
       0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));
   --tct-avatar-background: var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));

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

@@ -101,7 +101,7 @@ export class Q2Btn {
             description: this.description !== undefined ? this.description : undefined,
             disabled: this.disabled || false,
             type: this.type,
-            tabindex: this.tabIndex || undefined,
+            tabindex: this.tabIndex || this.tabIndex === 0 ? this.tabIndex : undefined,
         };
     }
     get buttonClasses() {