q2-tecton-elements 1.59.0 → 1.60.0

package/dist/collection/components/q2-loading/skeleton/shapes.js

@@ -18,7 +18,10 @@ export const molecules = {
         return (h("div", { class: "skeleton-shape text" }, hasHeader && atoms.rectangle({ width: '60%', additionalClasses }), !!rows &&
             Array(rows)
                 .fill(undefined)
-                .map(() => atoms.rectangle({ height: '1rem' }))));
+                .map(() => atoms.rectangle({
+                height: '1rem',
+                borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',
+            }))));
     },
 };
 export const shapes = {
@@ -26,7 +29,10 @@ export const shapes = {
         return atoms.circle({ width: '100%' });
     },
     rectangle: () => {
-        return atoms.rectangle({ height: '100%', borderRadius: 'var(--tct-border-radius-1, 4px)' });
+        return atoms.rectangle({
+            height: '100%',
+            borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',
+        });
     },
     table: (counts, modifiers) => {
         var _a, _b;

package/dist/collection/components/q2-loading/skeleton/shapes.js.map

@@ -1 +1 @@
-{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/components/q2-loading/skeleton/shapes.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { JSX } from './../../../components';\n\ninterface AtomOptions {\n    width?: string;\n    height?: string;\n    borderRadius?: string;\n    additionalClasses?: string;\n}\n\nexport const atoms = {\n    circle: ({ width, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape circle ${additionalClasses || ''}`}\n            style={{ width, height: width }}\n        ></div>\n    ),\n    rectangle: ({ width, height, borderRadius, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape rectangle ${additionalClasses || ''}`}\n            style={{ width, height, borderRadius }}\n        ></div>\n    ),\n};\n\nexport const molecules = {\n    field: (): JSX.IntrinsicElements => (\n        <div class=\"skeleton-shape field\">\n            <div class=\"skeleton-field-label\">{atoms.rectangle({ height: '1rem', width: '50%' })}</div>\n            {atoms.rectangle({\n                height: 'var(--tct-input-height, 42px)',\n                borderRadius: '3px',\n            })}\n        </div>\n    ),\n    text: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const rows = counts?.[0] ?? 1;\n        const hasHeader = modifiers?.has('header');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        const smallHeaderClass = modifiers?.has('smallheader') ? ' smaller' : '';\n        const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';\n        return (\n            <div class=\"skeleton-shape text\">\n                {hasHeader && atoms.rectangle({ width: '60%', additionalClasses })}\n                {!!rows &&\n                    Array(rows)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport const shapes = {\n    circle: (): JSX.IntrinsicElements => {\n        return atoms.circle({ width: '100%' });\n    },\n    rectangle: (): JSX.IntrinsicElements => {\n        return atoms.rectangle({ height: '100%', borderRadius: 'var(--tct-border-radius-1, 4px)' });\n    },\n    table: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const columnCount = counts?.[0] ?? 5;\n        const rowCount = counts?.[1] ?? 5;\n        const headless = modifiers?.has('headless');\n        const bordered = modifiers?.has('bordered');\n        return (\n            <div class=\"skeleton-shape table\">\n                {!headless && (\n                    <div class=\"skeleton-table-head\">\n                        <div class=\"skeleton-table-row skeleton-table-header flex\">\n                            {!!columnCount &&\n                                Array(columnCount)\n                                    .fill(undefined)\n                                    .map(() => atoms.rectangle({ height: '1rem' }))}\n                        </div>\n                        <div class=\"skeleton-table-row-border\">{atoms.rectangle({ height: '3px' })}</div>\n                    </div>\n                )}\n                <div class=\"skeleton-table-body\">\n                    {!!rowCount &&\n                        Array(rowCount)\n                            .fill(undefined)\n                            .map(() => (\n                                <div class=\"skeleton-table-row-wrapper\">\n                                    <div class=\"skeleton-table-row flex\">\n                                        {!!columnCount &&\n                                            Array(columnCount)\n                                                .fill(undefined)\n                                                .map(() => atoms.rectangle({ height: '1.5rem' }))}\n                                    </div>\n                                    {bordered && (\n                                        <div class=\"skeleton-table-row-border\">\n                                            {atoms.rectangle({\n                                                height: '1px',\n                                                additionalClasses: 'no-margin',\n                                            })}\n                                        </div>\n                                    )}\n                                </div>\n                            ))}\n                </div>\n            </div>\n        );\n    },\n    field: molecules.field,\n    form: (counts?: number[]): JSX.IntrinsicElements => {\n        const columns = (counts?.[1] && counts?.[0]) ?? 1;\n        const rows = counts?.[1] ?? counts?.[0] ?? 1;\n        const totalItems = columns * rows;\n        return (\n            <div class={`skeleton-shape form flex columns-${columns}`}>\n                {!!totalItems && Array(totalItems).fill(undefined).map(molecules.field)}\n            </div>\n        );\n    },\n    text: molecules.text,\n    'detailed-item': (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const isSquare = modifiers?.has('square');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        return (\n            <div class={`skeleton-shape detailed-item flex ${alignment}`}>\n                <div class={`detailed-item-image flex-${alignment}`}>\n                    {isSquare\n                        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })\n                        : atoms.circle({ width: '1.5em' })}\n                </div>\n                <div class={`detailed-item-text flex flex-v-center flex-${alignment}`}>\n                    <div>{molecules.text(counts, modifiers)}</div>\n                </div>\n            </div>\n        );\n    },\n    'label-value': (counts?: number[]): JSX.IntrinsicElements => {\n        const cells = 2 * (counts?.[0] ?? 1);\n        return (\n            <div class=\"skeleton-shape label-value flex\">\n                {!!cells &&\n                    Array(cells)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport default shapes;\n"]}
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/components/q2-loading/skeleton/shapes.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { JSX } from './../../../components';\n\ninterface AtomOptions {\n    width?: string;\n    height?: string;\n    borderRadius?: string;\n    additionalClasses?: string;\n}\n\nexport const atoms = {\n    circle: ({ width, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape circle ${additionalClasses || ''}`}\n            style={{ width, height: width }}\n        ></div>\n    ),\n    rectangle: ({ width, height, borderRadius, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n        <div\n            class={`skeleton-shape rectangle ${additionalClasses || ''}`}\n            style={{ width, height, borderRadius }}\n        ></div>\n    ),\n};\n\nexport const molecules = {\n    field: (): JSX.IntrinsicElements => (\n        <div class=\"skeleton-shape field\">\n            <div class=\"skeleton-field-label\">{atoms.rectangle({ height: '1rem', width: '50%' })}</div>\n            {atoms.rectangle({\n                height: 'var(--tct-input-height, 42px)',\n                borderRadius: '3px',\n            })}\n        </div>\n    ),\n    text: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const rows = counts?.[0] ?? 1;\n        const hasHeader = modifiers?.has('header');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        const smallHeaderClass = modifiers?.has('smallheader') ? ' smaller' : '';\n        const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';\n        return (\n            <div class=\"skeleton-shape text\">\n                {hasHeader && atoms.rectangle({ width: '60%', additionalClasses })}\n                {!!rows &&\n                    Array(rows)\n                        .fill(undefined)\n                        .map(() =>\n                            atoms.rectangle({\n                                height: '1rem',\n                                borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n                            })\n                        )}\n            </div>\n        );\n    },\n};\n\nexport const shapes = {\n    circle: (): JSX.IntrinsicElements => {\n        return atoms.circle({ width: '100%' });\n    },\n    rectangle: (): JSX.IntrinsicElements => {\n        return atoms.rectangle({\n            height: '100%',\n            borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n        });\n    },\n    table: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const columnCount = counts?.[0] ?? 5;\n        const rowCount = counts?.[1] ?? 5;\n        const headless = modifiers?.has('headless');\n        const bordered = modifiers?.has('bordered');\n        return (\n            <div class=\"skeleton-shape table\">\n                {!headless && (\n                    <div class=\"skeleton-table-head\">\n                        <div class=\"skeleton-table-row skeleton-table-header flex\">\n                            {!!columnCount &&\n                                Array(columnCount)\n                                    .fill(undefined)\n                                    .map(() => atoms.rectangle({ height: '1rem' }))}\n                        </div>\n                        <div class=\"skeleton-table-row-border\">{atoms.rectangle({ height: '3px' })}</div>\n                    </div>\n                )}\n                <div class=\"skeleton-table-body\">\n                    {!!rowCount &&\n                        Array(rowCount)\n                            .fill(undefined)\n                            .map(() => (\n                                <div class=\"skeleton-table-row-wrapper\">\n                                    <div class=\"skeleton-table-row flex\">\n                                        {!!columnCount &&\n                                            Array(columnCount)\n                                                .fill(undefined)\n                                                .map(() => atoms.rectangle({ height: '1.5rem' }))}\n                                    </div>\n                                    {bordered && (\n                                        <div class=\"skeleton-table-row-border\">\n                                            {atoms.rectangle({\n                                                height: '1px',\n                                                additionalClasses: 'no-margin',\n                                            })}\n                                        </div>\n                                    )}\n                                </div>\n                            ))}\n                </div>\n            </div>\n        );\n    },\n    field: molecules.field,\n    form: (counts?: number[]): JSX.IntrinsicElements => {\n        const columns = (counts?.[1] && counts?.[0]) ?? 1;\n        const rows = counts?.[1] ?? counts?.[0] ?? 1;\n        const totalItems = columns * rows;\n        return (\n            <div class={`skeleton-shape form flex columns-${columns}`}>\n                {!!totalItems && Array(totalItems).fill(undefined).map(molecules.field)}\n            </div>\n        );\n    },\n    text: molecules.text,\n    'detailed-item': (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n        const isSquare = modifiers?.has('square');\n        const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n        return (\n            <div class={`skeleton-shape detailed-item flex ${alignment}`}>\n                <div class={`detailed-item-image flex-${alignment}`}>\n                    {isSquare\n                        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })\n                        : atoms.circle({ width: '1.5em' })}\n                </div>\n                <div class={`detailed-item-text flex flex-v-center flex-${alignment}`}>\n                    <div>{molecules.text(counts, modifiers)}</div>\n                </div>\n            </div>\n        );\n    },\n    'label-value': (counts?: number[]): JSX.IntrinsicElements => {\n        const cells = 2 * (counts?.[0] ?? 1);\n        return (\n            <div class=\"skeleton-shape label-value flex\">\n                {!!cells &&\n                    Array(cells)\n                        .fill(undefined)\n                        .map(() => atoms.rectangle({ height: '1rem' }))}\n            </div>\n        );\n    },\n};\n\nexport default shapes;\n"]}

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

@@ -9,7 +9,7 @@ export class Q2Optgroup {
         this.hidden = false;
         // #endregion
         // #region Public Property API
-        /** Serves as the group header text. */
+        /** Determines whether all nested options are disabled. */
         this.disabled = false;
         this.setHidden = () => {
             this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
@@ -77,7 +77,7 @@ export class Q2Optgroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Serves as the group header text."
+                    "text": "Determines whether all nested options are disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -97,7 +97,7 @@ export class Q2Optgroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether all nested options are disabled."
+                    "text": "Serves as the group header text."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;IADvB;QAEI,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAS5B,aAAa;QACb,2BAA2B;QAG3B,WAAM,GAAY,KAAK,CAAC;QAExB,aAAa;QACb,8BAA8B;QAE9B,uCAAuC;QAEvC,aAAQ,GAAY,KAAK,CAAC;QA6C1B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;KA2BL;IApEG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;IADvB;QAEI,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAS5B,aAAa;QACb,2BAA2B;QAG3B,WAAM,GAAY,KAAK,CAAC;QAExB,aAAa;QACb,8BAA8B;QAE9B,0DAA0D;QAE1D,aAAQ,GAAY,KAAK,CAAC;QA6C1B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;KA2BL;IApEG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -702,7 +702,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -780,7 +780,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -840,7 +840,7 @@ export class Q2OptionList {
                         },
                         "ValidOptionElements": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::ValidOptionElements"
                         }
                     },
@@ -862,7 +862,7 @@ export class Q2OptionList {
                         },
                         "ValidOptionElements": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::ValidOptionElements"
                         }
                     },

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

@@ -97,11 +97,15 @@ q2-popover,
   --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
   --comp-close-size: 0px;
   --comp-btn-background: var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));
+  --comp-btn-box-shadow: var(--tct-pill-btn-box-shadow, none);
+  --comp-btn-backdrop-filter: var(--tct-pill-btn-backdrop-filter, none);
   --comp-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
   --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
-  --comp-active-btn-color: var(--comp-btn-background);
+  --comp-active-btn-color: var(--tct-pill-active-btn-color, var(--comp-btn-background));
   --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
+  --comp-active-btn-box-shadow: var(--tct-pill-active-btn-box-shadow, none);
+  --comp-active-btn-backdrop-filter: var(--tct-pill-active-btn-backdrop-filter, none);
   --comp-active-btn-border-color: var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));
   --comp-hover-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
   --comp-hover-active-btn-border-color: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
@@ -110,11 +114,13 @@ q2-popover,
 .btn-wrapper.has-options, .btn-wrapper.has-icon {
   --comp-close-size: var(--comp-pill-btn-height);
 }
-:host([active]) .btn-wrapper {
+:host([active]:not([active=false])) .btn-wrapper {
   --comp-btn-color: var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)));
 }
 :host([theme=primary]) .btn-wrapper {
   --comp-active-btn-background: var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));
+  --comp-active-btn-box-shadow: var(--tct-pill-primary-active-box-shadow, none);
+  --comp-active-btn-backdrop-filter: var(--tct-pill-primary-active-backdrop-filter, none);
   --comp-active-btn-color: var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));
   --comp-active-btn-border-color: var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));
   --comp-hover-active-btn-background: var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));
@@ -122,6 +128,8 @@ q2-popover,
 }
 :host([theme=secondary]) .btn-wrapper {
   --comp-active-btn-background: var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));
+  --comp-active-btn-box-shadow: var(--tct-pill-secondary-active-box-shadow, none);
+  --comp-active-btn-backdrop-filter: var(--tct-pill-secondary-active-backdrop-filter, none);
   --comp-active-btn-color: var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));
   --comp-active-btn-border-color: var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));
   --comp-hover-active-btn-background: var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));
@@ -129,6 +137,8 @@ q2-popover,
 }
 :host([theme=tertiary]) .btn-wrapper {
   --comp-active-btn-background: var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));
+  --comp-active-btn-box-shadow: var(--tct-pill-tertiary-active-box-shadow, none);
+  --comp-active-btn-backdrop-filter: var(--tct-pill-tertiary-active-backdrop-filter, none);
   --comp-active-btn-color: var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));
   --comp-active-btn-border-color: var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));
   --comp-hover-active-btn-background: var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));
@@ -167,11 +177,14 @@ q2-popover,
 
 .btn-primary {
   background: var(--comp-btn-background);
+  box-shadow: var(--comp-btn-box-shadow);
+  backdrop-filter: var(--comp-btn-backdrop-filter);
   border-width: var(--comp-pill-btn-border-width);
   border-color: var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));
   padding-inline: var(--comp-btn-padding);
   padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));
   font-size: var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));
+  font-weight: var(--tct-pill-btn-font-weight, 400);
   color: var(--comp-btn-color);
   display: block;
   width: 100%;
@@ -189,12 +202,14 @@ q2-popover,
   white-space: nowrap;
   max-width: var(--tct-pill-max-width, var(--t-pill-max-width, 200px));
 }
-:host([active]) .btn-primary {
+:host([active]:not([active=false])) .btn-primary {
   background: var(--comp-active-btn-background);
+  box-shadow: var(--comp-active-btn-box-shadow);
+  backdrop-filter: var(--comp-active-btn-backdrop-filter);
   border-color: var(--comp-active-btn-border-color);
   color: var(--comp-active-btn-color);
 }
-:host([active]) .btn-primary:focus, :host([active]) .btn-primary:hover {
+:host([active]:not([active=false])) .btn-primary:focus, :host([active]:not([active=false])) .btn-primary:hover {
   background: var(--comp-hover-active-btn-background);
   border-color: var(--comp-hover-active-btn-border-color);
 }
@@ -216,7 +231,7 @@ q2-popover,
   transform: translateY(-50%);
   opacity: 0;
 }
-:host([active]) .btn-close {
+:host([active]:not([active=false])) .btn-close {
   color: var(--comp-active-btn-color);
 }
 .has-options .btn-close, .has-icon .btn-close {
@@ -224,7 +239,8 @@ q2-popover,
 }
 
 q2-icon {
-  --t-icon-stroke-primary: currentcolor;
+  --tct-icon-stroke-primary: var(--tct-pill-icon-stroke, currentcolor);
+  --tct-icon-stroke-width: var(--tct-pill-icon-stroke-width, inherit);
   width: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
   height: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
   transition-property: transform;
@@ -238,7 +254,7 @@ div.btn-close {
   transform: rotate(180deg);
 }
 
-:host([active]) button.btn-close:focus, :host([active]) button.btn-close:hover {
+:host([active]:not([active=false])) button.btn-close:focus, :host([active]:not([active=false])) button.btn-close:hover {
   background: var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
   border-color: var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
 }

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

@@ -81,7 +81,6 @@ export class Q2Pill {
                 const { value, label } = this;
                 const isActive = (this.active = !this.active);
                 const values = isActive ? [{ value, display: label }] : [];
-                this.selectedOptions = values;
                 this.change.emit({
                     value,
                     values,
@@ -159,7 +158,7 @@ export class Q2Pill {
             if (!!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length))
                 this.selectedOptionsChanged(selectedOptions);
             else if (value)
-                this.valueChanged(value);
+                this.valueChanged(value, null, 'value');
         };
         this.updateSelectedOptionElements = async () => {
             var _a;
@@ -287,17 +286,19 @@ export class Q2Pill {
             this.value = firstValue;
         }
     }
-    async valueChanged(newValue) {
+    async valueChanged(newValue, _oldValue, propName) {
         var _a, _b;
-        const { multiple, selectedOptions } = this;
+        const { label, multiple, selectedOptions, value } = this;
+        const valueProxy = propName === 'value' ? newValue : value;
+        const labelProxy = propName === 'label' ? newValue : label;
         if (multiple)
             return;
         const firstValue = (_b = (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
-        if (newValue === firstValue)
+        if (propName === 'value' && newValue === firstValue)
             this.updateSelectedOptionElements();
         else {
             const selectedOption = (await this.getOption(newValue));
-            const { value, display } = selectedOption || { value: newValue, display: null };
+            const { value, display } = selectedOption || { value: valueProxy, display: labelProxy };
             this.selectedOptions = value ? [{ value, display }] : [];
         }
     }
@@ -343,7 +344,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '0086bf06f2ddf4defbd7c844ce6d3e8be39ee4ab', onChange: this.onClickElsewhere }, h("div", { key: 'ba4352eab5845d8959631b69c307a37573a4200f', class: wrapperClassNames.join(' ') }, h("div", { key: 'ff77afa3c14755e150d031758003f3992fe7ca34', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '480428d0aa1960a7c5af959913b1022122e5fcb9', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'e29d0ac2bd383e908786496e1950c3f2b0518187', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f5c8c08712f77f30d1c03d3b99ad8fedf22dbd7f', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '4b7a0d909f17ed9f6e4284cef08099fd97ee9600', class: "popover-content" }, h("div", { key: '7b9cac2c0ab261a342e67f078c4eeb5da2ce6289', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '07aa6e85152fc552ef321d4d0c236d55de09c061', name: "popover-top" })), h("q2-option-list", { key: '0423382f075777c10454e9e174c57f0baa5bd12d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '2254c24de25573b6547efe07e3c65a2f5ecc10f9' })), h("div", { key: '13e1ad159d175200b5d37f912e4a3211bf0dcec0', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '50abd4b0d43c24f74b0e6789349b658197233bf8', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '612e277fb831b60becbdac0df520de45cc08a398', onChange: this.onClickElsewhere }, h("div", { key: '5f56c66943e7fefd4295bd5c96019039aac039c9', class: wrapperClassNames.join(' ') }, h("div", { key: '1b101344313e3bc6357e69378b929b47b53a9e50', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'f0231168c9043ac7d2596ecbb3a7a382cf27d33b', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '066f5d1132937be8eb8e925c8394d219aadeb819', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f38e3d6f605f10e8907b40d16cd70276c6f85a73', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'e4ce39ff508b27e82126fa4b08cca3d3c39ff3a7', class: "popover-content" }, h("div", { key: '4075cea397c412b24ffa17194158b9fd0aec6ad4', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '1f48ca125b79984bb49ac5e21ba6290402462c9d', name: "popover-top" })), h("q2-option-list", { key: '9dcfea71f57897a393604167e629fa4a956ef3d8', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '1915a1abd9801102248fc8b516b13f2a34e4554d' })), h("div", { key: '0073dd48f8fb6dfbe282f84ce134b258dff237a8', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '92da82497608b7fdee73587b677ec8673bbe1411', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }
@@ -808,6 +809,9 @@ export class Q2Pill {
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "label",
+                "methodName": "valueChanged"
             }];
     }
     static get listeners() {

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

@@ -1 +1 @@
-{"version":3,"file":"q2-pill.js","sourceRoot":"","sources":["../../../../src/components/q2-pill/q2-pill.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-pill.js","sourceRoot":"","sources":["../../../../src/components/q2-pill/q2-pill.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    @Watch('label')\n    async valueChanged(newValue, _oldValue, propName) {\n        const { label, multiple, selectedOptions, value } = this;\n        const valueProxy = propName === 'value' ? newValue : value;\n        const labelProxy = propName === 'label' ? newValue : label;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: valueProxy, display: labelProxy };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value, null, 'value');\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -80,6 +80,7 @@ button {
   padding: 0;
   overflow: auto;
   background: var(--tct-popover-background, var(--app-white, #ffffff));
+  backdrop-filter: var(--tct-popover-backdrop-filter, none);
   color: var(--tct-popover-font-color, var(--t-text, #4d4d4d));
   min-width: var(--tct-popover-min-width, 135px);
   margin-block: var(--tct-popover-margin-block, 0);

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

@@ -74,7 +74,7 @@ button {
   margin: var(--comp-radio-margin);
 }
 .radio-container label[for] {
-  color: var(--tct-radio-label-color, inherit);
+  color: var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));
   font-weight: var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));
   align-items: center;
   cursor: pointer;
@@ -91,11 +91,13 @@ button {
   transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   outline: 0;
   width: 100%;
+  box-shadow: var(--tct-radio-box-shadow, none);
 }
 .radio-container circle:nth-child(1) {
-  stroke-width: 2;
+  stroke-width: var(--tct-radio-stroke-width, 2);
   stroke: var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
   fill: var(--tct-radio-background-fill, transparent);
+  transition: fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease));
 }
 .radio-container input:checked + label circle:nth-child(1) {
   fill: var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));
@@ -124,7 +126,7 @@ button {
   color: var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit));
 }
 .radio-container input:focus-visible + label svg {
-  box-shadow: var(--const-double-focus-ring);
+  box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);
 }
 
 .radio-tile {

package/dist/collection/components/q2-radio-group/q2-radio-group.css

@@ -83,6 +83,11 @@ fieldset {
   grid-template-columns: 1fr 24px;
   grid-template-areas: "label icon";
   column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));
+  color: var(--tct-radio-group-label-font-color, inherit);
+  font-size: var(--tct-radio-group-label-font-size, inherit);
+  font-weight: var(--tct-radio-group-label-font-weight, 600);
+  text-transform: var(--tct-radio-group-label-text-transform, none);
+  letter-spacing: var(--tct-radio-group-label-letter-spacing, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;