@vonage/vivid 5.4.0 → 5.6.0

package/simple-color-picker/index.js

@@ -1,40 +1,45 @@
 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;
+import { P as f, p as g } from "../bundled/definition9.js";
+import { I as w, i as _ } from "../bundled/definition2.js";
+import { T as k, t as b } from "../bundled/definition11.js";
+import { A as x, a as C } from "../bundled/anchored.js";
+import { B as E } from "../bundled/base-color-picker.js";
+import { h as y } from "../bundled/index.js";
+import { r as L } from "../bundled/repeat.js";
+import { c as P } from "../bundled/class-names.js";
+const A = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;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:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);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 z = Object.defineProperty, p = (r, e, o, i) => {
+  for (var s = void 0, t = r.length - 1, n; t >= 0; t--)
+    (n = r[t]) && (s = n(e, o, s) || s);
+  return s && z(e, o, s), s;
 };
-class i extends k(b(h)) {
+class a extends x(E(h)) {
   constructor() {
     super(...arguments), this.placement = "top-start", this.swatchesPerRow = 7, this.#e = () => {
       this.open || c.enqueue(() => this.open = !0);
     }, this.#t = (e) => {
+      /* v8 ignore next -- @preserve */
       (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);
+      const o = !this.contains(e.target), i = this._anchorEl?.contains(e.target);
+      /* v8 ignore else -- @preserve */
+      (o || i) && (this.open = !1);
     }, this._closeOnEscape = (e) => {
+      /* v8 ignore else -- @preserve */
       e.key === "Escape" && (this.open = !1);
     };
   }
   /**
    * @internal
    */
-  openChanged() {
-    this._updateListeners(), this._anchorEl && this.#o(this._anchorEl), this.open && (this._refreshCanvasColor(), requestAnimationFrame(() => {
-      const e = this.swatches.findIndex(
-        (r) => r.value === this.value
-      ), o = e >= 0 ? e : 0;
-      this._focusSwatchByIndex(o);
-    }));
+  openChanged(e, o) {
+    this._updateListeners(), this._anchorEl && this.#o(this._anchorEl), o && this.isConnected && requestAnimationFrame(() => {
+      this._refreshCanvasColor();
+      const i = this.swatches.findIndex(
+        (t) => t.value === this.value
+      ), s = i >= 0 ? i : 0;
+      this._focusSwatchByIndex(s);
+    });
   }
   /**
    * @internal
@@ -89,48 +94,48 @@ class i extends k(b(h)) {
 }
 p([
   l({ mode: "fromView" })
-], i.prototype, "placement");
+], a.prototype, "placement");
 p([
   l({
     attribute: "swatches-per-row",
     mode: "fromView",
     converter: d
   })
-], i.prototype, "swatchesPerRow");
-const A = (s) => y("control"), z = (s) => {
-  const e = s.tagFor(f), o = s.tagFor(g), r = x();
+], a.prototype, "swatchesPerRow");
+const $ = (r) => P("control"), O = (r) => {
+  const e = r.tagFor(f), o = r.tagFor(w), i = r.tagFor(k), s = C();
   return u`
-		${r}
+		${s}
 		<${e}
-			class="${A}"
+			class="${$}"
 			:anchor="${(t) => t._anchorEl}"
 			:open="${(t) => t.open}"
 			placement="${(t) => t.placement}"
 			offset="4"
-			@keydown="${(t, { event: n }) => !(t.open && C(n))}"
+			@keydown="${(t, { event: n }) => !(t.open && y(n))}"
 		>
 			<div class="palette" role="grid" 
 				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}">
-				${E(
+				${L(
     (t) => t.swatches,
-    (t) => t._renderColorSwatch(o),
+    (t) => t._renderColorSwatch(o, i),
     { positioning: !0 }
   )}
 			</div>
 		</${e}>
 	`;
-}, $ = v(
+}, S = v(
   "simple-color-picker",
-  i,
-  z,
-  [w, _],
+  a,
+  O,
+  [g, _, b],
   {
-    styles: L
+    styles: A
   }
-), O = m(
-  $
+), R = m(
+  S
 );
-O();
+R();

package/slider/definition.cjs

@@ -69,7 +69,8 @@ class Slider extends localized.Localized(
       } else if (e.key === fastWebUtilities.keyEnd) {
         e.preventDefault();
         this.value = `${this.max}`;
-      } else if (!e.shiftKey) {
+      } else {
+        if (e.shiftKey) return;
         switch (e.key) {
           case keyCodes.keyArrowRight:
           case fastWebUtilities.keyArrowUp:
@@ -224,6 +225,7 @@ class Slider extends localized.Localized(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -260,6 +262,7 @@ class Slider extends localized.Localized(
    * @internal
    */
   minChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.min = `${this.min}`;
     }
@@ -270,6 +273,7 @@ class Slider extends localized.Localized(
    * @internal
    */
   maxChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.max = `${this.max}`;
     }
@@ -280,6 +284,7 @@ class Slider extends localized.Localized(
    * @internal
    */
   stepChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.step = `${this.step}`;
     }
