@vonage/vivid 5.1.0 → 5.3.0

package/simple-color-picker/index.js

@@ -1,250 +1,136 @@
-import { V as g, D as p, a as d, o as C, n as b, h as u, c as k, d as y } from "../bundled/vivid-element.js";
-import { P as _, p as E } from "../bundled/definition9.js";
-import { I as x, i as S } from "../bundled/definition2.js";
-import { A as $, a as A } from "../bundled/anchored.js";
-import { F as P } from "../bundled/form-associated.js";
-import { L } from "../bundled/localized.js";
-import { F as z } from "../bundled/form-element.js";
-import { h as R } from "../bundled/index.js";
-import { c as w } from "../bundled/class-names.js";
-import { r as M } from "../bundled/repeat.js";
-import { w as F } from "../bundled/when.js";
-const I = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{display:grid;padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px);grid-template-columns:repeat(var(--swatches-per-row, 7),1fr)}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
-function D(a) {
-  if (!a) return null;
-  const e = a.trim().replace(/^#/, "");
-  return /^[0-9a-fA-F]{6}$/.test(e) ? e.toLowerCase() : null;
-}
-function v(a) {
-  const e = D(a);
-  if (!e) return 0;
-  const r = parseInt(e.slice(0, 2), 16) / 255, s = parseInt(e.slice(2, 4), 16) / 255, t = parseInt(e.slice(4, 6), 16) / 255, o = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4), n = s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4), i = t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
-  return 0.2126 * o + 0.7152 * n + 0.0722 * i;
-}
-function O(a, e) {
-  const r = v(a), s = v(e), t = Math.max(r, s), o = Math.min(r, s);
-  return (t + 0.05) / (o + 0.05);
-}
-function T(a, e) {
-  return e || (e = document.querySelector(".vvd-root") || document.documentElement), getComputedStyle(e).getPropertyValue(a).trim();
-}
-var q = Object.defineProperty, h = (a, e, r, s) => {
-  for (var t = void 0, o = a.length - 1, n; o >= 0; o--)
-    (n = a[o]) && (t = n(e, r, t) || t);
-  return t && q(e, r, t), t;
+import { U as c, V as h, a as l, n as d, h as u, c as m, d as v } from "../bundled/vivid-element.js";
+import { P as f, p as w } from "../bundled/definition9.js";
+import { I as g, i as _ } from "../bundled/definition2.js";
+import { A as k, a as x } from "../bundled/anchored.js";
+import { B as b } from "../bundled/base-color-picker.js";
+import { h as C } from "../bundled/index.js";
+import { r as E } from "../bundled/repeat.js";
+import { c as y } from "../bundled/class-names.js";
+const L = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
+var P = Object.defineProperty, p = (s, e, o, r) => {
+  for (var t = void 0, n = s.length - 1, a; n >= 0; n--)
+    (a = s[n]) && (t = a(e, o, t) || t);
+  return t && P(e, o, t), t;
 };
-class l extends L(
-  $(z(P(g)))
-) {
+class i extends k(b(h)) {
   constructor() {
-    super(...arguments), this.proxy = document.createElement("input"), this.open = !1, this.placement = "top-start", this.swatches = [], this.swatchesPerRow = 7, this._canvasColor = "", this.#o = () => {
-      this.open || p.queueUpdate(() => this.open = !0);
-    }, this.#s = (e) => {
-      (e.key === "Enter" || e.key === " ") && (this.open || p.queueUpdate(() => this.open = !0), e.preventDefault());
-    }, this.#r = (e) => {
-      const r = !this.contains(e.target), s = this._anchorEl?.contains(e.target);
-      (r || s) && (this.open = !1);
-    }, this.#a = (e) => {
+    super(...arguments), this.placement = "top-start", this.swatchesPerRow = 7, this.#e = () => {
+      this.open || c.enqueue(() => this.open = !0);
+    }, this.#t = (e) => {
+      (e.key === "Enter" || e.key === " ") && (this.open || c.enqueue(() => this.open = !0), e.preventDefault());
+    }, this._closeOnClickOutside = (e) => {
+      const o = !this.contains(e.target), r = this._anchorEl?.contains(e.target);
+      (o || r) && (this.open = !1);
+    }, this._closeOnEscape = (e) => {
       e.key === "Escape" && (this.open = !1);
-    }, this._handleSwatchSelection = (e) => {
-      this.value === e.value ? this.value = "" : this.value = e.value, this.$emit("change"), this.open = !1;
-    }, this._handleSwatchKeydown = (e, r, s) => {
-      const t = this.swatchesPerRow, o = this.swatches.length, n = Math.floor(s / t), i = s % t, f = Math.ceil(o / t);
-      switch (e.key) {
-        case "ArrowRight":
-          return i < t - 1 && s + 1 < o && this.#e(s + 1), !1;
-        case "ArrowLeft":
-          return i > 0 && this.#e(s - 1), !1;
-        case "ArrowDown":
-          return n < f - 1 && s + t < o && this.#e(s + t), !1;
-        case "ArrowUp":
-          return n > 0 && this.#e(s - t), !1;
-        case "PageDown": {
-          const c = (f - 1) * t, m = Math.min(c + i, o - 1);
-          return s !== m && this.#e(m), !1;
-        }
-        case "PageUp": {
-          const c = Math.min(i, o - 1);
-          return s !== c && this.#e(c), !1;
-        }
-        case "Home":
-          return e.ctrlKey ? this.#e(0) : this.#e(n * t), !1;
-        case "End":
-          if (e.ctrlKey)
-            this.#e(o - 1);
-          else {
-            const c = Math.min(
-              (n + 1) * t - 1,
-              o - 1
-            );
-            this.#e(c);
-          }
-          return !1;
-        case "Enter":
-        case " ":
-          return this._handleSwatchSelection(r), this.#i(), !1;
-        case "Escape":
-          return this.open = !1, this.#i(), !1;
-        case "Tab":
-          return this.open = !1, !0;
-        default:
-          return !0;
-      }
     };
   }
   /**
    * @internal
    */
   openChanged() {
-    this.#t(), this._anchorEl && this.#n(this._anchorEl), this.open && (this._refreshCanvasColor(), requestAnimationFrame(() => {
+    this._updateListeners(), this._anchorEl && this.#o(this._anchorEl), this.open && (this._refreshCanvasColor(), requestAnimationFrame(() => {
       const e = this.swatches.findIndex(
-        (s) => s.value === this.value
-      ), r = e >= 0 ? e : 0;
-      this.#e(r);
+        (r) => r.value === this.value
+      ), o = e >= 0 ? e : 0;
+      this._focusSwatchByIndex(o);
     }));
   }
