@vonage/vivid 5.23.0 → 5.23.1

package/combobox/index.js

@@ -3,32 +3,32 @@ import { t as o } from "../bundled/slotted.js";
 import { t as s } from "../bundled/ref.js";
 import { t as c } from "../bundled/when.js";
 import { t as l } from "../bundled/decorate.js";
-import { t as u } from "../bundled/definition2.js";
-import { a as d, i as f, t as p } from "../bundled/affix.js";
-import { t as m } from "../bundled/form-element.js";
-import { t as h } from "../bundled/with-success-text.js";
-import { t as g } from "../bundled/with-error-text.js";
-import { t as _ } from "../bundled/with-contextual-help.js";
-import { t as v } from "../bundled/listbox.js";
-import { t as y } from "../bundled/class-names.js";
-import { n as b } from "../bundled/numbers.js";
-import { r as x } from "../bundled/aria-binding-directive.js";
-import { n as S } from "../bundled/form-associated.js";
-import { r as C } from "../bundled/definition6.js";
-import { i as w, t as T } from "../bundled/definition8.js";
-import { t as E } from "../bundled/dialog.js";
-import { r as D, t as O } from "../bundled/mixins.js";
+import { t as u } from "../bundled/listbox.js";
+import { t as d } from "../bundled/class-names.js";
+import { n as f } from "../bundled/numbers.js";
+import { r as p } from "../bundled/aria-binding-directive.js";
+import { t as m } from "../bundled/definition3.js";
+import { a as h, i as g, t as _ } from "../bundled/affix.js";
+import { n as v } from "../bundled/form-associated.js";
+import { r as y } from "../bundled/definition6.js";
+import { i as b, t as x } from "../bundled/definition8.js";
+import { t as S } from "../bundled/dialog.js";
+import { r as C, t as w } from "../bundled/mixins.js";
+import { t as T } from "../bundled/form-element.js";
+import { t as E } from "../bundled/with-contextual-help.js";
+import { t as D } from "../bundled/with-error-text.js";
+import { t as O } from "../bundled/with-success-text.js";
 import { t as k } from "../bundled/text-field.js";
 import { t as A } from "../bundled/definition17.js";
 //#region src/lib/combobox/combobox.scss?inline
-var j = ".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}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_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:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.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) .fieldset: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}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}", M = {
+var j = ".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}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_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:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.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) .fieldset: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}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}", M = {
 	inline: "inline",
 	list: "list",
 	both: "both",
 	none: "none"
-}, N = class extends _(O(g(h(m(p(S(v))))))) {
+}, N = class extends E(w(D(O(T(_(v(u))))))) {
 	constructor(...e) {
-		super(...e), this.filteredOptions = [], this.filter = "", this._isNavigatingWithKeyboard = !1, this.fixedDropdown = !1, this.listboxId = x("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+		super(...e), this.filteredOptions = [], this.filter = "", this._isNavigatingWithKeyboard = !1, this.fixedDropdown = !1, this.listboxId = p("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
 	}
 	formResetCallback() {
 		super.formResetCallback(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1, this.value = this.firstSelectedOption?.text || "";
@@ -143,7 +143,7 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 	}
 	selectedIndexChanged(e, t) {
 		if (this.$fastController.isConnected) {
-			if (t = b(-1, this.options.length - 1, t), t !== this.selectedIndex) {
+			if (t = f(-1, this.options.length - 1, t), t !== this.selectedIndex) {
 				this.selectedIndex = t;
 				return;
 			}
@@ -199,30 +199,32 @@ l([r({
 })], N.prototype, "open", void 0), l([r], N.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
-var P = ({ icon: e, iconSlottedContent: t, metaSlottedContent: n, errorValidationMessage: r, successText: i, shape: a, scale: o, disabled: s, placeholder: c, label: l, appearance: u, open: d, _activeDescendant: f }) => y("base", ["disabled", s], [`shape-${a}`, !!a], [`size-${o}`, !!o], ["placeholder", !!c], [`appearance-${u}`, !!u], ["no-label", !l], ["has-icon", !!e || !!t?.length], ["has-meta", !!n?.length], ["has-activedescendant", !!f && d], ["error", !!r], ["success", !!i]);
-function F() {
+function P() {
 	return i` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function I(e) {
+function F(e) {
 	return e.open && e.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function L(e) {
-	let t = d(e), n = C(e);
-	return i` <div class="${P}" ${s("_anchor")}>
+function I(e) {
+	let t = h(e), n = y(e);
+	return i` <div
+		class="${(e) => d("base", ["disabled", e.disabled], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["placeholder", !!e.placeholder], [`appearance-${e.appearance}`, !!e.appearance], ["no-label", !e.label], ["has-icon", !!e.icon || !!e.iconSlottedContent?.length], ["has-meta", !!e.metaSlottedContent?.length], ["has-activedescendant", !!e._activeDescendant && e.open], ["error", !!e.errorValidationMessage], ["success", !!e.successText])}"
+		${s("_anchor")}
+	>
 		<div
 			class="label-wrapper"
 			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${c((e) => e.label, F())}
+			${c((e) => e.label, P())}
 			<slot
 				name="contextual-help"
 				${o("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
-			${(e) => t(e.icon, f.Slot)}
+			${(e) => t(e.icon, g.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -257,19 +259,19 @@ function L(e) {
 //#endregion
 //#region src/lib/combobox/index.ts
 t(a("combobox", N, (e) => {
-	let t = e.tagFor(w);
+	let t = e.tagFor(b);
 	return i`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
-			class="${(e) => y(["has-activedescendant", !!e._activeDescendant && e.open])}"
+			class="${(e) => d(["has-activedescendant", !!e._activeDescendant && e.open])}"
 			@click="${(e, t) => e.clickHandler(t.event)}"
 			@focusout="${(e, t) => e.focusoutHandler(t.event)}"
-			@keydown="${(e, { event: t }) => (e.open && E(t), e.keydownHandler(t))}"
+			@keydown="${(e, { event: t }) => (e.open && S(t), e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${() => L(e)}
+				${() => I(e)}
 				<${t} class="popup"
-					style="${I}"
+					style="${F}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -280,7 +282,7 @@ t(a("combobox", N, (e) => {
 						?disabled="${(e) => e.disabled}"
 						${s("listbox")}>
 						<slot ${o({
-		filter: v.slottedOptionFilter,
+		filter: u.slottedOptionFilter,
 		flatten: !0,
 		property: "slottedOptions"
 	})}>
@@ -294,10 +296,10 @@ t(a("combobox", N, (e) => {
     </template>
 	`;
 }, [
-	u,
-	T,
+	m,
+	x,
 	A,
-	D
+	C
 ], {
 	styles: [k, j],
 	shadowOptions: { delegatesFocus: !0 }