@vonage/vivid 5.24.0 → 5.27.0

package/number-field/index.js

@@ -8,29 +8,31 @@ import { i as m } from "../bundled/enums.js";
 import { t as h } from "../bundled/decorate.js";
 import { t as g } from "../bundled/class-names.js";
 import { i as _, t as v } from "../bundled/key-codes.js";
-import { t as y } from "../bundled/definition3.js";
+import { t as y } from "../bundled/definition2.js";
 import { t as b } from "../bundled/affix.js";
 import { n as x, t as S } from "../bundled/delegates-aria.js";
-import { n as C } from "../bundled/form-associated.js";
-import { i as w, t as T } from "../bundled/definition6.js";
-import { r as E, t as D } from "../bundled/mixins.js";
-import { t as O } from "../bundled/definition11.js";
+import { t as C } from "../bundled/component-enum.js";
+import { n as w } from "../bundled/form-associated.js";
+import { i as T, t as E } from "../bundled/definition5.js";
+import { n as D } from "../bundled/feedback-message.js";
+import { t as O } from "../bundled/definition10.js";
 import { t as k } from "../bundled/form-element.js";
 import { t as A } from "../bundled/with-contextual-help.js";
 import { t as j } from "../bundled/with-error-text.js";
 import { t as M } from "../bundled/with-success-text.js";
-import { t as N } from "../bundled/definition20.js";
-import { t as P } from "../bundled/divider.js";
+import { t as N } from "../bundled/mixins.js";
+import { t as P } from "../bundled/definition20.js";
+import { t as F } from "../bundled/divider.js";
 //#region src/lib/number-field/number-field.scss?inline
-var F = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}: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-600);--_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-600);--_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));--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(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;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.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){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.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)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.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){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.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){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.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{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));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(--focus-stroke-color,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(--focus-stroke-color,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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;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}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", I = {
+var I = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(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;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.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){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.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)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.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){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.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){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.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{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));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(--focus-stroke-color,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(--focus-stroke-color,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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;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}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
 	up: 1,
 	down: -1
 };
