q2-tecton-elements 1.70.2 → 1.71.0

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

@@ -1,8 +1,8 @@
 import { r as t, h as o, g as i } from "./index-Cqkz7Bnm.js";
 
-import { o as e, i as s } from "./index-Cps4jSQM.js";
+import { o as e, g as s, i as a } from "./index-Cps4jSQM.js";
 
-const a = class {
+const r = class {
   constructor(o) {
     t(this, o), 
     // #region Own Properties
@@ -32,14 +32,18 @@ const a = class {
     (null === (o = t.composedPath) || void 0 === o ? void 0 : o.call(t).includes(this.hostElement)) || t.target instanceof Node && this.hostElement.contains(t.target) ? this.persistOnHoverDismissed = !1 : (this.persistOnHoverDismissed = !0, 
     this.hideTooltip());
   }
+  clickHandler() {
+    this.adjustSide(), !this.persistent && s() && (this.persistOnHoverDismissed = !1, 
+    this.focusClass = "has-touch-click");
+  }
   focusCaptureHandler() {
-    this.checkFocusClass();
+    (this.shouldBeVisible || this.persistent) && this.adjustSide(), this.checkFocusClass();
   }
   focusHandler(t) {
-    s(t, this.hostElement) && this.focusable && this.tooltipElement.focus();
+    a(t, this.hostElement) && this.focusable && this.tooltipElement.focus();
   }
   focusOutHandler() {
-    this.shouldBeVisible || ("has-generic-focus" === this.focusClass ? this.focusClass = "has-generic-focus-out" : this.focusClass = null);
+    this.shouldBeVisible || (this.focusClass = null);
   }
   // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.
   keyDownDocumentHandler(t) {
@@ -67,26 +71,24 @@ const a = class {
     const {left: t, right: o, width: i, top: e, bottom: s} = this.hostElement.getBoundingClientRect();
     if (!t || !i) return;
     // Find the constraining container (modal, dialog, or any overflow:hidden ancestor)
-        const a = this.findConstrainingContainer().getBoundingClientRect(), {width: n, paddingLeft: r, paddingRight: p} = window.getComputedStyle(this.tooltipElement, "::after"), l = Number(n.replace(/[px]/g, "")) + Number(r.replace(/[px]/g, "")) + Number(p.replace(/[px]/g, "")), h = [ "se", "sw", "ne", "nw" ].includes(this.position) ? 0 : 15, c = t - a.left + i / 2, f = a.right - o + i / 2, d = e - a.top, m = a.bottom - s, u = this.calculateTooltipHeight();
+        const a = this.findConstrainingContainer().getBoundingClientRect(), {width: r, paddingLeft: n, paddingRight: l} = window.getComputedStyle(this.tooltipElement, "::after"), p = Number(r.replace(/[px]/g, "")) + Number(n.replace(/[px]/g, "")) + Number(l.replace(/[px]/g, "")), h = [ "se", "sw", "ne", "nw" ].includes(this.position) ? 0 : 15, c = t - a.left + i / 2, d = a.right - o + i / 2, f = e - a.top, m = a.bottom - s, u = this.calculateTooltipHeight();
     // Check if we need to flip vertical position
-    [ "n", "ne", "nw" ].includes(this.position) && d < u ? 
+    [ "n", "ne", "nw" ].includes(this.position) && f < u ? 
     // Not enough space above, try flipping to bottom
-    m >= u && (this.position = this.position.replace("n", "s")) : [ "s", "se", "sw" ].includes(this.position) && m < u && d >= u && (this.position = this.position.replace("s", "n")), 
+    m >= u && (this.position = this.position.replace("n", "s")) : [ "s", "se", "sw" ].includes(this.position) && m < u && f >= u && (this.position = this.position.replace("s", "n")), 
     // Adjust horizontal positioning
-    [ "ne", "se" ].includes(this.position) ? l > f && this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(l - f + h)}px`) : [ "nw", "sw" ].includes(this.position) ? l > c && this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(l - c + h)}px`) : [ "n", "s" ].includes(this.position) && (l / 2 > c ? this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(l / 2 - c + h)}px`) : l / 2 > f ? this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(l / 2 - f + h)}px`) : this.tooltipElement.style.setProperty("--comp-offset-translate", "0px")), 
+    [ "ne", "se" ].includes(this.position) ? p > d ? this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(p - d + h)}px`) : this.tooltipElement.style.setProperty("--comp-offset-translate", "0px") : [ "nw", "sw" ].includes(this.position) ? p > c ? this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(p - c + h)}px`) : this.tooltipElement.style.setProperty("--comp-offset-translate", "0px") : [ "n", "s" ].includes(this.position) && (p / 2 > c ? this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(p / 2 - c + h)}px`) : p / 2 > d ? this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(p / 2 - d + h)}px`) : this.tooltipElement.style.setProperty("--comp-offset-translate", "0px")), 
     // Handle east/west positioning
