q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -0,0 +1,381 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @name Surface
+ * @category Display
+ * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+ */
+export class Q2Surface {
+    constructor() {
+        // #region Own Properties
+        this._cancelAnimation = null;
+        /** Applies a gradient fade across the background.
+         *
+         * @info Direction and colors are customizable via CSS custom properties. */
+        this.backgroundGradient = false;
+        /**
+         * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+         *
+         * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+         */
+        this.borderGradient = false;
+        /** Makes the surface interactive, responding to clicks.
+         *
+         * @info Emits `tctClick` when clicked. */
+        this.clickable = false;
+        /** Gives the component a drop shadow.
+         *
+         * @info 0 means no shadow; higher values appear more elevated. */
+        this.elevation = 0;
+        /** Adds internal padding applied uniformly on all sides.
+         *
+         * @info Individual axes can be overridden with `inset-x` and `inset-y`. */
+        this.inset = 'none';
+        /** Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded). */
+        this.radius = 0;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this._cancelAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    // #endregion
+    // #region Listeners
+    onClick() {
+        if (!this.clickable)
+            return;
+        this.tctClick.emit();
+    }
+    onKeydown(event) {
+        if (!this.clickable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.tctClick.emit();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+     * @param animation The animation to play. Defaults to `'pulse'`.
+     * @returns A Promise that resolves when the animation finishes or is cancelled.
+     */
+    async animate(animation = 'pulse') {
+        var _a;
+        (_a = this._cancelAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        return new Promise(resolve => {
+            const className = `q2-surface-animate-${animation}`;
+            const onEnd = () => {
+                this.hostElement.classList.remove(className);
+                this._cancelAnimation = null;
+                resolve();
+            };
+            this._cancelAnimation = () => {
+                this.hostElement.classList.remove(className);
+                this.hostElement.removeEventListener('animationend', onEnd);
+                this._cancelAnimation = null;
+                resolve();
+            };
+            this.hostElement.classList.add(className);
+            this.hostElement.addEventListener('animationend', onEnd, { once: true });
+        });
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return (h(Host, { key: '235f94ccfb0eb7167079e8e25ee78d652999f8e8' }, h("div", { key: 'b01d6e71bb4b8f1f583c63910d4b1eca757572dd', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '591dc9fcb51d6f238a6186f047661020be9ea800' }))));
+    }
+    static get is() { return "q2-surface"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-surface.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-surface.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies a background color from the design-system token palette. When unset, the surface is transparent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "background"
+            },
+            "backgroundGradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "Direction and colors are customizable via CSS custom properties."
+                        }],
+                    "text": "Applies a gradient fade across the background."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "background-gradient",
+                "defaultValue": "false"
+            },
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a visible border around the surface, optionally in a themed color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "border"
+            },
+            "borderGradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color."
+                        }],
+                    "text": "Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "border-gradient",
+                "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "Emits `tctClick` when clicked."
+                        }],
+                    "text": "Makes the surface interactive, responding to clicks."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1 | 2 | 3 | 4 | 5",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "0 means no shadow; higher values appear more elevated."
+                        }],
+                    "text": "Gives the component a drop shadow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "elevation",
+                "defaultValue": "0"
+            },
+            "inset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'compact' | 'normal' | 'comfortable'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "Individual axes can be overridden with `inset-x` and `inset-y`."
+                        }],
+                    "text": "Adds internal padding applied uniformly on all sides."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inset",
+                "defaultValue": "'none'"
+            },
+            "insetX": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'compact' | 'normal' | 'comfortable'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds horizontal padding, overriding the horizontal component of `inset`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inset-x"
+            },
+            "insetY": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'compact' | 'normal' | 'comfortable'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds vertical padding, overriding the vertical component of `inset`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inset-y"
+            },
+            "radius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1 | 2 | 3 | 4 | 5",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "radius",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctClick",
+                "name": "tctClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the surface is clicked and `clickable` is true."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "animate": {
+                "complexType": {
+                    "signature": "(animation?: \"bounce\" | \"flash\" | \"pulse\" | \"tada\") => Promise<void>",
+                    "parameters": [{
+                            "name": "animation",
+                            "type": "\"bounce\" | \"flash\" | \"pulse\" | \"tada\"",
+                            "docs": "The animation to play. Defaults to `'pulse'`."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "animation The animation to play. Defaults to `'pulse'`."
+                        }, {
+                            "name": "returns",
+                            "text": "A Promise that resolves when the animation finishes or is cancelled."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,108 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'background-default',
+        html: `<q2-surface background="default" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'background-primary',
+        html: `<q2-surface background="primary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'background-secondary',
+        html: `<q2-surface background="secondary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'background-tertiary',
+        html: `<q2-surface background="tertiary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'background-gradient-primary',
+        html: `<q2-surface background="primary" background-gradient inset="normal" radius="2"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'border-default',
+        html: `<q2-surface border="default" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'border-primary',
+        html: `<q2-surface border="primary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'border-secondary',
+        html: `<q2-surface border="secondary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'border-tertiary',
+        html: `<q2-surface border="tertiary" inset="normal"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'border-gradient-primary',
+        html: `<q2-surface border="primary" border-gradient inset="normal" radius="2"></q2-surface>`,
+        states: ['resting'],
+    },
+    {
+        name: 'clickable',
+        html: `<q2-surface clickable border="default" radius="2" inset="normal"></q2-surface>`,
+        states: ['resting', 'hover', 'focus', 'active'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-surface--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-surface--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-surface--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-surface').hover();
+        await expect(page).toHaveScreenshot(`q2-surface--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-surface--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-surface--${variant.name}--focus--${theme}.png`);
+    });
+};
+const activeCase = (variant, theme) => {
+    test(`q2-surface--${variant.name}--active — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        const surface = page.locator('q2-surface');
+        const box = await surface.boundingBox();
+        if (!box)
+            throw new Error('q2-surface bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(50);
+        await expect(page).toHaveScreenshot(`q2-surface--${variant.name}--active--${theme}.png`);
+        await page.mouse.up();
+    });
+};
+test.describe('q2-surface — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('hover'))
+                hoverCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+            if (variant.states.includes('active'))
+                activeCase(variant, theme);
+        }
+    }
+});

