q2-tecton-elements 1.65.0 → 1.66.0

package/dist/components/q2-stepper-pane.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { b as hasValidAncestor } from './component.js';
 import { c as createGuid, n as nextPaint, l as loc } from './index2.js';
 import { m as mirrorEmit } from './mirror-emit.js';
 
@@ -30,6 +31,7 @@ const Q2StepperPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2StepperPane ext
         this.mutationObserver = null;
     }
     componentWillLoad() {
+        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');
         this.checkForActiveChildren();
     }
     componentDidLoad() {
@@ -73,7 +75,7 @@ const Q2StepperPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2StepperPane ext
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: 'ae5fa0ec3e88e4d5a103a08844a4b3aeb7ac913e', role: "listitem" }, h(Fragment, { key: 'fe3fbf759165b6f46399507bc648dc267b3e6c92' }, h("div", { key: 'd94693b00214542a2136799ce992d6ae527a7968', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '0ddae7bf226ae8b32a40299b23cafffa89fa7c2c' })), h("div", { key: '360a73d25ca1d7c5c276710df5b0a5b3b4aaa143', hidden: true }, h("slot", { key: '5a81bdff29d5d7629c1f8207f65f4ad56bb51da3', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: 'b9b655a56d6dcfe60be9d8e0df327d2ecd92ecc2', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: 'a12276e32762f42609ee98d834791e81731ae438', name: "children" }))));
+        return (h(Host, { key: '92b69f37a2f62352700edac4aead4015bc4e32e9', role: "listitem" }, h(Fragment, { key: '56885c0b815a4f4526c9d0a93a82412dfeb26889' }, h("div", { key: '686936fb5947933f7a20e948609506b4af882a7a', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: 'a7b8fe995e01b385454e475b9cf7fd263fafcfb3' })), h("div", { key: '43d7a942a02bfe8b8e3a0b64b297ffcc34b4429e', hidden: true }, h("slot", { key: '6a0e1ea729ac690f6e8f6f2d9dd7d9c64884be23', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '9c450fee9479ed1085eee4a07cf409e517fa41b5', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '91e8fcbbcbfacf633fc66cb814d27735fddac14a', name: "children" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-stepper-pane.js.map

@@ -1 +1 @@
-{"file":"q2-stepper-pane.js","mappings":"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","names":["Q2StepperPane","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nexport interface IStepperPaneEvent {\n    status: string;\n    isActive: boolean;\n    id: string;\n    host: HTMLElement;\n}\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\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    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<IStepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-stepper-pane.js","mappings":"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","names":["Q2StepperPane","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nexport interface IStepperPaneEvent {\n    status: string;\n    isActive: boolean;\n    id: string;\n    host: HTMLElement;\n}\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\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    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<IStepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-stepper-vertical.js

@@ -292,7 +292,7 @@ const Q2StepperVertical$1 = /*@__PURE__*/ proxyCustomElement(class Q2StepperVert
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: '0ac15689dd6387d16264f3d2164d6936a5e687e8' }, h("ul", { key: '70b8c410e0b3c5b71880ee19ba8685602579ebed', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'bef2434232bd00e49417b7515c6db9c8995d070e', role: "list" }, h("slot", { key: '05c3f6cae0724ac8dce6f42f0464747cddc1bb09' }))));
+        return (h(Fragment, { key: '19c5979fa3800fb5e1b01ee1d86dfda2ab8c8060' }, h("ul", { key: 'b19d8f4286218e44b85c4367e1c9e899111cee51', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '1bc3834460a09e8880816b700dbe6f1ced9753d4', role: "list" }, h("slot", { key: '54596ca9c803ae76e1a3800e2e3a8bd0f40c7cf9' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-stepper.js

@@ -1,11 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { o as overrideFocus, i as isEventFromElement, l as loc } from './index2.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index2.js';
 import { m as mirrorEmit } from './mirror-emit.js';
 import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
 
-const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-divider-color:var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-btn-icon-visibility:var(--tct-stepper-btn-icon-visibility, visible);--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow))}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled=true]{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn[aria-disabled=true]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-disabled-font-color, var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d))));--comp-bullet-background:var(--tct-stepper-bullet-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));--comp-divider-color:var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));--comp-bullet-inactive-box-shadow:var(--tct-stepper-bullet-disabled-box-shadow, none)}.step-icon,.step-bubble{visibility:var(--comp-btn-icon-visibility);display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative;box-shadow:var(--comp-bullet-inactive-box-shadow)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:var(--comp-bullet-active-box-shadow);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-divider-color);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
+const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-divider-color:var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-btn-icon-visibility:var(--tct-stepper-btn-icon-visibility, visible);--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow))}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled=true]{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn[aria-disabled=true]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-disabled-font-color, var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d))));--comp-bullet-background:var(--tct-stepper-bullet-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));--comp-divider-color:var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));--comp-bullet-inactive-box-shadow:var(--tct-stepper-bullet-disabled-box-shadow, none)}.step-icon,.step-bubble{visibility:var(--comp-btn-icon-visibility);display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative;box-shadow:var(--comp-bullet-inactive-box-shadow)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:var(--comp-bullet-active-box-shadow);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-divider-color);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical;font-weight:var(--tct-stepper-label-font-weight, var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600)))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
 
 const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTMLElement {
     constructor() {
@@ -25,6 +25,10 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
             const { allPanes } = this;
             if (!allPanes.length)
                 return;
+            allPanes.forEach(pane => {
+                if (!pane.id)
+                    pane.id = `step-${createGuid()}`;
+            });
             this.stepCount = allPanes.length;
         };
         this.checkScrollState = () => {
@@ -277,7 +281,7 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: '5579e7cb9a290ccb975da9333cb2c4223e8e7732' }, h("div", { key: 'afef86e4ea5c5893063cb85b7a0123c89ac5c59f', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'd041ff6fbd3498d23cdd4b6d13a4456ab21516a0' }, h("div", { key: '442ed3abf414afd0551eaed2b8f1fbabaa516c2c', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '8cc9b8055c2562d8e6727c76a4ced51cb34e0449', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '6960f396f8948555f4e9cd81d6f3c1d78135409c', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '1081a8e6ad152e02d4431fb02989f6525fa898a6', type: "chevron-left" })), h("q2-btn", { key: '1078d865eafdbf62b8f2fbc59186af1648a5b871', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '5584fe617a8bb5b3aee169a3ef4c7491c16d13df', type: "chevron-right" })))), h("ul", { key: '5fe4eee17e8500e784734a27a5c79926c93c42f8', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '12a0c18769d385e3746bac06279376fa89bf5109', role: "list" }, h("slot", { key: 'a65845f9f929e6058f14ecd7c17827cd7643bbba', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '3f09c5b39cef426b640bd90396870a061f20d2ad' }, h("div", { key: 'dc03d2d18aac8b94ae4f33eba2a331ca54fead7b', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'e65d2f6e4b81734da263514b26056678417e82cb' }, h("div", { key: '8e45d24fefcd62c095be50b834fb6ce0f3be776d', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'f4f464ca2fb1a962b55df31bc25ae08e0f94fa1b', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'dfc9b3f625bf385baa3f97db62c4bda625ef8564', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '5132ff6d304392f75b86b96e5b7c72fe235bdf48', type: "chevron-left" })), h("q2-btn", { key: 'b024c46f6b870a88d06d0c6cf1cbb1aa05331546', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'dd259e2a8068f39d832931809ad22fa90644c8f6', type: "chevron-right" })))), h("ul", { key: 'cc0a6df61848c8ab9111449e7befb7db9eb33eb7', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '8c1f2444fa948271ab2a901564670a825dc00b6b', role: "list" }, h("slot", { key: 'c93594af30e40333fd78cb644c4036cb90f9c019', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"q2-stepper.js","mappings":"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","names":["Q2Stepper","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-divider-color: #{var-list(--tct-stepper-bullet-active-divider-color, --comp-bullet-background)};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-btn-icon-visibility: #{var(--tct-stepper-btn-icon-visibility, visible)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n    --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-active-box-shadow, --comp-default-box-shadow)};\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-complete-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-error-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(\n                    --tct-stepper-bullet-disabled-font-color,\n                    var-prefixer(stepper-bullet-inactive-font-color),\n                    --t-text,\n                    #4d4d4d\n                )};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-disabled-background,\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n            --comp-divider-color: #{var-list(--tct-stepper-bullet-disabled-divider-color, --comp-bullet-background)};\n            --comp-bullet-inactive-box-shadow: #{var-list(--tct-stepper-bullet-disabled-box-shadow, none)};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    visibility: var(--comp-btn-icon-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n    box-shadow: var(--comp-bullet-inactive-box-shadow);\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow: var(--comp-bullet-active-box-shadow);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-divider-color);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with horizontal progress.\n */\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\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    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            mirrorEmit(this, ['change', 'tctChange'], {\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-stepper.js","mappings":"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","names":["Q2Stepper","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-divider-color: #{var-list(--tct-stepper-bullet-active-divider-color, --comp-bullet-background)};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-btn-icon-visibility: #{var(--tct-stepper-btn-icon-visibility, visible)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n    --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-active-box-shadow, --comp-default-box-shadow)};\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-complete-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-error-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(\n                    --tct-stepper-bullet-disabled-font-color,\n                    var-prefixer(stepper-bullet-inactive-font-color),\n                    --t-text,\n                    #4d4d4d\n                )};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-disabled-background,\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n            --comp-divider-color: #{var-list(--tct-stepper-bullet-disabled-divider-color, --comp-bullet-background)};\n            --comp-bullet-inactive-box-shadow: #{var-list(--tct-stepper-bullet-disabled-box-shadow, none)};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    visibility: var(--comp-btn-icon-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n    box-shadow: var(--comp-bullet-inactive-box-shadow);\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow: var(--comp-bullet-active-box-shadow);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-divider-color);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n    font-weight: var-list(--tct-stepper-label-font-weight, var-prefixer(stepper-active-font-weight), 600);\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with horizontal progress.\n */\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\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    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        allPanes.forEach(pane => {\n            if (!pane.id) pane.id = `step-${createGuid()}`;\n        });\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            mirrorEmit(this, ['change', 'tctChange'], {\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as createGuid, l as loc, o as overrideFocus, i as isEventFromElement } from './index2.js';
 import { m as mirrorEmit } from './mirror-emit.js';
+import { h as hasValidChildren, f as filterChildren } from './component.js';
 import { d as defineCustomElement$5 } from './q2-badge2.js';
 import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
@@ -161,6 +162,9 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer e
         this.mutationObserver = null;
     }
     componentWillLoad() {
+        if (!hasValidChildren(this.hostElement, 'q2-tab-pane')) {
+            filterChildren(this.hostElement, 'q2-tab-pane');
+        }
         const observer = new MutationObserver(() => this.updateTabs());
         observer.observe(this.hostElement, { childList: true, attributes: true });
         this.mutationObserver = observer;
@@ -270,7 +274,7 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer e
         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: '163b23c303ecb1bf182d935efd451a84dae3373f' }, h("div", { key: '62f40515232ce696bc163a8b2e2e88d29801c8f2', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '106027e03ed5beaf4bd1c1c647e7eea944e2ccce' }, h("div", { key: '4a39b7fc38ccdc795835f06ae632006bea157882', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '8c6e3fbae7198b3737cbfe37f0edb7c45fefc391', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '2961327ec8ba90420ccf3a086547a6fdff84d050', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'e4398650ca11c5eae8c3a242239e9375b9d0499b', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '17ee9e3b15b10a235c6c4e740fabd11d3fa7ecaf', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '55c3a61d5496496089d231aa4b4ce906f58e8728', type: "chevron-right", label: "scroll right" })))), h("ul", { key: 'b7ad9d2134a9ec8c20affe93c6ddc5fed3ea02f8', 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: 'abb62308bc971d6545c539a98f48214c9c83f601', class: "tab-content" }, h("slot", { key: '9656113ef3fd30109b5e1d0b278f5eec241b4aaa', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '55766935610a03910ff95ca8d3282b887b36abcd' }, h("div", { key: 'add7a9817e22c04eb3426ff6716ba83784a1e3b4', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '49c3f671268794a4c7f37b14b62e07b3ac436aa1' }, h("div", { key: '361822a9c78adc12798eecd3556d9dd2154c798e', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'a25e15c2d6ae4a732a61e08215b3b34b81750b7d', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '58e807848868226a666e9ce3f0218d0cb76ff569', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'd907438b963235ebe69275171a586486e13675f5', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'cac533264a7f0486694079d8ce209b7c73ee30d2', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '638b0241ff186d3fccd054a6a04090752152ae88', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '09fc2659537414f3ced6fdaf2a22aed4095206fc', 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: 'fce5bca2e6d8b552dece318d212f65b5bafa33f0', class: "tab-content" }, h("slot", { key: '4771f24d669715a2859b39976c77081ab9dc8f35', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer","__stencil_proxyCustomElement"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\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    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-tab-container.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,ynLAAynL;;MCmCtoLA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAD3B,IAAA,WAAA,GAAA;;;;;;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;AAC3B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;QAC5B,IAAY,CAAA,YAAA,GAAW,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;AAI/C,QAAA,IAAoB,CAAA,oBAAA,GAAmB,EAAE;;;AAYzC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAGxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGzB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAG9B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAG/B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AA8BhC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAuJxB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YACpB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE;YACvB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;AACjE,YAAA,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,WAAW;AAC9C,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,CAAC;AACpC,YAAA,IAAI,CAAC,eAAe,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW;AAC5E,SAAC;QASD,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAa,EAAE,SAA6C,KAAI;YACjF,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;AAEhE,YAAA,IAAI,QAAQ;YACZ,QAAQ,SAAS;AACb,gBAAA,KAAK,MAAM;AACP,oBAAA,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;oBACpD;AAEJ,gBAAA,KAAK,MAAM;oBACP,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;oBACjC;AAEJ,gBAAA,KAAK,OAAO;oBACR,QAAQ,GAAG,CAAC;oBACZ;AAEJ,gBAAA,KAAK,MAAM;oBACP,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;oBAC/B;;YAGR,IAAI,KAAK,KAAK,QAAQ;gBAAE;AAExB,YAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;AAClC,SAAC;QAED,IAAA,CAAA,SAAS,GAAG,CAAC,KAAa,EAAE,WAAuB,GAAA,IAAI,KAAI;YACvD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK;AAC3C,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAoB,CAAgB,aAAA,EAAA,YAAY,CAAI,EAAA,CAAA,CAAC;YACtG,IAAI,WAAW,EAAE;gBACb,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;AAG7C,YAAA,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC;AACrE,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI;AACJ,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,SAA4B,KAAI;YAChD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;YACjE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;YAC7C,IAAI,YAAY,GAAW,CAAC;AAC5B,YAAA,IAAI,SAAS,KAAK,MAAM,EAAE;AACtB,gBAAA,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;iBACtD;AACH,gBAAA,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;;AAExF,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACzE,SAAC;AAED,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAChB,IAAI,CAAC,gBAAgB,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;YAC/B,MAAM,WAAW,GAAK,KAAK,CAAC,MAA4B,CAAC,OAAO,CAAC,oBAAoB;iBAChF,OAAO,CAAC,KAAK;AAClB,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW;AACpD,YAAA,IAAI,iBAAiB;gBAAE;YAEvB,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;AACtC,gBAAA,KAAK,EAAE,WAAW;AACrB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAoB,KAAI;YACpC,MAAM,KAAK,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK;AACzD,YAAA,QAAQ,KAAK,CAAC,GAAG;AACb,gBAAA,KAAK,YAAY;oBACb,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,WAAW;oBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,MAAM;oBACP,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC;oBACtC;AAEJ,gBAAA,KAAK,KAAK;oBACN,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,OAAO;AACZ,gBAAA,KAAK,OAAO;oBACR,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;oBACpD;;AAEZ,SAAC;AAMD,QAAA,IAAO,CAAA,OAAA,GAAG,MAAK;YACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM;gBACxG,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE;gBAClC,KAAK;gBACL,UAAU;gBACV,gBAAgB;gBAChB,UAAU;gBACV,WAAW;AACd,aAAA,CAAC,CAAC;AACP,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;YACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;gBACjC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB;AAClD,gBAAA,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AACpB,gBAAA,GAAG,CAAC,KAAK,GAAG,KAAK;AACrB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACd,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW;YAC1C,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,OAAO,EAAE;;YAEd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;;AAElE,YAAA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,EAAE;AACxC,gBAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;;AAErE,SAAC;AAyGJ;;;IA7WG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;QAC1B,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;QACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE;AACpD,YAAA,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;;AAEnD,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;AAC9D,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACzE,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;AAChC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACvE,IAAI,CAAC,UAAU,EAAE;;IAGrB,gBAAgB,GAAA;;AACZ,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;QAC9C,IAAI,CAAC,gBAAgB,EAAE;AACvB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;;IAGjE,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;AAC7C,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;AAC9B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;;IAOvB,OAAO,GAAA;QACH,IAAI,CAAC,OAAO,EAAE;;AAIlB,IAAA,oBAAoB,CAAC,KAAkB,EAAA;AACnC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;;;AAKvC,IAAA,OAAO,CAAC,KAAiB,EAAA;QACrB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC;AAC3E,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC;;IAI/B,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;;;;AAM3B;;;;AAIG;IAEH,MAAM,SAAS,CAAC,KAAa,EAAA;AACzB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA,gCAAA,EAAmC,KAAK,CAAA,EAAA,CAAI,CAAC;AACzG,QAAA,UAAgC,aAAhC,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAwB,KAAK,EAAE;;;;IAO9C,YAAY,GAAA;QACR,IAAI,CAAC,UAAU,EAAE;;IAIrB,aAAa,GAAA;QACT,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AAChE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACZ,YAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;;;;AAO1E,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;AAG3B,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;;AAGjE,IAAA,IAAI,QAAQ,GAAA;QACR,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9C,8BAA8B,CACjC;AAED,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACvB,YAAA,OAAO,EAAE;;QAGb,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;;IAWvE,gBAAgB,GAAA;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAChE,IAAI,KAAK,KAAK,EAAE;YAAE;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;;IAsGhC,YAAY,GAAA;;QACR,OAAO,CAAA,EAAA,GAAA,MAAA,MAAM,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,kDAAI;;;;IAqClD,SAAS,CAAC,GAAY,EAAE,KAAa,EAAA;AACjC,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG;AAC5B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK;QAClD,QACI,CAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,cAAc,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EACI,EAAE,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,IAAI,KAAK,CAAA,CAAE,EACnB,YAAA,EAAA,KAAK,EACT,SAAA,EAAA,SAAS,EACjB,QAAQ,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,EAC7B,IAAI,EAAC,KAAK,EACK,eAAA,EAAA,CAAG,EAAA,UAAU,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAE,IAAI,CAAC,YAAY,EAE3B,EAAA,GAAG,CAAC,UAAU,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,UAAU,CAAC,CAC3E,CACR;;IAIb,kBAAkB,CAAC,GAAY,EAAE,UAAmB,EAAA;AAChD,QAAA,IAAI,KAAK;AACT,QAAA,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,UAAU;AAAE,YAAA,KAAK,GAAG,GAAG,CAAC,UAAU,IAAI,SAAS;AACvE,QAAA,IAAI,WAAW;QACf,IAAI,GAAG,CAAC,gBAAgB;AAAE,YAAA,WAAW,GAAG,GAAG,CAAC,GAAG,CAAC,gBAAgB,CAAC;aAC5D,IAAI,GAAG,CAAC,WAAW;AAAE,YAAA,WAAW,GAAG,GAAG,CAAC,CAAA,wBAAA,EAA2B,GAAG,CAAC,WAAW,CAAE,CAAA,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;AACtG,YAAA,WAAW,GAAG,GAAG,CAAC,6BAA6B,CAAC;QAErD,QACI,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,gBACV,GAAG,GAAG,CAAC,KAAK,CAAA,EAAA,EAAK,GAAG,CAAC,UAAU,CAAI,CAAA,EAAA,WAAW,CAAE,CAAA,EAAA,EAE3D,GAAG,CAAC,KAAK,EACV,CAAA,CAAA,UAAA,EAAA,EACI,KAAK,EAAE,GAAG,CAAC,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,GAAG,CAAC,WAAW,EACzB,CAAA,CACA;;IAId,MAAM,GAAA;AACF,QAAA,QACI,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,IAAI,CAAC,aAAa,KACf,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACL,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EACzB,CAAA,EACP,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC1B,CAAA,EAEP,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAC5B,UAAU,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAA,EAE/C,CACI,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,aAAa,GACZ,CACN,EAET,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC7B,UAAU,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAA,EAEhD,CACI,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,cAAc,EAAA,CACb,CACN,CACF,CACd,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,IAAI,EACvC,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CACzD,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAA,CAAI,CAC/C,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2TabContainer","__stencil_proxyCustomElement"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\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    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, 'q2-tab-pane')) {\n            filterChildren(this.hostElement, 'q2-tab-pane');\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

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

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { b as hasValidAncestor } from './component.js';
 
 const q2TabPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
 
@@ -10,6 +11,11 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabPane extends HTM
         this.badge = createEvent(this, "badge", 7);
     }
     // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        hasValidAncestor(this.hostElement, 'q2-tab-container');
+    }
+    // #endregion
     // #region Watchers
     badgeObserver() {
         this.badge.emit();
@@ -17,8 +23,9 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabPane extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '76630068cdab0cae437c6f7465a198a29a69e8d2', 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: '50e66071eb8ece4219e26a658dac682186839470' })));
+        return (h("div", { key: '1f9e5f993a4d548dade126f8acf05e9c958eddc0', 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: 'd5eeb1c72d8c416b91851a661d3aa4736d17f16b' })));
     }
+    get hostElement() { return this; }
     static get watchers() { return {
         "badgeCount": ["badgeObserver"],
         "badgeDescription": ["badgeObserver"],