@vonage/vivid 5.2.0 → 5.4.0

package/simple-color-picker/index.cjs

@@ -1,31 +1,19 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),v=require("../bundled/definition9.cjs"),m=require("../bundled/definition2.cjs"),w=require("../bundled/anchored.cjs"),C=require("../bundled/form-associated.cjs"),b=require("../bundled/localized.cjs"),k=require("../bundled/form-element.cjs"),y=require("../bundled/index.cjs"),g=require("../bundled/class-names.cjs"),_=require("../bundled/repeat.cjs"),E=require("../bundled/when.cjs"),x=":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 $(n){if(!n)return null;const e=n.trim().replace(/^#/,"");return/^[0-9a-fA-F]{6}$/.test(e)?e.toLowerCase():null}function f(n){const e=$(n);if(!e)return 0;const r=parseInt(e.slice(0,2),16)/255,o=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,s=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4),i=o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4),c=t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4);return .2126*s+.7152*i+.0722*c}function S(n,e){const r=f(n),o=f(e),t=Math.max(r,o),s=Math.min(r,o);return(t+.05)/(s+.05)}function A(n,e){return e||(e=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(e).getPropertyValue(n).trim()}var P=Object.defineProperty,p=(n,e,r,o)=>{for(var t=void 0,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=i(e,r,t)||t);return t&&P(e,r,t),t};class h extends b.Localized(w.Anchored(k.FormElement(C.FormAssociated(a.VividElement)))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.placement="top-start",this.swatches=[],this.swatchesPerRow=7,this._canvasColor="",this.#s=()=>{this.open||a.DOM.queueUpdate(()=>this.open=!0)},this.#o=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||a.DOM.queueUpdate(()=>this.open=!0),e.preventDefault())},this.#r=e=>{const r=!this.contains(e.target),o=this._anchorEl?.contains(e.target);(r||o)&&(this.open=!1)},this.#n=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,o)=>{const t=this.swatchesPerRow,s=this.swatches.length,i=Math.floor(o/t),c=o%t,u=Math.ceil(s/t);switch(e.key){case"ArrowRight":return c<t-1&&o+1<s&&this.#e(o+1),!1;case"ArrowLeft":return c>0&&this.#e(o-1),!1;case"ArrowDown":return i<u-1&&o+t<s&&this.#e(o+t),!1;case"ArrowUp":return i>0&&this.#e(o-t),!1;case"PageDown":{const l=(u-1)*t,d=Math.min(l+c,s-1);return o!==d&&this.#e(d),!1}case"PageUp":{const l=Math.min(c,s-1);return o!==l&&this.#e(l),!1}case"Home":return e.ctrlKey?this.#e(0):this.#e(i*t),!1;case"End":if(e.ctrlKey)this.#e(s-1);else{const l=Math.min((i+1)*t-1,s-1);this.#e(l)}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}}}openChanged(){this.#t(),this._anchorEl&&this.#a(this._anchorEl),this.open&&(this._refreshCanvasColor(),requestAnimationFrame(()=>{const e=this.swatches.findIndex(o=>o.value===this.value),r=e>=0?e:0;this.#e(r)}))}connectedCallback(){super.connectedCallback(),this.#t(),this._refreshCanvasColor()}disconnectedCallback(){super.disconnectedCallback(),this.#t()}#t(){document.removeEventListener("click",this.#r),document.removeEventListener("keydown",this.#n),this.open&&this.isConnected&&(document.addEventListener("click",this.#r),document.addEventListener("keydown",this.#n))}_refreshCanvasColor(){this._canvasColor=A("--vvd-color-canvas",this)}_applyContrastClass(e,r=3){return!e||!this._canvasColor?!1:S(e,this._canvasColor)<r}_anchorElChanged(e,r){e&&this.#l(e),r&&this.#c(r)}#a(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#c(e){this.#a(e),e.addEventListener("click",this.#s,!0),e.addEventListener("keydown",this.#o),e.setAttribute("aria-haspopup","true")}#l(e){e.removeEventListener("click",this.#s,!0),e.removeEventListener("keydown",this.#o),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#s;#o;#r;#n;#e(e){if(e<0||e>=this.swatches.length)return;this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[e]?.focus()}#i(){a.DOM.queueUpdate(()=>this._anchorEl?.focus())}}p([a.attr({mode:"boolean"})],h.prototype,"open");p([a.attr({mode:"fromView"})],h.prototype,"placement");p([a.observable],h.prototype,"swatches");p([a.attr({attribute:"swatches-per-row",mode:"fromView",converter:a.nullableNumberConverter})],h.prototype,"swatchesPerRow");const q=n=>g.classNames("control"),L=n=>{const e=n.tagFor(v.Popup),r=n.tagFor(m.Icon),o=w.anchorSlotTemplateFactory();return a.html`
-		${o}
+"use strict";const s=require("../bundled/vivid-element.cjs"),l=require("../bundled/definition9.cjs"),p=require("../bundled/definition2.cjs"),h=require("../bundled/anchored.cjs"),u=require("../bundled/base-color-picker.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/repeat.cjs"),f=require("../bundled/class-names.cjs"),w=".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 g=Object.defineProperty,d=(r,e,o,n)=>{for(var t=void 0,i=r.length-1,c;i>=0;i--)(c=r[i])&&(t=c(e,o,t)||t);return t&&g(e,o,t),t};class a extends h.Anchored(u.BaseColorPicker(s.VividElement)){constructor(){super(...arguments),this.placement="top-start",this.swatchesPerRow=7,this.#e=()=>{this.open||s.Updates.enqueue(()=>this.open=!0)},this.#t=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||s.Updates.enqueue(()=>this.open=!0),e.preventDefault())},this._closeOnClickOutside=e=>{const o=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(o||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key==="Escape"&&(this.open=!1)}}openChanged(){this._updateListeners(),this._anchorEl&&this.#o(this._anchorEl),this.open&&(this._refreshCanvasColor(),requestAnimationFrame(()=>{const e=this.swatches.findIndex(n=>n.value===this.value),o=e>=0?e:0;this._focusSwatchByIndex(o)}))}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_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))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,o){e&&this.#r(e),o&&this.#s(o)}#o(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#s(e){this.#o(e),e.addEventListener("click",this.#e,!0),e.addEventListener("keydown",this.#t),e.setAttribute("aria-haspopup","true")}#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}d([s.attr({mode:"fromView"})],a.prototype,"placement");d([s.attr({attribute:"swatches-per-row",mode:"fromView",converter:s.nullableNumberConverter})],a.prototype,"swatchesPerRow");const _=r=>f.classNames("control"),k=r=>{const e=r.tagFor(l.Popup),o=r.tagFor(p.Icon),n=h.anchorSlotTemplateFactory();return s.html`
+		${n}
 		<${e}
