@vonage/vivid 5.16.0 → 5.17.0

package/bundled/definition9.js

@@ -1,161 +1,68 @@
-import { O as e, T as t, d as n, l as r, n as i, o as a, s as o, t as s } from "./vivid-element.js";
-import { t as c } from "./when.js";
-import { r as l, t as u } from "./slotted.js";
-import { r as d, t as f } from "./definition2.js";
-import { t as p } from "./decorate.js";
-import { t as m } from "./class-names.js";
-import { a as h, n as g, r as _ } from "./key-codes.js";
-import { a as v, t as y } from "./affix.js";
-import { n as b, t as x } from "./host-semantics.js";
-//#region src/lib/menu-item/menu-item.scss?inline
-var S = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary:var(--vvd-menu-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-menu-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-menu-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-menu-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-menu-item-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-menu-item-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-menu-item-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-menu-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-menu-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-menu-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-menu-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-menu-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-menu-item-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-menu-item-accent-dim,var(--vvd-color-neutral-200))}.base{--_menu-item-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);border-radius:8px;align-items:center;inline-size:100%;display:flex}.base:not(.two-lines){min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline);gap:12px}.base.two-lines{min-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline);gap:16px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);flex-shrink:0;line-height:1}.action,.decorative{place-content:center;display:flex}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{flex-direction:column;gap:4px;margin-inline-end:auto;display:flex;overflow:hidden}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp,1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp,1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size,var--vvd-typography-base)}", C = {
-	menuitem: "menuitem",
-	menuitemcheckbox: "menuitemcheckbox",
-	menuitemradio: "menuitemradio",
-	presentation: "presentation"
-}, w = class extends x(y(s)) {
-	expandedChanged() {
-		/* v8 ignore if -- @preserve */
-		this.$fastController.isConnected && (this.submenu && !this.expanded && this.submenu.collapseExpandedItem(), this.$emit("expanded-change", this, { bubbles: !1 }));
-	}
-	#e() {
-		this._isPresentational ? this.role === "menuitem" && (this.role = "presentation") : this.role === "presentation" && (this.role = C.menuitem);
-	}
-	_isPresentationalChanged() {
-		this.$fastController.isConnected && this.#e();
-	}
-	checkedChanged() {
-		this.$fastController.isConnected && this.$emit("change");
+import { d as e, l as t, o as n, s as r, t as i } from "./vivid-element.js";
+import { t as a } from "./decorate.js";
+import { t as o } from "./class-names.js";
+import { i as s, t as c } from "./definition8.js";
+import { n as l, t as u } from "./anchored.js";
+import { t as d } from "./dialog.js";
+//#region src/lib/tooltip/tooltip.scss?inline
+var f = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}", p = class extends u(i) {
+	constructor(...e) {
+		super(...e), this.open = !1;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e.enqueue(() => {
-			this._isPresentational = this._isPresentational ?? !0, this.#e();
-		});
-	}
-	slottedSubmenuChanged() {
-		this.submenu && (this.submenu.anchor = this, this.submenu.placement = "right-start", this.submenu.collapseExpandedItem = () => this.#t(), this.submenu._popupOffset = 5);
+		super.connectedCallback(), this.#a();
 	}
-	get submenu() {
-		return this.slottedSubmenu?.length ? this.slottedSubmenu[0] : null;
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#a();
 	}
-	get hasSubmenu() {
-		return this.submenu !== null;
+	_anchorElChanged(e, t) {
+		e && this.#t(e), t && this.#e(t);
 	}
-	constructor() {
-		super(), this.role = C.menuitem, this.checked = !1, this.handleMenuItemClick = (e) => this._isSyntheticClickEvent(e) ? !0 : (this.invoke(), !!this._isPresentational), this.handleMouseOver = (e) => (this.disabled || !this.submenu || this.expanded || (this.expanded = !0), !1), this.handleMouseOut = (e) => (!this.expanded || this.contains(document.activeElement) || (this.expanded = !1), !1), this.invoke = () => {
-			if (!(this.disabled || this._isPresentational)) switch (this.controlType) {
-				case "checkbox":
-					this.checked = !this.checked;
-					break;
-				case "radio":
-					this.checked ||= !0;
-					break;
-				default:
-					this.submenu ? this.expanded = !0 : this.$emit("change");
-					break;
-			}
-		}, this.checkTrailing = !1, this.handleMenuItemKeyDown = (e) => {
-			if (e.defaultPrevented) return !1;
-			switch (e.key) {
-				case h:
-				case " ": return this.invoke(), this.disabled || this.#i(), !1;
-				case _: return this.submenu && (this.expanded = !0, this.#i()), !1;
-				case g: if (this.expanded) return this.#i(), this.expanded = !1, this.focus(), !1;
-			}
-			return !0;
-		}, this.addEventListener("expanded-change", this.#n);
+	#e(e) {
+		e.addEventListener("mouseover", this.#n), e.addEventListener("mouseout", this.#r), e.addEventListener("focusin", this.#n), e.addEventListener("focusout", this.#r), e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(this.open));
 	}
-	#t() {
-		this.expanded = !1;
+	#t(e) {
+		e.removeEventListener("mouseover", this.#n), e.removeEventListener("mouseout", this.#r), e.removeEventListener("focusin", this.#n), e.removeEventListener("focusout", this.#r), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded");
 	}
-	#n() {
-		this.submenu && (this.submenu.open = this.expanded);
+	#n = () => {
+		this.open = !0, this.#i();
+	};
+	#r = () => {
+		this.open = !1, this.#i();
+	};
+	#i() {
+		this._anchorEl && this._anchorEl.setAttribute("aria-expanded", String(this.open));
 	}
-	#r = /* @__PURE__ */ new WeakSet();
-	_isSyntheticClickEvent(e) {
-		return this.#r.has(e);
+	#a() {
+		document.removeEventListener("keydown", this.#o), this.open && this.isConnected && document.addEventListener("keydown", this.#o);
 	}
-	#i() {
-		let e = new MouseEvent("click", {
-			bubbles: !0,
-			composed: !0
-		});
-		this.#r.add(e), this.dispatchEvent(e);
+	#o = (e) => {
+		/* v8 ignore else -- @preserve */
+		e.key === "Escape" && this.#r();
+	};
+	openChanged(e) {
+		e !== void 0 && this.#a();
 	}
 };
-p([r({ mode: "boolean" })], w.prototype, "disabled", void 0), p([r({ mode: "boolean" })], w.prototype, "expanded", void 0), p([t], w.prototype, "_isPresentational", void 0), p([i({
-	deprecatedPropertyName: "role",
-	fromDeprecated: (e) => {
-		switch (e) {
-			case "menuitemcheckbox": return "checkbox";
-			case "menuitemradio": return "radio";
-			default: return;
-		}
-	},
-	toDeprecated: (e) => {
-		switch (e) {
-			case "checkbox": return "menuitemcheckbox";
-			case "radio": return "menuitemradio";
-			default: return "menuitem";
-		}
-	}
-}), r({ attribute: "control-type" })], w.prototype, "controlType", void 0), p([r({ mode: "boolean" })], w.prototype, "checked", void 0), p([r], w.prototype, "text", void 0), p([r({ attribute: "text-secondary" })], w.prototype, "textSecondary", void 0), p([r], w.prototype, "connotation", void 0), p([r({
-	mode: "boolean",
-	attribute: "check-trailing"
-})], w.prototype, "checkTrailing", void 0), p([r({ attribute: "check-appearance" })], w.prototype, "checkedAppearance", void 0), p([t], w.prototype, "metaSlottedContent", void 0), p([t], w.prototype, "trailingMetaSlottedContent", void 0), p([t], w.prototype, "slottedSubmenu", void 0);
-//#endregion
-//#region src/lib/menu/name.ts
-var T = "menu", E = (e) => e.checkedAppearance === "tick-only" ? e.checked ? "check-line" : "" : `${e.controlType === "checkbox" ? "checkbox" : "radio"}-${e.checked ? "checked" : "unchecked"}-2-line`, D = ({ connotation: e, disabled: t, checked: n, controlType: r, text: i, textSecondary: a, icon: o, metaSlottedContent: s, checkTrailing: c }) => m("base", [`connotation-${e}`, !!e], ["disabled", !!t], ["selected", !!(r && n)], ["trailing", !!(r && (c || o))], ["item-checkbox", r === "checkbox"], ["item-radio", r === "radio"], ["two-lines", !!i?.length && !!a?.length], ["has-meta", !!s?.length]);
-function O(e) {
-	let t = e.tagFor(d);
-	return n`${c((e) => !!e.controlType, n`<span class="action"><${t} class="icon" name="${(e) => E(e)}"></${t}></span>`)}`;
-}
-function k() {
-	return n`${c((e) => e.text || e.textSecondary, n`<span class="text">
-			${c((e) => e.text, n`<span class="text-primary">${(e) => e.text}</span>`)}
-			${c((e) => e.textSecondary, n`<span class="text-secondary">${(e) => e.textSecondary}</span>`)}
-		</span>`)}`;
-}
+a([t], p.prototype, "text", void 0), a([t({ mode: "fromView" })], p.prototype, "placement", void 0), a([t({ mode: "boolean" })], p.prototype, "open", void 0);
 //#endregion
-//#region src/lib/menu-item/definition.ts
-var A = a("menu-item", w, (e) => {
-	let t = v(e), r = e.tagFor(d);
-	return n`
-		<template
-			${b({
-		role: C.menuitem,
-		ariaHasPopup: (e) => e.hasSubmenu ? "menu" : void 0,
-		ariaChecked: (e) => e.controlType ? e.checked : void 0,
-		ariaDisabled: (e) => e.disabled,
-		ariaExpanded: (e) => e.expanded
-	})}
-			@keydown="${(e, t) => e.handleMenuItemKeyDown(t.event)}"
-			@click="${(e, t) => e.handleMenuItemClick(t.event)}"
-			@mouseover="${(e, t) => e.handleMouseOver(t.event)}"
-			@mouseout="${(e, t) => e.handleMouseOut(t.event)}"
-		>
-			<div class="${D}">
-				<slot name="meta" ${u("metaSlottedContent")}></slot>
-				${O(e)}
-				${c((e) => e.icon, n`<span class="decorative"
-						>${(e) => t(e.icon)}</span
-					>`)}
-				${k()}
-				<slot
-					name="trailing-meta"
-					${u("trailingMetaSlottedContent")}
-				></slot>
-				${c((e) => e.hasSubmenu, n`<${r} class="chevron" name="chevron-right-line"></${r}>`)}
-			</div>
-			<slot
-				name="submenu"
-				${u({
-		property: "slottedSubmenu",
-		filter: l(e.tagForNonDependency(T))
-	})}
-			></slot>
-		</template>
-	`;
-}, [f], { styles: S }), j = o(A);
+//#region src/lib/tooltip/tooltip.template.ts
+var m = ({ open: e }) => o("control", ["open", !!e]), h = n("tooltip", p, (t) => {
+	let n = t.tagFor(s);
+	return e`
+${l()}
+<${n} class="${m}" arrow alternate
+	:placement=${(e) => e.placement}
+	:anchor="${(e) => e._anchorEl}"
+	:open="${(e) => e.open}"
+	@keydown="${(e, t) => {
+		e.open && d(t.event) && (e.open = !1);
+	}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${(e) => e.text}
+  </div>
+</${n}>`;
+}, [c], { styles: f }), g = r(h);
 //#endregion
-export { C as a, w as i, j as n, T as r, A as t };
+export { h as n, p as r, g as t };

package/bundled/divider.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./aria.cjs`),r=require(`./enums.cjs`),i=require(`./host-semantics.cjs`);var a={separator:`separator`,presentation:`presentation`},o=class extends i.t(e.t){constructor(...e){super(...e),this.role=a.separator,this.orientation=n.t.horizontal,this.appearance=r.t.Ghost}};t.t([e.l],o.prototype,`orientation`,void 0),t.t([e.l],o.prototype,`appearance`,void 0),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+const e=require(`./vivid-element.cjs`),t=require(`./enums.cjs`),n=require(`./decorate.cjs`),r=require(`./aria.cjs`),i=require(`./host-semantics.cjs`);var a={separator:`separator`,presentation:`presentation`},o=class extends i.t(e.t){constructor(...e){super(...e),this.role=a.separator,this.orientation=r.t.horizontal,this.appearance=t.t.Ghost}};n.t([e.l],o.prototype,`orientation`,void 0),n.t([e.l],o.prototype,`appearance`,void 0),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/bundled/divider.js

@@ -1,7 +1,7 @@
 import { l as e, t } from "./vivid-element.js";
-import { t as n } from "./decorate.js";
-import { t as r } from "./aria.js";
-import { t as i } from "./enums.js";
+import { t as n } from "./enums.js";
+import { t as r } from "./decorate.js";
+import { t as i } from "./aria.js";
 import { t as a } from "./host-semantics.js";
 //#region src/lib/divider/divider.ts
 var o = {
@@ -9,9 +9,9 @@ var o = {
 	presentation: "presentation"
 }, s = class extends a(t) {
 	constructor(...e) {
-		super(...e), this.role = o.separator, this.orientation = r.horizontal, this.appearance = i.Ghost;
+		super(...e), this.role = o.separator, this.orientation = i.horizontal, this.appearance = n.Ghost;
 	}
 };
-n([e], s.prototype, "orientation", void 0), n([e], s.prototype, "appearance", void 0);
+r([e], s.prototype, "orientation", void 0), r([e], s.prototype, "appearance", void 0);
 //#endregion
 export { o as n, s as t };

package/bundled/listbox.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`),r=require(`./strings.cjs`),i=require(`./definition12.cjs`);function a(e,t){let n=e.length;for(;n--;)if(t(e[n],n,e))return n;return-1}var o=class t extends e.t{constructor(...e){super(...e),this._options=[],this.selectedIndex=-1,this.selectedOptions=[],this.shouldSkipFocus=!1,this.typeaheadBuffer=``,this.typeaheadExpired=!0,this.typeaheadTimeout=-1,this._activeDescendant=null}get firstSelectedOption(){return this.selectedOptions[0]??null}get length(){return this.options.length}get options(){return e.w.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.w.notify(this,`options`),this.$fastController.isConnected){let e=this._newDefaultSelectedIndex(n,t,this.selectedIndex);e!==null&&(this.selectedIndex=e)}}static{this.slottedOptionFilter=e=>i.i(e)&&!e.hidden}static{this.TYPE_AHEAD_TIMEOUT_MS=1e3}clickHandler(e){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t&&!t.disabled)return this.selectedIndex=this.options.indexOf(t),!0}focusAndScrollOptionIntoView(e=this.firstSelectedOption){this.contains(document.activeElement)&&e!==null&&(e.focus(),requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})}))}focusinHandler(e){!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}getTypeaheadMatches(){let e=this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g,`\\$&`),t=RegExp(`^${e}`,`gi`);return this.options.filter(e=>e.text.trim().match(t))}getNextSelectableIndex(e){let t=this.options.reduce((t,n,r)=>!t&&!n.disabled&&r>=e?n:t,null);return this.options.indexOf(t)}getPreviousSelectableIndex(e){let t=this.options.reduceRight((t,n,r)=>!t&&!n.disabled&&r<=e?n:t,null);return this.options.indexOf(t)}handleChange(e,n){switch(n){case`selected`:t.slottedOptionFilter(e)&&(this.selectedIndex=this.options.indexOf(e)),this.setSelectedOptions();break}}handleTypeAhead(e){this.typeaheadTimeout&&window.clearTimeout(this.typeaheadTimeout),this.typeaheadTimeout=window.setTimeout(()=>this.typeaheadExpired=!0,t.TYPE_AHEAD_TIMEOUT_MS),this.typeaheadBuffer=`${this.typeaheadExpired?``:this.typeaheadBuffer}${e}`}keydownHandler(e){if(this.disabled)return!0;this.shouldSkipFocus=!1;let t=e.key;switch(t){case n.s:e.shiftKey||(e.preventDefault(),this.selectFirstOption());break;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());break;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());break;case`End`:e.preventDefault(),this.selectLastOption();break;case`Tab`:return this.focusAndScrollOptionIntoView(),!0;case n.a:case n.o:return!0;case` `:if(this.typeaheadExpired)return!0;default:return t.length===1&&this.handleTypeAhead(`${t}`),!0}}mousedownHandler(e){return this.shouldSkipFocus=!this.contains(document.activeElement),!0}selectedIndexChanged(e,t){let n=this._validSelectedIndex(t);if(t!==n){this.selectedIndex=n;return}this.setSelectedOptions()}_validSelectedIndex(e){return e>this.options.length-1||e<-1?-1:e}selectedOptionsChanged(n,r){let i=r.filter(t.slottedOptionFilter);this.options.forEach(t=>{let n=e.w.getNotifier(t);n.unsubscribe(this,`selected`),t.selected=i.includes(t),n.subscribe(this,`selected`)})}selectFirstOption(){this.disabled||(this.selectedIndex=this.options.findIndex(e=>!e.disabled))}selectLastOption(){this.disabled||(this.selectedIndex=a(this.options,e=>!e.disabled))}selectNextOption(){if(!this.disabled&&this.selectedIndex<this.options.length-1){let e=this.getNextSelectableIndex(this.selectedIndex+1);e!==-1&&(this.selectedIndex=e)}}selectPreviousOption(){if(!this.disabled&&this.selectedIndex>0){let e=this.getPreviousSelectableIndex(this.selectedIndex-1);e!==-1&&(this.selectedIndex=e)}}_newDefaultSelectedIndex(e,t,n){for(let[n,r]of t.entries())if(this._isDefaultSelected(r)&&!e.includes(r))return n;return null}_isDefaultSelected(e){return e.defaultSelected}setSelectedOptions(){this.selectedOptions=this.selectedIndex===-1?[]:[this.options[this.selectedIndex]],this._activeDescendant=this.firstSelectedOption?.id??``,this.focusAndScrollOptionIntoView()}slottedOptionsChanged(e,t){this.options=t.reduce((e,t)=>(i.i(t)&&e.push(t),e),[]);let n=`${this.options.length}`;this.options.forEach((e,t)=>{e.id||=r.t(`option-`),e.ariaPosInSet=`${t+1}`,e.ariaSetSize=n})}typeaheadBufferChanged(e,t){if(this.$fastController.isConnected){let e=this.getTypeaheadMatches();if(e.length){let t=this.options.indexOf(e[0]);t>-1&&(this.selectedIndex=t)}this.typeaheadExpired=!1}}};t.t([e.l({mode:`boolean`})],o.prototype,`disabled`,void 0),t.t([e.T],o.prototype,`selectedIndex`,void 0),t.t([e.T],o.prototype,`selectedOptions`,void 0),t.t([e.T],o.prototype,`slottedOptions`,void 0),t.t([e.T],o.prototype,`typeaheadBuffer`,void 0),t.t([e.T],o.prototype,`_activeDescendant`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`),r=require(`./strings.cjs`),i=require(`./definition17.cjs`);function a(e,t){let n=e.length;for(;n--;)if(t(e[n],n,e))return n;return-1}var o=class t extends e.t{constructor(...e){super(...e),this._options=[],this.selectedIndex=-1,this.selectedOptions=[],this.shouldSkipFocus=!1,this.typeaheadBuffer=``,this.typeaheadExpired=!0,this.typeaheadTimeout=-1,this._activeDescendant=null}get firstSelectedOption(){return this.selectedOptions[0]??null}get length(){return this.options.length}get options(){return e.w.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.w.notify(this,`options`),this.$fastController.isConnected){let e=this._newDefaultSelectedIndex(n,t,this.selectedIndex);e!==null&&(this.selectedIndex=e)}}static{this.slottedOptionFilter=e=>i.i(e)&&!e.hidden}static{this.TYPE_AHEAD_TIMEOUT_MS=1e3}clickHandler(e){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t&&!t.disabled)return this.selectedIndex=this.options.indexOf(t),!0}focusAndScrollOptionIntoView(e=this.firstSelectedOption){this.contains(document.activeElement)&&e!==null&&(e.focus(),requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})}))}focusinHandler(e){!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}getTypeaheadMatches(){let e=this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g,`\\$&`),t=RegExp(`^${e}`,`gi`);return this.options.filter(e=>e.text.trim().match(t))}getNextSelectableIndex(e){let t=this.options.reduce((t,n,r)=>!t&&!n.disabled&&r>=e?n:t,null);return this.options.indexOf(t)}getPreviousSelectableIndex(e){let t=this.options.reduceRight((t,n,r)=>!t&&!n.disabled&&r<=e?n:t,null);return this.options.indexOf(t)}handleChange(e,n){switch(n){case`selected`:t.slottedOptionFilter(e)&&(this.selectedIndex=this.options.indexOf(e)),this.setSelectedOptions();break}}handleTypeAhead(e){this.typeaheadTimeout&&window.clearTimeout(this.typeaheadTimeout),this.typeaheadTimeout=window.setTimeout(()=>this.typeaheadExpired=!0,t.TYPE_AHEAD_TIMEOUT_MS),this.typeaheadBuffer=`${this.typeaheadExpired?``:this.typeaheadBuffer}${e}`}keydownHandler(e){if(this.disabled)return!0;this.shouldSkipFocus=!1;let t=e.key;switch(t){case n.s:e.shiftKey||(e.preventDefault(),this.selectFirstOption());break;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());break;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());break;case`End`:e.preventDefault(),this.selectLastOption();break;case`Tab`:return this.focusAndScrollOptionIntoView(),!0;case n.a:case n.o:return!0;case` `:if(this.typeaheadExpired)return!0;default:return t.length===1&&this.handleTypeAhead(`${t}`),!0}}mousedownHandler(e){return this.shouldSkipFocus=!this.contains(document.activeElement),!0}selectedIndexChanged(e,t){let n=this._validSelectedIndex(t);if(t!==n){this.selectedIndex=n;return}this.setSelectedOptions()}_validSelectedIndex(e){return e>this.options.length-1||e<-1?-1:e}selectedOptionsChanged(n,r){let i=r.filter(t.slottedOptionFilter);this.options.forEach(t=>{let n=e.w.getNotifier(t);n.unsubscribe(this,`selected`),t.selected=i.includes(t),n.subscribe(this,`selected`)})}selectFirstOption(){this.disabled||(this.selectedIndex=this.options.findIndex(e=>!e.disabled))}selectLastOption(){this.disabled||(this.selectedIndex=a(this.options,e=>!e.disabled))}selectNextOption(){if(!this.disabled&&this.selectedIndex<this.options.length-1){let e=this.getNextSelectableIndex(this.selectedIndex+1);e!==-1&&(this.selectedIndex=e)}}selectPreviousOption(){if(!this.disabled&&this.selectedIndex>0){let e=this.getPreviousSelectableIndex(this.selectedIndex-1);e!==-1&&(this.selectedIndex=e)}}_newDefaultSelectedIndex(e,t,n){for(let[n,r]of t.entries())if(this._isDefaultSelected(r)&&!e.includes(r))return n;return null}_isDefaultSelected(e){return e.defaultSelected}setSelectedOptions(){this.selectedOptions=this.selectedIndex===-1?[]:[this.options[this.selectedIndex]],this._activeDescendant=this.firstSelectedOption?.id??``,this.focusAndScrollOptionIntoView()}slottedOptionsChanged(e,t){this.options=t.reduce((e,t)=>(i.i(t)&&e.push(t),e),[]);let n=`${this.options.length}`;this.options.forEach((e,t)=>{e.id||=r.t(`option-`),e.ariaPosInSet=`${t+1}`,e.ariaSetSize=n})}typeaheadBufferChanged(e,t){if(this.$fastController.isConnected){let e=this.getTypeaheadMatches();if(e.length){let t=this.options.indexOf(e[0]);t>-1&&(this.selectedIndex=t)}this.typeaheadExpired=!1}}};t.t([e.l({mode:`boolean`})],o.prototype,`disabled`,void 0),t.t([e.T],o.prototype,`selectedIndex`,void 0),t.t([e.T],o.prototype,`selectedOptions`,void 0),t.t([e.T],o.prototype,`slottedOptions`,void 0),t.t([e.T],o.prototype,`typeaheadBuffer`,void 0),t.t([e.T],o.prototype,`_activeDescendant`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/bundled/listbox.js

@@ -2,7 +2,7 @@ import { T as e, l as t, t as n, w as r } from "./vivid-element.js";
 import { t as i } from "./decorate.js";
 import { a, i as o, o as s, s as c, t as l } from "./key-codes.js";
 import { t as u } from "./strings.js";
-import { i as d } from "./definition12.js";
+import { i as d } from "./definition17.js";
 //#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/array.js
 function f(e, t) {
 	let n = e.length;

package/bundled/mixins.cjs

@@ -5,7 +5,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 	</div>`;return t.d`${r.t(e=>!p(e.type),n)}
 		<span class="announcement" role="status" aria-live="polite">
 			${r.t(e=>p(e.type),n)}
-		</span>`},[o.t,a.n],{styles:l}),h=class{constructor(e){this.source=null,this.templateBindingObserver=e.templateBinding.createObserver(this,e)}bind(e){this.source=e.source,this.context=e.context,this.controller=e,this.insertionPoint||(this.insertionPoint=document.createComment(``),this.source.appendChild(this.insertionPoint)),this.templateBindingObserver.bind(e),this.handleChange(this.source,this.templateBindingObserver)}handleChange(e,t){if(t===this.templateBindingObserver){let e=this.templateBindingObserver.bind(this.controller);this.instantiateTemplate(e)}}instantiateTemplate(e){this.view&&this.view.dispose(),this.view=e.create(),this.view.bind(this.source,this.context),this.view.insertBefore(this.insertionPoint)}},g=class{constructor(e){this.targetNodeId=``,this.templateBinding=e,this.dataBinding=e}createHTML(e){return t.g.comment(e(this))}createBehavior(){return new h(this)}};t.m.define(g);function _(e){return new g(n.t(e))}var v=[];for(let e=0;e<256;++e)v.push((e+256).toString(16).slice(1));function y(e,t=0){return(v[e[t+0]]+v[e[t+1]]+v[e[t+2]]+v[e[t+3]]+`-`+v[e[t+4]]+v[e[t+5]]+`-`+v[e[t+6]]+v[e[t+7]]+`-`+v[e[t+8]]+v[e[t+9]]+`-`+v[e[t+10]]+v[e[t+11]]+v[e[t+12]]+v[e[t+13]]+v[e[t+14]]+v[e[t+15]]).toLowerCase()}var b,x=new Uint8Array(16);function S(){if(!b){if(typeof crypto>`u`||!crypto.getRandomValues)throw Error(`crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported`);b=crypto.getRandomValues.bind(crypto)}return b(x)}var C={randomUUID:typeof crypto<`u`&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function w(e,t,n){if(C.randomUUID&&!t&&!e)return C.randomUUID();e||={};let r=e.random??e.rng?.()??S();if(r.length<16)throw Error(`Random bytes length must be >= 16`);if(r[6]=r[6]&15|64,r[8]=r[8]&63|128,t){if(n||=0,n<0||n+16>t.length)throw RangeError(`UUID byte range ${n}:${n+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[n+e]=r[e];return t}return y(r)}var T=()=>w(),E=e=>{class n extends e{get _feedbackDescribedBy(){return`feedback slotted-helper-text-feedback`}_internalFeedback(){let e=this._helperTextSlottedContent?.length?``:this.helperText,t=this.errorValidationMessage,n=this.successText;return n?{type:`success`,message:n}:t?{type:`error`,message:t}:e?{type:`helper`,message:e}:{type:`none`,message:``}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type===`none`&&this._helperTextSlottedContent?.length?`helper`:`none`}_getFeedbackTemplate(e){let n=e.tagFor(u);return t.d`
+		</span>`},[o.t,a.n],{styles:l}),h=[];for(let e=0;e<256;++e)h.push((e+256).toString(16).slice(1));function g(e,t=0){return(h[e[t+0]]+h[e[t+1]]+h[e[t+2]]+h[e[t+3]]+`-`+h[e[t+4]]+h[e[t+5]]+`-`+h[e[t+6]]+h[e[t+7]]+`-`+h[e[t+8]]+h[e[t+9]]+`-`+h[e[t+10]]+h[e[t+11]]+h[e[t+12]]+h[e[t+13]]+h[e[t+14]]+h[e[t+15]]).toLowerCase()}var _,v=new Uint8Array(16);function y(){if(!_){if(typeof crypto>`u`||!crypto.getRandomValues)throw Error(`crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported`);_=crypto.getRandomValues.bind(crypto)}return _(v)}var b={randomUUID:typeof crypto<`u`&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function x(e,t,n){if(b.randomUUID&&!t&&!e)return b.randomUUID();e||={};let r=e.random??e.rng?.()??y();if(r.length<16)throw Error(`Random bytes length must be >= 16`);if(r[6]=r[6]&15|64,r[8]=r[8]&63|128,t){if(n||=0,n<0||n+16>t.length)throw RangeError(`UUID byte range ${n}:${n+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[n+e]=r[e];return t}return g(r)}var S=()=>x(),C=class{constructor(e){this.source=null,this.templateBindingObserver=e.templateBinding.createObserver(this,e)}bind(e){this.source=e.source,this.context=e.context,this.controller=e,this.insertionPoint||(this.insertionPoint=document.createComment(``),this.source.appendChild(this.insertionPoint)),this.templateBindingObserver.bind(e),this.handleChange(this.source,this.templateBindingObserver)}handleChange(e,t){if(t===this.templateBindingObserver){let e=this.templateBindingObserver.bind(this.controller);this.instantiateTemplate(e)}}instantiateTemplate(e){this.view&&this.view.dispose(),this.view=e.create(),this.view.bind(this.source,this.context),this.view.insertBefore(this.insertionPoint)}},w=class{constructor(e){this.targetNodeId=``,this.templateBinding=e,this.dataBinding=e}createHTML(e){return t.g.comment(e(this))}createBehavior(){return new C(this)}};t.m.define(w);function T(e){return new w(n.t(e))}var E=e=>{class n extends e{get _feedbackDescribedBy(){return`feedback slotted-helper-text-feedback`}_internalFeedback(){let e=this._helperTextSlottedContent?.length?``:this.helperText,t=this.errorValidationMessage,n=this.successText;return n?{type:`success`,message:n}:t?{type:`error`,message:t}:e?{type:`helper`,message:e}:{type:`none`,message:``}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type===`none`&&this._helperTextSlottedContent?.length?`helper`:`none`}_getFeedbackTemplate(e){let n=e.tagFor(u);return t.d`
 				<${n} id="feedback" :type="${e=>e._internalFeedback().type}">
 					${e=>e._internalFeedback().message}
 				</${n}>
@@ -15,9 +15,9 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 				>
 					<slot name="helper-text" ${i.t(`_helperTextSlottedContent`)}></slot>
 				</${n}>
-			`}}return s.t([t.l({attribute:`helper-text`})],n.prototype,`helperText`,void 0),s.t([t.T],n.prototype,`_helperTextSlottedContent`,void 0),n},D=e=>{let n=()=>`vvd-feedback-${T()}`,r=()=>`vvd-slotted-feedback-${T()}`;class a extends E(e){constructor(...e){super(...e),this._slottedHelperTextIds=[],this._feedbackId=n()}_helperTextSlottedContentChanged(e,t){for(let e of t)e.id||=r();this._slottedHelperTextIds=t.map(e=>e.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(` `)}_getFeedbackTemplate(e){let n=e.tagFor(u);return t.d`
+			`}}return s.t([t.l({attribute:`helper-text`})],n.prototype,`helperText`,void 0),s.t([t.T],n.prototype,`_helperTextSlottedContent`,void 0),n},D=e=>{let n=()=>`vvd-feedback-${S()}`,r=()=>`vvd-slotted-feedback-${S()}`;class a extends E(e){constructor(...e){super(...e),this._slottedHelperTextIds=[],this._feedbackId=n()}_helperTextSlottedContentChanged(e,t){for(let e of t)e.id||=r();this._slottedHelperTextIds=t.map(e=>e.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(` `)}_getFeedbackTemplate(e){let n=e.tagFor(u);return t.d`
 				<slot name="_feedback"></slot>
-				${_(t.d`<${n}
+				${T(t.d`<${n}
 					slot="_feedback"
 					id="${e=>e._feedbackId}"
 					:type="${e=>e._internalFeedback().type}"
@@ -30,4 +30,4 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 						${i.t(`_helperTextSlottedContent`)}
 					></slot>
 				</${n}>
-			`}}return s.t([t.T],a.prototype,`_slottedHelperTextIds`,void 0),a};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
+			`}}return s.t([t.T],a.prototype,`_slottedHelperTextIds`,void 0),a};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});

package/bundled/mixins.js

@@ -37,7 +37,39 @@ var b = (e) => e === "error", x = o("feedback-message", _, (e) => {
 		<span class="announcement" role="status" aria-live="polite">
 			${l((e) => b(e.type), t)}
 		</span>`;
-}, [p, d], { styles: g }), S = class {
+}, [p, d], { styles: g }), S = [];
+for (let e = 0; e < 256; ++e) S.push((e + 256).toString(16).slice(1));
+function C(e, t = 0) {
+	return (S[e[t + 0]] + S[e[t + 1]] + S[e[t + 2]] + S[e[t + 3]] + "-" + S[e[t + 4]] + S[e[t + 5]] + "-" + S[e[t + 6]] + S[e[t + 7]] + "-" + S[e[t + 8]] + S[e[t + 9]] + "-" + S[e[t + 10]] + S[e[t + 11]] + S[e[t + 12]] + S[e[t + 13]] + S[e[t + 14]] + S[e[t + 15]]).toLowerCase();
+}
+//#endregion
+//#region ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/rng.js
+var w, T = new Uint8Array(16);
+function E() {
+	if (!w) {
+		if (typeof crypto > "u" || !crypto.getRandomValues) throw Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+		w = crypto.getRandomValues.bind(crypto);
+	}
+	return w(T);
+}
+var D = { randomUUID: typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto) };
+//#endregion
+//#region ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/v4.js
+function O(e, t, n) {
+	if (D.randomUUID && !t && !e) return D.randomUUID();
+	e ||= {};
+	let r = e.random ?? e.rng?.() ?? E();
+	if (r.length < 16) throw Error("Random bytes length must be >= 16");
+	if (r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, t) {
+		if (n ||= 0, n < 0 || n + 16 > t.length) throw RangeError(`UUID byte range ${n}:${n + 15} is out of buffer bounds`);
+		for (let e = 0; e < 16; ++e) t[n + e] = r[e];
+		return t;
+	}
+	return C(r);
+}
+//#endregion
+//#region src/shared/utils/randomId.ts
+var k = () => O(), A = class {
 	constructor(e) {
 		this.source = null, this.templateBindingObserver = e.templateBinding.createObserver(this, e);
 	}
@@ -54,7 +86,7 @@ var b = (e) => e === "error", x = o("feedback-message", _, (e) => {
 	instantiateTemplate(e) {
 		this.view && this.view.dispose(), this.view = e.create(), this.view.bind(this.source, this.context), this.view.insertBefore(this.insertionPoint);
 	}
-}, C = class {
+}, j = class {
 	constructor(e) {
 		this.targetNodeId = "", this.templateBinding = e, this.dataBinding = e;
 	}
@@ -62,48 +94,16 @@ var b = (e) => e === "error", x = o("feedback-message", _, (e) => {
 		return r.comment(e(this));
 	}
 	createBehavior() {
-		return new S(this);
+		return new A(this);
 	}
 };
-a.define(C);
-function w(e) {
-	return new C(c(e));
+a.define(j);
+function M(e) {
+	return new j(c(e));
 }
 //#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/stringify.js
-var T = [];
-for (let e = 0; e < 256; ++e) T.push((e + 256).toString(16).slice(1));
-function E(e, t = 0) {
-	return (T[e[t + 0]] + T[e[t + 1]] + T[e[t + 2]] + T[e[t + 3]] + "-" + T[e[t + 4]] + T[e[t + 5]] + "-" + T[e[t + 6]] + T[e[t + 7]] + "-" + T[e[t + 8]] + T[e[t + 9]] + "-" + T[e[t + 10]] + T[e[t + 11]] + T[e[t + 12]] + T[e[t + 13]] + T[e[t + 14]] + T[e[t + 15]]).toLowerCase();
-}
-//#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/rng.js
-var D, O = new Uint8Array(16);
-function k() {
-	if (!D) {
-		if (typeof crypto > "u" || !crypto.getRandomValues) throw Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-		D = crypto.getRandomValues.bind(crypto);
-	}
-	return D(O);
-}
-var A = { randomUUID: typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto) };
-//#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/v4.js
-function j(e, t, n) {
-	if (A.randomUUID && !t && !e) return A.randomUUID();
-	e ||= {};
-	let r = e.random ?? e.rng?.() ?? k();
-	if (r.length < 16) throw Error("Random bytes length must be >= 16");
-	if (r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, t) {
-		if (n ||= 0, n < 0 || n + 16 > t.length) throw RangeError(`UUID byte range ${n}:${n + 15} is out of buffer bounds`);
-		for (let e = 0; e < 16; ++e) t[n + e] = r[e];
-		return t;
-	}
-	return E(r);
-}
-//#endregion
-//#region src/shared/utils/randomId.ts
-var M = () => j(), N = (e) => {
+//#region src/shared/feedback/mixins.ts
+var N = (e) => {
 	class r extends e {
 		get _feedbackDescribedBy() {
 			return "feedback slotted-helper-text-feedback";
@@ -144,7 +144,7 @@ var M = () => j(), N = (e) => {
 	}
 	return m([i({ attribute: "helper-text" })], r.prototype, "helperText", void 0), m([t], r.prototype, "_helperTextSlottedContent", void 0), r;
 }, P = (e) => {
-	let r = () => `vvd-feedback-${M()}`, i = () => `vvd-slotted-feedback-${M()}`;
+	let r = () => `vvd-feedback-${k()}`, i = () => `vvd-slotted-feedback-${k()}`;
 	class a extends N(e) {
 		constructor(...e) {
 			super(...e), this._slottedHelperTextIds = [], this._feedbackId = r();
@@ -162,7 +162,7 @@ var M = () => j(), N = (e) => {
 			let t = e.tagFor(_);
 			return n`
 				<slot name="_feedback"></slot>
-				${w(n`<${t}
+				${M(n`<${t}
 					slot="_feedback"
 					id="${(e) => e._feedbackId}"
 					:type="${(e) => e._internalFeedback().type}"
@@ -181,4 +181,4 @@ var M = () => j(), N = (e) => {
 	return m([t], a.prototype, "_slottedHelperTextIds", void 0), a;
 };
 //#endregion
-export { x as a, w as i, P as n, M as r, N as t };
+export { x as a, k as i, P as n, M as r, N as t };

package/bundled/picker-field.template.cjs

@@ -1,6 +1,6 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./slotted.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`),s=require(`./form-element.cjs`),c=require(`./with-error-text.cjs`),l=require(`./with-contextual-help.cjs`),u=require(`./trapped-focus.cjs`),d=require(`./definition6.cjs`),f=require(`./dialog.cjs`),p=require(`./definition8.cjs`),m=require(`./mixins.cjs`),h=require(`./definition15.cjs`);var g=`:host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}`,_=class extends l.t(m.t(c.t(s.t(u.t(e.t(o.n(t.t))))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}constructor(){super(),this.readOnly=!1,this.proxy=document.createElement(`input`),this._popupOpen=!1,this._presentationValue=``,this.value=``}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this.#o),this.addEventListener(`focusin`,this.#e),this.addEventListener(`focusout`,this.#t),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.#o),this.removeEventListener(`focusin`,this.#e),this.removeEventListener(`focusout`,this.#t),this.#a()}#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})};#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})};validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n={handleChange:()=>{this._updatePresentationValue()}};#r;#i(){this.#r=t.w.binding(()=>this.locale,this.#n),this.#r.observe(this,t.C.default)}#a(){this.#r.dispose()}#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!1)};#s(){this.readOnly||(this._popupOpen=!0)}_closePopup(e=!0){this._popupOpen=!1,e&&this._textFieldEl.focus()}_onBaseKeyDown(e){return this._popupOpen&&f.t(e)?(this._closePopup(),!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(e){this._presentationValue=e.currentTarget.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.l({attribute:`readonly`,mode:`boolean`})],_.prototype,`readOnly`,void 0),i.t([t.T],_.prototype,`_popupOpen`,void 0),i.t([t.T],_.prototype,`_presentationValue`,void 0);var v=(e,i,{withSeparator:o,padded:s})=>{let c=e.tagFor(p.i),l=e.tagFor(h.r),u=e.tagFor(d.i);return t.d`
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./slotted.cjs`),i=require(`./decorate.cjs`),a=require(`./form-element.cjs`),o=require(`./with-error-text.cjs`),s=require(`./with-contextual-help.cjs`),c=require(`./trapped-focus.cjs`),l=require(`./class-names.cjs`),u=require(`./form-associated.cjs`),d=require(`./definition6.cjs`),f=require(`./definition8.cjs`),p=require(`./dialog.cjs`),m=require(`./mixins.cjs`),h=require(`./definition12.cjs`);var g=`:host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}`,_=class extends s.t(m.t(o.t(a.t(c.t(e.t(u.n(t.t))))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}constructor(){super(),this.readOnly=!1,this.proxy=document.createElement(`input`),this._popupOpen=!1,this._presentationValue=``,this.value=``}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this.#o),this.addEventListener(`focusin`,this.#e),this.addEventListener(`focusout`,this.#t),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.#o),this.removeEventListener(`focusin`,this.#e),this.removeEventListener(`focusout`,this.#t),this.#a()}#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})};#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})};validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n={handleChange:()=>{this._updatePresentationValue()}};#r;#i(){this.#r=t.w.binding(()=>this.locale,this.#n),this.#r.observe(this,t.C.default)}#a(){this.#r.dispose()}#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!1)};#s(){this.readOnly||(this._popupOpen=!0)}_closePopup(e=!0){this._popupOpen=!1,e&&this._textFieldEl.focus()}_onBaseKeyDown(e){return this._popupOpen&&p.t(e)?(this._closePopup(),!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(e){this._presentationValue=e.currentTarget.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.l({attribute:`readonly`,mode:`boolean`})],_.prototype,`readOnly`,void 0),i.t([t.T],_.prototype,`_popupOpen`,void 0),i.t([t.T],_.prototype,`_presentationValue`,void 0);var v=(e,i,{withSeparator:a,padded:o})=>{let s=e.tagFor(f.i),c=e.tagFor(h.r),u=e.tagFor(d.i);return t.d`
 		<div class='base' @keydown='${(e,{event:t})=>e._onBaseKeyDown(t)}'>
-			<${l} id='text-field'
+			<${c} id='text-field'
 				${n.t(`_textFieldEl`)}
 				class='control'
 				label='${e=>e.label}'
@@ -35,16 +35,16 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 					aria-label='${e=>e._pickerButtonLabel}'
 					@click='${e=>e._onPickerButtonClick()}'
 				></${u}>
-			</${l}>
-			<${c}
+			</${c}>
+			<${s}
 				?open='${e=>e._popupOpen}'
 				:anchor='${e=>e._textFieldEl}'
 				offset='${e=>e._helperTextSlottedContent?.length||e.helperText||e.errorValidationMessage?8:null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${()=>a.t(`dialog`,[`dialog--padded`,s])}" role='dialog' ${n.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
+				<div class="${()=>l.t(`dialog`,[`dialog--padded`,o])}" role='dialog' ${n.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
 					${()=>i}
-					<div class="${()=>a.t(`footer`,[`footer--with-separator`,o])}">
+					<div class="${()=>l.t(`footer`,[`footer--with-separator`,a])}">
 						<${u}
 							id='clear-button'
 							tabindex='3'
@@ -63,5 +63,5 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 						></${u}>
 					</div>
 				</div>
-			</${c}>
+			</${s}>
 		</div>`};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return v}});

package/bundled/picker-field.template.js

@@ -3,19 +3,19 @@ import { C as t, T as n, d as r, l as i, t as a, w as o } from "./vivid-element.
 import { t as s } from "./ref.js";
 import { t as c } from "./slotted.js";
 import { t as l } from "./decorate.js";
-import { t as u } from "./class-names.js";
-import { n as d } from "./form-associated.js";
-import { t as f } from "./form-element.js";
-import { t as p } from "./with-error-text.js";
-import { t as m } from "./with-contextual-help.js";
-import { t as h } from "./trapped-focus.js";
+import { t as u } from "./form-element.js";
+import { t as d } from "./with-error-text.js";
+import { t as f } from "./with-contextual-help.js";
+import { t as p } from "./trapped-focus.js";
+import { t as m } from "./class-names.js";
+import { n as h } from "./form-associated.js";
 import { i as g } from "./definition6.js";
-import { t as _ } from "./dialog.js";
-import { i as v } from "./definition8.js";
+import { i as _ } from "./definition8.js";
+import { t as v } from "./dialog.js";
 import { t as y } from "./mixins.js";
-import { r as b } from "./definition15.js";
+import { r as b } from "./definition12.js";
 //#region src/shared/picker-field/picker-field.scss?inline
-var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}", S = class extends m(y(p(f(h(e(d(a))))))) {
+var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}", S = class extends f(y(d(u(p(e(h(a))))))) {
 	readOnlyChanged() {
 		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
 	}
@@ -60,7 +60,7 @@ var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}
 		this._popupOpen = !1, e && this._textFieldEl.focus();
 	}
 	_onBaseKeyDown(e) {
-		return this._popupOpen && _(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
+		return this._popupOpen && v(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
 	}
 	_presentationValueChanged() {
 		this.dirtyValue = !0, this.validate();
@@ -85,7 +85,7 @@ l([i({
 //#endregion
 //#region src/shared/picker-field/picker-field.template.ts
 var C = (e, t, { withSeparator: n, padded: i }) => {
-	let a = e.tagFor(v), o = e.tagFor(b), l = e.tagFor(g);
+	let a = e.tagFor(_), o = e.tagFor(b), l = e.tagFor(g);
 	return r`
 		<div class='base' @keydown='${(e, { event: t }) => e._onBaseKeyDown(t)}'>
 			<${o} id='text-field'
@@ -130,9 +130,9 @@ var C = (e, t, { withSeparator: n, padded: i }) => {
 				offset='${(e) => e._helperTextSlottedContent?.length || e.helperText || e.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => u("dialog", ["dialog--padded", i])}" role='dialog' ${s("_dialogEl")} aria-modal='true' aria-label='${(e) => e._dialogLabel}'>
+				<div class="${() => m("dialog", ["dialog--padded", i])}" role='dialog' ${s("_dialogEl")} aria-modal='true' aria-label='${(e) => e._dialogLabel}'>
 					${() => t}
-					<div class="${() => u("footer", ["footer--with-separator", n])}">
+					<div class="${() => m("footer", ["footer--with-separator", n])}">
 						<${l}
 							id='clear-button'
 							tabindex='3'