-    "e" === this.position && l > f ? 
+    "e" === this.position && p > d ? 
     // Not enough space on right, flip to left
-    c >= l && (this.position = "w") : "w" === this.position && l > c && f >= l && (this.position = "e");
+    c >= p && (this.position = "w") : "w" === this.position && p > c && d >= p && (this.position = "e");
   }
   animationEndHandler() {
     this.animationEndCount = this.animationEndCount + 1;
     const {focusClass: t, animationEndCount: o} = this;
-    // animationEnd is fired once for :before and once for :after pseudo elements
-    // there are multiple animations defined for .has-generic-focus
-    // so we need to wait for all of them to finish before we can remove the class
-        ("has-generic-focus-out" === t || "has-generic-focus" === t && 4 === o) && (this.focusClass = null, 
-    this.animationEndCount = 0);
+    // animationEnd fires once for :before and once for :after, and there
+    // are two animations on .has-touch-click, so wait for all four before clearing.
+        "has-touch-click" === t && o >= 4 && (this.focusClass = null, this.animationEndCount = 0);
   }
   calculateTooltipHeight() {
     if (null !== this.cachedTooltipHeight) return this.cachedTooltipHeight;
@@ -98,11 +100,11 @@ const a = class {
         return this.cachedTooltipHeight = i + e + s, this.cachedTooltipHeight;
       }
       // Fallback: Calculate based on text and wrapping
-            const i = Number(t.width.replace(/px/g, "")), e = Number(t.paddingLeft.replace(/px/g, "")), s = Number(t.paddingRight.replace(/px/g, "")), a = Number(t.paddingTop.replace(/px/g, "")), n = Number(t.paddingBottom.replace(/px/g, "")), r = Number(t.fontSize.replace(/px/g, "")), p = t.lineHeight, l = "normal" === p ? 1.5 * r : Number(p.replace(/px/g, "")), h = i - e - s;
+            const i = Number(t.width.replace(/px/g, "")), e = Number(t.paddingLeft.replace(/px/g, "")), s = Number(t.paddingRight.replace(/px/g, "")), a = Number(t.paddingTop.replace(/px/g, "")), r = Number(t.paddingBottom.replace(/px/g, "")), n = Number(t.fontSize.replace(/px/g, "")), l = t.lineHeight, p = "normal" === l ? 1.5 * n : Number(l.replace(/px/g, "")), h = i - e - s;
       // Single-line tooltip (white-space: pre)
-      if ("pre" === t.whiteSpace || !this.multiline) return l + a + n;
+      if ("pre" === t.whiteSpace || !this.multiline) return p + a + r;
       // Multi-line tooltip: estimate line count
-            const c = this.label || "", f = .5 * r, d = Math.floor(h / f), m = Math.max(1, Math.ceil(c.length / d)) * l + a + n;
+            const c = this.label || "", d = .5 * n, f = Math.floor(h / d), m = Math.max(1, Math.ceil(c.length / f)) * p + a + r;
       // Add some buffer for safety (10px)
       return this.cachedTooltipHeight = Math.ceil(m) + 10, this.cachedTooltipHeight;
     } catch (t) {
@@ -114,8 +116,7 @@ const a = class {
   }
   checkFocusClass() {
     if (!this.shouldBeVisible) return;
-    const t = !!this.findFocusVisibleElement(document.activeElement);
-    this.focusClass = t ? "has-keyboard-focus" : "has-generic-focus";
+    !this.findFocusVisibleElement(document.activeElement) ? s() && (this.focusClass = "has-touch-click") : this.focusClass = "has-keyboard-focus";
   }
   clearTooltipOnChildren() {
     const t = Array.from(this.hostElement.children);
@@ -139,7 +140,7 @@ const a = class {
     (null == t ? void 0 : t.matches(":focus-visible")) ? t : null;
   }
   hideTooltip() {
-    "has-generic-focus" === this.focusClass ? this.focusClass = "has-generic-focus-out" : this.focusClass = null;
+    this.focusClass = null;
   }
   propagateTooltip() {
     if (this.focusable) return;
@@ -177,6 +178,6 @@ const a = class {
   }
 };
 
-a.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:inline-block;line-height:0}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-flex;line-height:normal;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(data-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus:hover:focus-within:before,.tooltip.has-generic-focus:hover:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}.tooltip.dismissed:before,.tooltip.dismissed:after{visibility:hidden;opacity:0;animation-name:none}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
+r.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:inline-block;line-height:0}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-flex;line-height:normal;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-hover-delay, var(--tct-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(data-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-touch-click:before,.tooltip.has-touch-click:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-touch-click:hover:before,.tooltip.has-touch-click:hover:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}.tooltip.dismissed:before,.tooltip.dismissed:after{visibility:hidden;opacity:0;animation-name:none}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
 
-export { a as q2_tooltip }
+export { r as q2_tooltip }

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

@@ -1,6 +1,6 @@
-import { r as e, c as t, h as i, g as s } from "./index-Cqkz7Bnm.js";
+import { r as e, c as t, h as i, g as n } from "./index-Cqkz7Bnm.js";
 
-const n = class {
+const o = class {
   constructor(i) {
     e(this, i), this.badge = t(this, "badge", 7), this.onIFrameLoad = e => {
       const t = e.target;
@@ -40,7 +40,7 @@ const n = class {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "6fd41d78c9d8a6e1abf28713f52d92ac214ad8ab",
+      key: "68c7250777ec0c700107df4997634d4aee8f8e91",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -48,12 +48,12 @@ const n = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && void 0 !== this.provided && !this.provided && i("div", {
-      key: "b5302bdd5ae8e749e84e4e12505d843c0ba0950a"
+      key: "7b8c74b691fc1c599766900125e09afe79e53859"
     }, i("slot", {
-      key: "4b935505187b21260398c28ea876ecd64d9ed172",
+      key: "bbf7c58bef21ab334059655e958e976b9bdf327e",
       name: "loading-wrapper"
     }), i("iframe", {
-      key: "c18b96c8849a6a69abec9ced6d27a6860113b8c7",
+      key: "6a262f757dd78294fcf49242b337b02c13842ee8",
       hidden: !0,
       name: this.moduleId,
       scrolling: "no",
@@ -76,15 +76,15 @@ const n = class {
       value: e.value,
       name: e.key
     })))) : ""), i("div", {
-      key: "1016d617dc6cf49aa8e4bf52010e3cf246191875",
+      key: "d9be64623c99011b7f30256d0abfaeab23f72c00",
       class: "slot-wrapper",
       hidden: this.selected && void 0 !== this.provided && !this.provided
     }, i("slot", {
-      key: "466d820db179e1b6e350722eff9ec9190be6c869"
+      key: "a1a3a9772b2875c7d4ab510e9014d99b6e036ad3"
     })));
   }
   get hostElement() {
-    return s(this);
+    return n(this);
   }
   static get watchers() {
     return {
@@ -107,6 +107,6 @@ const n = class {
   }
 };
 
-n.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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus-visible{outline:none;box-shadow:var(--const-global-focus)}";
+o.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}}}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus-visible{outline:none;box-shadow:var(--const-global-focus)}';
 