-			class="${q}"
+			class="${_}"
 			:anchor="${t=>t._anchorEl}"
 			:open="${t=>t.open}"
 			placement="${t=>t.placement}"
 			offset="4"
-			@keydown="${(t,{event:s})=>!(t.open&&y.handleEscapeKeyAndStopPropogation(s))}"
+			@keydown="${(t,{event:i})=>!(t.open&&v.handleEscapeKeyAndStopPropogation(i))}"
 		>
 			<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}">
-				${_.repeat(t=>t.swatches,a.html`
-						<button
-							class="swatch ${(t,s)=>g.classNames(s.parent.value===t.value?"selected":"",s.parent._applyContrastClass(t.value)?"contrast":"")}"
-							role="gridcell"
-							style="--swatch-color: ${t=>t.value};"
-							tabindex="${(t,s)=>s.index===0?"0":"-1"}"
-							aria-label="${(t,s)=>s.parent.locale.simpleColorPicker.colorSwatchLabel(t.value,t.label,s.parent.value===t.value)}"
-							@click="${(t,s)=>s.parent._handleSwatchSelection(t)}"
-							@keydown="${(t,s)=>s.parent._handleSwatchKeydown(s.event,t,s.index)}"
-						>
-							${E.when((t,s)=>s.parent.value===t.value,a.html`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`)}
-						</button>
-					`,{positioning:!0})}
+				${m.repeat(t=>t.swatches,t=>t._renderColorSwatch(o),{positioning:!0})}
 			</div>
 		</${e}>
-	`},z=a.defineVividComponent("simple-color-picker",h,L,[v.popupDefinition,m.iconDefinition],{styles:x}),M=a.createRegisterFunction(z);M();
+	`},x=s.defineVividComponent("simple-color-picker",a,k,[l.popupDefinition,p.iconDefinition],{styles:w}),b=s.createRegisterFunction(x);b();

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/slider/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');

package/slider/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, nullableNumberConverter, volatile } from '@microsoft/fast-element';
 import { Direction, Orientation, keyHome, keyEnd, keyArrowDown, keyArrowUp, limit } from '@microsoft/fast-web-utilities';

package/split-button/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html, ref } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Fri, 12 Sep 2025 16:11:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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:38 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 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/tab/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, html } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';