@vonage/vivid 5.2.0 → 5.3.0

package/number-field/index.js

@@ -1,25 +1,25 @@
 import { B as $, b as k } from "../bundled/definition3.js";
 import { d as z } from "../bundled/definition14.js";
-import { V as C, v as D } from "../bundled/definition12.js";
+import { V as C, v as D } from "../bundled/definition13.js";
 import { i as V } from "../bundled/definition2.js";
 import { W as A, f as S } from "../bundled/mixins.js";
-import { V as F, D as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
-import { c as T } from "../bundled/definition11.js";
-import { D as I, d as L } from "../bundled/delegates-aria.js";
-import { F as O } from "../bundled/form-associated.js";
-import { W as U } from "../bundled/with-contextual-help.js";
+import { V as F, U as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
+import { c as T } from "../bundled/definition12.js";
+import { D as U, d as I } from "../bundled/delegates-aria.js";
+import { F as L } from "../bundled/form-associated.js";
+import { W as O } from "../bundled/with-contextual-help.js";
 import { W } from "../bundled/with-error-text.js";
 import { W as E } from "../bundled/with-success-text.js";
 import { F as H } from "../bundled/form-element.js";
 import { b as R } from "../bundled/affix.js";
-import { L as M } from "../bundled/localized.js";
-import { b as q, c as K } from "../bundled/key-codes.js";
+import { L as q } from "../bundled/localized.js";
+import { b as M, c as K } from "../bundled/key-codes.js";
 import { b } from "../bundled/enums.js";
 import { D as j } from "../bundled/divider.js";
-import { c as Y } from "../bundled/class-names.js";
-import { w as G } from "../bundled/when.js";
-import { s as J } from "../bundled/slotted.js";
-import { r as Q } from "../bundled/ref.js";
+import { w as Y } from "../bundled/when.js";
+import { s as G } from "../bundled/slotted.js";
+import { r as J } from "../bundled/ref.js";
+import { c as Q } from "../bundled/class-names.js";
 const X = ':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.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)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_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: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_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: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--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 not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within: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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';
 var Z = Object.defineProperty, n = (a, t, e, o) => {
   for (var l = void 0, s = a.length - 1, p; s >= 0; s--)
@@ -45,12 +45,12 @@ const g = (a) => {
     decimalSeparator: a
   };
 }, ee = g(/\./), te = g(/,/), f = /^-?((\d*\.\d+)|(\d+))$/;
-class r extends U(
+class r extends O(
   A(
     W(
       E(
         H(
-          R(M(I(O(F))))
+          R(q(U(L(F))))
         )
       )
     )
@@ -144,7 +144,7 @@ class r extends U(
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.queueUpdate(() => {
+    super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.enqueue(() => {
       this.focus();
     });
   }
@@ -185,7 +185,7 @@ class r extends U(
     switch (t.key) {
       case K:
         return this.stepUp(), !1;
-      case q:
+      case M:
         return this.stepDown(), !1;
     }
     return !0;
@@ -259,7 +259,7 @@ const ae = ({
   label: y,
   successText: w,
   scale: v
-}) => Y(
+}) => Q(
   ["error", !!a],
   ["disabled", t],
   ["has-value", !!e],
@@ -310,8 +310,8 @@ const ne = (a) => {
   const t = a.tagFor(C);
   return u`
 		<div class="base ${ae}">
-			${G((e) => e.label, oe())}
-			<slot name="contextual-help" ${J("_contextualHelpSlottedContent")}></slot>
+			${Y((e) => e.label, oe())}
+			<slot name="contextual-help" ${G("_contextualHelpSlottedContent")}></slot>
 			<div class="fieldset">
 				<div class="wrapper">
 					<input
@@ -335,8 +335,8 @@ const ne = (a) => {
 						:value="${(e) => e._presentationValue}"
 						type="text"
 						aria-describedby="${(e) => e._feedbackDescribedBy}"
-						${L()}
-						${Q("control")}
+						${I()}
+						${J("control")}
 					/>
 				</div>
 				${() => re(a)}

package/option/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition10.cjs");i.registerOption();
+"use strict";const i=require("../bundled/definition11.cjs");i.registerOption();

package/option/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition10.js";
+import { r } from "../bundled/definition11.js";
 r();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@microsoft/fast-element": "^1.14.0",
+    "@microsoft/fast-element": "^2.7.0",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^3.0.0",
     "prosemirror-commands": "^1.7.1",
@@ -69,8 +69,7 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.40.1",
     "ramda": "^0.30.0",
-    "uuid": "^11.1.0",
-    "video.js": "^8.23.3"
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@repo/cem-analyzer-plugins": "*",
@@ -81,6 +80,7 @@
     "@repo/stylelint-config": "*",
     "@repo/styles": "*",
     "@repo/typescript-config": "*",
-    "@repo/vitest-config": "*"
+    "@repo/vitest-config": "*",
+    "video.js": "^8.23.3"
   }
 }

package/pagination/definition.cjs

@@ -207,6 +207,7 @@ const getPaginationButtonWidth = (value) => {
 };
 const PaginationTemplate = (context) => {
   const buttonTag = context.tagFor(button_definition.Button);
+  const buttonTagName = context.tagFor(button_definition.Button, true);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
   return fastElement.html`
 	<div class="${getClasses}">
@@ -221,7 +222,7 @@ const PaginationTemplate = (context) => {
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${fastElement.children({
     property: "paginationButtons",
-    filter: fastElement.elements(buttonTag)
+    filter: fastElement.elements(buttonTagName)
   })}>
 			${fastElement.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>

package/pagination/definition.js

@@ -203,6 +203,7 @@ const getPaginationButtonWidth = (value) => {
 };
 const PaginationTemplate = (context) => {
   const buttonTag = context.tagFor(Button);
+  const buttonTagName = context.tagFor(Button, true);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
   return html`
 	<div class="${getClasses}">
@@ -217,7 +218,7 @@ const PaginationTemplate = (context) => {
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
     property: "paginationButtons",
-    filter: elements(buttonTag)
+    filter: elements(buttonTagName)
   })}>
 			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>

package/pagination/index.cjs

@@ -1,10 +1,10 @@
-"use strict";const b=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),I=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),m=require("../bundled/slotted.cjs"),z=require("../bundled/class-names.cjs"),v=require("../bundled/ref.cjs"),y=require("../bundled/children.cjs"),w=require("../bundled/repeat.cjs"),g=require("../bundled/when.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(o=(n?d(e,t,o):d(o))||o);return n&&o&&B(e,t,o),o};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends I.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:n}=e.detail,o=this.paginationButtons.findIndex($=>Number($.label)===t),c=n?-1:1,d=o+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[o+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(n=>{n.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>z.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${g.when(e=>e!=="...",s.html`
+"use strict";const h=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),g=require("../bundled/ref.cjs"),I=require("../bundled/children.cjs"),z=require("../bundled/repeat.cjs"),y=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&B(e,t,n),n};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends m.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:o}=e.detail,n=this.paginationButtons.findIndex($=>Number($.label)===t),c=o?-1:1,d=n+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[n+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,o)=>{if(t===0)return 1;if(t===o.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(o=>{o.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>w.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${b.when(e=>e!=="...",s.html`
 		<${i} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${C}"
 			size="${(e,{parent:t})=>u(t)}"
-			shape="${(e,{parent:t})=>h(t)}"
-			style="inline-size: ${e=>A(e)};"
+			shape="${(e,{parent:t})=>v(t)}"
+			style="inline-size: ${e=>N(e)};"
 			tabindex="0"
 			aria-label="${(e,{parent:t})=>t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e,{parent:t})=>t.selectedIndex===Number(e)-1}"
@@ -12,32 +12,32 @@
 			@keydown="${E}">
 		</${i}>
 	`)}
-${g.when(e=>e==="...",s.html` <div
+${b.when(e=>e==="...",s.html` <div
 		class="dots size-${(e,{parent:t})=>u(t)}"
 		aria-hidden="true"
 	>
 		...
-	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,h=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,A=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,N=i=>{const e=i.tagFor(b.Button),t=D(e);return s.html`
+	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,v=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,N=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,A=i=>{const e=i.tagFor(h.Button),t=i.tagFor(h.Button,!0),o=D(e);return s.html`
 	<div class="${q}">
-		<${e} class="prev-button" ${v.ref("prevButton")}
+		<${e} class="prev-button" ${g.ref("prevButton")}
 			label="${n=>n.navIcons?null:"Previous"}"
 			icon="${n=>n.navIcons?"chevron-left-line":null}"
 			size="${u}"
-			shape="${h}"
+			shape="${v}"
 			?disabled="${n=>n.total===0||n.selectedIndex===0}"
 			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex--}"
 			aria-label="${n=>n.locale.pagination.previousPageLabel}"
 		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${y.children({property:"paginationButtons",filter:m.elements(e)})}>
-			${w.repeat(n=>n.pagesList,t,{positioning:!0})}
+		<div id="buttons-wrapper" class="buttons-wrapper" ${I.children({property:"paginationButtons",filter:y.elements(t)})}>
+			${z.repeat(n=>n.pagesList,o,{positioning:!0})}
 		</div>
-		<${e} class="next-button" ${v.ref("nextButton")}
+		<${e} class="next-button" ${g.ref("nextButton")}
 			label="${n=>n.navIcons?null:"Next"}"
 			icon="${n=>n.navIcons?"chevron-right-line":null}"
 			size="${u}"
-			shape="${h}"
+			shape="${v}"
 			?disabled="${n=>n.total===0||n.selectedIndex===n.total-1}"
 			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex++}"
 			aria-label="${n=>n.locale.pagination.nextPageLabel}"
 		></${e}>
-</div>`},O=s.defineVividComponent("pagination",a,N,[b.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();
+</div>`},O=s.defineVividComponent("pagination",a,A,[h.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();

package/pagination/index.js

@@ -1,42 +1,42 @@
-import { B as y, b as z } from "../bundled/definition3.js";
+import { B as b, b as z } from "../bundled/definition3.js";
 import { V as w, a as c, o as g, v as B, h as p, c as S, d as _ } from "../bundled/vivid-element.js";
 import { L as P } from "../bundled/localized.js";
 import { a as u, b as v } from "../bundled/enums.js";
-import { e as L } from "../bundled/slotted.js";
-import { c as C } from "../bundled/class-names.js";
-import { r as b } from "../bundled/ref.js";
-import { c as E } from "../bundled/children.js";
-import { r as D } from "../bundled/repeat.js";
-import { w as m } from "../bundled/when.js";
+import { r as m } from "../bundled/ref.js";
+import { c as L } from "../bundled/children.js";
+import { r as C } from "../bundled/repeat.js";
+import { e as E } from "../bundled/slotted.js";
+import { w as x } from "../bundled/when.js";
+import { c as D } from "../bundled/class-names.js";
 const A = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
-var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (s, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
-    (l = s[r]) && (i = (n ? l(e, t, i) : l(i)) || i);
-  return n && i && N(e, t, i), i;
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
+    (l = s[r]) && (n = (i ? l(e, t, n) : l(n)) || n);
+  return i && n && N(e, t, n), n;
 };
-const d = 7, x = {
+const d = 7, $ = {
   fromView: (s) => parseInt(s, 10),
   toView: (s) => s.toString()
 };
-class o extends P(w) {
+class a extends P(w) {
   constructor() {
     super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
-      const { value: t, shiftKey: n } = e.detail, i = this.paginationButtons.findIndex(
-        (I) => Number(I.label) === t
-      ), r = n ? -1 : 1, l = i + r;
+      const { value: t, shiftKey: i } = e.detail, n = this.paginationButtons.findIndex(
+        (y) => Number(y.label) === t
+      ), r = i ? -1 : 1, l = n + r;
       if (l < 0)
         return this.prevButton.focus();
       if (l > this.paginationButtons.length - 1)
         return this.nextButton.focus();
-      this.paginationButtons && this.paginationButtons[i + r].focus();
+      this.paginationButtons && this.paginationButtons[n + r].focus();
     });
   }
   get pagesList() {
     return new Array(
       this.total < d ? this.total : d
-    ).fill(0).map((e, t, n) => {
+    ).fill(0).map((e, t, i) => {
       if (t === 0) return 1;
-      if (t === n.length - 1) return this.total;
+      if (t === i.length - 1) return this.total;
       if (this.selectedIndex !== void 0 && this.total > d) {
         if (this.selectedIndex < 4 && t === d - 2)
           return "...";
@@ -68,8 +68,8 @@ class o extends P(w) {
     }), this.#t());
   }
   paginationButtonsChanged(e, t) {
-    t.forEach((n) => {
-      n.shadowRoot.querySelector("button").setAttribute("part", "button");
+    t.forEach((i) => {
+      i.shadowRoot.querySelector("button").setAttribute("part", "button");
     });
   }
   get #e() {
@@ -81,54 +81,54 @@ class o extends P(w) {
     });
   }
 }
-a([
+o([
   c
-], o.prototype, "size", 2);
-a([
+], a.prototype, "size", 2);
+o([
   c
-], o.prototype, "shape", 2);
-a([
+], a.prototype, "shape", 2);
+o([
   g
-], o.prototype, "paginationButtons", 2);
-a([
+], a.prototype, "paginationButtons", 2);
+o([
   g
-], o.prototype, "prevButton", 2);
-a([
+], a.prototype, "prevButton", 2);
+o([
   g
-], o.prototype, "nextButton", 2);
-a([
+], a.prototype, "nextButton", 2);
+o([
   c({ attribute: "nav-icons", mode: "boolean" })
-], o.prototype, "navIcons", 2);
-a([
+], a.prototype, "navIcons", 2);
+o([
   B
-], o.prototype, "pagesList", 1);
-a([
-  c({ mode: "reflect", converter: x })
-], o.prototype, "total", 2);
-a([
+], a.prototype, "pagesList", 1);
+o([
+  c({ mode: "reflect", converter: $ })
+], a.prototype, "total", 2);
+o([
   c({
     mode: "reflect",
-    converter: x,
+    converter: $,
     attribute: "selected-index"
   })
-], o.prototype, "selectedIndex", 2);
+], a.prototype, "selectedIndex", 2);
 const R = [
   u.SuperCondensed,
   u.Condensed,
   u.Normal
-], T = [v.Rounded, v.Pill], $ = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
-  (e.key === " " || e.key === "Enter") && $(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
+], T = [v.Rounded, v.Pill], I = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
+  (e.key === " " || e.key === "Enter") && I(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
     new CustomEvent("tabpressed", {
       detail: { value: s, shiftKey: e.shiftKey },
       bubbles: !0,
       composed: !0
     })
   );
-}, M = (s) => C("control");
+}, M = (s) => D("control");
 function V(s, { parent: e }) {
   return e.selectedIndex === Number(s) - 1 ? "filled" : "ghost";
 }
-const j = (s) => p` ${m(
+const j = (s) => p` ${x(
   (e) => e !== "...",
   p`
 		<${s} class="vwc-pagination-button"
@@ -140,12 +140,12 @@ const j = (s) => p` ${m(
 			tabindex="0"
 			aria-label="${(e, { parent: t }) => t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e, { parent: t }) => t.selectedIndex === Number(e) - 1}"
-			@click="${$}"
+			@click="${I}"
 			@keydown="${K}">
 		</${s}>
 	`
 )}
-${m(
+${x(
   (e) => e === "...",
   p` <div
 		class="dots size-${(e, { parent: t }) => h(t)}"
@@ -153,11 +153,11 @@ ${m(
 	>
 		...
 	</div>`
-)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, W = (s) => {
-  const e = s.tagFor(y), t = j(e);
+)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, F = (s) => {
+  const e = s.tagFor(b), t = s.tagFor(b, !0), i = j(e);
   return p`
 	<div class="${M}">
-		<${e} class="prev-button" ${b("prevButton")}
+		<${e} class="prev-button" ${m("prevButton")}
 			label="${(n) => n.navIcons ? null : "Previous"}"
 			icon="${(n) => n.navIcons ? "chevron-left-line" : null}"
 			size="${h}"
@@ -166,13 +166,13 @@ ${m(
 			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex--}"
 			aria-label="${(n) => n.locale.pagination.previousPageLabel}"
 		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${E({
+		<div id="buttons-wrapper" class="buttons-wrapper" ${L({
     property: "paginationButtons",
-    filter: L(e)
+    filter: E(t)
   })}>
-			${D((n) => n.pagesList, t, { positioning: !0 })}
+			${C((n) => n.pagesList, i, { positioning: !0 })}
 		</div>
-		<${e} class="next-button" ${b("nextButton")}
+		<${e} class="next-button" ${m("nextButton")}
 			label="${(n) => n.navIcons ? null : "Next"}"
 			icon="${(n) => n.navIcons ? "chevron-right-line" : null}"
 			size="${h}"
@@ -182,13 +182,13 @@ ${m(
 			aria-label="${(n) => n.locale.pagination.nextPageLabel}"
 		></${e}>
 </div>`;
-}, q = _(
+}, W = _(
   "pagination",
-  o,
-  W,
+  a,
+  F,
   [z],
   {
     styles: A
   }
-), F = S(q);
-F();
+), q = S(W);
+q();

package/progress/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/class-names.cjs"),p=require("../bundled/when.cjs"),u=".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";var f=Object.defineProperty,s=(o,n,t,c)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(n,t,r)||r);return r&&f(n,t,r),r};class e extends v.DelegatesAria(d.BaseProgress){constructor(){super(...arguments),this.reverse=!1}}s([a.attr()],e.prototype,"shape");s([a.attr()],e.prototype,"connotation");s([a.attr({mode:"boolean"})],e.prototype,"reverse");const g=({connotation:o,shape:n,reverse:t,paused:c})=>m.classNames("base",[`connotation-${o}`,!!o],[`shape-${n}`,!!n],["reverse",!!t],["paused",!!c]);function b(){return a.html` <span
+"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),m=require("../bundled/class-names.cjs"),u=".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";var f=Object.defineProperty,s=(o,n,t,c)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(n,t,r)||r);return r&&f(n,t,r),r};class e extends v.DelegatesAria(d.BaseProgress){constructor(){super(...arguments),this.reverse=!1}}s([a.attr()],e.prototype,"shape");s([a.attr()],e.prototype,"connotation");s([a.attr({mode:"boolean"})],e.prototype,"reverse");const g=({connotation:o,shape:n,reverse:t,paused:c})=>m.classNames("base",[`connotation-${o}`,!!o],[`shape-${n}`,!!n],["reverse",!!t],["paused",!!c]);function b(){return a.html` <span
 		class="determinate"
 		style="width: ${o=>o.percentComplete}%"
 	></span>`}function y(){return a.html` <span class="indeterminate" name="indeterminate">

package/progress/index.js

@@ -1,8 +1,8 @@
 import { a as i, h as s, c as d, d as m } from "../bundled/vivid-element.js";
 import { B as f } from "../bundled/base-progress.js";
 import { D as u, d as g } from "../bundled/delegates-aria.js";
-import { c as b } from "../bundled/class-names.js";
 import { w as v } from "../bundled/when.js";
+import { c as b } from "../bundled/class-names.js";
 const y = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 var _ = Object.defineProperty, c = (o, r, n, l) => {
   for (var a = void 0, e = o.length - 1, p; e >= 0; e--)

package/radio/definition.cjs

@@ -106,14 +106,14 @@ class Radio extends withErrorText.WithErrorText(
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    fastElement.DOM.queueUpdate(this.validate);
+    fastElement.Updates.enqueue(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    fastElement.DOM.queueUpdate(this.validate);
+    fastElement.Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -195,18 +195,18 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => fastWebUtil
   ["disabled", Boolean(disabled)]
 );
 const RadioTemplate = fastElement.html`<template
-	aria-checked="${(x) => x.checked}"
-	aria-disabled="${(x) => x.disabled}"
-	aria-required="${(x) => x.required}"
-	@keypress="${(x, c) => x.keypressHandler(c.event)}"
-	@click="${(x, c) => x.clickHandler(c.event)}"
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
 	<div class="${getClasses}">
 		<div class="control"></div>
 		${fastElement.when(
-  (x) => x.label,
-  fastElement.html`<label class="label">${(x) => x.label}</label>`
+  (x) => x?.label,
+  fastElement.html`<label class="label">${(x) => x?.label}</label>`
 )}
 	</div>
 </template>`;

package/radio/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { DOM, attr, observable, when, html } from '@microsoft/fast-element';
+import { Updates, attr, observable, when, html } from '@microsoft/fast-element';
 import { keySpace, classNames } from '@microsoft/fast-web-utilities';
 import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
@@ -102,14 +102,14 @@ class Radio extends WithErrorText(
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    DOM.queueUpdate(this.validate);
+    Updates.enqueue(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(this.validate);
+    Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -191,18 +191,18 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   ["disabled", Boolean(disabled)]
 );
 const RadioTemplate = html`<template
-	aria-checked="${(x) => x.checked}"
-	aria-disabled="${(x) => x.disabled}"
-	aria-required="${(x) => x.required}"
-	@keypress="${(x, c) => x.keypressHandler(c.event)}"
-	@click="${(x, c) => x.clickHandler(c.event)}"
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
 	<div class="${getClasses}">
 		<div class="control"></div>
 		${when(
-  (x) => x.label,
-  html`<label class="label">${(x) => x.label}</label>`
+  (x) => x?.label,
+  html`<label class="label">${(x) => x?.label}</label>`
 )}
 	</div>
 </template>`;