-  connectedCallback() {
-    super.connectedCallback(), this.#t(), this._refreshCanvasColor();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#t();
-  }
   /**
    * @internal
    */
-  #t() {
-    document.removeEventListener("click", this.#r), document.removeEventListener("keydown", this.#a), this.open && this.isConnected && (document.addEventListener("click", this.#r), document.addEventListener("keydown", this.#a));
+  _getRowLength() {
+    return this.swatchesPerRow;
   }
-  /**
-   * @internal
-   */
-  _refreshCanvasColor() {
-    this._canvasColor = T("--vvd-color-canvas", this);
+  connectedCallback() {
+    super.connectedCallback(), this._updateListeners();
   }
-  /**
-   * @internal
-   */
-  _applyContrastClass(e, r = 3) {
-    return !e || !this._canvasColor ? !1 : O(e, this._canvasColor) < r;
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._updateListeners();
   }
   /**
    * @internal
    */
-  _anchorElChanged(e, r) {
-    e && this.#l(e), r && this.#c(r);
+  _updateListeners() {
+    document.removeEventListener("click", this._closeOnClickOutside), document.removeEventListener("keydown", this._closeOnEscape), this.open && this.isConnected && (document.addEventListener("click", this._closeOnClickOutside), document.addEventListener("keydown", this._closeOnEscape));
   }
   /**
    * @internal
    */
-  #n(e) {
-    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
+  _getFocusReturnEl() {
+    return this._anchorEl ?? null;
   }
   /**
    * @internal
    */
-  #c(e) {
-    this.#n(e), e.addEventListener("click", this.#o, !0), e.addEventListener("keydown", this.#s), e.setAttribute("aria-haspopup", "true");
+  _anchorElChanged(e, o) {
+    e && this.#r(e), o && this.#s(o);
   }
   /**
    * @internal
    */
-  #l(e) {
-    e.removeEventListener("click", this.#o, !0), e.removeEventListener("keydown", this.#s), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
+  #o(e) {
+    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
   }
-  #o;
-  #s;
-  #r;
-  #a;
   /**
    * @internal
    */
-  #e(e) {
-    if (e < 0 || e >= this.swatches.length) return;
-    this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[e]?.focus();
+  #s(e) {
+    this.#o(e), e.addEventListener("click", this.#e, !0), e.addEventListener("keydown", this.#t), e.setAttribute("aria-haspopup", "true");
   }
   /**
    * @internal
    */
-  #i() {
-    p.queueUpdate(() => this._anchorEl?.focus());
+  #r(e) {
+    e.removeEventListener("click", this.#e, !0), e.removeEventListener("keydown", this.#t), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
   }
+  #e;
+  #t;
 }
-h([
-  d({ mode: "boolean" })
-], l.prototype, "open");
-h([
-  d({ mode: "fromView" })
-], l.prototype, "placement");
-h([
-  C
-], l.prototype, "swatches");
-h([
-  d({
+p([
+  l({ mode: "fromView" })
+], i.prototype, "placement");
+p([
+  l({
     attribute: "swatches-per-row",
     mode: "fromView",
-    converter: b
+    converter: d
   })
-], l.prototype, "swatchesPerRow");
-const K = (a) => w("control"), U = (a) => {
-  const e = a.tagFor(_), r = a.tagFor(x), s = A();
+], i.prototype, "swatchesPerRow");
+const A = (s) => y("control"), z = (s) => {
+  const e = s.tagFor(f), o = s.tagFor(g), r = x();
   return u`
-		${s}
+		${r}
 		<${e}
-			class="${K}"
+			class="${A}"
 			:anchor="${(t) => t._anchorEl}"
 			:open="${(t) => t.open}"
 			placement="${(t) => t.placement}"
 			offset="4"
-			@keydown="${(t, { event: o }) => !(t.open && R(o))}"
+			@keydown="${(t, { event: n }) => !(t.open && C(n))}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${(t) => Math.ceil(t.swatches.length / t.swatchesPerRow)}"
-				aria-colcount="${(t) => t.swatchesPerRow}"
-				style="--swatches-per-row: ${(t) => t.swatchesPerRow};" 
+				aria-rowcount="${(t) => Math.ceil(t.swatches.length / t._getRowLength())}"
+				aria-colcount="${(t) => t._getRowLength()}"
+				style="--swatches-per-row: ${(t) => t._getRowLength()};"
 				aria-label="${(t) => t.locale.simpleColorPicker.colorPaletteLabel}">
-				${M(
+				${E(
     (t) => t.swatches,
-    u`
-						<button
-							class="swatch ${(t, o) => w(
-      o.parent.value === t.value ? "selected" : "",
-      o.parent._applyContrastClass(t.value) ? "contrast" : ""
-    )}"
-							role="gridcell"
-							style="--swatch-color: ${(t) => t.value};"
-							tabindex="${(t, o) => o.index === 0 ? "0" : "-1"}"
-							aria-label="${(t, o) => o.parent.locale.simpleColorPicker.colorSwatchLabel(
-      t.value,
-      t.label,
-      o.parent.value === t.value
-    )}"
-							@click="${(t, o) => o.parent._handleSwatchSelection(t)}"
-							@keydown="${(t, o) => o.parent._handleSwatchKeydown(
-      o.event,
-      t,
-      o.index
-    )}"
-						>
-							${F(
-      (t, o) => o.parent.value === t.value,
-      u`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`
-    )}
-						</button>
-					`,
+    (t) => t._renderColorSwatch(o),
     { positioning: !0 }
   )}
 			</div>
 		</${e}>
 	`;
