npm - q2-tecton-elements - Versions diffs - 1.70.2 → 1.71.0 - Mend

q2-tecton-elements 1.70.2 → 1.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (360) hide show

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

@@ -6,7 +6,7 @@ import { m as c } from "./mirror-emit-DUjY_ucm.js";
 import { s as p } from "./sanitize-html-string-DPHNpMWE.js";
-const b = class {
+const d = class {
   constructor(r) {
     t(this, r), this.change = e(this, "change", 7), this.tctChange = e(this, "tctChange", 7),
     this.scheduledAfterRender = [],
@@ -156,6 +156,10 @@ const b = class {
     const i = Array.from(t.children).find((t => t.getAttribute("slot") === e));
     return null !== (r = null == i ? void 0 : i.outerHTML) && void 0 !== r ? r : n(t[e]);
   }
+  getStatusLabel(t) {
+    const e = `tecton.element.stepper.status.${t}`, r = n(e);
+    return r === e ? t : r;
+  }
   handleUndefinedStepProperties() {
     const {currentStep: t, lastEnabledStep: e} = this;
     t && e || (!t && e ? this.currentStep = e : t && !e ? this.lastEnabledStep = t : t || e || (this.currentStep = 1,
@@ -186,32 +190,42 @@ const b = class {
   // #region Render Methods
   renderStepBtn(t) {
     var e;
-    const {allPanes: o, stepCount: a, lastEnabledStep: s, currentStep: l} = this, c = null !== (e = null == o ? void 0 : o[t]) && void 0 !== e ? e : null, {id: b, status: d} = c, h = this.getPaneSlotOrProperty(c, "label"), v = this.getPaneSlotOrProperty(c, "description"), u = t + 1, f = u === l, m = !!h && `label-${b}`, g = !!h && !!v && `description-${b}`, w = !h && n("tecton.element.stepper.number", [ `${u}`, `${a}` ]);
-    let x;
-    "complete" === d ? x = "success-filled" : "error" === d && (x = "warning-filled");
-    const k = [ "step-btn" ];
-    d && k.push(`status-${d}`);
-    const y = "locked" === d, z = c.disabled;
-    z && k.push("pane-disabled");
-    const S = y || u > s;
+    const {allPanes: o, stepCount: a, lastEnabledStep: s, currentStep: l} = this, c = null !== (e = null == o ? void 0 : o[t]) && void 0 !== e ? e : null, {id: d, status: b} = c, h = this.getPaneSlotOrProperty(c, "label"), v = this.getPaneSlotOrProperty(c, "description"), u = t + 1, f = u === l, m = !!h && `label-${d}`, g = !!h && !!v && `description-${d}`, w = `position-${d}`, x = `status-${d}`, y = "complete" === b || "error" === b ? b : "pending", k = n("tecton.element.stepper.number", {
+      step: `${u}`,
+      total: `${a}`
+    }), z = this.getStatusLabel(y), S = h ? `${w} ${m} ${x}` : void 0, C = h ? void 0 : `${k}, ${z}`;
+    let E;
+    "complete" === b ? E = "success-filled" : "error" === b && (E = "warning-filled");
+    const $ = [ "step-btn" ];
+    b && $.push(`status-${b}`);
+    const q = "locked" === b, L = c.disabled;
+    L && $.push("pane-disabled");
+    const j = q || u > s;
     return r("li", {
       role: "presentation"
     }, r("button", {
-      class: k.join(" "),
+      class: $.join(" "),
       type: "button",
-      "aria-labelledby": m,
+      "aria-labelledby": S,
       "aria-describedBy": g,
-      "aria-label": w,
+      "aria-label": C,
       "aria-selected": `${f}`,
-      "aria-disabled": S ? "true" : void 0,
+      "aria-disabled": j ? "true" : void 0,
       role: "tab",
       tabIndex: f ? 0 : -1,
       onKeyDown: t => this.onStepKeyDown(t, u),
-      onClick: t => !z && !S && this.onStepClick(t, u)
-    }, r(i, null, x ? r("div", {
+      onClick: t => !L && !j && this.onStepClick(t, u)
+    }, r(i, null, h && r(i, null, r("span", {
+      class: "sr-only",
+      id: w
+    }, k), r("span", {
+      class: "sr-only",
+      id: x
+    }, z)), E ? r("div", {
       class: "step-icon"
     }, r("q2-icon", {
-      type: x
+      "aria-hidden": "true",
+      type: E
     })) : r("div", {
       class: "step-bubble"
     }, u), m && r("div", {
@@ -229,50 +243,50 @@ const b = class {
   render() {
     const {stepCount: t, scrollEnabled: e, showScrollLeft: o, showScrollRight: a} = this, s = [ "step-container" ];
     return e && s.push("has-scroll"), r(i, {
-      key: "c1e21a36e0b2f684f4520b0f75f78affd73359bd"
+      key: "cd7a09546e4b74cf98f5e27dbcf0efce71e02781"
     }, r("div", {
-      key: "3791e857d27aa3fea928f663268f21270d499023",
+      key: "aaa383584217da20fdd01174f4b136dfef0128b7",
       class: s.join(" ")
     }, e && r(i, {
-      key: "19b689b2b56f52099f22f859264e33e16fd918bf"
+      key: "6f7f38d768b274409606132cc62d36d48812f50c"
     }, r("div", {
-      key: "5b1b1e00034fa009c555924c2067fed6369740cb",
+      key: "98e26550803496a0edd0e7415b4ec9e16b501722",
       class: "gradient-left",
       hidden: !o
     }), r("div", {
-      key: "b5de1b413f6c8ce006207926f26ae845594228eb",
+      key: "58102ecd26dd3f6b36d530f36ecc109b287b4faa",
       class: "gradient-right",
       hidden: !a
     }), r("q2-btn", {
-      key: "832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1",
+      key: "a475ba4a846ea5cf93a5ca46422a5473e0d266bd",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: n("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "3e53b2b2f19bbba59a37016b9cdf1a302b030b63",
+      key: "b040f724a926e5c07a81438e3586e0eb7a3c063b",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272",
+      key: "119dbcd49ce282cbccd58be097f8833e22df4fb4",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: n("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f",
+      key: "c656a9493134eb6a4ea0a008ee94829fc708ecfe",
       type: "chevron-right"
     }))), r("ul", {
-      key: "25806a72f9f0cda2e032a81dbaac9f808be385c9",
+      key: "09e1472989c7c2e6c40504072bca2790865e013a",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "622b3ed56e3f66adc33bf197b7874a7b9bf8667f",
+      key: "0b25c172d585892aa9e286dac6080ce2bbb80e1a",
       role: "list"
     }, r("slot", {
-      key: "73c4321743596227054e317c271bcc044179363b",
+      key: "507375368c8e89a94f8af0a44bf4951fd14d7466",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -293,6 +307,6 @@ const b = class {
   }
 };
-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}: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;border-radius:var(--tct-stepper-btn-border-radius, 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:focus-visible{box-shadow:var(--tct-stepper-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true]:not(.pane-disabled),.step-btn[aria-disabled=true]:not(.pane-disabled)+.step-divider,.step-btn.pane-disabled:not(.pane-disabled),.step-btn.pane-disabled:not(.pane-disabled)+.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, inherit)));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, inherit));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}';
+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}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}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, var(--const-px-16, 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, var(--const-px-16, 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;border-radius:var(--tct-stepper-btn-border-radius, 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:focus-visible{box-shadow:var(--tct-stepper-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true]:not(.pane-disabled),.step-btn[aria-disabled=true]:not(.pane-disabled)+.step-divider,.step-btn.pane-disabled:not(.pane-disabled),.step-btn.pane-disabled:not(.pane-disabled)+.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, inherit)));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, var(--const-px-12, 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, inherit));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, var(--const-px-12, 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}';
-export { b as q2_stepper }
+export { d as q2_stepper }

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

@@ -51,7 +51,7 @@ const c = class {
      * @param animation The animation to play. Defaults to `'pulse'`.
      * @returns A Promise that resolves when the animation finishes or is cancelled.
      */
-  async animate(r = "pulse") {
+  async triggerAnimation(r = "pulse") {
     var a;
     return null === (a = this._cancelAnimation) || void 0 === a || a.call(this), new Promise((a => {
       const o = `q2-surface-animate-${r}`, onEnd = () => {
@@ -69,14 +69,14 @@ const c = class {
   // #region Render Methods
   render() {
     return o(e, {
-      key: "235f94ccfb0eb7167079e8e25ee78d652999f8e8"
+      key: "992667ac1d625dff77a01d06d058865f99d8d190"
     }, o("div", {
-      key: "b01d6e71bb4b8f1f583c63910d4b1eca757572dd",
+      key: "d58162c346c58a2cc21a4334c08b6cc4a53ed2e0",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, o("slot", {
-      key: "591dc9fcb51d6f238a6186f047661020be9ea800"
+      key: "b70930390799484c71da93d1f801ecc681d168c6"
     })));
   }
   get hostElement() {
@@ -84,6 +84,6 @@ const c = class {
   }
 };
-c.style = ':host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));--comp-surface-border-color:var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-background-primary, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-l2, #7d5ab8));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-background-secondary, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-l2, #c2cfd8));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-background-tertiary, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-l2, #edf7fd));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background]) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]){cursor:pointer}:host([clickable]):hover .container{background:var(--comp-surface-hover-background)}:host([clickable])[elevation="0"]:hover .container,:host([clickable]):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}';
+c.style = ':host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-border-color:var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]),:host([clickable]:not([clickable=false]):not([background])){--comp-surface-bg:var(--tct-surface-default-background, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-active-background:var(--tct-surface-default-active-background, var(--t-base-primary2, #e6e6e6))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-primary-background, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-d2, #533978));--comp-surface-active-background:var(--tct-surface-primary-active-background, var(--t-primary-d3, #3d2a58));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-secondary-background, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-d2, #8fa1ac));--comp-surface-active-background:var(--tct-surface-secondary-active-background, var(--t-secondary-d3, #6b7d88));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-d2, #b8dcef));--comp-surface-active-background:var(--tct-surface-tertiary-active-background, var(--t-tertiary-d3, #88c4e2));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background=gray]){--comp-surface-bg:var(--tct-surface-gray-background, var(--t-base-gray1, #f4f4f4));--comp-surface-hover-background:var(--tct-surface-gray-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-active-background:var(--tct-surface-gray-active-background, var(--t-base-primary2, #e6e6e6))}:host([background]) .container,:host([clickable]:not([clickable=false]):not([background])) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border=gray]) .container{border-color:var(--tct-surface-gray-border-color, var(--t-gray-8, #808080))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-default-background, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([border-gradient][border=gray]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)), white 40%), var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]:not([clickable=false])){cursor:pointer}:host([clickable]:not([clickable=false])) .container:hover{background:var(--comp-surface-hover-background)}:host([clickable]:not([clickable=false])) .container:active{background:var(--comp-surface-active-background, var(--comp-surface-hover-background))}:host([clickable]:not([clickable=false]))[elevation="0"]:hover .container,:host([clickable]:not([clickable=false])):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false])) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}::slotted(:is(h1,h2,h3,h4):first-child){margin-top:0 !important}::slotted(:is(q2-action-group):last-child){margin-bottom:0 !important}';
 export { c as q2_surface }

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

@@ -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 s, i as c } from "./index-Cps4jSQM.js";
+import { c as o, l as n, o as c, i as s } from "./index-Cps4jSQM.js";
-import { m as b } from "./mirror-emit-DUjY_ucm.js";
+import { m as l } from "./mirror-emit-DUjY_ucm.js";
-import { h as l, f as d } from "./component-DaQM9u3s.js";
+import { h as b, f as h } from "./component-DaQM9u3s.js";
-const h = class {
+const d = class {
   constructor(e) {
     t(this, e), this.change = a(this, "change", 7), this.settled = a(this, "settled", 7),
     this.tctChange = a(this, "tctChange", 7),
@@ -15,13 +15,27 @@ const h = class {
     this.scheduledAfterRender = [],
     // #endregion
     // #region State Properties
-    this.hasLeft = !1, this.hasRight = !1, this.scrollEnabled = !1, this.showScrollLeft = !1,
-    this.showScrollRight = !1,
+    this.hasLeft = !1, this.hasRight = !1, this.isNarrowViewport = !1, this.scrollEnabled = !1,
+    this.showScrollBack = !1, this.showScrollForward = !1,
     /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */
-    this.noPrint = !1, this.checkScrollState = () => {
-      if (!this.listElement) return;
-      const {scrollLeft: t, scrollWidth: a, clientWidth: e} = this.listElement;
-      this.scrollEnabled = a > e, this.showScrollLeft = t > 0, this.showScrollRight = a > Math.ceil(t) + e;
+    this.noPrint = !1,
+    /**
+         * The orientation of the tab strip.
+         * - `horizontal` (default) — tabs run left-to-right above the panel content.
+         * - `vertical` — tabs stack top-to-bottom beside the panel content.
+         *
+         * @info
+         * Vertical orientation is intended for wider layouts (e.g. admin consoles).
+         * At viewports narrower than 768px, the component falls back to horizontal.
+         */
+    this.orientation = "horizontal", this.checkScrollState = () => {
+      if (this.listElement) if ("vertical" === this.computedOrientation) {
+        const {scrollTop: t, scrollHeight: a, clientHeight: e} = this.listElement;
+        this.scrollEnabled = a > e, this.showScrollBack = t > 0, this.showScrollForward = a > Math.ceil(t) + e;
+      } else {
+        const {scrollLeft: t, scrollWidth: a, clientWidth: e} = this.listElement;
+        this.scrollEnabled = a > e, this.showScrollBack = t > 0, this.showScrollForward = a > Math.ceil(t) + e;
+      }
     }, this.moveToAdjacentTab = (t, a) => {
       const e = this.tabs.map((({value: t}) => t)).indexOf(t);
       let i;
@@ -44,37 +58,66 @@ const h = class {
       e !== i && this.moveToTab(i, !0);
     }, this.moveToTab = (t, a = !0) => {
       const e = this.tabs[t].value, i = this.listElement.querySelector(`[data-value="${e}"]`);
-      a && i.focus({
+      if (a && i.focus({
         preventScroll: !0
-      });
-      const r = i.offsetLeft - this.listElement.clientWidth / 2;
-      this.listElement.scrollTo({
-        left: r,
-        behavior: "smooth"
-      });
+      }), "vertical" === this.computedOrientation) {
+        const t = i.offsetTop - this.listElement.clientHeight / 2;
+        this.listElement.scrollTo({
+          top: t,
+          behavior: "smooth"
+        });
+      } else {
+        const t = i.offsetLeft - this.listElement.clientWidth / 2;
+        this.listElement.scrollTo({
+          left: t,
+          behavior: "smooth"
+        });
+      }
     }, this.onScrollBtnClick = t => {
-      const {scrollLeft: a, scrollWidth: e, clientWidth: i} = this.listElement, r = Math.floor(i / 2);
-      let o = 0;
-      o = "left" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)),
-      this.listElement.scrollBy({
-        left: o,
-        behavior: "smooth"
-      });
+      if ("vertical" === this.computedOrientation) {
+        const {scrollTop: a, scrollHeight: e, clientHeight: i} = this.listElement, r = Math.floor(i / 2);
+        let o = 0;
+        o = "back" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)),
+        this.listElement.scrollBy({
+          top: o,
+          behavior: "smooth"
+        });
+      } else {
+        const {scrollLeft: a, scrollWidth: e, clientWidth: i} = this.listElement, r = Math.floor(i / 2);
+        let o = 0;
+        o = "back" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)),
+        this.listElement.scrollBy({
+          left: o,
+          behavior: "smooth"
+        });
+      }
     }, this.onSlotChange = () => {
       this.checkScrollState();
     }, this.onTabClick = t => {
       const a = t.target.closest('button[role="tab"]').dataset.value;
-      this.value === a || b(this, [ "change", "tctChange" ], {
+      this.value === a || l(this, [ "change", "tctChange" ], {
         value: a
       });
     }, this.onTabKeyDown = t => {
       const a = t.target.dataset.value;
       switch (t.key) {
+       case "ArrowDown":
+        if ("vertical" !== this.computedOrientation) break;
+        t.preventDefault(), this.moveToAdjacentTab(a, "next");
+        break;
        case "ArrowRight":
+        if ("horizontal" !== this.computedOrientation) break;
         t.preventDefault(), this.moveToAdjacentTab(a, "next");
         break;
+       case "ArrowUp":
+        if ("vertical" !== this.computedOrientation) break;
+        t.preventDefault(), this.moveToAdjacentTab(a, "prev");
+        break;
        case "ArrowLeft":
+        if ("horizontal" !== this.computedOrientation) break;
         t.preventDefault(), this.moveToAdjacentTab(a, "prev");
         break;
@@ -88,7 +131,7 @@ const h = class {
        case "Space":
        case "Enter":
-        t.preventDefault(), b(this, [ "change", "tctChange" ], {
+        t.preventDefault(), l(this, [ "change", "tctChange" ], {
           value: a
         });
       }
@@ -119,21 +162,26 @@ const h = class {
   disconnectedCallback() {
     var t, a;
     null === (t = this.resizeObserver) || void 0 === t || t.disconnect(), this.resizeObserver = null,
-    null === (a = this.mutationObserver) || void 0 === a || a.disconnect(), this.mutationObserver = null;
+    null === (a = this.mutationObserver) || void 0 === a || a.disconnect(), this.mutationObserver = null,
+    this.narrowViewportMedia && this.narrowViewportListener && this.narrowViewportMedia.removeEventListener("change", this.narrowViewportListener);
   }
   componentWillLoad() {
-    l(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
+    b(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
       childList: !0,
       attributes: !0
     }), this.mutationObserver = t, this.resizeObserver = new ResizeObserver((() => this.checkScrollState())),
-    this.updateTabs();
+    "undefined" != typeof window && (this.narrowViewportMedia = window.matchMedia("(max-width: 767px)"),
+    this.isNarrowViewport = this.narrowViewportMedia.matches), this.updateTabs();
   }
   componentDidLoad() {
     var t;
     null === (t = this.resizeObserver) || void 0 === t || t.observe(this.listElement),
-    this.checkScrollState(), s(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove()));
+    this.checkScrollState(), c(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())),
+    this.narrowViewportMedia && (this.narrowViewportListener = t => {
+      this.isNarrowViewport = t.matches;
+    }, this.narrowViewportMedia.addEventListener("change", this.narrowViewportListener));
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [], this.settled.emit();
@@ -147,7 +195,7 @@ const h = class {
     t.target !== this.hostElement || this.hostElement.onchange || (this.value = t.detail.value);
   }
   onFocus(t) {
-    if (!c(t, this.hostElement)) return;
+    if (!s(t, this.hostElement)) return;
     const a = this.tabs.findIndex((t => t.value === this.selectedTabValue));
     this.moveToTab(a, !0);
   }
@@ -177,6 +225,9 @@ const h = class {
   }
   // #endregion
   // #region Local Methods
+  get computedOrientation() {
+    return this.isNarrowViewport ? "horizontal" : this.orientation;
+  }
   get selectedTabValue() {
     return this.value || "";
   }
@@ -226,50 +277,52 @@ const h = class {
     }));
   }
   render() {
+    const t = "vertical" === this.computedOrientation;
     return e(i, {
-      key: "cfaf872008ad8687316955a725e7475d326b5ec2"
+      key: "710b889bd81a28f6ba7c0deb43abe49a269baec4"
     }, e("div", {
-      key: "8a61a84ecd4d1869fe53829ca908e99ec80b11be",
+      key: "444efee6412d2440c99bd1e9b123fe385f2453a5",
       class: "tab-container"
     }, this.scrollEnabled && e(i, {
-      key: "a77950455f6f6f9138d1174fa4db38bcde498cb5"
+      key: "56c9916fb99dd3434a8305721d03e85c0f5fb370"
     }, e("div", {
-      key: "b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e",
+      key: "c506eb6690b60194b50171ad5139cc65b4fabedd",
       class: "gradient-left",
-      hidden: !this.showScrollLeft
+      hidden: !this.showScrollBack
     }), e("div", {
-      key: "f625095c68ad1bedd07d34149d28c27f12b2954d",
+      key: "7af01eb18190e0af6fb80364fb73dcf6145d979d",
       class: "gradient-right",
-      hidden: !this.showScrollRight
+      hidden: !this.showScrollForward
     }), e("q2-btn", {
-      key: "96c26c6447708d2fcf102e53e984f9a71bc2d9b1",
+      key: "8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0",
       class: "btn-left",
-      hidden: !this.showScrollLeft,
-      onTctClick: () => this.onScrollBtnClick("left")
+      hidden: !this.showScrollBack,
+      onTctClick: () => this.onScrollBtnClick("back")
     }, e("q2-icon", {
-      key: "feec85bd6bbbfeb99c520b6118c90190130d8dca",
-      type: "chevron-left",
-      label: "scroll left"
+      key: "65f3caea2251c7ce96861718df064f230ec6e02e",
+      type: t ? "chevron-up" : "chevron-left",
+      label: t ? "scroll up" : "scroll left"
     })), e("q2-btn", {
-      key: "8dc406d9e144e0d025e14d8a2e30f6010febafd6",
+      key: "07b833fe0e6b3030255374e4dd323fc99379a293",
       class: "btn-right",
-      hidden: !this.showScrollRight,
-      onTctClick: () => this.onScrollBtnClick("right")
+      hidden: !this.showScrollForward,
+      onTctClick: () => this.onScrollBtnClick("forward")
     }, e("q2-icon", {
-      key: "3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4",
-      type: "chevron-right",
-      label: "scroll right"
+      key: "e446b55822239e657ab10c50694a9756ec8b030b",
+      type: t ? "chevron-down" : "chevron-right",
+      label: t ? "scroll down" : "scroll right"
     }))), e("ul", {
-      key: "8ba591207287d3aa2d20e70ec72c03a755879ab0",
+      key: "20d4f371b80b2515b762e80b88574938783e9252",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
-      role: "tablist"
+      role: "tablist",
+      "aria-orientation": this.computedOrientation
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), e("div", {
-      key: "83ab595967887ca3d2a584f85519f23e101d02ff",
+      key: "9eaba5d408629dc548a9c57428b801293f642172",
       class: "tab-content"
     }, e("slot", {
-      key: "6458a9e54b310f85129497478757111501fcb06f",
+      key: "811737fa0e22c994299c9164a6401209e6ecf418",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -288,6 +341,6 @@ const h = class {
   }
 };
-h.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}: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, 17px));line-height:var(--tct-tab-line-height, 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, 14px);line-height:var(--tct-tab-section-line-height, 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-backgrond, 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}";
+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))}}';
-export { h as q2_tab_container }
+export { d as q2_tab_container }