-function L(e, t) {
+function z(e, t) {
 	let n = parseFloat(e.value), r = isNaN(n) ? e.min > 0 ? e.min : e.max < 0 ? e.max : e.min ? 0 : t * e.step : n + t * e.step;
 	e.value = Number(r.toFixed(12)).toString(), e._updatedValueAnnouncement = e.locale.numberField.updatedValueAnnouncement(e._presentationValue);
 }
-var R = (e) => {
+var B = (e) => {
 	let t = e.source;
 	return {
 		invalidCharacters: RegExp(`[^0-9\\-+e${t}]`, "g"),
@@ -38,7 +40,7 @@ var R = (e) => {
 		trailingDecimalSeparator: RegExp(`${t}$`),
 		decimalSeparator: e
 	};
-}, z = R(/\./), B = R(/,/), V = /^-?((\d*\.\d+)|(\d+))$/, H = class extends A(D(j(M(k(b(e(S(C(s))))))))) {
+}, V = B(/\./), H = B(/,/), U = /^-?((\d*\.\d+)|(\d+))$/, W = class extends A(N(j(M(k(b(e(S(w(s))))))))) {
 	constructor(...e) {
 		super(...e), this.proxy = document.createElement("input"), this.readOnly = !1, this.autofocus = !1, this.step = 1, this.isUserInput = !1, this._presentationValue = "", this._updatedValueAnnouncement = "", this.incrementButtonAriaLabel = null, this.decrementButtonAriaLabel = null;
 	}
@@ -58,10 +60,10 @@ var R = (e) => {
 		this.value = e.toString();
 	}
 	valueChanged(e, t) {
-		this.value = V.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
+		this.value = U.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
 	}
 	get _numberPatterns() {
-		return this.locale.common.useCommaAsDecimalSeparator ? B : z;
+		return this.locale.common.useCommaAsDecimalSeparator ? H : V;
 	}
 	#e(e) {
 		return e.replace(".", this.locale.common.useCommaAsDecimalSeparator ? "," : ".");
@@ -71,16 +73,16 @@ var R = (e) => {
 	}
 	#n(e) {
 		let t = e.replace(this._numberPatterns.trailingDecimalSeparator, "").replace(this._numberPatterns.decimalSeparator, ".");
-		return V.test(t) ? t : "";
+		return U.test(t) ? t : "";
 	}
 	validate() {
 		super.validate(this.control);
 	}
 	stepUp() {
-		L(this, I.up);
+		z(this, R.up);
 	}
 	stepDown() {
-		L(this, I.down);
+		z(this, R.down);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && n.enqueue(() => {
@@ -107,52 +109,52 @@ var R = (e) => {
 h([a({
 	attribute: "readonly",
 	mode: "boolean"
-})], H.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], H.prototype, "autofocus", void 0), h([a], H.prototype, "placeholder", void 0), h([a], H.prototype, "list", void 0), h([a({ converter: i })], H.prototype, "maxlength", void 0), h([a({ converter: i })], H.prototype, "minlength", void 0), h([a({ converter: i })], H.prototype, "size", void 0), h([a()], H.prototype, "scale", void 0), h([a({ converter: i })], H.prototype, "step", void 0), h([a({ converter: i })], H.prototype, "max", void 0), h([a({ converter: i })], H.prototype, "min", void 0), h([t], H.prototype, "defaultSlottedNodes", void 0), h([t], H.prototype, "_presentationValue", void 0), h([t], H.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], H.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], H.prototype, "decrementButtonAriaLabel", void 0), h([a], H.prototype, "appearance", void 0), h([a], H.prototype, "shape", void 0), h([a], H.prototype, "autoComplete", void 0);
+})], W.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], W.prototype, "autofocus", void 0), h([a], W.prototype, "placeholder", void 0), h([a], W.prototype, "list", void 0), h([a({ converter: i })], W.prototype, "maxlength", void 0), h([a({ converter: i })], W.prototype, "minlength", void 0), h([a({ converter: i })], W.prototype, "size", void 0), h([a()], W.prototype, "scale", void 0), h([a({ converter: i })], W.prototype, "step", void 0), h([a({ converter: i })], W.prototype, "max", void 0), h([a({ converter: i })], W.prototype, "min", void 0), h([t], W.prototype, "defaultSlottedNodes", void 0), h([t], W.prototype, "_presentationValue", void 0), h([t], W.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], W.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], W.prototype, "decrementButtonAriaLabel", void 0), h([a], W.prototype, "appearance", void 0), h([a], W.prototype, "shape", void 0), h([a], W.prototype, "autoComplete", void 0);
 //#endregion
 //#region src/lib/number-field/number-field.template.ts