-}, V = y(
+}, $ = v(
   "simple-color-picker",
-  l,
-  U,
-  [E, S],
+  i,
+  z,
+  [w, _],
   {
-    styles: I
+    styles: L
   }
-), B = k(
-  V
+), O = m(
+  $
 );
-B();
+O();

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:50 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:49 GMT
+ * Generated on Thu, 16 Oct 2025 10:49:52 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/switch/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const d=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/form-associated.cjs"),v=require("../bundled/key-codes.cjs"),h=require("../bundled/class-names.cjs"),u=require("../bundled/when.cjs"),m=':host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var _=Object.defineProperty,t=(o,r,i,x)=>{for(var a=void 0,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=l(r,i,a)||a);return a&&_(r,i,a),a};class c extends s.DelegatesAria(p.CheckableFormAssociated(e.VividElement)){constructor(){super(),this.proxy=document.createElement("input"),this.initialValue="on",this.keypressHandler=r=>{(r.key===v.keySpace||r.key===v.keyEnter)&&(this.checked=!this.checked)},this.clickHandler=()=>{!this.disabled&&!this.readOnly&&(this.checked=!this.checked)},this.checked=this.defaultChecked}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly),this.readOnly?this.classList.add("readonly"):this.classList.remove("readonly")}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","checkbox"),this.updateForm()}updateForm(){const r=this.checked?this.value:null;this.setFormValue(r,r)}}t([e.attr],c.prototype,"label");t([e.attr],c.prototype,"connotation");t([e.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");t([e.observable],c.prototype,"defaultSlottedNodes");const y=o=>h.classNames("control",["appearance-filled",o.checked],["checked",o.checked],["disabled",o.disabled],["readonly",o.readOnly],[`connotation-${o.connotation}`,!!o.checked&&!!o.connotation]),f=e.html`
+"use strict";const d=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/form-associated.cjs"),v=require("../bundled/key-codes.cjs"),h=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=':host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var _=Object.defineProperty,t=(o,r,i,x)=>{for(var a=void 0,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=l(r,i,a)||a);return a&&_(r,i,a),a};class c extends s.DelegatesAria(p.CheckableFormAssociated(e.VividElement)){constructor(){super(),this.proxy=document.createElement("input"),this.initialValue="on",this.keypressHandler=r=>{(r.key===v.keySpace||r.key===v.keyEnter)&&(this.checked=!this.checked)},this.clickHandler=()=>{!this.disabled&&!this.readOnly&&(this.checked=!this.checked)},this.checked=this.defaultChecked}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly),this.readOnly?this.classList.add("readonly"):this.classList.remove("readonly")}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","checkbox"),this.updateForm()}updateForm(){const r=this.checked?this.value:null;this.setFormValue(r,r)}}t([e.attr],c.prototype,"label");t([e.attr],c.prototype,"connotation");t([e.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");t([e.observable],c.prototype,"defaultSlottedNodes");const y=o=>u.classNames("control",["appearance-filled",o.checked],["checked",o.checked],["disabled",o.disabled],["readonly",o.readOnly],[`connotation-${o.connotation}`,!!o.checked&&!!o.connotation]),f=e.html`
 	<template>
 		<div
 			class="${y}"
@@ -10,7 +10,7 @@
 			<div class="switch">
 				<span class="checked-indicator"></span>
 			</div>
-			${u.when(o=>o.label,e.html`<div class="label">${o=>o.label}</div>`)}
+			${h.when(o=>o.label,e.html`<div class="label">${o=>o.label}</div>`)}
 		</div>
 	</template>
 `,b=e.defineVividComponent("switch",c,f,[d.iconDefinition],{styles:m,shadowOptions:{delegatesFocus:!0}}),w=e.createRegisterFunction(b);w();

package/switch/index.js

@@ -3,8 +3,8 @@ import { V as d, a as n, o as p, h as v, c as h, d as u } from "../bundled/vivid
 import { D as m, d as f } from "../bundled/delegates-aria.js";
 import { C as _ } from "../bundled/form-associated.js";
 import { l as y, f as b } from "../bundled/key-codes.js";
-import { c as w } from "../bundled/class-names.js";
-import { w as x } from "../bundled/when.js";
+import { w } from "../bundled/when.js";
+import { c as x } from "../bundled/class-names.js";
 const k = ':host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
 var g = Object.defineProperty, c = (o, a, i, F) => {
   for (var r = void 0, t = o.length - 1, l; t >= 0; t--)
@@ -54,7 +54,7 @@ c([
 c([
   p
 ], e.prototype, "defaultSlottedNodes");
-const z = (o) => w(
+const z = (o) => x(
   "control",
   ["appearance-filled", o.checked],
   ["checked", o.checked],
@@ -81,7 +81,7 @@ const z = (o) => w(
 			<div class="switch">
 				<span class="checked-indicator"></span>
 			</div>
-			${x(
+			${w(
   (o) => o.label,
   v`<div class="label">${(o) => o.label}</div>`
 )}

package/tabs/definition.cjs

@@ -80,7 +80,7 @@ class Tabs extends vividElement.VividElement {
   orientationChanged() {
     this._registerTabsChange();
     if (this.$fastController.isConnected) {
-      fastElement.DOM.queueUpdate(() => this.#moveActiveIndicator(false));
+      fastElement.Updates.enqueue(() => this.#moveActiveIndicator(false));
     }
   }
   /**

package/tabs/definition.js

@@ -1,7 +1,7 @@
 import { VwcTabElement as Tab, tabDefinition } from '../tab/definition.js';
 import { tabPanelDefinition } from '../tab-panel/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { DOM, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
+import { Updates, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
 import { keyArrowUp, keyArrowDown, uniqueId, limit, keyEnd, keyHome, classNames } from '@microsoft/fast-web-utilities';
 import { a as keyArrowLeft, k as keyArrowRight } from '../unbundled/key-codes.js';
 
@@ -76,7 +76,7 @@ class Tabs extends VividElement {
   orientationChanged() {
     this._registerTabsChange();
     if (this.$fastController.isConnected) {
-      DOM.queueUpdate(() => this.#moveActiveIndicator(false));
+      Updates.enqueue(() => this.#moveActiveIndicator(false));
     }
   }
   /**

package/tabs/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),_=require("../bundled/class-names.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),z=':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';var C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.DOM.queueUpdate(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}connotationChanged(){this._registerTabsChange()}#c(){this.#b.dispatchEvent(new Event("scroll"))}#o;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#c()),this.#o=new ResizeObserver(()=>{this.#s(this.#t),this.#c()}),this.#o.observe(this.#b),this.#o.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#o.disconnect()}get#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
+"use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),_=require("../bundled/class-names.cjs"),z=':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';var C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.Updates.enqueue(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}connotationChanged(){this._registerTabsChange()}#c(){this.#b.dispatchEvent(new Event("scroll"))}#o;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#c()),this.#o=new ResizeObserver(()=>{this.#s(this.#t),this.#c()}),this.#o.observe(this.#b),this.#o.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#o.disconnect()}get#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
 	<template>
 		<div class="${L}">
 			<div class="tabs">
@@ -28,4 +28,4 @@
 			</div>
 		</div>
 	</template>
-`,D=o.defineVividComponent("tabs",n,R,[w.tabDefinition,k.tabPanelDefinition],{styles:z}),N=o.createRegisterFunction(D);N();
+`,N=o.defineVividComponent("tabs",n,R,[w.tabDefinition,k.tabPanelDefinition],{styles:z}),W=o.createRegisterFunction(N);W();