@@ -363,6 +368,7 @@ class Slider extends localized.Localized(
     return `${this.#roundToNearestStep((this.max + this.min) / 2)}`;
   }
   setupDefaultValue() {
+    /* v8 ignore else -- @preserve */
     if (typeof this.value === "string") {
       if (this.value.length === 0) {
         this.initialValue = this.midpoint;

package/slider/definition.js

@@ -65,7 +65,8 @@ class Slider extends Localized(
       } else if (e.key === keyEnd) {
         e.preventDefault();
         this.value = `${this.max}`;
-      } else if (!e.shiftKey) {
+      } else {
+        if (e.shiftKey) return;
         switch (e.key) {
           case keyArrowRight:
           case keyArrowUp:
@@ -220,6 +221,7 @@ class Slider extends Localized(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -256,6 +258,7 @@ class Slider extends Localized(
    * @internal
    */
   minChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.min = `${this.min}`;
     }
@@ -266,6 +269,7 @@ class Slider extends Localized(
    * @internal
    */
   maxChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.max = `${this.max}`;
     }
@@ -276,6 +280,7 @@ class Slider extends Localized(
    * @internal
    */
   stepChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.step = `${this.step}`;
     }
@@ -359,6 +364,7 @@ class Slider extends Localized(
     return `${this.#roundToNearestStep((this.max + this.min) / 2)}`;
   }
   setupDefaultValue() {
+    /* v8 ignore else -- @preserve */
     if (typeof this.value === "string") {
       if (this.value.length === 0) {
         this.initialValue = this.midpoint;

package/styles/core/all.css

@@ -1,6 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 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 Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Oct 2025 11:07:10 GMT
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/switch/definition.cjs

@@ -59,6 +59,7 @@ class Switch extends delegatesAria.DelegatesAria(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }

package/switch/definition.js

@@ -55,6 +55,7 @@ class Switch extends DelegatesAria(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }

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/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`
+"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(){/* v8 ignore if -- @preserve */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}"

package/switch/index.js

@@ -26,6 +26,7 @@ class e extends m(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly), this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
   }
   /**

package/tabs/definition.cjs

@@ -193,6 +193,7 @@ class Tabs extends vividElement.VividElement {
     for (const [index, tab] of this._pairedTabs.entries()) {
       const panel = this.tabpanels[index];
       const isActiveTab = tab.id === this.activeid;
+      /* v8 ignore else -- @preserve */
       if (tab instanceof tab_definition.VwcTabElement) {
         tab.active = isActiveTab;
       }
@@ -241,6 +242,7 @@ class Tabs extends vividElement.VividElement {
    * @internal
    */
   _onActiveIndicatorTransitionend(event) {
+    /* v8 ignore else -- @preserve */
     if (event.propertyName === "transform") {
       this.#isTransitioningTransform = false;
     }

package/tabs/definition.js

@@ -189,6 +189,7 @@ class Tabs extends VividElement {
     for (const [index, tab] of this._pairedTabs.entries()) {
       const panel = this.tabpanels[index];
       const isActiveTab = tab.id === this.activeid;
+      /* v8 ignore else -- @preserve */
       if (tab instanceof Tab) {
         tab.active = isActiveTab;
       }
@@ -237,6 +238,7 @@ class Tabs extends VividElement {
    * @internal
    */
   _onActiveIndicatorTransitionend(event) {
+    /* v8 ignore else -- @preserve */
     if (event.propertyName === "transform") {
       this.#isTransitioningTransform = 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"),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`
+"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;/* v8 ignore else -- @preserve */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){/* v8 ignore else -- @preserve */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">

package/tabs/index.js

@@ -120,6 +120,7 @@ class r extends _ {
   #v() {
     for (const [t, a] of this._pairedTabs.entries()) {
       const e = this.tabpanels[t], s = a.id === this.activeid;
+      /* v8 ignore else -- @preserve */
       a instanceof x && (a.active = s), a.setAttribute("aria-controls", e.id), a.setAttribute("tabindex", s ? "0" : "-1"), s && this.connotation ? a.setAttribute("connotation", this.connotation) : a.removeAttribute("connotation"), a.classList.toggle(
         "vertical",
         this.orientation === l.vertical
@@ -152,6 +153,7 @@ class r extends _ {
    * @internal
    */
   _onActiveIndicatorTransitionend(t) {
+    /* v8 ignore else -- @preserve */
     t.propertyName === "transform" && (this.#t = !1);
   }
   #p() {

package/tag/definition.cjs

@@ -43,10 +43,12 @@ class Tag extends localized.Localized(delegatesAria.DelegatesAria(affix.AffixIco
   }
   #select;
   handleKeydown(e) {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
       this.#select();
     }
     if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
       this.remove();
     }
     return true;
@@ -80,7 +82,7 @@ __decorateClass([
   fastElement.attr({ mode: "boolean" })
 ], Tag.prototype, "selected");
 
-const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--focus-stroke-gap-color: transparent;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))}";
+const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--focus-stroke-gap-color: transparent;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))}";
 
 const getClasses = ({
   connotation,
@@ -113,17 +115,7 @@ function renderDismissButton(iconTag) {
 const tagTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html` <span
-		class="${getClasses}"
-		${delegatesAria.delegateAria({
-    role: "option",
-    ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.selected && x.selectable
-  })}
-		tabindex="${(x) => x.disabled || x.removable ? null : 0}"
-		@keydown="${(x, c) => x.handleKeydown(c.event)}"
-		@click="${(x) => x.handleClick()}"
-	>
+  const content = fastElement.html`
 		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 		${fastElement.when(
     (x) => x.label,
@@ -134,7 +126,35 @@ const tagTemplate = (context) => {
     (x) => x.selectable && x.selected,
     fastElement.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
   )}
-	</span>`;
+	`;
+  return fastElement.html`
+		${fastElement.when(
+    (x) => x.selectable,
+    fastElement.html`<button
+				class="${getClasses}"
+				${delegatesAria.delegateAria({
+      ariaPressed: (x) => x.selected
+    })}
+				?disabled="${(x) => x.disabled}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</button>`
+  )}
+		${fastElement.when(
+    (x) => !x.selectable,
+    fastElement.html`<span
+				class="${getClasses}"
+				${delegatesAria.delegateAria()}
+				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</span>`
+  )}
+	`;
 };
 
 const tagDefinition = vividElement.defineVividComponent(