q2-tecton-elements 1.44.0 → 1.45.0

package/dist/components/q2-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Item extends Components.Q2Item, HTMLElement {}
+export const Q2Item: {
+    prototype: Q2Item;
+    new (): Q2Item;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-item.js

@@ -0,0 +1,137 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { f as hasSlotContent } from './index2.js';
+
+const q2ItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}::slotted([slot]){--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px))}.action{align-items:center;display:flex;grid-row:1;justify-content:center;--tct-btn-icon-height:28px;--tct-btn-icon-width:28px;--tct-icon-size:16px;--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px))}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const Q2ItemStyle0 = q2ItemCss;
+
+const Q2Item$1 = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.renderTrigger = 0;
+        this.clickable = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(() => (this.renderTrigger += 1));
+            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+            this.mutationObserver = observer;
+        }
+        this.setClickable();
+    }
+    // #endregion
+    // #region Local methods
+    get actionClasses() {
+        const classes = ['action'];
+        if (!this.hasBulletSlotContent) {
+            classes.push(`action-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    get bulletClasses() {
+        const classes = ['bullet'];
+        if (!this.hasFooterSlotContent) {
+            classes.push(`bullet-no-footer`);
+        }
+        return classes.join(' ');
+    }
+    get footerClasses() {
+        const classes = ['footer'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`footer-no-action-nor-bullet`);
+        }
+        else if (!this.hasActionSlotContent) {
+            classes.push(`footer-no-action`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`footer-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    get hasActionSlotContent() {
+        return hasSlotContent(this.hostElement, 'action');
+    }
+    get hasBodySlotContent() {
+        return hasSlotContent(this.hostElement, 'body');
+    }
+    get hasBulletSlotContent() {
+        return hasSlotContent(this.hostElement, 'bullet');
+    }
+    get hasHeaderSlotContent() {
+        return hasSlotContent(this.hostElement, 'header');
+    }
+    get hasFooterSlotContent() {
+        return hasSlotContent(this.hostElement, 'footer');
+    }
+    get itemClasses() {
+        const classes = ['item'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`item-no-action-nor-bullet`);
+        }
+        else if (!this.hasActionSlotContent) {
+            classes.push(`item-no-action`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`item-no-bullet`);
+        }
+        if (!this.hasFooterSlotContent) {
+            classes.push(`item-no-footer`);
+        }
+        return classes.join(' ');
+    }
+    get mainClasses() {
+        const classes = ['main'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`main-no-action-nor-bullet`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`main-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    setClickable() {
+        var _a, _b, _c, _d;
+        if (this.clickable) {
+            (_a = this.itemElement) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'button');
+            (_b = this.itemElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        }
+        else {
+            (_c = this.itemElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('role');
+            (_d = this.itemElement) === null || _d === void 0 ? void 0 : _d.removeAttribute('tabindex');
+        }
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        this.setClickable();
+        return (h(Fragment, { key: 'd5ba951c9454ce295806c0c12381c97d766010c6' }, h("div", { key: 'ce49d5fbe107d66f77a0eae1e6719c2567fd52c8', class: this.itemClasses, ref: el => (this.itemElement = el) }, this.hasBulletSlotContent && (h("div", { key: '4fb7c74d6e4da51c9c40e4eac1b86557d8498f0f', class: this.bulletClasses }, h("slot", { key: 'f9029c81cc4b955c04fcd7e2445cd8b4a9dc1807', name: "bullet" }))), h("div", { key: 'eeef4eb04e2f636b8fbc10c7629a1d1e90ce9867', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'eedc08d67609dba329306406b19323989496fa30', class: "header" }, h("slot", { key: '7ca6467804317ef7b54ca4b7893def703aa0a07a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'cb7e3fb9eae10c3d3481975563edb7b1a9615fbf', class: "body" }, h("slot", { key: '9fd0a9a4b82671a47ec02ca87ae3512f54f0aeb4', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'e20c1a4c400f607dfe5299a9e564b1937870e5a8', class: this.actionClasses }, h("slot", { key: '9fe4231d6af81ba6e69de4c00da41d8d4ca7ae89', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '08afea866e6750c4c3ea06a004e2e4fef50e2a7f', class: this.footerClasses }, h("slot", { key: 'a0502cd05cc9af67a3c1496e11fa23235e887be3', name: "footer" }))))));
+    }
+    get hostElement() { return this; }
+    static get style() { return Q2ItemStyle0; }
+}, [1, "q2-item", {
+        "clickable": [516],
+        "renderTrigger": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2Item$1);
+            }
+            break;
+    } });
+}
+
+const Q2Item = Q2Item$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Item, defineCustomElement };
+
+//# sourceMappingURL=q2-item.js.map

package/dist/components/q2-item.js.map

@@ -0,0 +1 @@
+{"file":"q2-item.js","mappings":"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","names":["Q2Item"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n::slotted([slot]) {\n    --tct-avatar-height: var(--tct-item-avatar-height, var(--app-scale-7x, 35px));\n    --tct-avatar-width: var(--tct-item-avatar-width, var(--app-scale-7x, 35px));\n}\n\n.action {\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n    --tct-btn-icon-height: 28px;\n    --tct-btn-icon-width: 28px;\n    --tct-icon-size: 16px;\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n\n","import { Component, Element, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    itemElement: HTMLDivElement;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        this.setClickable();\n    }\n    // #endregion\n    // #region Local methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    setClickable() {\n        if (this.clickable) {\n            this.itemElement?.setAttribute('role', 'button');\n            this.itemElement?.setAttribute('tabindex', '0');\n        } else {\n            this.itemElement?.removeAttribute('role');\n            this.itemElement?.removeAttribute('tabindex');\n        }\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        this.setClickable();\n        return (\n            <Fragment>\n                <div\n                    class={this.itemClasses}\n                    ref={el => (this.itemElement = el)}\n                >\n                    {this.hasBulletSlotContent && (\n                        <div class={this.bulletClasses}>\n                            <slot name=\"bullet\" />\n                        </div>\n                    )}\n                    <div class={this.mainClasses}>\n                        {this.hasHeaderSlotContent && (\n                            <div class=\"header\">\n                                <slot name=\"header\" />\n                            </div>\n                        )}\n                        {this.hasBodySlotContent && (\n                            <div class=\"body\">\n                                <slot name=\"body\" />\n                            </div>\n                        )}\n                    </div>\n                    {this.hasActionSlotContent && (\n                        <div class={this.actionClasses}>\n                            <slot name=\"action\" />\n                        </div>\n                    )}\n                    {this.hasFooterSlotContent && (\n                        <div class={this.footerClasses}>\n                            <slot name=\"footer\" />\n                        </div>\n                    )}\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2List extends Components.Q2List, HTMLElement {}
+export const Q2List: {
+    prototype: Q2List;
+    new (): Q2List;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-list.js

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { f as hasSlotContent } from './index2.js';
+
+const q2ListCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-bottom:var(--tct-list-item-separator, 1px solid #949494)}.header{--comp-default-header-padding:var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--tct-item-padding, var(--comp-default-header-padding)));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, 16px);font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const Q2ListStyle0 = q2ListCss;
+
+const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.scheduledAfterRender = [];
+        // #endregion
+        // #region Local methods
+        this.onMutationObserved = () => {
+            this.renderTrigger += 1;
+            this.scheduledAfterRender.push(() => {
+                Array.from(this.hostElement.children).forEach(child => {
+                    if (child.tagName === 'Q2-ITEM')
+                        child.role = 'listitem';
+                });
+            });
+        };
+        this.label = undefined;
+        this.renderTrigger = 0;
+        this.bordered = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+            this.mutationObserver = observer;
+            this.onMutationObserved();
+        }
+    }
+    componentDidRender() {
+        this.scheduledAfterRender.forEach(fn => fn());
+        this.scheduledAfterRender = [];
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    get hasLabelContent() {
+        return !!this.label;
+    }
+    get hasFilterSlot() {
+        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');
+    }
+    get headerClasses() {
+        const classes = ['header'];
+        if (this.hasLabelContent && this.hasFilterSlot) {
+            classes.push('header-spacebetween');
+        }
+        else if (this.hasLabelContent && !this.hasFilterSlot) {
+            classes.push('header-start');
+        }
+        else if (!this.hasLabelContent && this.hasFilterSlot) {
+            classes.push('header-end');
+        }
+        return classes.join(' ');
+    }
+    get listClasses() {
+        const classes = ['list'];
+        return classes.join(' ');
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        return (h("div", { key: '37b0671ca94200f7e753f2b5e02a3dfd00efc6a3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a00b89d9153d707f5b7a3c0aaea857e5d489caff', class: this.headerClasses }, h("div", { key: '6ab05c1b898d8340526e9c45b457eb1920d37431', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'cb491e1700fc4312aa65016f897c35501ada01ff', name: "filter" }))), h("div", { key: 'b5af288fd5a3b233f981f67156bf1fbb59e1326d', role: "list" }, h("slot", { key: '3c48768066b42cecfc998506537a9447b5b61ff5' }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return Q2ListStyle0; }
+}, [1, "q2-list", {
+        "label": [513],
+        "bordered": [1540],
+        "renderTrigger": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2List$1);
+            }
+            break;
+    } });
+}
+
+const Q2List = Q2List$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2List, defineCustomElement };
+
+//# sourceMappingURL=q2-list.js.map

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

@@ -0,0 +1 @@
+{"file":"q2-list.js","mappings":"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","names":["Q2List"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered ='false'])) {\n    ::slotted(q2-item:not(:last-child)), .header {\n        border-bottom: var(--tct-list-item-separator, 1px solid #949494);\n    }\n}\n\n.header {\n    --comp-default-header-padding: var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(\n        --tct-list-header-padding,\n        --tct-item-padding,\n        --comp-default-header-padding\n    );\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, 16px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n            this.onMutationObserved();\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-loc.js

@@ -13,7 +13,7 @@ const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '09a4c48caab9a3dc8e3390544bdf555610e3c645' }, loc(this.value, this.substitutions));
+        return h("span", { key: '3b8059b85a21870fc1b8e9ff9d89cad6afe2df36' }, loc(this.value, this.substitutions));
     }
     static get style() { return Q2LocStyle0; }
 }, [1, "q2-loc", {

package/dist/components/q2-message2.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { q as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement, l as loc } from './index2.js';
+import { t as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
 
-const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
+const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var-list(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var-list(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var-list(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
 
 const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLElement {
@@ -44,7 +44,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '37db942156016123583dcdfbab0a8692df8b0699', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'c198c1b528af1e9a53cb4d31e4f8b81abe867a4b', class: "sr" }), h("div", { key: '740490741aa9a4710a36615a6a1999d17cdb1625', class: "sr message-label" }, messageLabel), h("div", { key: '77bb02fb402cf30b1f2e10fe88acb0005f50e149', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'ba8c00d545b4a89826edc8e4612f720025a9cb5f' }))));
+        return (h("div", { key: 'dc36daa38d71e2adb1b5926531fa3c6864a8e7a4', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '41ea931afc6d551e6618f3041a77fc8c67fa23ea', class: "sr" }), h("div", { key: 'f77d9ae560914108eda454c0d4b4eb04302ba558', class: "sr message-label" }, messageLabel), h("div", { key: '6fb809b83d5de60625da2f9799bdbbcf2eb96eef', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b03b23335c2b650f82a57abc8b2830353c5d8ae9' }))));
     }
     messageIcon(type) {
         const iconMap = {

package/dist/components/q2-message2.js.map

@@ -1 +1 @@
-{"file":"q2-message2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,yyIAAyyI,CAAC;AAC/zI,wBAAe,YAAY;;MCGd,SAAS;;;;;0BAE4C,UAAU;2BAGxB,KAAK;oBAGgC,MAAM;;;IAM3F,IAAI,SAAS;QACT,OAAOA,SAAc,EAAE,CAAC;KAC3B;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;;IAMD,MAAM,OAAO;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC9B,CAAC,CAAC;KACN;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;KAC9E;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;QAElG,QACI,4DACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,aAClE,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,4DAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,4DAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClD,4DACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,8DAAQ,CACN,CACJ,EACR;KACL;IAED,WAAW,CAAC,IAAY;QACpB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;SACf,CAAC;QAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;QAEvD,QACI,eACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true }) description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-message2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,8/IAA8/I,CAAC;AACphJ,wBAAe,YAAY;;MCGd,SAAS;;;;;0BAE4C,UAAU;2BAGxB,KAAK;oBAGgC,MAAM;;;IAM3F,IAAI,SAAS;QACT,OAAOA,SAAc,EAAE,CAAC;KAC3B;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;;IAMD,MAAM,OAAO;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC9B,CAAC,CAAC;KACN;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;KAC9E;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;QAElG,QACI,4DACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,aAClE,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,4DAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,4DAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClD,4DACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,8DAAQ,CACN,CACJ,EACR;KACL;IAED,WAAW,CAAC,IAAY;QACpB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;SACf,CAAC;QAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;QAEvD,QACI,eACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 var-list(--app-scale-3x, 15px);\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: var-list(--app-scale-3x, 5px) 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: var-list(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true }) description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-optgroup2.js

@@ -43,7 +43,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
         });
     }
     render() {
-        return (h("div", { key: 'e055edb08a1099842942582416a5550ad1a42b33', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7daac57aba78354e023355e280bcc5ae808790ff', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b9df8f23771b0b068f229489a74ee3e7fb7c08b8', class: "q2-optgroup-options" }, h("slot", { key: 'ff236b48776478a0da2b8ad5a30c68000a04706e' }))));
+        return (h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-option-list2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, t as isVisible, i as isEventFromElement } from './index2.js';
+import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, u as isVisible, i as isEventFromElement } from './index2.js';
 
 const q2OptionListCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 const Q2OptionListStyle0 = q2OptionListCss;

package/dist/components/q2-option2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
 
-const q2OptionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const q2OptionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 const Q2OptionStyle0 = q2OptionCss;
 
 const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLElement {
@@ -59,7 +59,7 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '4ab65e5cb9b9d6a9eae7bf6f54d10aedfb0bf0d1', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'e97b97b66fbe497bd88b2540d7e913115c6a3493', type: "checkmark" }), h("div", { key: 'be2752322044765687780150d77e427187898260', class: "content" }, h("slot", { key: '4541c17bda9d0d399e49e80a67162cd96dfd6159' }))));
+        return (h(Host, { key: 'b6ca0e5f1a15c594a6577769c7549369573541bd', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'd4ddab403a45207e8f7e1c2b3611fd9ad5eafa52', type: "checkmark" }), h("div", { key: '4d10f04c3cc686a21f7e6e5d19106b61af89f6f2', class: "content" }, h("slot", { key: '2290b5fe8bbce6a3cb64c70d31df2376d51dd129' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2OptionStyle0; }

package/dist/components/q2-option2.js.map

@@ -1 +1 @@
-{"file":"q2-option2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ixEAAixE,CAAC;AACtyE,uBAAe,WAAW;;MCEb,QAAQ;;;;;;QAoEjB,oBAAe,GAAG,CAAC,SAA2B;;YAC1C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,KAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YACjE,IAAI,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YACtD,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;gBACzB,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,GAAG,CAAC,IAAI,KAAK,eAAe,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;iBAC9B;qBAAM,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS,EAAE;oBACrE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC1C;aACJ;YACD,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;gBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAC7G,CAAC;oBA1EsC,QAAQ;;;;;;;;kCA+BwC,KAAK;;IAY7F,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;KACpC;IAED,WAAW;;QACP,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,EAAC,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SAC/C;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACtD;KACJ;IAgBD,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACI,EAAC,IAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,WAAW,GAAG,EAC9C,4DAAK,KAAK,EAAC,SAAS,IAChB,8DAAQ,CACN,CACH,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-multiline-icon-size), var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n\n    /** Disables the option. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true }) display: string;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-option2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,+3EAA+3E,CAAC;AACp5E,uBAAe,WAAW;;MCEb,QAAQ;;;;;;QAoEjB,oBAAe,GAAG,CAAC,SAA2B;;YAC1C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,KAAI,EAAE,EAAE,IAAI,EAAE,CAAC;YACjE,IAAI,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YACtD,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;gBACzB,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,GAAG,CAAC,IAAI,KAAK,eAAe,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;iBAC9B;qBAAM,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS,EAAE;oBACrE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC1C;aACJ;YACD,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;gBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAC7G,CAAC;oBA1EsC,QAAQ;;;;;;;;kCA+BwC,KAAK;;IAY7F,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;KACpC;IAED,WAAW;;QACP,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,EAAC,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SAC/C;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACtD;KACJ;IAgBD,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACI,EAAC,IAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,WAAW,GAAG,EAC9C,4DAAK,KAAK,EAAC,SAAS,IAChB,8DAAQ,CACN,CACH,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n\n    /** Disables the option. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true }) display: string;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-pagination.js

@@ -163,7 +163,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: '96bcb9c4a977162f1a3cf086ad71052a040fbc02', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '885ec8867dcfe56fcec401e3af167dcecc33b70f', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '74561394c7bdb496d306e959ad5b1e5361e42ec7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '2500a292e1823d4d24136be40a4fa4f9346bc9c8', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -172,7 +172,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'aaaffc1971d83c47f71dc7f576043bb269589dd6', class: "btn-group" }, h("q2-btn", { key: 'dbc5c9cdcc90be091cbdc24fef330b4e83f84723', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '6b61c526965bac728905b20081d1b3fc2ee10d13', type: "chevron-double-left" })), h("q2-btn", { key: '4156c64395f16f7c4c6ca7928f5dc50ba20007dc', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'bdb78a15f9852087531947b93e96e1b3c5518ff2', type: "chevron-left" }))), h("div", { key: 'f655f178bbbd3b41c43ca4f68442c59c8f3f0674', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '60afc8c8bd8805bf38813b73c75fb260abe8deb4', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7ab2d59e80533d82739fc53d98416305cbe365c9', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '943e3b3a74853ec57b4939e897ad2d2296d875be', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'e5da3d0850ec40c8123ec39bb3992260bf6001fc', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '7ecaaedfdb80f3fb45c5ae74da0811f88797ab2c', class: "btn-group" }, h("q2-btn", { key: '76aaadc41047bda4ff909eaa7269c6b00826cef9', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '3c2a3ecd6d8f75391a2200c6e4ee69be1fbaa6ad', type: "chevron-right" })), h("q2-btn", { key: '433de5183eb6c4350a886c691c813ab8e709a64d', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '48bf23391120c809d793b8a48c6de128b12ac75d', type: "chevron-double-right" })))));
+            })), h("div", { key: '653ee492dfd5b7e80d8d1e1eb680364cbdb13f17', class: "btn-group" }, h("q2-btn", { key: '512e60ac934efaa54a87862ab81677956d80c7dc', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7c0c57fbb28c7221467457ced6e2f196f5c0c41a', type: "chevron-double-left" })), h("q2-btn", { key: '5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9955d71cb14f809d7794022aff67c4403dd59e0c', type: "chevron-left" }))), h("div", { key: 'b7bbe334d869c527093f50b61419cd680dad7205', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '778f9842501854d5427f481e02924b2f967f8ec7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2761c3e8acd7150aba435d86c545e0903482163d', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '00e1cfc6c391311920928694844875715ed2fd97', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '6acb2c32ca833bdd68fe0e09cee75df7c8abaae3', class: "btn-group" }, h("q2-btn", { key: '0ac42aecaf056348a8c2e2729d1e35e7db44750b', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520', type: "chevron-right" })), h("q2-btn", { key: '2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '88a16778a20430935b7cc5d23393897f426d4548', type: "chevron-double-right" })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {