q2-tecton-elements 1.71.2 → 1.72.0

package/dist/q2-tecton-elements/q2-select.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as s, g as o } from "./index-Cqkz7Bnm.js";
 
-import { c as l, l as n, g as a, d as r, o as c, i as h, j as d, k as p, w as u } from "./index-Cps4jSQM.js";
+import { c as l, l as n, g as a, d as r, o as c, i as h, j as d, k as p, w as u } from "./index-DJw6Feh0.js";
 
 import { m as v } from "./mirror-emit-DUjY_ucm.js";
 
@@ -13,7 +13,7 @@ const g = class {
         t(this, i), this.change = e(this, "change", 7), this.input = e(this, "input", 7), 
     this.tctChange = e(this, "tctChange", 7), this.tctInput = e(this, "tctInput", 7), 
     this.guid = l(), this.isOrientationUpdate = !1, this.lastTouchWasInPopover = !1, 
-    this.scheduledAfterRender = [], 
+    this.removingSelectedDisplay = !1, this.scheduledAfterRender = [], 
     // #endregion
     // #region State Properties
     this.hasCustomDisplay = !1, this.hasPopoverBottom = !1, this.hasPopoverTop = !1, 
@@ -65,7 +65,12 @@ const g = class {
          * Takes priority over `optional` if both are `true`.
          */
     this.readonly = !1, 
-    /** Enables search functionality. */
+    /**
+         * Enables search functionality.
+         * @warning
+         * `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering.
+         * If both are set, `searchable` has no effect while the action sheet is active.
+         */
     this.searchable = !1, 
     /**
          * Each item in this array should correspond to the value of a `q2-option` element.
@@ -128,8 +133,8 @@ const g = class {
     }, this.inputInputHandler = t => {
       t.stopPropagation();
       const e = t.detail.value;
-      !!this.value && this.clearValue(), this.open || this.openDropdownWithoutActiveElement(), 
-      this.prioritizeSearch = !0, this.searchText = e, v(this, [ "input", "tctInput" ], {
+      this.open || this.openDropdownWithoutActiveElement(), this.prioritizeSearch = !0, 
+      this.searchText = e, v(this, [ "input", "tctInput" ], {
         query: e
       });
     }, this.inputKeydownHandler = t => {
@@ -137,7 +142,7 @@ const g = class {
       const {key: e, shiftKey: i} = t, s = "Tab" === e && i, o = this.hasPopoverTop || this.hasPopoverBottom;
       if ((o || this.multiple) && ("Tab" === e || s)) return;
       // slots are incompatible with action sheet
-            if (m(this, t) && !o) return this.executeActionSheet(t);
+            if (m(this, t) && !o) return t.preventDefault(), t.stopPropagation(), this.executeActionSheet(t);
       !this.searchable || " " !== e && "Enter" !== e || "" != this.inputField.value || (t.preventDefault(), 
       this.open || this.openDropdownWithoutActiveElement()), this.searchable && ![ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Escape", "Tab" ].includes(e) || (this.shouldClearSearchText(t) && this.clearSearchText(), 
       // Prevent click event from firing when spacebar is pressed
@@ -161,9 +166,10 @@ const g = class {
       t && !this.searchText || ("select" !== e && this.optionList.setActiveElement(null), 
       this.inputField.focus()), this.open !== t && (this.open = t);
     }, this.onSelectedDisplayClick = t => {
+      var e, i;
       // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
-      t.stopPropagation(), this.open || (this.prioritizeSearch = this.searchable, this.clearSelectedDisplay(), 
-      this.openDropdownWithoutActiveElement()), this.focusInput();
+            t.stopPropagation(), this.open ? null === (e = this.innerInputField) || void 0 === e || e.focus() : (null === (i = this.innerInputField) || void 0 === i || i.focus(), 
+      this.prioritizeSearch = this.searchable, this.openDropdownWithoutActiveElement());
     }, this.onSelectedDisplayMousedown = t => {
       // Prevent focus shift away from the hidden input
       t.preventDefault();
@@ -219,15 +225,16 @@ const g = class {
     !this.multiple && this.value && this.value === t.detail.value && (this.inputField.value = t.detail.display);
   }
   delegateFocus(t) {
-    var e;
+    var e, i;
     // Always delegate focus from host to inner input (fixes programmatic focus)
         h(t, this.hostElement) && (null === (e = this.innerInputField) || void 0 === e || e.focus());
-    // Manage display state for searchable selects (preserves existing behavior)
-        const i = d(t, this.hostElement);
-    this.prioritizeSearch = i && this.searchable, this.prioritizeSearch && this.clearSelectedDisplay();
+    const s = d(t, this.hostElement), o = !!this.selectedDisplaySlot || this.multilineOptions && !!this.firstSelectedOptionElement && !this.firstSelectedOptionElement.display;
+    this.prioritizeSearch = s && this.searchable && (this.multiple || o), this.prioritizeSearch ? this.clearSelectedDisplay() : s && this.searchable && this.value && (null === (i = this.innerInputField) || void 0 === i || i.select());
   }
   handleFocusout(t) {
     var e;
+    // Removing the robust display while opening search can emit a focusout without a destination.
+        if (!t.relatedTarget && (this.removingSelectedDisplay || this.open && this.prioritizeSearch)) return;
     const i = t.relatedTarget, s = !(null === (e = this.popoverElement) || void 0 === e ? void 0 : e.contains(i)) && !this.hostElement.contains(i);
     s && this.closeDropdown(), this.prioritizeSearch = !s && this.searchable;
   }
@@ -311,10 +318,9 @@ const g = class {
   handleMultilineOptionsUpdate(t, e) {
     t !== e && this.optionElements.forEach((e => e.multiline = t));
   }
-  openChanged(t) {
-    t ? this.addTouchEventListeners() : (this.removeTouchEventListeners(), 
-    // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
-    this.prioritizeSearch = !1), this.scheduledAfterRender.push((async () => {
+  openChanged(t, e) {
+    t ? this.addTouchEventListeners() : (this.removeTouchEventListeners(), e && (this.prioritizeSearch = !1)), 
+    this.scheduledAfterRender.push((async () => {
       await u();
       const {popoverTopContainer: e, popoverElement: i} = this, s = t && (null == e ? void 0 : e.offsetHeight) || 0;
       s ? i.style.setProperty("--comp-popover-top-container-height", `${s}px`) : i.style.removeProperty("--comp-popover-top-container-height");
@@ -434,7 +440,7 @@ const g = class {
   clearSelectedDisplay() {
     const t = this.selectedDisplaySlot;
     t && (t.removeEventListener("mousedown", this.onSelectedDisplayMousedown), t.removeEventListener("click", this.onSelectedDisplayClick), 
-    t.remove());
+    this.removingSelectedDisplay = !0, t.remove(), setTimeout((() => this.removingSelectedDisplay = !1), 0));
   }
   clearValue() {
     const {multiple: t} = this;
@@ -534,7 +540,7 @@ const g = class {
     })));
   }
   renderSelectField() {
-    var t;
+    var t, e;
     return i(s, null, i("div", {
       "aria-live": "polite",
       "aria-atomic": "true",
@@ -569,6 +575,7 @@ const g = class {
       onTctChange: this.inputChangeHandler,
       badgeValue: this.badgeValue,
       badgeTheme: this.inputFocused ? "primary" : void 0,
+      _ariaDescription: this.multiple && (null === (e = this.selectedOptions) || void 0 === e ? void 0 : e.length) ? n("tecton.element.select.selectionCount", [ this.selectedOptions.length ]) : void 0,
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
@@ -617,7 +624,7 @@ const g = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "edb9951db5493781ee1f5da0ed5f6c03aff107e9",
+      key: "5c9a6d681aedcebfbadd6b1249f7bcd96c27809c",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere
@@ -652,6 +659,6 @@ const g = class {
   }
 };
 
-g.style = '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}';
+g.style = '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;letter-spacing:inherit;--tct-input-icon-size:var(--tct-select-icon-size, var(--const-px-18, 18px));--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}';
 
 export { g as q2_select }

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js

@@ -1,10 +1,10 @@
-import { r as t, c as e, h as i, F as s, H as a, g as n } from "./index-Cqkz7Bnm.js";
+import { r as t, c as e, h as i, F as a, H as s, g as n } from "./index-Cqkz7Bnm.js";
 
 import { b as o } from "./component-DaQM9u3s.js";
 
-import { c as r, n as c, l as h } from "./index-Cps4jSQM.js";
+import { c as r, n as d, l as h } from "./index-DJw6Feh0.js";
 
-import { m as d } from "./mirror-emit-DUjY_ucm.js";
+import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
 const l = class {
   constructor(i) {
@@ -43,7 +43,7 @@ const l = class {
     this.contentChange.emit();
   }
   isActiveChanged(t) {
-    d(this, [ "activeChange", "tctActiveChange" ], {
+    c(this, [ "activeChange", "tctActiveChange" ], {
       status: this.status || "",
       isActive: t,
       id: this.hostElement.id,
@@ -51,14 +51,14 @@ const l = class {
     });
   }
   checkForActiveChildren() {
-    this.showWithChildren && c((() => {
+    this.showWithChildren && d((() => {
       setTimeout((() => {
         this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
       }));
     }));
   }
   statusChanged(t) {
-    d(this, [ "statusChange", "tctStatusChange" ], {
+    c(this, [ "statusChange", "tctStatusChange" ], {
       status: t,
       isActive: !!this.isActive,
       id: this.hostElement.id,
@@ -69,31 +69,35 @@ const l = class {
   // #region Render Methods
   render() {
     const {label: t, isActive: e} = this;
-    return i(a, {
+    return i(s, {
       key: "7acf643f717380c37eb25334534afbca81ac8ab6",
       role: "listitem"
-    }, i(s, {
+    }, i(a, {
       key: "0241a9ad68973eea81c961070d6171dab3241f79"
     }, i("div", {
-      key: "25e9a406b8c0672eec836920706d44ed53906e1d",
-      "aria-label": t && h(t),
+      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      role: "group",
+      "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, i("slot", {
-      key: "00f456ab21d2ecf58946de5df397bb3c81c2a749"
+      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
     })), i("div", {
-      key: "bdac4c2caf9b9bf5a6280258475afa552e578e7e",
+      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
       hidden: !0
+    }, i("span", {
+      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      id: "pane-label"
     }, i("slot", {
-      key: "2ede75ad70c10eda1f8c6de4556bccc9c66e8b97",
+      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
-    }), i("slot", {
-      key: "990f2d44a0f9cb0437b63f3570a94874752a94da",
+    }, t && h(t))), i("slot", {
+      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), i("slot", {
-      key: "1f12d65608f73a3737abb7f987cab300ec1c9856",
+      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
       name: "children"
     })));
   }

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-Cqkz7Bnm.js";
 
-import { c as s, o as n, i as o, l as c } from "./index-Cps4jSQM.js";
+import { c as s, o as n, i as o, l as c } from "./index-DJw6Feh0.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
@@ -299,15 +299,15 @@ const d = class {
   }
   render() {
     return a(r, {
-      key: "eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68"
+      key: "9d40414e7b510493b0236568c4d6231eeacdbd80"
     }, a("ul", {
-      key: "f155624641313e8375e6ee448fed150ae0c62cf1",
+      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "1ff078e00dcb1e4c861bc691ccc31ec5c1436fac",
+      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
       role: "list"
     }, a("slot", {
-      key: "adf07ae0725ccc7c1ce149052f2325e6bfc01677"
+      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-stepper.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as r, F as i, g as o } from "./index-Cqkz7Bnm.js";
 
-import { c as a, o as s, i as l, l as n } from "./index-Cps4jSQM.js";
+import { c as a, o as s, i as l, l as n } from "./index-DJw6Feh0.js";
 
 import { m as c } from "./mirror-emit-DUjY_ucm.js";
 

package/dist/q2-tecton-elements/q2-surface.entry.js

@@ -69,14 +69,14 @@ const c = class {
   // #region Render Methods
   render() {
     return o(e, {
-      key: "992667ac1d625dff77a01d06d058865f99d8d190"
+      key: "8dd96991bc74e2157dc256f21eb4953eaeffdd46"
     }, o("div", {
-      key: "d58162c346c58a2cc21a4334c08b6cc4a53ed2e0",
+      key: "a5b315fd3e6dd999cd704b3fd2c9de5ffb139033",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, o("slot", {
-      key: "b70930390799484c71da93d1f801ecc681d168c6"
+      key: "4897bfe06a95bf14eddf2bb964bf4a27ed96798a"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-tab-container.entry.js

@@ -1,12 +1,12 @@
 import { r as t, c as a, h as e, F as i, g as r } from "./index-Cqkz7Bnm.js";
 
-import { c as o, l as n, o as c, i as s } from "./index-Cps4jSQM.js";
+import { c as o, l as n, o as s, i as c } from "./index-DJw6Feh0.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-import { h as b, f as h } from "./component-DaQM9u3s.js";
+import { h, f as d } from "./component-DaQM9u3s.js";
 
-const d = class {
+const b = class {
   constructor(e) {
     t(this, e), this.change = a(this, "change", 7), this.settled = a(this, "settled", 7), 
     this.tctChange = a(this, "tctChange", 7), 
@@ -166,7 +166,7 @@ const d = class {
     this.narrowViewportMedia && this.narrowViewportListener && this.narrowViewportMedia.removeEventListener("change", this.narrowViewportListener);
   }
   componentWillLoad() {
-    b(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
+    h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
       childList: !0,
@@ -178,7 +178,7 @@ const d = class {
   componentDidLoad() {
     var t;
     null === (t = this.resizeObserver) || void 0 === t || t.observe(this.listElement), 
-    this.checkScrollState(), c(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())), 
+    this.checkScrollState(), s(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())), 
     this.narrowViewportMedia && (this.narrowViewportListener = t => {
       this.isNarrowViewport = t.matches;
     }, this.narrowViewportMedia.addEventListener("change", this.narrowViewportListener));
@@ -195,7 +195,7 @@ const d = class {
     t.target !== this.hostElement || this.hostElement.onchange || (this.value = t.detail.value);
   }
   onFocus(t) {
-    if (!s(t, this.hostElement)) return;
+    if (!c(t, this.hostElement)) return;
     const a = this.tabs.findIndex((t => t.value === this.selectedTabValue));
     this.moveToTab(a, !0);
   }
@@ -279,50 +279,50 @@ const d = class {
   render() {
     const t = "vertical" === this.computedOrientation;
     return e(i, {
-      key: "710b889bd81a28f6ba7c0deb43abe49a269baec4"
+      key: "684e234955e0d7f9b929a1e80e323ba62db4d066"
     }, e("div", {
-      key: "444efee6412d2440c99bd1e9b123fe385f2453a5",
+      key: "92ea060ada2cc956817f4eb9cb97d0f110c5032a",
       class: "tab-container"
     }, this.scrollEnabled && e(i, {
-      key: "56c9916fb99dd3434a8305721d03e85c0f5fb370"
+      key: "b43a4ff0510de5adfefde8f5184ab5f3f1d95563"
     }, e("div", {
-      key: "c506eb6690b60194b50171ad5139cc65b4fabedd",
+      key: "3daed974f567574741534b4c39c6fa0ddb1c7f58",
       class: "gradient-left",
       hidden: !this.showScrollBack
     }), e("div", {
-      key: "7af01eb18190e0af6fb80364fb73dcf6145d979d",
+      key: "36266d6970a75fff03e538c12951a530220b2756",
       class: "gradient-right",
       hidden: !this.showScrollForward
     }), e("q2-btn", {
-      key: "8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0",
+      key: "7c5b35fee0bbd981520f55fe99fc53143be7376c",
       class: "btn-left",
       hidden: !this.showScrollBack,
       onTctClick: () => this.onScrollBtnClick("back")
     }, e("q2-icon", {
-      key: "65f3caea2251c7ce96861718df064f230ec6e02e",
+      key: "0759d5d77d603074acc21bd9a29e4db50f0474a2",
       type: t ? "chevron-up" : "chevron-left",
       label: t ? "scroll up" : "scroll left"
     })), e("q2-btn", {
-      key: "07b833fe0e6b3030255374e4dd323fc99379a293",
+      key: "419c43832886d9aae9b63eba545ffb8122f862b6",
       class: "btn-right",
       hidden: !this.showScrollForward,
       onTctClick: () => this.onScrollBtnClick("forward")
     }, e("q2-icon", {
-      key: "e446b55822239e657ab10c50694a9756ec8b030b",
+      key: "4148a86411c5859b0253da31439ff90ad78490b3",
       type: t ? "chevron-down" : "chevron-right",
       label: t ? "scroll down" : "scroll right"
     }))), e("ul", {
-      key: "20d4f371b80b2515b762e80b88574938783e9252",
+      key: "fdd72d9ba1d932497b5d7cd9e14d926fe1e92f72",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist",
       "aria-orientation": this.computedOrientation
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), e("div", {
-      key: "9eaba5d408629dc548a9c57428b801293f642172",
+      key: "e9d90030fcc43f17a43aa2e4a306e3489b4c4110",
       class: "tab-content"
     }, e("slot", {
-      key: "811737fa0e22c994299c9164a6401209e6ecf418",
+      key: "130ddf5f14ec801e09471b9cf4ab080e4bf5fc27",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -341,6 +341,6 @@ const d = class {
   }
 };
 
-d.style = '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, var(--const-px-17, 17px)));line-height:var(--tct-tab-line-height, var(--const-px-20, 20px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, var(--const-px-14, 14px));line-height:var(--tct-tab-section-line-height, var(--const-px-18, 18px));padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:focus-visible{box-shadow:var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));text-decoration:var(--tct-tab-active-text-decoration, none)}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-background, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 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}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}@media screen and (min-width: 768px){:host([orientation=vertical]){display:flex;flex-direction:row;align-items:stretch}:host([orientation=vertical]) .tab-container{width:var(--tct-tab-container-width, 200px);flex-shrink:0}:host([orientation=vertical]) .tab-content{--comp-vertical-tab-content-padding:0 var(--tct-scale-2, var(--app-scale-2x, 10px));flex:1 1 auto;min-width:0;padding:var(--tct-vertical-tab-container-content-padding, var(--tct-vertical-tab-content-padding, var(--t-vertical-tab-content-padding, var(--comp-vertical-tab-content-padding))))}:host([orientation=vertical]) ul{padding:var(--tct-vertical-tab-container-padding, 0);flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:visible;border-bottom-width:0;border-right-width:var(--tct-tab-container-border-width, 1px);border-right-style:var(--tct-tab-container-border-style, solid);border-right-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:100%}:host([orientation=vertical]) li{border-left-width:var(--tct-tab-active-indicator-width, 3px);border-left-style:solid;border-left-color:transparent;transition:border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([orientation=vertical]) li:has(button[aria-selected=true]){color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-left-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor))}:host([orientation=vertical]) li button{border-width:0;text-align:start;border-radius:var(--tct-vertical-tab-border-radius, 0)}:host([orientation=vertical]) .tab-pane-badge{justify-content:flex-start;gap:var(--tct-tab-badge-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host([orientation=vertical]) .gradient-left{right:0;width:100%;height:44px;background-image:linear-gradient(to top, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .gradient-right{bottom:0;top:auto;left:0;width:100%;height:44px;background-image:linear-gradient(to bottom, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .btn-left{top:0;left:50%;transform:translateX(-50%)}:host([orientation=vertical]) .btn-right{bottom:0;top:auto;left:50%;right:auto;transform:translateX(-50%)}:host([orientation=vertical][color=alt]) li:has(button[aria-selected=true]){color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}}';
+b.style = '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, var(--const-px-17, 17px)));line-height:var(--tct-tab-line-height, var(--const-px-20, 20px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, var(--const-px-14, 14px));line-height:var(--tct-tab-section-line-height, var(--const-px-18, 18px));padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:focus-visible{box-shadow:var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));text-decoration:var(--tct-tab-active-text-decoration, none)}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-background, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 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}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}@media screen and (min-width: 768px){:host([orientation=vertical]){display:flex;flex-direction:row;align-items:stretch}:host([orientation=vertical]) .tab-container{width:var(--tct-tab-container-width, 200px);flex-shrink:0}:host([orientation=vertical]) .tab-content{--comp-vertical-tab-content-padding:0 var(--tct-scale-2, var(--app-scale-2x, 10px));flex:1 1 auto;min-width:0;padding:var(--tct-vertical-tab-container-content-padding, var(--tct-vertical-tab-content-padding, var(--t-vertical-tab-content-padding, var(--comp-vertical-tab-content-padding))))}:host([orientation=vertical]) ul{padding:var(--tct-vertical-tab-container-padding, 0);flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:visible;border-bottom-width:0;border-right-width:var(--tct-tab-container-border-width, 1px);border-right-style:var(--tct-tab-container-border-style, solid);border-right-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:100%}:host([orientation=vertical]) li{border-left-width:var(--tct-tab-active-indicator-width, 3px);border-left-style:solid;border-left-color:transparent;transition:border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([orientation=vertical]) li:has(button[aria-selected=true]){color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-left-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor))}:host([orientation=vertical]) li button{border-width:0;text-align:start;border-radius:var(--tct-vertical-tab-border-radius, 0)}:host([orientation=vertical]) .tab-pane-badge{justify-content:flex-start;gap:var(--tct-tab-badge-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host([orientation=vertical]) .gradient-left{right:0;width:100%;height:44px;background-image:linear-gradient(to top, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .gradient-right{bottom:0;top:auto;left:0;width:100%;height:44px;background-image:linear-gradient(to bottom, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .btn-left{top:0;left:50%;transform:translateX(-50%)}:host([orientation=vertical]) .btn-right{bottom:0;top:auto;left:50%;right:auto;transform:translateX(-50%)}:host([orientation=vertical][color=alt]) li:has(button[aria-selected=true]){color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}}';
 
-export { d as q2_tab_container }
+export { b as q2_tab_container }

package/dist/q2-tecton-elements/q2-tab-pane.entry.js

@@ -1,10 +1,10 @@
-import { r as e, c as t, h as n, g as i } from "./index-Cqkz7Bnm.js";
+import { r as t, c as e, h as n, g as i } from "./index-Cqkz7Bnm.js";
 
 import { b as o } from "./component-DaQM9u3s.js";
 
 const a = class {
   constructor(n) {
-    e(this, n), this.badge = t(this, "badge", 7);
+    t(this, n), this.badge = e(this, "badge", 7);
   }
   // #endregion
   // #region Component Lifecycle Events
@@ -20,7 +20,7 @@ const a = class {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "1957cbeca0ca1f0b5f840701286ebeb6b69565ce",
+      key: "2ff20db182ab3bf252df52bbcb7be2b39893d17c",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -28,7 +28,7 @@ const a = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, n("slot", {
-      key: "6772ac75d219ebc30209907468a9fb801cd5db0d"
+      key: "871922c3065609934e6a6a8c62000c84551a612a"
     }));
   }
   get hostElement() {