package/dist/collection/components/q2-tab-container/q2-tab-container.js

@@ -266,7 +266,7 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '0a0a2058f1c949d0dd724439274115e64d2c7dd4' }, h("div", { key: '1f9fb82b2777198077a11470eb36fc8440377e24', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '570d2fc54ee847f0b59f237ea299aacd71ce6c30' }, h("div", { key: '660b94c04439955c8a074155dc58219be6078e8c', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'cf7234df25acc428a7484dfc7bb0332a67378c31', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '606062d6fd19dfcc4be88221c41958fbf03e11d1', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '83ea86a0ceb25a38006399c577b8e450d8b15154', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '5c8e4cd5777ddafc2b3dafcf288d636df29a5bfb', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'a452c64a7293ee46d0a9ef8239082f965f50d42e', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '885b13b8f0d2c87ae27bb4802fbb5209dbb1663a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: 'eedebff87dc19e82bf8e192906642265ca27e030', class: "tab-content" }, h("slot", { key: 'e8eff4ef323a8330bad4f14f2843d094d9ead6e2', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'cfaf872008ad8687316955a725e7475d326b5ec2' }, h("div", { key: '8a61a84ecd4d1869fe53829ca908e99ec80b11be', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'a77950455f6f6f9138d1174fa4db38bcde498cb5' }, h("div", { key: 'b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'f625095c68ad1bedd07d34149d28c27f12b2954d', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '96c26c6447708d2fcf102e53e984f9a71bc2d9b1', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'feec85bd6bbbfeb99c520b6118c90190130d8dca', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '8dc406d9e144e0d025e14d8a2e30f6010febafd6', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '8ba591207287d3aa2d20e70ec72c03a755879ab0', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '83ab595967887ca3d2a584f85519f23e101d02ff', class: "tab-content" }, h("slot", { key: '6458a9e54b310f85129497478757111501fcb06f', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f8b0c0d0b8dba3f96c30b96e215a7224b577604a', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '2472e51b0a1e78652fc8a1fd99d001802297aa14' })));
+        return (h("div", { key: '19abb08e46c23ce0be03d7d07a1bbe4c22e99786', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '42a7a3ac8fe64661ba2027c0c967fcfe3b4d20e7' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -194,7 +194,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'b00f91a2d3932e444521adfa7444d12449805ce2' }, h("click-elsewhere", { key: 'a08d98db59a6985936e4a2221e8b131f2372b1ac', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '99faf2982c1387840d14ddd014a1a3476e4d8062', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'c1fcbef6fc557561b2962609031acc4cb672f2ad', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '233b7959dffa0e50760f631b1a26853cc3c3f78d' })))))));
+        return (h(Host, { key: '8bf6d92e2f691ae8efeb0b1f24b460d193c069f1' }, h("click-elsewhere", { key: '9c6d2c96a64528a7831f5f1f019e81f5092b1347', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '2df0c2c782ec0908fe95f4c824fa4230beeb2e6d', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '8423b3877e1750ee12f5162b7fd2eb43a9552002', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '66ba933485bb28a9d140018c7ce6ce02e31ea668' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,11 @@
 import { h } from "@stencil/core";
 import { hasSlotContent, loc } from "../../utils/index";
 /**
+ * @name Toast
+ * @category Platform
+ * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
  * @slot icon - Optional slot for a custom icon.
  * @slot title - Optional slot for the title content.
- * @slot - Optional slot for the message content.
  * @slot time - Optional slot for the time marker.
  * @slot actions - Optional slot for action links in the footer.
  */

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

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

package/dist/collection/utils/index.js

@@ -143,14 +143,14 @@ export function pick(props) {
         }, {});
     };
 }
-export function loc(key, subs) {
+export function loc(key, subs, options) {
     var _a, _b, _c;
     if (!key)
         return '';
     if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noStrings) === true) {
         return key;
     }
-    return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
+    return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs, options)) !== null && _c !== void 0 ? _c : key;
 }
 /**
  * Returns browser name, version, platform, and context (browser vs app WebView).

package/dist/components/index.js

@@ -124,23 +124,25 @@ import { Q2StepperPane as po } from "./q2-stepper-pane.js";
 
 import { Q2StepperVertical as eo } from "./q2-stepper-vertical.js";
 
-import { Q2TabContainer as fo } from "./q2-tab-container.js";
+import { Q2Surface as fo } from "./q2-surface.js";
 
-import { Q2TabPane as jo } from "./q2-tab-pane.js";
+import { Q2TabContainer as jo } from "./q2-tab-container.js";
 
-import { Q2Tag as qo } from "./q2-tag.js";
+import { Q2TabPane as qo } from "./q2-tab-pane.js";
 
-import { Q2Textarea as ao } from "./q2-textarea.js";
+import { Q2Tag as ao } from "./q2-tag.js";
 
-import { Q2Toast as no } from "./q2-toast.js";
+import { Q2Textarea as no } from "./q2-textarea.js";
 
-import { Q2Tooltip as co } from "./q2-tooltip.js";
+import { Q2Toast as co } from "./q2-toast.js";
 
-import { TectonTabPane as lo } from "./tecton-tab-pane.js";
+import { Q2Tooltip as lo } from "./q2-tooltip.js";
 
-const defineCustomElements = go => {
-  "undefined" != typeof customElements && [ r, m, t, i, s, p, e, f, j, q, a, n, c, l, d, g, u, b, h, x, k, v, w, E, P, y, A, z, N, O, B, C, D, F, G, H, I, J, K, L, M, Q, R, S, T, U, V, W, X, Y, Z, $, _, oo, ro, mo, to, io, so, po, eo, fo, jo, qo, ao, no, co, lo ].forEach((r => {
-    customElements.get(o(r.is)) || customElements.define(o(r.is), r, go);
+import { TectonTabPane as go } from "./tecton-tab-pane.js";
+
+const defineCustomElements = uo => {
+  "undefined" != typeof customElements && [ r, m, t, i, s, p, e, f, j, q, a, n, c, l, d, g, u, b, h, x, k, v, w, E, P, y, A, z, N, O, B, C, D, F, G, H, I, J, K, L, M, Q, R, S, T, U, V, W, X, Y, Z, $, _, oo, ro, mo, to, io, so, po, eo, fo, jo, qo, ao, no, co, lo, go ].forEach((r => {
+    customElements.get(o(r.is)) || customElements.define(o(r.is), r, uo);
   }));
 };
 

package/dist/components/index2.js

@@ -94,9 +94,9 @@ function waitForNextPaint() {
   return new Promise((e => nextPaint(e)));
 }
 
-function loc(e, n) {
-  var o, i, t;
-  return e ? !0 === (null === (o = window.Tecton) || void 0 === o ? void 0 : o.noStrings) ? e : null !== (t = null === (i = null === window || void 0 === window ? void 0 : window.TectonElements) || void 0 === i ? void 0 : i.loc(e, n)) && void 0 !== t ? t : e : "";
+function loc(e, n, o) {
+  var i, t, a;
+  return e ? !0 === (null === (i = window.Tecton) || void 0 === i ? void 0 : i.noStrings) ? e : null !== (a = null === (t = null === window || void 0 === window ? void 0 : window.TectonElements) || void 0 === t ? void 0 : t.loc(e, n, o)) && void 0 !== a ? a : e : "";
 }
 
 /**