q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -1,10 +1,12 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-Cqkz7Bnm.js";
 
-import { o as s, i as c, c as n, l as o } from "./index-Bx4m6N0g.js";
+import { c as s, o as n, i as c, l as o } from "./index-Cps4jSQM.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-const p = class {
+import { s as p } from "./sanitize-html-string-DPHNpMWE.js";
+
+const d = class {
   constructor(a) {
     t(this, a), this.change = e(this, "change", 7), this.tctChange = e(this, "tctChange", 7), 
     this.scheduledAfterRender = [], 
@@ -25,6 +27,15 @@ const p = class {
         var e, a;
         "childList" === t.type && (t.addedNodes.length || t.removedNodes.length) && ((null === (e = t.addedNodes[0]) || void 0 === e ? void 0 : e.nodeType) !== Node.ELEMENT_NODE && (null === (a = t.removedNodes[0]) || void 0 === a ? void 0 : a.nodeType) !== Node.ELEMENT_NODE || this.buildPaneList());
       }));
+    }, this.extractDetails = t => {
+      const {status: e, disabled: a} = t;
+      return t.id || (t.id = `step-${s()}`), {
+        id: t.id,
+        label: this.getPaneSlotOrProperty(t, "label"),
+        description: this.getPaneSlotOrProperty(t, "description"),
+        status: e,
+        disabled: a
+      };
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
       const {currentStepId: a} = this;
@@ -76,7 +87,7 @@ const p = class {
     })), this.mutationObserver = t;
   }
   componentDidLoad() {
-    s(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
+    n(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
   }
   componentWillUpdate() {
     this.expandedStepChildrenList = null;
@@ -123,20 +134,15 @@ const p = class {
   get allRootPanes() {
     return Array.from(this.hostElement.querySelectorAll(":scope > q2-stepper-pane"));
   }
-  extractDetails(t) {
-    const {label: e, description: a, status: r, disabled: i} = t;
-    return t.id || (t.id = `step-${n()}`), {
-      id: t.id,
-      label: e,
-      description: a,
-      status: r,
-      disabled: i
-    };
-  }
   focusStepBtn(t, e) {
     const a = this.hostElement.shadowRoot.querySelector(`button[id="${t}"]`), r = document.activeElement === this.hostElement;
     a && (r || e) && a.focus();
   }
+  getPaneSlotOrProperty(t, e) {
+    var a;
+    const r = Array.from(t.children).find((t => t.getAttribute("slot") === e));
+    return null !== (a = null == r ? void 0 : r.outerHTML) && void 0 !== a ? a : t[e] ? o(t[e]) : void 0;
+  }
   getStepId(t, e) {
     const a = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])')), r = a.findIndex((e => e.getAttribute("id") === t));
     let i;
@@ -178,7 +184,7 @@ const p = class {
   setDefaultPane() {
     if (this.currentStepId) return;
     const t = this.hostElement.querySelector("q2-stepper-pane");
-    t && (t.id || (t.id = `step-${n()}`), this.currentStepId = t.id);
+    t && (t.id || (t.id = `step-${s()}`), this.currentStepId = t.id);
   }
   showStep(t) {
     this.scheduledAfterRender.push(this.resizeIframe), this.showStepPane(t), this.focusStepBtn(t);
@@ -191,90 +197,93 @@ const p = class {
   // #endregion
   // #region Render Methods
   renderChildStepBtn(t, e, r, i) {
-    const {currentStepId: s} = this, {id: c, label: n, status: l, disabled: p} = t, d = n && `label-${c}`, b = c === s, v = "locked" === l, h = !n && o("tecton.element.advancedStepper.childNumber", [ `${e + 1}`, `${r}`, i ]);
-    let u;
-    "error" === l && (u = "warning-filled");
-    const f = [ "step-child-btn" ];
-    return l && f.push(`status-${l}`), p && f.push("pane-disabled"), a("li", {
+    const {currentStepId: s} = this, {id: n, label: c, status: l, disabled: d} = t, b = c && `label-${n}`, v = n === s, h = "locked" === l, u = !c && o("tecton.element.advancedStepper.childNumber", [ `${e + 1}`, `${r}`, i ]);
+    let f;
+    "error" === l && (f = "warning-filled");
+    const g = [ "step-child-btn" ];
+    return l && g.push(`status-${l}`), d && g.push("pane-disabled"), a("li", {
       role: "presentation"
     }, a("button", {
-      class: f.join(" "),
+      class: g.join(" "),
       type: "button",
-      "aria-labelledby": d,
-      "aria-label": h,
-      "aria-selected": `${b}`,
-      id: c,
-      "aria-disabled": v ? "true" : null,
+      "aria-labelledby": b,
+      "aria-label": u,
+      "aria-selected": `${v}`,
+      id: n,
+      "aria-disabled": h ? "true" : null,
       role: "tab",
-      tabIndex: b ? 0 : -1,
-      onKeyDown: t => !v && this.onStepKeyDown(t, c),
-      onClick: t => !p && !v && this.onStepClick(t, c)
-    }, u && a("div", {
+      tabIndex: v ? 0 : -1,
+      onKeyDown: t => !h && this.onStepKeyDown(t, n),
+      onClick: t => !d && !h && this.onStepClick(t, n)
+    }, f && a("div", {
       class: "step-child-icon"
     }, a("q2-icon", {
-      type: u
-    })), n && a("div", {
+      type: f
+    })), c && a("div", {
       class: "step-child-label",
-      id: d
-    }, o(n))));
+      id: b,
+      innerHTML: p(c)
+    })));
   }
   renderSpacer(t, e, r, i) {
-    const s = i && !!t.children.length || !i, c = [ "spacer" ];
-    return i || c.push("has-sibling"), s && a("div", {
-      class: c.join(" ")
+    const s = i && !!t.children.length || !i, n = [ "spacer" ];
+    return i || n.push("has-sibling"), s && a("div", {
+      class: n.join(" ")
     }, !!t.children.length && a("ul", {
       ref: t => r && (this.expandedStepChildrenList = t),
       "aria-hidden": `${!r}`
     }, t.children.map(((t, a, r) => this.renderChildStepBtn(t, a, r.length, e)))));
   }
   renderStepBtn(t, e) {
-    const {currentStepId: r, structuredPanes: i} = this, s = e === i.length - 1, {id: c, label: n, description: l, status: p, disabled: d} = t, b = e + 1, v = c === r, h = n && `label-${c}`, u = "locked" === p, f = n && o(n), g = n && l && `description-${c}`, m = !n && o("tecton.element.advancedStepper.number", [ `${b}`, `${i.length}` ]);
-    let w;
-    "complete" === p ? w = "success-filled" : "error" === p && (w = "warning-filled");
-    const x = [ "step-btn" ];
-    p && x.push(`status-${p}`), d && x.push("pane-disabled");
-    const y = t.children.map((t => t.id)), z = v || y.includes(r);
+    const {currentStepId: r, structuredPanes: i} = this, s = e === i.length - 1, {id: n, label: c, description: l, status: d, disabled: b} = t, v = e + 1, h = n === r, u = c && `label-${n}`, f = "locked" === d, g = c, m = c && l && `description-${n}`, w = !c && o("tecton.element.advancedStepper.number", [ `${v}`, `${i.length}` ]);
+    let x;
+    "complete" === d ? x = "success-filled" : "error" === d && (x = "warning-filled");
+    const y = [ "step-btn" ];
+    d && y.push(`status-${d}`), b && y.push("pane-disabled");
+    const z = t.children.map((t => t.id)), k = h || z.includes(r);
     return a("li", {
       role: "presentation"
     }, a("button", {
-      class: x.join(" "),
+      class: y.join(" "),
       type: "button",
-      "aria-labelledby": h,
-      "aria-describedBy": g,
-      "aria-label": m,
-      "aria-selected": `${v}`,
-      "aria-expanded": t.children.length ? `${z}` : null,
-      id: c,
-      "aria-disabled": u ? "true" : null,
+      "aria-labelledby": u,
+      "aria-describedBy": m,
+      "aria-label": w,
+      "aria-selected": `${h}`,
+      "aria-expanded": t.children.length ? `${k}` : null,
+      id: n,
+      "aria-disabled": f ? "true" : null,
       role: "tab",
-      tabIndex: v ? 0 : -1,
-      onKeyDown: t => !u && this.onStepKeyDown(t, c),
-      onClick: t => !d && !u && this.onStepClick(t, c)
-    }, w ? a("div", {
+      tabIndex: h ? 0 : -1,
+      onKeyDown: t => !f && this.onStepKeyDown(t, n),
+      onClick: t => !b && !f && this.onStepClick(t, n)
+    }, x ? a("div", {
       class: "step-icon"
     }, a("q2-icon", {
-      type: w
+      type: x
     })) : a("div", {
       class: "step-bubble"
-    }, b), n && a("div", null, a("div", {
+    }, v), c && a("div", null, a("div", {
       class: "step-label",
-      id: h
-    }, f), l && a("div", {
+      id: u,
+      innerHTML: p(g)
+    }), l && a("div", {
       class: "step-description",
-      id: g
-    }, o(l)))), this.renderSpacer(t, f, z, s));
+      id: m,
+      innerHTML: p(l)
+    }))), this.renderSpacer(t, g, k, s));
   }
   render() {
     return a(r, {
-      key: "f0e7532121d04664984f5a8c20c1dbd777e8df32"
+      key: "2771f649f3e5e8a37657d43678d83c67204ec466"
     }, a("ul", {
-      key: "3b30070fb196c16f3194199903799d4c1ee7e042",
+      key: "f0909b76f95f6c3684a2cffa069d530be3d951ce",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "453722ec203014925b5bf3a879e72947e114b5fb",
+      key: "747eedecf0c9774439eb6ccf60528a521eb78685",
       role: "list"
     }, a("slot", {
-      key: "6f1ae5614bcddacf4ecb6819370ac8c417e99228"
+      key: "db02fc51b4811f510761365667516ce985c212d8"
     })));
   }
   get hostElement() {
@@ -289,6 +298,6 @@ const p = class {
   }
 };
 
-p.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:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none;border-radius:var(--tct-stepper-vertical-step-focus-visible-border-radius, 0)}.step-btn[aria-disabled]:not(.pane-disabled),.step-child-btn[aria-disabled]:not(.pane-disabled){cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn.pane-disabled,.step-child-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn:focus-visible,.step-child-btn:focus-visible{box-shadow:var(--tct-stepper-vertical-step-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';
+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}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, inherit)));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, inherit)));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none;border-radius:var(--tct-stepper-vertical-step-focus-visible-border-radius, 0)}.step-btn[aria-disabled]:not(.pane-disabled),.step-child-btn[aria-disabled]:not(.pane-disabled){cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn.pane-disabled,.step-child-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn:focus-visible,.step-child-btn:focus-visible{box-shadow:var(--tct-stepper-vertical-step-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';
 
-export { p as q2_stepper_vertical }
+export { d as q2_stepper_vertical }

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

@@ -1,10 +1,12 @@
 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 c } from "./index-Bx4m6N0g.js";
+import { c as a, o as s, i as l, l as n } from "./index-Cps4jSQM.js";
 
-import { m as n } from "./mirror-emit-DUjY_ucm.js";
+import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
-const p = class {
+import { s as p } from "./sanitize-html-string-DPHNpMWE.js";
+
+const b = class {
   constructor(r) {
     t(this, r), this.change = e(this, "change", 7), this.tctChange = e(this, "tctChange", 7), 
     this.scheduledAfterRender = [], 
@@ -31,7 +33,7 @@ const p = class {
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
       const {currentStep: r, stepCount: i, lastEnabledStep: o} = this;
-      e > o || e === r || n(this, [ "change", "tctChange" ], {
+      e > o || e === r || c(this, [ "change", "tctChange" ], {
         selectedStep: e,
         lastEnabledStep: o,
         currentStep: r,
@@ -152,7 +154,7 @@ const p = class {
   getPaneSlotOrProperty(t, e) {
     var r;
     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 : c(t[e]);
+    return null !== (r = null == i ? void 0 : i.outerHTML) && void 0 !== r ? r : n(t[e]);
   }
   handleUndefinedStepProperties() {
     const {currentStep: t, lastEnabledStep: e} = this;
@@ -166,7 +168,7 @@ const p = class {
   showStep(t) {
     if (t > this.lastEnabledStep) {
       const {currentStep: e, stepCount: r} = this;
-      this.lastEnabledStep = t, n(this, [ "change", "tctChange" ], {
+      this.lastEnabledStep = t, c(this, [ "change", "tctChange" ], {
         selectedStep: null,
         lastEnabledStep: t,
         currentStep: e,
@@ -184,42 +186,42 @@ const p = class {
   // #region Render Methods
   renderStepBtn(t) {
     var e;
-    const {allPanes: o, stepCount: a, lastEnabledStep: s, currentStep: l} = this, n = null !== (e = null == o ? void 0 : o[t]) && void 0 !== e ? e : null, {id: p, status: d} = n, b = this.getPaneSlotOrProperty(n, "label"), h = this.getPaneSlotOrProperty(n, "description"), v = t + 1, u = v === l, f = !!b && `label-${p}`, g = !!b && !!h && `description-${p}`, m = !b && c("tecton.element.stepper.number", [ `${v}`, `${a}` ]);
-    let w;
-    "complete" === d ? w = "success-filled" : "error" === d && (w = "warning-filled");
-    const x = [ "step-btn" ];
-    d && x.push(`status-${d}`);
-    const k = "locked" === d, y = n.disabled;
-    y && x.push("pane-disabled");
-    const z = k || v > 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: 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;
     return r("li", {
       role: "presentation"
     }, r("button", {
-      class: x.join(" "),
+      class: k.join(" "),
       type: "button",
-      "aria-labelledby": f,
+      "aria-labelledby": m,
       "aria-describedBy": g,
-      "aria-label": m,
-      "aria-selected": `${u}`,
-      "aria-disabled": z ? "true" : void 0,
+      "aria-label": w,
+      "aria-selected": `${f}`,
+      "aria-disabled": S ? "true" : void 0,
       role: "tab",
-      tabIndex: u ? 0 : -1,
-      onKeyDown: t => this.onStepKeyDown(t, v),
-      onClick: t => !y && !z && this.onStepClick(t, v)
-    }, r(i, null, w ? r("div", {
+      tabIndex: f ? 0 : -1,
+      onKeyDown: t => this.onStepKeyDown(t, u),
+      onClick: t => !z && !S && this.onStepClick(t, u)
+    }, r(i, null, x ? r("div", {
       class: "step-icon"
     }, r("q2-icon", {
-      type: w
+      type: x
     })) : r("div", {
       class: "step-bubble"
-    }, v), f && r("div", {
+    }, u), m && r("div", {
       class: "step-label",
-      id: f,
-      innerHTML: b
-    }), f && g && r("div", {
+      id: m,
+      innerHTML: p(h)
+    }), m && g && r("div", {
       class: "step-description",
       id: g,
-      innerHTML: h
+      innerHTML: p(v)
     }))), t ? r("div", {
       class: "step-divider"
     }) : "");
@@ -227,50 +229,50 @@ const p = class {
   render() {
     const {stepCount: t, scrollEnabled: e, showScrollLeft: o, showScrollRight: a} = this, s = [ "step-container" ];
     return e && s.push("has-scroll"), r(i, {
-      key: "dd38d7922ef9b468399b57f4e1d656b2213d6b32"
+      key: "c1e21a36e0b2f684f4520b0f75f78affd73359bd"
     }, r("div", {
-      key: "92dc67bc25e5a5275241b91ec6cb968202e91af8",
+      key: "3791e857d27aa3fea928f663268f21270d499023",
       class: s.join(" ")
     }, e && r(i, {
-      key: "ef83e893c3dfe020cb1c561c1b0619f364c7f08f"
+      key: "19b689b2b56f52099f22f859264e33e16fd918bf"
     }, r("div", {
-      key: "9cf06f95042064daa7564a9927cf3f1ff9a227be",
+      key: "5b1b1e00034fa009c555924c2067fed6369740cb",
       class: "gradient-left",
       hidden: !o
     }), r("div", {
-      key: "d9c58f971a8b2fd545c09e698d57baf356c3947b",
+      key: "b5de1b413f6c8ce006207926f26ae845594228eb",
       class: "gradient-right",
       hidden: !a
     }), r("q2-btn", {
-      key: "38c601f9fe74886e912e983b9b52e7c1e1a0694e",
+      key: "832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
-      label: c("tecton.element.stepper.scrollLeft"),
+      label: n("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "a53ac3dc6ebd84e3d221136868df0861bc6acf4f",
+      key: "3e53b2b2f19bbba59a37016b9cdf1a302b030b63",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "38363d0a8a2d9fa96a919bf08d243ddb42d65552",
+      key: "ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
-      label: c("tecton.element.stepper.scrollRight"),
+      label: n("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "6da3f9a38d4b1bb375b25257634058c869f9478f",
+      key: "2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f",
       type: "chevron-right"
     }))), r("ul", {
-      key: "2c5e3d0e0aebd5fa05ecce735232dd42d1aec470",
+      key: "25806a72f9f0cda2e032a81dbaac9f808be385c9",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "21e4f4c96ebcef94c73a29f468c820c9d4c22a57",
+      key: "622b3ed56e3f66adc33bf197b7874a7b9bf8667f",
       role: "list"
     }, r("slot", {
-      key: "84d871317ccc4471f1d954d469047bc6f97399cf",
+      key: "73c4321743596227054e317c271bcc044179363b",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -291,6 +293,6 @@ const p = class {
   }
 };
 
-p.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, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical;font-weight:var(--tct-stepper-label-font-weight, var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600)))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}';
+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}';
 
-export { p as q2_stepper }
+export { b as q2_stepper }

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

@@ -0,0 +1,89 @@
+import { r, c as a, h as o, H as e, g as t } from "./index-Cqkz7Bnm.js";
+
+const c = class {
+  constructor(o) {
+    r(this, o), this.tctClick = a(this, "tctClick", 7), 
+    // #region Own Properties
+    this._cancelAnimation = null, 
+    /** Applies a gradient fade across the background.
+         *
+         * @info Direction and colors are customizable via CSS custom properties. */
+    this.backgroundGradient = !1, 
+    /**
+         * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+         *
+         * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+         */
+    this.borderGradient = !1, 
+    /** Makes the surface interactive, responding to clicks.
+         *
+         * @info Emits `tctClick` when clicked. */
+    this.clickable = !1, 
+    /** Gives the component a drop shadow.
+         *
+         * @info 0 means no shadow; higher values appear more elevated. */
+    this.elevation = 0, 
+    /** Adds internal padding applied uniformly on all sides.
+         *
+         * @info Individual axes can be overridden with `inset-x` and `inset-y`. */
+    this.inset = "none", 
+    /** Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded). */
+    this.radius = 0;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var r;
+    null === (r = this._cancelAnimation) || void 0 === r || r.call(this);
+  }
+  // #endregion
+  // #region Listeners
+  onClick() {
+    this.clickable && this.tctClick.emit();
+  }
+  onKeydown(r) {
+    this.clickable && ("Enter" !== r.key && " " !== r.key || (r.preventDefault(), this.tctClick.emit()));
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+     * @param animation The animation to play. Defaults to `'pulse'`.
+     * @returns A Promise that resolves when the animation finishes or is cancelled.
+     */
+  async animate(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 = () => {
+        this.hostElement.classList.remove(o), this._cancelAnimation = null, a();
+      };
+      this._cancelAnimation = () => {
+        this.hostElement.classList.remove(o), this.hostElement.removeEventListener("animationend", onEnd), 
+        this._cancelAnimation = null, a();
+      }, this.hostElement.classList.add(o), this.hostElement.addEventListener("animationend", onEnd, {
+        once: !0
+      });
+    }));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return o(e, {
+      key: "235f94ccfb0eb7167079e8e25ee78d652999f8e8"
+    }, o("div", {
+      key: "b01d6e71bb4b8f1f583c63910d4b1eca757572dd",
+      class: "container",
+      role: this.clickable ? "button" : void 0,
+      tabIndex: this.clickable ? 0 : void 0
+    }, o("slot", {
+      key: "591dc9fcb51d6f238a6186f047661020be9ea800"
+    })));
+  }
+  get hostElement() {
+    return t(this);
+  }
+};
+
+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}';
+
+export { c as q2_surface }