-function U() {
+function G() {
 	return o` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function W(e) {
+function K(e) {
 	return e.shape === m.Pill ? m.Pill : null;
 }
-function G(e) {
+function q(e) {
 	return e.disabled || e.readOnly ? "-1" : null;
 }
-function K(e) {
-	let t = e.tagFor(w), n = e.tagFor(P);
+function J(e) {
+	let t = e.tagFor(T), n = e.tagFor(F);
 	return o`
 		<div class="control-buttons" ?inert="${(e) => e.disabled || e.readOnly}">
 			<${t} id="subtract" icon="minus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
 				aria-label=${(e) => e.decrementButtonAriaLabel || e.locale.numberField.decrementButtonLabel(e.step)}
-				shape="${W}"
+				shape="${K}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${G}"
+				tabindex="${q}"
 				@click="${(e) => e.stepDown()}"></${t}>
 			<${n} class="divider" orientation="vertical"></${n}>
 			<${t} id="add" icon="plus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
 				aria-label=${(e) => e.incrementButtonAriaLabel || e.locale.numberField.incrementButtonLabel(e.step)}
-				shape="${W}"
+				shape="${K}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${G}"
+				tabindex="${q}"
 				@click="${(e) => e.stepUp()}"></${t}>
 			</div>
 	`;
 }
 //#endregion
-//#region src/lib/number-field/index.ts
-r(c("number-field", H, (e) => {
+//#region src/lib/number-field/definition.ts
+var Y = c("number-field", W, (e) => {
 	let t = e.tagFor(p);
 	return o`
-		<div class="base ${(e) => g(["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale])}">
+		<div class="base ${(e) => g("connotation-accent", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale])}">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
-				${d((e) => e.label, U())}
+				${d((e) => e.label, G())}
 				<slot name="contextual-help" ${l("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="fieldset">
@@ -181,7 +183,7 @@ r(c("number-field", H, (e) => {
 						${u("control")}
 					/>
 				</div>
-				${() => K(e)}
+				${() => J(e)}
 			</div>
 			${(t) => t._getFeedbackTemplate(e)}
 			<${t} id="value-announcement" role="status" aria-atomic="true">
@@ -189,14 +191,17 @@ r(c("number-field", H, (e) => {
 		</div>
 	`;
 }, [
-	T,
-	N,
-	y,
 	E,
+	P,
+	y,
+	D,
 	f,
 	O
 ], {
-	styles: F,
+	styles: I,
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/number-field/index.ts
+r(Y)();
 //#endregion

package/optgroup/definition.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_optgroup = require("../unbundled/optgroup.cjs");
 const require_definition = require("../unbundled/definition30.cjs");
-exports.VwcOptgroupElement = require_definition.Optgroup;
+exports.VwcOptgroupElement = require_optgroup.Optgroup;
 exports.optgroupDefinition = require_definition.optgroupDefinition;
 exports.registerOptgroup = require_definition.registerOptgroup;

package/optgroup/definition.js

@@ -1,2 +1,3 @@
-import { n as registerOptgroup, r as Optgroup, t as optgroupDefinition } from "../unbundled/definition30.js";
+import { t as Optgroup } from "../unbundled/optgroup.js";
+import { n as registerOptgroup, t as optgroupDefinition } from "../unbundled/definition30.js";
 export { Optgroup as VwcOptgroupElement, optgroupDefinition, registerOptgroup };

package/optgroup/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition18.cjs`).n();
+require("../bundled/definition18.cjs").n();

package/option/definition.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_option = require("../unbundled/option.cjs");
 const require_definition = require("../unbundled/definition29.cjs");
-exports.VwcOptionElement = require_definition.ListboxOption;
+exports.VwcOptionElement = require_option.ListboxOption;
 exports.listboxOptionDefinition = require_definition.listboxOptionDefinition;
 exports.registerOption = require_definition.registerOption;

package/option/definition.js

@@ -1,2 +1,3 @@
-import { n as registerOption, r as ListboxOption, t as listboxOptionDefinition } from "../unbundled/definition29.js";
+import { t as ListboxOption } from "../unbundled/option.js";
+import { n as registerOption, t as listboxOptionDefinition } from "../unbundled/definition29.js";
 export { ListboxOption as VwcOptionElement, listboxOptionDefinition, registerOption };

package/option/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition17.cjs`).n();
+require("../bundled/definition17.cjs").n();

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.24.0",
-  "homepage": "https://vivid.vonage.com",
+  "version": "5.27.0",
+  "homepage": "https://apps.vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/vonage/vivid-3",
+    "url": "https://github.com/Vonage/vivid-3",
     "directory": "libs/components"
   },
   "license": "Apache-2.0",
@@ -39,75 +39,73 @@
   "main": "./index.cjs",
   "module": "./index.js",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "@microsoft/fast-element": "^2.10.4",
+    "@floating-ui/dom": "^1.8.0",
+    "@microsoft/fast-element": "^2.10.5",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "date-fns": "^4.1.0",
-    "dompurify": "^3.4.2",
-    "prosemirror-commands": "^1.7.1",
-    "prosemirror-dropcursor": "^1.8.2",
+    "date-fns": "^4.4.0",
+    "dompurify": "^3.4.13",
+    "prosemirror-commands": "^1.7.2",
+    "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.4",
+    "prosemirror-model": "1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.12.0",
-    "prosemirror-view": "^1.41.8",
-    "uuid": "^14.0.0",
+    "prosemirror-view": "1.41.8",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "uuid": "^14.0.1",
     "vanilla-colorful": "^0.7.2",
-    "video.js": "^8.23.7"
+    "video.js": "^8.24.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
-    "@microsoft/api-extractor": "^7.58.7",
-    "@playwright/test": "1.57.0",
+    "@microsoft/api-extractor": "^7.58.12",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^20.19.40",
-    "@vitest/browser": "^4.1.8",
-    "@vitest/browser-playwright": "^4.1.8",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^20.19.43",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
     "cem-plugin-readonly": "^0.0.5",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.2.4",
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^3.0.2",
-    "eslint": "^10.3.0",
+    "eslint": "^10.8.1",
     "eslint-formatter-compact": "^9.0.1",
     "eslint-plugin-barrel-files": "^3.0.1",
     "glob": "^13.0.6",
-    "http-server": "^14.1.1",
-    "playwright": "1.57.0",
-    "sass": "^1.99.0",
+    "sass": "^1.102.0",
     "stylelint": "^16.26.1",
-    "tsx": "^4.21.0",
+    "tsx": "^4.23.12",
     "typescript": "5.9.3",
-    "vite": "^8.0.12",
+    "vite": "^8.2.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.4.0",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
-    "@repo/browser-tests": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-config": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/internal-test-utils": "1.0.0",
     "@repo/metadata-extractor": "1.0.0",
-    "@repo/stylelint-config": "1.0.0",
     "@repo/sass": "1.0.0",
-    "@repo/styles": "1.0.0",
-    "@repo/tokens": "1.0.0",
+    "@repo/stylelint-config": "1.0.0",
+    "@repo/browser-tests": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/vite-config": "1.0.0",
-    "@repo/vitest-config": "1.0.0",
     "@repo/typescript-config": "1.0.0",
+    "@repo/tokens": "1.0.0",
+    "@repo/vitest-config": "1.0.0",
     "@repo/vvd-jsx": "1.0.0",
-    "@vonage/vivid-icons": "4.11.0"
+    "@repo/styles": "1.0.0",
+    "@vonage/vivid-icons": "4.12.0",
+    "@repo/vite-config": "1.0.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {
@@ -116,10 +114,6 @@
     "postbuild": "api-extractor run -c ./dist/api-extractor.json && pnpm run extract-metadata && move-manifest-to-dist .",
     "dev": "WATCH_MODE=true vite build -w -c ./vite.config.ts",
     "dev:bundled": "WATCH_MODE=true vite build -w -c ./vite.config.bundled.ts",
-    "e2e": "playwright test",
-    "e2e:docker": "PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:3000/ playwright test",
-    "e2e:docker:ui": "PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:3000/ playwright test --ui",
-    "e2e:ui": "playwright test --ui",
     "extract-metadata": "extract-metadata | pnpm prettier --stdin-filepath metadata.json > metadata.json",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --max-warnings=0 --fix",

package/pagination/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition54.cjs");
+const require_definition = require("../unbundled/definition56.cjs");
 exports.VwcPaginationElement = require_definition.Pagination;
 exports.paginationDefinition = require_definition.paginationDefinition;
 exports.registerPagination = require_definition.registerPagination;

package/pagination/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition54.js";
+import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition56.js";
 export { Pagination as VwcPaginationElement, paginationDefinition, registerPagination };

package/pagination/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/ref.cjs`),o=require(`../bundled/when.cjs`),s=require(`../bundled/enums.cjs`),c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.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{text-align:center;align-self: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).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>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0){this.prevButton.focus();return}if(a>this.paginationButtons.length-1){this.nextButton.focus();return}this.paginationButtons&&this.paginationButtons[r+i].focus()})}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(e=>{e.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)})}};c.t([t.m],m.prototype,`size`,void 0),c.t([t.m],m.prototype,`shape`,void 0),c.t([t.A],m.prototype,`paginationButtons`,void 0),c.t([t.A],m.prototype,`prevButton`,void 0),c.t([t.A],m.prototype,`nextButton`,void 0),c.t([t.m({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.j],m.prototype,`pagesList`,null),c.t([t.m({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.m({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.p` ${o.t(e=>e!==`...`,t.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/repeat.cjs"),r=require("../bundled/slotted.cjs"),i=require("../bundled/children.cjs"),a=require("../bundled/ref.cjs"),o=require("../bundled/when.cjs"),s=require("../bundled/enums.cjs"),c=require("../bundled/decorate.cjs"),l=require("../bundled/class-names.cjs"),u=require("../bundled/definition5.cjs");var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.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{text-align:center;align-self: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).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>f){if(this.selectedIndex<4&&t===5)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<5)return this.selectedIndex+(t-2);if(t===1||t===5)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0){this.prevButton.focus();return}if(a>this.paginationButtons.length-1){this.nextButton.focus();return}this.paginationButtons&&this.paginationButtons[r+i].focus()})}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(e=>{e.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)})}};c.t([t.m],m.prototype,`size`,void 0),c.t([t.m],m.prototype,`shape`,void 0),c.t([t.A],m.prototype,`paginationButtons`,void 0),c.t([t.A],m.prototype,`prevButton`,void 0),c.t([t.A],m.prototype,`nextButton`,void 0),c.t([t.m({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.j],m.prototype,`pagesList`,null),c.t([t.m({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.m({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.p` ${o.t(e=>e!==`...`,t.p`
 		<${e} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${b}"

package/pagination/index.js

@@ -8,7 +8,7 @@ import { t as f } from "../bundled/when.js";
 import { a as p, i as m } from "../bundled/enums.js";
 import { t as h } from "../bundled/decorate.js";
 import { t as g } from "../bundled/class-names.js";
-import { i as _, t as v } from "../bundled/definition6.js";
+import { i as _, t as v } from "../bundled/definition5.js";
 //#region src/lib/pagination/pagination.scss?inline
 var y = ".control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.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{text-align:center;align-self: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}", b = 7, x = {
 	fromView: (e) => parseInt(e, 10),
@@ -19,11 +19,11 @@ var y = ".control{justify-content:space-between;display:inline-flex}.control:not
 			if (t === 0) return 1;
 			if (t === n.length - 1) return this.total;
 			if (this.selectedIndex !== void 0 && this.total > b) {
-				if (this.selectedIndex < 4 && t === b - 2) return "...";
+				if (this.selectedIndex < 4 && t === 5) return "...";
 				if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-					if (t > 1 && t < b - 2) return this.selectedIndex + (t - 2);
+					if (t > 1 && t < 5) return this.selectedIndex + (t - 2);
 					/* v8 ignore else -- @preserve */
-					if (t === 1 || t === b - 2) return "...";
+					if (t === 1 || t === 5) return "...";
 				}
 				if (this.selectedIndex > this.total - 5) {
 					if (t > 1) return this.total - (6 - t);
@@ -126,10 +126,7 @@ var k = (e) => a` ${f((e) => e !== "...", a`
 			aria-hidden="true"
 		>
 			...
-		</div>`)}`, A = (e) => !e.size || !C.includes(e.size) ? p.SuperCondensed : e.size, j = (e) => !e.shape || !w.includes(e.shape) ? m.Rounded : e.shape, M = (e) => `calc(var(--base-size) + ${String(e).length - 1}ch)`;
-//#endregion
-//#region src/lib/pagination/index.ts
-n(s("pagination", S, (e) => {
+		</div>`)}`, A = (e) => !e.size || !C.includes(e.size) ? p.SuperCondensed : e.size, j = (e) => !e.shape || !w.includes(e.shape) ? m.Rounded : e.shape, M = (e) => `calc(var(--base-size) + ${String(e).length - 1}ch)`, N = s("pagination", S, (e) => {
 	let t = e.tagFor(_), n = e.tagFor(_, !0), r = k(t);
 	return a`
 	<div class="${D}">
@@ -158,5 +155,8 @@ n(s("pagination", S, (e) => {
 			aria-label="${(e) => e.locale.pagination.nextPageLabel}"
 		></${t}>
 </div>`;
-}, [v], { styles: y }))();
+}, [v], { styles: y });
+//#endregion
+//#region src/lib/pagination/index.ts
+n(N)();
 //#endregion

package/platform-switch/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition55.cjs");
+const require_definition = require("../unbundled/definition57.cjs");
 exports.VwcPlatformSwitchElement = require_definition.PlatformSwitch;
 exports.platformSwitchDefinition = require_definition.platformSwitchDefinition;
 exports.registerPlatformSwitch = require_definition.registerPlatformSwitch;

package/platform-switch/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPlatformSwitch, r as PlatformSwitch, t as platformSwitchDefinition } from "../unbundled/definition55.js";
+import { n as registerPlatformSwitch, r as PlatformSwitch, t as platformSwitchDefinition } from "../unbundled/definition57.js";
 export { PlatformSwitch as VwcPlatformSwitchElement, platformSwitchDefinition, registerPlatformSwitch };

package/platform-switch/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/platform.cjs`);var i=`:host{display:contents}`,a=class extends e.t{slottedContentChanged(){this.#e()}#e(){let e=this.slottedContent.filter(e=>e instanceof HTMLElement),t=!1;for(let n of e){if(t){n.hidden=!0;continue}this.#t(n)?(n.hidden=!1,t=!0):n.hidden=!0}}#t(e){let t=r.t()?`apple`:`standard`,n=e.dataset.keyboard;return n===void 0?!0:n===t}};n.t([e.A],a.prototype,`slottedContent`,void 0);var o=e.u(`platform-switch`,a,()=>e.p`<slot ${t.t(`slottedContent`)}></slot>`,[],{styles:i});e.d(o)();
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/slotted.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/platform.cjs");var i=`:host{display:contents}`,a=class extends e.t{slottedContentChanged(){this.#e()}#e(){let e=this.slottedContent.filter(e=>e instanceof HTMLElement),t=!1;for(let n of e){if(t){n.hidden=!0;continue}this.#t(n)?(n.hidden=!1,t=!0):n.hidden=!0}}#t(e){let t=r.t()?`apple`:`standard`,n=e.dataset.keyboard;return n===void 0||n===t}};n.t([e.A],a.prototype,`slottedContent`,void 0);var o=e.u(`platform-switch`,a,()=>e.p`<slot ${t.t(`slottedContent`)}></slot>`,[],{styles:i});e.d(o)();

package/platform-switch/index.js

@@ -19,10 +19,14 @@ var c = ":host{display:contents}", l = class extends r {
 	}
 	#t(e) {
 		let t = s() ? "apple" : "standard", n = e.dataset.keyboard;
-		return n === void 0 ? !0 : n === t;
+		return n === void 0 || n === t;
 	}
 };
+o([e], l.prototype, "slottedContent", void 0);
+//#endregion
+//#region src/lib/platform-switch/definition.ts
+var u = i("platform-switch", l, () => n`<slot ${a("slottedContent")}></slot>`, [], { styles: c });
 //#endregion
 //#region src/lib/platform-switch/index.ts
-o([e], l.prototype, "slottedContent", void 0), t(i("platform-switch", l, () => n`<slot ${a("slottedContent")}></slot>`, [], { styles: c }))();
+t(u)();
 //#endregion

package/popover/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition56.cjs");
+const require_definition = require("../unbundled/definition58.cjs");
 exports.VwcPopoverElement = require_definition.Popover;
 exports.popoverDefinition = require_definition.popoverDefinition;
 exports.registerPopover = require_definition.registerPopover;

package/popover/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition56.js";
+import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition58.js";
 export { Popover as VwcPopoverElement, popoverDefinition, registerPopover };

package/popover/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/floating-ui.dom.cjs`);var f=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,p=class extends e.t(c.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#c=this.updatePosition()},this.#f=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#s()}arrowChanged(){this.#s()}openChanged(e,t){if(!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#s()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#s()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#i)}#r(e){e.removeAttribute(`aria-haspopup`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#i)}#i;get#a(){let e=[d.s(),d.a(),d.l(),d.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,d.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(d.c(t)),e}#o;#s(){this.#o?.(),this.open&&this.#e&&this._popoverEl&&(this.#o=d.r(this.#e,this._popoverEl,this.#l))}#c;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await d.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#a});this.open&&(this.#u(e),this.arrow&&this._arrowEl&&this.#d(e))}#u(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#d(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#f;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#f),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#s()))}disconnectedCallback(){super.disconnectedCallback(),this.#o?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#f)}show(){return this.open=!0,this.#c??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],p.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.A],p.prototype,`anchor`,void 0),a.t([t.A],p.prototype,`_slottedAnchor`,void 0);var m=t.u(`popover`,p,e=>{let a=e.tagFor(u.r),d=e.tagFor(l.i),f=e.tagFor(s.r);return t.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/decorate.cjs"),o=require("../bundled/class-names.cjs"),s=require("../bundled/definition2.cjs"),c=require("../bundled/icon.cjs"),l=require("../bundled/delegates-aria.cjs"),u=require("../bundled/definition5.cjs"),d=require("../bundled/definition6.cjs"),f=require("../bundled/floating-ui.dom.cjs"),p=require("../bundled/anchored.cjs");var m=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,h=class extends e.t(l.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#a=()=>{this._popoverEl.togglePopover()},this.#u=()=>{this.#l=this.updatePosition()},this.#p=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#c()}arrowChanged(){this.#c()}openChanged(e,t){if(this.#i(),!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#c()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#c()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),this.#i(),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#a)}#r(e){e.removeAttribute(`aria-haspopup`),e.ariaExpanded=null,p.r(e),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#a)}#i(){this.#e&&(this.#e.ariaExpanded=this.open.toString(),p.i(this.#e,this.open))}#a;get#o(){let e=[f.s(),f.a(),f.l(),f.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,f.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(f.c(t)),e}#s;#c(){this.#s?.(),this.open&&this.#e&&this._popoverEl&&(this.#s=f.r(this.#e,this._popoverEl,this.#u))}#l;#u;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await f.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#o});this.open&&(this.#d(e),this.arrow&&this._arrowEl&&this.#f(e))}#d(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#f(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#p;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#p),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#c()))}disconnectedCallback(){super.disconnectedCallback(),this.#s?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#p)}show(){return this.open=!0,this.#l??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],h.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],h.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],h.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],h.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`open`,void 0),a.t([t.A],h.prototype,`anchor`,void 0),a.t([t.A],h.prototype,`_slottedAnchor`,void 0);var g=t.u(`popover`,h,e=>{let a=e.tagFor(d.r),s=e.tagFor(u.i),f=e.tagFor(c.t);return t.p`
 		<slot name="anchor" ${n.t(`_slottedAnchor`)}></slot>
 		<${a}>
 			<div class="base"
@@ -6,22 +6,22 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				popover="${e=>e.manual?`manual`:`auto`}"
 				tabindex="-1"
 				autofocus
-				${c.n({role:`dialog`,ariaModal:`false`})}
+				${l.n({role:`dialog`,ariaModal:`false`})}
 			>
 				<div class="${e=>o.t(`control`,[`open`,e.open],[`manual`,e.manual],[`condensed`,e.layout===`condensed`])}"
 					part="${e=>e.alternate?`vvd-theme-alternate`:``}">
 					<slot></slot>
 					<slot name="footer"></slot>
-					${i.t(e=>e.manual,t.p`<${d}
+					${i.t(e=>e.manual,t.p`<${s}
 							aria-label="${e=>e.dismissButtonAriaLabel||e.locale.popover.dismissButtonLabel}"
 							type="button"
 							size="condensed"
 							class="dismiss-button"
 							@click="${e=>e.hide()}">
 							<${f} name="close-line" slot="icon"></${f}>
-						</${d}>`)}
+						</${s}>`)}
 					${i.t(e=>e.arrow,t.p`<div class="arrow" ${r.t(`_arrowEl`)}></div>`)}
 				</div>
 			</div>
 		</${a}>
-	`},[l.t,s.t,u.t],{styles:f,shadowOptions:{delegatesFocus:!0}});t.d(m)();
+	`},[u.t,s.t,d.t],{styles:m,shadowOptions:{delegatesFocus:!0}});t.d(g)();