-export { n as tecton_tab_pane }
+export { o as tecton_tab_pane }

package/dist/types/components/q2-carousel/q2-carousel.d.ts

@@ -58,6 +58,8 @@ export declare class Q2Carousel implements ComponentInterface {
      * @localizable
      */
     label: string;
+    /** Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable. */
+    loop: boolean;
     /** Display navigation arrow buttons as another way to navigate the carousel. */
     showNavigationArrows: boolean;
     /**
@@ -113,7 +115,13 @@ export declare class Q2Carousel implements ComponentInterface {
      * loops back to Pane 1.
      */
     get useFullWidthPanes(): boolean;
+    /**
+     * Rebuilt whenever a prop that feeds Swiper's static config (e.g. `loop`) changes,
+     * since Swiper reads its options only at construction time.
+     */
+    buildCarouselOptions: () => void;
     configureCarousel: (carouselWrapper: any, carouselOptions: any) => void;
+    getPaginationLabel: (index: number) => string;
     handleAriaLive(activeAndFocused: boolean): void;
     handleAutoPlayPause: (action: "play" | "pause") => void;
     handlePopovers: (event: CustomEvent) => void;
@@ -123,6 +131,12 @@ export declare class Q2Carousel implements ComponentInterface {
     onMutationObserved: () => void;
     schedulePaneHeightSync: () => void;
     setCarouselWrapperWidth: () => void;
+    /**
+     * Swiper's `slideToLoop` snaps by real (logical) index but only exists when loop mode is on.
+     * For non-looped carousels, `slideTo` targets the same logical index directly since the DOM
+     * has no duplicates.
+     */
+    slideToPane: (index: number, speed?: number) => void;
     /**
      * Swiper's loop mode needs enough DOM slides on both sides of a centered active slide. For
      * two-pane full-width carousels and 3 to 5 pane peek carousels, we double the pane set in the

package/dist/types/components/q2-input/q2-input.d.ts

@@ -66,6 +66,12 @@ export declare class Q2Input {
      * Will assign role to combobox when used inside q2-select and q2-calendar.
      */
     _role: 'combobox' | undefined;
+    /**
+     * Determines whether the input updates its value property as native input occurs.
+     *
+     * @private
+     */
+    _updateValueOnInput: boolean;
     ariaActivedescendant: string;
     ariaControls: string;
     ariaExpanded: string;
@@ -237,7 +243,7 @@ export declare class Q2Input {
      * @info
      * The visible value of formatted input fields may not match the element's `value` property.
      * When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic.
-     * `q2-input` does not change its own `value` outside of its default change event handler.
+     * `q2-input` updates its own `value` through its default input and change event handlers.
      *
      * In `q2-input` where `type="currency"`
      * - element.value = 1234.56

package/dist/types/components/q2-pill/q2-pill.d.ts

@@ -4,6 +4,7 @@ import { OptionValue } from '../q2-option-list/q2-option-list';
  * @name Pill
  * @category Display
  * @summary Use for displaying and removing active filters in data views.
+ * @slot decorator - An optional slot that supports an [Icon](https://tecton.q2developer.com/design-system/q2-icon) to be displayed before the pill label.
  * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.
  * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.
  */
@@ -144,6 +145,7 @@ export declare class Q2Pill implements ComponentInterface {
     clearSelectedOptions: () => void;
     determineOptionCount: () => Promise<void>;
     executeActionSheet: (event: MouseEvent | KeyboardEvent) => Promise<void>;
+    filterSlottedElements: () => void;
     getOption: (value: string) => Promise<import("../..").ValidOptionElements>;
     getOptionListOptions: () => Promise<import("../..").ValidOptionElements[]>;
     handleChange: (event: any) => void;

package/dist/types/components/q2-stepper/q2-stepper.d.ts

@@ -61,6 +61,7 @@ export declare class Q2Stepper implements ComponentInterface {
     checkScrollState: () => void;
     focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean): void;
     getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label'): string;
+    getStatusLabel(status: 'complete' | 'error' | 'pending'): string;
     handleUndefinedStepProperties(): void;
     onScrollBtnClick: (direction: "left" | "right") => void;
     onSlotChange: () => void;

package/dist/types/components/q2-stepper-vertical/q2-stepper-vertical.d.ts

@@ -71,6 +71,7 @@ export declare class Q2StepperVertical implements ComponentInterface {
     };
     focusStepBtn(stepId: string, forceFocus?: boolean): void;
     getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label'): string;
+    getStatusLabel(status: 'complete' | 'error' | 'pending'): string;
     getStepId(currentStepId: string, goTo: string): string;
     onStepClick: (event: any, stepId: string) => void;
     onStepKeyDown: (event: KeyboardEvent, stepId: string) => void;
@@ -79,8 +80,8 @@ export declare class Q2StepperVertical implements ComponentInterface {
     setDefaultPane(): void;
     showStep(stepId: string): void;
     showStepPane(stepId: string): void;
-    renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string): any;
-    renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean): any;
+    renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number): any;
+    renderSpacer(pane: StructuredPane, isExpanded: boolean, isLastStep: boolean): any;
     renderStepBtn(pane: StructuredPane, index: number): any;
     render(): any;
 }

package/dist/types/components/q2-surface/q2-surface.d.ts

@@ -8,13 +8,13 @@ export declare class Q2Surface implements ComponentInterface {
     private _cancelAnimation;
     hostElement: HTMLElement;
     /** Applies a background color from the design-system token palette. When unset, the surface is transparent. */
-    background?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    background?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
     /** Applies a gradient fade across the background.
      *
      * @info Direction and colors are customizable via CSS custom properties. */
     backgroundGradient: boolean;
     /** Renders a visible border around the surface, optionally in a themed color. */
-    border?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    border?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
     /**
      * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
      *
@@ -49,6 +49,6 @@ export declare class Q2Surface implements ComponentInterface {
      * @param animation The animation to play. Defaults to `'pulse'`.
      * @returns A Promise that resolves when the animation finishes or is cancelled.
      */
-    animate(animation?: 'bounce' | 'flash' | 'pulse' | 'tada'): Promise<void>;
+    triggerAnimation(animation?: 'bounce' | 'flash' | 'pulse' | 'tada'): Promise<void>;
     render(): any;
 }

package/dist/types/components/q2-tab-container/q2-tab-container.d.ts

@@ -20,14 +20,17 @@ export declare class Q2TabContainer implements ComponentInterface {
     lastScrolled: number;
     listElement: HTMLUListElement;
     mutationObserver: MutationObserver;
+    narrowViewportListener: (event: MediaQueryListEvent) => void;
+    narrowViewportMedia: MediaQueryList;
     resizeObserver: ResizeObserver;
     scheduledAfterRender: (() => void)[];
     hostElement: HTMLElement;
     hasLeft: boolean;
     hasRight: boolean;
+    isNarrowViewport: boolean;
     scrollEnabled: boolean;
-    showScrollLeft: boolean;
-    showScrollRight: boolean;
+    showScrollBack: boolean;
+    showScrollForward: boolean;
     tabs: TabPane[];
     /**
      * Controls which variables are used to color the tab controls.
@@ -47,6 +50,16 @@ export declare class Q2TabContainer implements ComponentInterface {
     name: string;
     /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */
     noPrint: boolean;
+    /**
+     * 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.
+     */
+    orientation: 'horizontal' | 'vertical';
     /** Determines the font size of the tab controls. */
     type: 'main' | 'section';
     /** Corresponds to the value of the selected tab pane. */
@@ -87,6 +100,7 @@ export declare class Q2TabContainer implements ComponentInterface {
     selectTab(value: string): Promise<void>;
     nameObserver(): void;
     valueObserver(): void;
+    get computedOrientation(): 'horizontal' | 'vertical';
     get selectedTabValue(): string;
     get tabList(): Element;
     get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
@@ -94,7 +108,7 @@ export declare class Q2TabContainer implements ComponentInterface {
     determineTabMove(): void;
     moveToAdjacentTab: (value: string, direction: "next" | "prev" | "first" | "last") => void;
     moveToTab: (index: number, shouldFocus?: boolean) => void;
-    onScrollBtnClick: (direction?: "left" | "right") => void;
+    onScrollBtnClick: (direction?: "back" | "forward") => void;
     onSlotChange: () => void;
     onTabClick: (event: MouseEvent) => void;
     onTabKeyDown: (event: KeyboardEvent) => void;

package/dist/types/components/q2-tooltip/q2-tooltip.d.ts

@@ -9,7 +9,7 @@ export declare class Q2Tooltip implements ComponentInterface {
     cachedTooltipHeight: number | null;
     tooltipElement: HTMLDivElement;
     hostElement: HTMLElement;
-    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';
+    focusClass: 'has-keyboard-focus' | 'has-touch-click';
     persistOnHoverDismissed: boolean;
     /** Displays the element as a block, making it take up the full width of its container. */
     block: boolean;
@@ -37,6 +37,7 @@ export declare class Q2Tooltip implements ComponentInterface {
     disconnectedCallback(): void;
     componentDidLoad(): void;
     documentPointerHandler(event: Event): void;
+    clickHandler(): void;
     focusCaptureHandler(): void;
     focusHandler(event: any): void;
     focusOutHandler(): void;

package/dist/types/components.d.ts

@@ -633,6 +633,10 @@ export namespace Components {
           * @default 'tecton.element.carousel.ariaLabel'
          */
         "label": string;
+        /**
+          * Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable.
+         */
+        "loop": boolean;
         /**
           * Clicks and Focuses the `q2-carousel-pane` matching the specified index.
           * @testOnly
@@ -2073,6 +2077,12 @@ export namespace Components {
           * @default undefined
          */
         "_role": 'combobox' | undefined;
+        /**
+          * Determines whether the input updates its value property as native input occurs.
+          * @private 
+          * @default true
+         */
+        "_updateValueOnInput": boolean;
         "ariaActivedescendant": string;
         "ariaControls": string;
         "ariaExpanded": string;
@@ -2250,7 +2260,7 @@ export namespace Components {
         "validity": ValidityState;
         /**
           * The value of the input field.
-          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` does not change its own `value` outside of its default change event handler.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
+          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
          */
         "value": string;
     }
@@ -3690,16 +3700,10 @@ export namespace Components {
      * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
      */
     interface Q2Surface {
-        /**
-          * 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.
-         */
-        "animate": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
         /**
           * Applies a background color from the design-system token palette. When unset, the surface is transparent.
          */
-        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         /**
           * Applies a gradient fade across the background.
           * @info Direction and colors are customizable via CSS custom properties.
@@ -3709,7 +3713,7 @@ export namespace Components {
         /**
           * Renders a visible border around the surface, optionally in a themed color.
          */
-        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         /**
           * 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.
@@ -3747,6 +3751,12 @@ export namespace Components {
           * @default 0
          */
         "radius": 0 | 1 | 2 | 3 | 4 | 5;
+        /**
+          * 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.
+         */
+        "triggerAnimation": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
     }
     /**
      * @name Tab Container
@@ -3768,6 +3778,12 @@ export namespace Components {
           * @default false
          */
         "noPrint": boolean;
+        /**
+          * 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.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
         /**
           * A method to select a tab pane corresponding with the value.
           * @testOnly
@@ -5488,13 +5504,7 @@ declare global {
      * @category Display
      * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
      */
-    interface HTMLQ2SurfaceElement extends Omit<Components.Q2Surface, "animate">, HTMLStencilElement {
-        /**
-          * 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.
-         */
-        "animate": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
+    interface HTMLQ2SurfaceElement extends Components.Q2Surface, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2SurfaceElementEventMap>(type: K, listener: (this: HTMLQ2SurfaceElement, ev: Q2SurfaceCustomEvent<HTMLQ2SurfaceElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6391,6 +6401,10 @@ declare namespace LocalJSX {
           * @default 'tecton.element.carousel.ariaLabel'
          */
         "label"?: string;
+        /**
+          * Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable.
+         */
+        "loop"?: boolean;
         /**
           * Emitted when the displayed carousel pane changes.
           * @deprecated Use 'tctChange' instead
@@ -7878,6 +7892,12 @@ declare namespace LocalJSX {
           * @default undefined
          */
         "_role"?: 'combobox' | undefined;
+        /**
+          * Determines whether the input updates its value property as native input occurs.
+          * @private 
+          * @default true
+         */
+        "_updateValueOnInput"?: boolean;
         "ariaActivedescendant"?: string;
         "ariaControls"?: string;
         "ariaExpanded"?: string;
@@ -8091,7 +8111,7 @@ declare namespace LocalJSX {
         "validity"?: ValidityState;
         /**
           * The value of the input field.
-          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` does not change its own `value` outside of its default change event handler.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
+          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
          */
         "value"?: string;
     }
@@ -9631,7 +9651,7 @@ declare namespace LocalJSX {
         /**
           * Applies a background color from the design-system token palette. When unset, the surface is transparent.
          */
-        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         /**
           * Applies a gradient fade across the background.
           * @info Direction and colors are customizable via CSS custom properties.
@@ -9641,7 +9661,7 @@ declare namespace LocalJSX {
         /**
           * Renders a visible border around the surface, optionally in a themed color.
          */
-        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         /**
           * 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.
@@ -9720,6 +9740,12 @@ declare namespace LocalJSX {
           * @legacyEvent
          */
         "onTctChange"?: (event: Q2TabContainerCustomEvent<{ value: string }>) => void;
+        /**
+          * 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.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
         /**
           * Determines the font size of the tab controls.
          */
@@ -10206,6 +10232,7 @@ declare namespace LocalJSX {
         "hidePagination": boolean;
         "index": number;
         "label": string;
+        "loop": boolean;
         "showNavigationArrows": boolean;
     }
     interface Q2CarouselPaneAttributes {
@@ -10497,6 +10524,7 @@ declare namespace LocalJSX {
     interface Q2InputAttributes {
         "_preventEntry": boolean;
         "_role": 'combobox' | undefined;
+        "_updateValueOnInput": boolean;
         "ariaActivedescendant": string;
         "ariaControls": string;
         "ariaExpanded": string;
@@ -10819,9 +10847,9 @@ declare namespace LocalJSX {
         "currentStepId": string;
     }
     interface Q2SurfaceAttributes {
-        "background": 'default' | 'primary' | 'secondary' | 'tertiary';
+        "background": 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         "backgroundGradient": boolean;
-        "border": 'default' | 'primary' | 'secondary' | 'tertiary';
+        "border": 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
         "borderGradient": boolean;
         "clickable": boolean;
         "elevation": 0 | 1 | 2 | 3 | 4 | 5;
@@ -10834,6 +10862,7 @@ declare namespace LocalJSX {
         "color": 'alt' | undefined;
         "name": string;
         "noPrint": boolean;
+        "orientation": 'horizontal' | 'vertical';
         "type": 'main' | 'section';
         "value": string;
     }