@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/bundled/listbox.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`),r=require(`./aria-binding-directive.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.k.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.k.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());return;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());return;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());return;case`End`:e.preventDefault(),this.selectLastOption();return;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.k.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.r(`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.m({mode:`boolean`})],o.prototype,`disabled`,void 0),t.t([e.A],o.prototype,`selectedIndex`,void 0),t.t([e.A],o.prototype,`selectedOptions`,void 0),t.t([e.A],o.prototype,`slottedOptions`,void 0),t.t([e.A],o.prototype,`typeaheadBuffer`,void 0),t.t([e.A],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(`./aria-binding-directive.cjs`),i=require(`./definition17.cjs`),a=require(`./definition18.cjs`),o=require(`./extractOptions.cjs`);function s(e,t){let n=e.length;for(;n--;)if(t(e[n],n,e))return n;return-1}var c=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,this._onOptgroupChange=()=>{this.slottedOptionsChanged(void 0,this.slottedOptions)}}get firstSelectedOption(){return this.selectedOptions[0]??null}get length(){return this.options.length}get options(){return e.k.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.k.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||a.r(e)}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());return;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());return;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());return;case`End`:e.preventDefault(),this.selectLastOption();return;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.k.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=s(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()}static extractOptions(e){return o.t(e)}slottedOptionsChanged(e,n){this.options=t.extractOptions(n);let i=`${this.options.length}`;this.options.forEach((e,t)=>{e.id||=r.r(`option-`),e.ariaPosInSet=`${t+1}`,e.ariaSetSize=i})}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}}connectedCallback(){super.connectedCallback(),this.addEventListener(`optgroup-change`,this._onOptgroupChange)}disconnectedCallback(){this.removeEventListener(`optgroup-change`,this._onOptgroupChange),super.disconnectedCallback()}};t.t([e.m({mode:`boolean`})],c.prototype,`disabled`,void 0),t.t([e.A],c.prototype,`selectedIndex`,void 0),t.t([e.A],c.prototype,`selectedOptions`,void 0),t.t([e.A],c.prototype,`slottedOptions`,void 0),t.t([e.A],c.prototype,`typeaheadBuffer`,void 0),t.t([e.A],c.prototype,`_activeDescendant`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});

package/bundled/listbox.js

@@ -3,17 +3,21 @@ 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 { r as u } from "./aria-binding-directive.js";
 import { i as d } from "./definition17.js";
+import { r as f } from "./definition18.js";
+import { t as p } from "./extractOptions.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) {
+function m(e, t) {
 	let n = e.length;
 	for (; n--;) if (t(e[n], n, e)) return n;
 	return -1;
 }
 //#endregion
 //#region src/shared/foundation/listbox/listbox.ts
-var p = class e extends r {
+var h = class e extends r {
 	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;
+		super(...e), this._options = [], this.selectedIndex = -1, this.selectedOptions = [], this.shouldSkipFocus = !1, this.typeaheadBuffer = "", this.typeaheadExpired = !0, this.typeaheadTimeout = -1, this._activeDescendant = null, this._onOptgroupChange = () => {
+			this.slottedOptionsChanged(void 0, this.slottedOptions);
+		};
 	}
 	get firstSelectedOption() {
 		return this.selectedOptions[0] ?? null;
@@ -32,7 +36,7 @@ var p = class e extends r {
 		}
 	}
 	static {
-		this.slottedOptionFilter = (e) => d(e) && !e.hidden;
+		this.slottedOptionFilter = (e) => d(e) && !e.hidden || f(e);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -127,7 +131,7 @@ var p = class e extends r {
 	}
 	selectLastOption() {
 		/* v8 ignore else -- @preserve */
-		this.disabled || (this.selectedIndex = f(this.options, (e) => !e.disabled));
+		this.disabled || (this.selectedIndex = m(this.options, (e) => !e.disabled));
 	}
 	selectNextOption() {
 		/* v8 ignore else -- @preserve */
@@ -153,11 +157,14 @@ var p = class e extends r {
 	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) => (d(t) && e.push(t), e), []);
-		let n = `${this.options.length}`;
+	static extractOptions(e) {
+		return p(e);
+	}
+	slottedOptionsChanged(t, n) {
+		this.options = e.extractOptions(n);
+		let r = `${this.options.length}`;
 		this.options.forEach((e, t) => {
-			e.id ||= u("option-"), e.ariaPosInSet = `${t + 1}`, e.ariaSetSize = n;
+			e.id ||= u("option-"), e.ariaPosInSet = `${t + 1}`, e.ariaSetSize = r;
 		});
 	}
 	typeaheadBufferChanged(e, t) {
@@ -172,7 +179,13 @@ var p = class e extends r {
 			this.typeaheadExpired = !1;
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("optgroup-change", this._onOptgroupChange);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("optgroup-change", this._onOptgroupChange), super.disconnectedCallback();
+	}
 };
-i([n({ mode: "boolean" })], p.prototype, "disabled", void 0), i([e], p.prototype, "selectedIndex", void 0), i([e], p.prototype, "selectedOptions", void 0), i([e], p.prototype, "slottedOptions", void 0), i([e], p.prototype, "typeaheadBuffer", void 0), i([e], p.prototype, "_activeDescendant", void 0);
+i([n({ mode: "boolean" })], h.prototype, "disabled", void 0), i([e], h.prototype, "selectedIndex", void 0), i([e], h.prototype, "selectedOptions", void 0), i([e], h.prototype, "slottedOptions", void 0), i([e], h.prototype, "typeaheadBuffer", void 0), i([e], h.prototype, "_activeDescendant", void 0);
 //#endregion
-export { p as t };
+export { h as t };

package/bundled/mixins.cjs

@@ -1,11 +1,11 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./definition2.cjs`),s=require(`./class-names.cjs`),c=require(`./render-in-light-dom.cjs`);var l=`:host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}`,u=class extends e.t(t.t){constructor(...e){super(...e),this.type=`none`}};a.t([t.m],u.prototype,`type`,void 0);function d(e,n,r){let i=e.tagFor(o.r);return t.p`<${i} class="icon" name="${n}" label="${e=>e.locale.feedbackMessage[r]}"></${i}>`}function f(e){let n={none:``,helper:``,error:d(e,`info-line`,`errorIconText`),success:d(e,`check-circle-line`,`successIconText`)};return t.p`${e=>n[e.type]}`}var p=e=>e===`error`,m=t.u(`feedback-message`,u,e=>{let n=t.p`<div
-		class="${e=>s.t(`message`,`${e.type}-message`)}"
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./render-in-light-dom.cjs`);var l=`:host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}`,u=class extends e.t(t.t){constructor(...e){super(...e),this.type=`none`}};a.t([t.m],u.prototype,`type`,void 0);function d(e,n,r){let i=e.tagFor(s.r);return t.p`<${i} class="icon" name="${n}" label="${e=>e.locale.feedbackMessage[r]}"></${i}>`}function f(e){let n={none:``,helper:``,error:d(e,`info-line`,`errorIconText`),success:d(e,`check-circle-line`,`successIconText`)};return t.p`${e=>n[e.type]}`}var p=e=>e===`error`,m=t.u(`feedback-message`,u,e=>{let n=t.p`<div
+		class="${e=>o.t(`message`,`${e.type}-message`)}"
 	>
 		${f(e)}<slot></slot>
 	</div>`;return t.p`${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,i.n],{styles:l}),h=e=>{class r 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 r=e.tagFor(u);return t.p`
+		</span>`},[s.t,i.n],{styles:l}),h=e=>{class r 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 r=e.tagFor(u);return t.p`
 				<${r} id="feedback" :type="${e=>e._internalFeedback().type}">
 					${e=>e._internalFeedback().message}
 				</${r}>

package/bundled/mixins.js

@@ -4,8 +4,8 @@ import { t as o } from "./slotted.js";
 import { t as s } from "./when.js";
 import { n as c } from "./definition.js";
 import { t as l } from "./decorate.js";
-import { r as u, t as d } from "./definition2.js";
-import { t as f } from "./class-names.js";
+import { t as u } from "./class-names.js";
+import { r as d, t as f } from "./definition3.js";
 import { n as p, t as m } from "./render-in-light-dom.js";
 //#region src/shared/feedback/feedback-message.scss?inline
 var h = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}", g = class extends e(i) {
@@ -15,7 +15,7 @@ var h = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typo
 };
 l([n], g.prototype, "type", void 0);
 function _(e, t, n) {
-	let i = e.tagFor(u);
+	let i = e.tagFor(d);
 	return r`<${i} class="icon" name="${t}" label="${(e) => e.locale.feedbackMessage[n]}"></${i}>`;
 }
 function v(e) {
@@ -29,7 +29,7 @@ function v(e) {
 }
 var y = (e) => e === "error", b = a("feedback-message", g, (e) => {
 	let t = r`<div
-		class="${(e) => f("message", `${e.type}-message`)}"
+		class="${(e) => u("message", `${e.type}-message`)}"
 	>
 		${v(e)}<slot></slot>
 	</div>`;
@@ -37,7 +37,7 @@ var y = (e) => e === "error", b = a("feedback-message", g, (e) => {
 		<span class="announcement" role="status" aria-live="polite">
 			${s((e) => y(e.type), t)}
 		</span>`;
-}, [d, c], { styles: h }), x = (e) => {
+}, [f, c], { styles: h }), x = (e) => {
 	class i extends e {
 		get _feedbackDescribedBy() {
 			return "feedback slotted-helper-text-feedback";

package/bundled/numberConverter.cjs

@@ -9,4 +9,4 @@ var e=`<svg width="80%" height="80%" viewBox="0 0 64 64">
             </animateTransform>
         </g>
     </g>
-</svg>`,t=`4.11.0`,n=`https://icon.resources.vonage.com`,r=t;`${n}${r}`;var i=(e,t)=>[n,`v${t}`,e].join(`/`),a=({ok:e,headers:t})=>{if(!e||t.get(`content-type`)!==`image/svg+xml`)throw Error(`Something went wrong`)},o=e=>(a(e),e.text()),s=(e,t)=>fetch(i(`${e}.svg`,r),{signal:t}).then(o),c=e=>(e??``).trim(),l=new Map,u=(e,t)=>{let n=c(e);if(!n)return Promise.resolve(``);let r=l.get(n);if(r&&!r.signal?.aborted)return r.promise;let i=s(n,t).then(e=>{let r=l.get(n);if(r&&r.promise===i&&t.aborted)throw l.delete(n),t.reason??new DOMException(`Aborted`,`AbortError`);return e}).catch(e=>{let t=l.get(n);throw t&&t.promise===i&&l.delete(n),e});return l.set(n,{promise:i,signal:t}),i},d={toView(e){return e===void 0?null:e.toString()},fromView(e){if(typeof e==`string`&&(e=parseFloat(e)),typeof e==`number`)return isNaN(e)||!isFinite(e)?void 0:e}};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
+</svg>`,t={name:`@vonage/vivid-icons`,version:`4.11.0`,type:`module`,exports:{".":{types:`./dist/index.d.ts`,default:`./dist/index.mjs`},"./package.json":`./package.json`},files:[`dist`],scripts:{build:`vite build`,fetch:`tsx scripts/fetch-icons.ts`,lint:`eslint . --max-warnings=0`,"lint:fix":`eslint . --max-warnings=0 --fix`,typecheck:`tsc --noEmit`},dependencies:{"@microsoft/fast-element":`catalog:`},devDependencies:{"@figma/rest-api-spec":`catalog:`,"@repo/eslint-config":`workspace:*`,"@repo/fetch-icons":`workspace:*`,"@repo/typescript-config":`workspace:*`,"@repo/utils":`workspace:*`,"@repo/vite-config":`workspace:*`,"@types/node":`catalog:`,dotenv:`catalog:`,eslint:`catalog:`,tsx:`catalog:`,typescript:`catalog:`,vite:`catalog:`,"vite-plugin-dts":`catalog:`}},n=`https://icon.resources.vonage.com`,r=t.version;`${n}${r}`;var i=(e,t)=>[n,`v${t}`,e].join(`/`),a=({ok:e,headers:t})=>{if(!e||t.get(`content-type`)!==`image/svg+xml`)throw Error(`Something went wrong`)},o=e=>(a(e),e.text()),s=(e,t)=>fetch(i(`${e}.svg`,r),{signal:t}).then(o),c=e=>(e??``).trim(),l=new Map,u=(e,t)=>{let n=c(e);if(!n)return Promise.resolve(``);let r=l.get(n);if(r&&!r.signal?.aborted)return r.promise;let i=s(n,t).then(e=>{let r=l.get(n);if(r&&r.promise===i&&t.aborted)throw l.delete(n),t.reason??new DOMException(`Aborted`,`AbortError`);return e}).catch(e=>{let t=l.get(n);throw t&&t.promise===i&&l.delete(n),e});return l.set(n,{promise:i,signal:t}),i},d={toView(e){return e===void 0?null:e.toString()},fromView(e){if(typeof e==`string`&&(e=parseFloat(e)),typeof e==`number`)return isNaN(e)||!isFinite(e)?void 0:e}};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/bundled/numberConverter.js

@@ -1,5 +1,40 @@
 //#region src/shared/icon/icon-placeholder.ts
-var e = "<svg width=\"80%\" height=\"80%\" viewBox=\"0 0 64 64\">\n    <g>\n        <g stroke-width=\"6\" stroke-linecap=\"round\" fill=\"none\">\n            <path stroke=\"currentColor\" d=\"M4,32 c0,15,12,28,28,28c8,0,16-4,21-9\">\n            </path>\n            <path d=\"M60,32 C60,16,47.464,4,32,4S4,16,4,32\">\n            </path>\n            <animateTransform values=\"0,32,32;360,32,32\" attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\" dur=\"750ms\">\n            </animateTransform>\n        </g>\n    </g>\n</svg>", t = "4.11.0", n = "https://icon.resources.vonage.com", r = t;
+var e = "<svg width=\"80%\" height=\"80%\" viewBox=\"0 0 64 64\">\n    <g>\n        <g stroke-width=\"6\" stroke-linecap=\"round\" fill=\"none\">\n            <path stroke=\"currentColor\" d=\"M4,32 c0,15,12,28,28,28c8,0,16-4,21-9\">\n            </path>\n            <path d=\"M60,32 C60,16,47.464,4,32,4S4,16,4,32\">\n            </path>\n            <animateTransform values=\"0,32,32;360,32,32\" attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\" dur=\"750ms\">\n            </animateTransform>\n        </g>\n    </g>\n</svg>", t = {
+	name: "@vonage/vivid-icons",
+	version: "4.11.0",
+	type: "module",
+	exports: {
+		".": {
+			types: "./dist/index.d.ts",
+			default: "./dist/index.mjs"
+		},
+		"./package.json": "./package.json"
+	},
+	files: ["dist"],
+	scripts: {
+		build: "vite build",
+		fetch: "tsx scripts/fetch-icons.ts",
+		lint: "eslint . --max-warnings=0",
+		"lint:fix": "eslint . --max-warnings=0 --fix",
+		typecheck: "tsc --noEmit"
+	},
+	dependencies: { "@microsoft/fast-element": "catalog:" },
+	devDependencies: {
+		"@figma/rest-api-spec": "catalog:",
+		"@repo/eslint-config": "workspace:*",
+		"@repo/fetch-icons": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
+		"@repo/utils": "workspace:*",
+		"@repo/vite-config": "workspace:*",
+		"@types/node": "catalog:",
+		dotenv: "catalog:",
+		eslint: "catalog:",
+		tsx: "catalog:",
+		typescript: "catalog:",
+		vite: "catalog:",
+		"vite-plugin-dts": "catalog:"
+	}
+}, n = "https://icon.resources.vonage.com", r = t.version;
 `${n}${r}`;
 //#endregion
 //#region src/shared/icon/utils.ts

package/bundled/picker-field.template.cjs

@@ -1,6 +1,6 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./ref.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.#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})},this.#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})},this.proxy=document.createElement(`input`),this.#n={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!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;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n;#r;#i(){this.#r=t.k.binding(()=>this.locale,this.#n),this.#r.observe(this,t.O.default)}#a(){this.#r.dispose()}#o;#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){let t=e.currentTarget;this._presentationValue=t.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.m()],_.prototype,`scale`,void 0),i.t([t.m({attribute:`readonly`,mode:`boolean`})],_.prototype,`readOnly`,void 0),i.t([t.A],_.prototype,`_popupOpen`,void 0),i.t([t.A],_.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.p`
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./ref.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`),s=require(`./definition6.cjs`),c=require(`./definition8.cjs`),l=require(`./dialog.cjs`),u=require(`./mixins.cjs`),d=require(`./form-element.cjs`),f=require(`./with-contextual-help.cjs`),p=require(`./with-error-text.cjs`),m=require(`./definition12.cjs`),h=require(`./trapped-focus.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 f.t(u.t(p.t(d.t(h.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.#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})},this.#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})},this.proxy=document.createElement(`input`),this.#n={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!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;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n;#r;#i(){this.#r=t.k.binding(()=>this.locale,this.#n),this.#r.observe(this,t.O.default)}#a(){this.#r.dispose()}#o;#s(){this.readOnly||(this._popupOpen=!0)}_closePopup(e=!0){this._popupOpen=!1,e&&this._textFieldEl.focus()}_onBaseKeyDown(e){return this._popupOpen&&l.t(e)?(this._closePopup(),!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(e){let t=e.currentTarget;this._presentationValue=t.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.m()],_.prototype,`scale`,void 0),i.t([t.m({attribute:`readonly`,mode:`boolean`})],_.prototype,`readOnly`,void 0),i.t([t.A],_.prototype,`_popupOpen`,void 0),i.t([t.A],_.prototype,`_presentationValue`,void 0);var v=(e,i,{withSeparator:o,padded:l})=>{let u=e.tagFor(c.i),d=e.tagFor(m.r),f=e.tagFor(s.i);return t.p`
 		<div class='base' @keydown='${(e,{event:t})=>e._onBaseKeyDown(t)}'>
-			<${c} id='text-field'
+			<${d} id='text-field'
 				${r.t(`_textFieldEl`)}
 				class='control'
 				label='${e=>e.label}'
@@ -25,7 +25,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 					name='contextual-help'
 					${n.t(`_contextualHelpSlottedContent`)}
 				></slot>
-				<${u}
+				<${f}
 					id='picker-button'
 					${r.t(`_pickerButtonEl`)}
 					slot='action-items'
@@ -35,34 +35,34 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 					?disabled='${e=>e.disabled||e.readOnly}'
 					aria-label='${e=>e._pickerButtonLabel}'
 					@click='${e=>e._onPickerButtonClick()}'
-				></${u}>
-			</${c}>
-			<${s}
+				></${f}>
+			</${d}>
+			<${u}
 				?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="${()=>l.t(`dialog`,[`dialog--padded`,o])}" role='dialog' ${r.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
+				<div class="${()=>a.t(`dialog`,[`dialog--padded`,l])}" role='dialog' ${r.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
 					${()=>i}
-					<div class="${()=>l.t(`footer`,[`footer--with-separator`,a])}">
-						<${u}
+					<div class="${()=>a.t(`footer`,[`footer--with-separator`,o])}">
+						<${f}
 							id='clear-button'
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'
 							label='${e=>e.locale.pickerField.clearLabel}'
 							@click='${e=>e._onClearClick()}'
-						></${u}>
-						<${u}
+						></${f}>
+						<${f}
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'
 							appearance='filled'
 							label='${e=>e.locale.pickerField.okLabel}'
 							@click='${e=>e._onOkClick()}'
-						></${u}>
+						></${f}>
 					</div>
 				</div>
-			</${s}>
+			</${u}>
 		</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 { A as t, O as n, k as r, m as i, p as a, t as o } from "./vivid-element.
 import { t as s } from "./slotted.js";
 import { t as c } from "./ref.js";
 import { t as l } from "./decorate.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 { i as _ } from "./definition8.js";
-import { t as v } from "./dialog.js";
-import { t as y } from "./mixins.js";
-import { r as b } from "./definition12.js";
+import { t as u } from "./class-names.js";
+import { n as d } from "./form-associated.js";
+import { i as f } from "./definition6.js";
+import { i as p } from "./definition8.js";
+import { t as m } from "./dialog.js";
+import { t as h } from "./mixins.js";
+import { t as g } from "./form-element.js";
+import { t as _ } from "./with-contextual-help.js";
+import { t as v } from "./with-error-text.js";
+import { r as y } from "./definition12.js";
+import { t as b } from "./trapped-focus.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 f(y(d(u(p(e(h(o))))))) {
+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 _(h(v(g(b(e(d(o))))))) {
 	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 && v(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
+		return this._popupOpen && m(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
 	}
 	_presentationValueChanged() {
 		this.dirtyValue = !0, this.validate();
@@ -86,7 +86,7 @@ l([i()], S.prototype, "scale", void 0), l([i({
 //#endregion
 //#region src/shared/picker-field/picker-field.template.ts
 var C = (e, t, { withSeparator: n, padded: r }) => {
-	let i = e.tagFor(_), o = e.tagFor(b), l = e.tagFor(g);
+	let i = e.tagFor(p), o = e.tagFor(y), l = e.tagFor(f);
 	return a`
 		<div class='base' @keydown='${(e, { event: t }) => e._onBaseKeyDown(t)}'>
 			<${o} id='text-field'
@@ -132,9 +132,9 @@ var C = (e, t, { withSeparator: n, padded: r }) => {
 				offset='${(e) => e._helperTextSlottedContent?.length || e.helperText || e.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => m("dialog", ["dialog--padded", r])}" role='dialog' ${c("_dialogEl")} aria-modal='true' aria-label='${(e) => e._dialogLabel}'>
+				<div class="${() => u("dialog", ["dialog--padded", r])}" role='dialog' ${c("_dialogEl")} aria-modal='true' aria-label='${(e) => e._dialogLabel}'>
 					${() => t}
-					<div class="${() => m("footer", ["footer--with-separator", n])}">
+					<div class="${() => u("footer", ["footer--with-separator", n])}">
 						<${l}
 							id='clear-button'
 							tabindex='3'

package/bundled/render-in-light-dom.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`);var t=[];for(let e=0;e<256;++e)t.push((e+256).toString(16).slice(1));function n(e,n=0){return(t[e[n+0]]+t[e[n+1]]+t[e[n+2]]+t[e[n+3]]+`-`+t[e[n+4]]+t[e[n+5]]+`-`+t[e[n+6]]+t[e[n+7]]+`-`+t[e[n+8]]+t[e[n+9]]+`-`+t[e[n+10]]+t[e[n+11]]+t[e[n+12]]+t[e[n+13]]+t[e[n+14]]+t[e[n+15]]).toLowerCase()}var r,i=new Uint8Array(16);function a(){if(!r){if(typeof crypto>`u`||!crypto.getRandomValues)throw Error(`crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported`);r=crypto.getRandomValues.bind(crypto)}return r(i)}var o={randomUUID:typeof crypto<`u`&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function s(e,t,r){if(o.randomUUID&&!t&&!e)return o.randomUUID();e||={};let i=e.random??e.rng?.()??a();if(i.length<16)throw Error(`Random bytes length must be >= 16`);if(i[6]=i[6]&15|64,i[8]=i[8]&63|128,t){if(r||=0,r<0||r+16>t.length)throw RangeError(`UUID byte range ${r}:${r+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[r+e]=i[e];return t}return n(i)}var c=()=>s(),l=class{constructor(e){this.template=e}createHTML(t){return e.C.comment(t(this))}createBehavior(){return this}bind(e){let t=this.template.create();t.bind(e.source,e.context),t.appendTo(e.source),e.onUnbind({unbind:()=>{t.firstChild.parentNode&&t.lastChild.parentNode?t.dispose():t.unbind()}})}};e.x.define(l);function u(e){return new l(e)}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
+const e=require(`./vivid-element.cjs`);var t=[];for(let e=0;e<256;++e)t.push((e+256).toString(16).slice(1));function n(e,n=0){return(t[e[n+0]]+t[e[n+1]]+t[e[n+2]]+t[e[n+3]]+`-`+t[e[n+4]]+t[e[n+5]]+`-`+t[e[n+6]]+t[e[n+7]]+`-`+t[e[n+8]]+t[e[n+9]]+`-`+t[e[n+10]]+t[e[n+11]]+t[e[n+12]]+t[e[n+13]]+t[e[n+14]]+t[e[n+15]]).toLowerCase()}var r=new Uint8Array(16);function i(){return crypto.getRandomValues(r)}function a(e,t,n){return!t&&!e&&crypto.randomUUID?crypto.randomUUID():o(e,t,n)}function o(e,t,r){e||={};let a=e.random??e.rng?.()??i();if(a.length<16)throw Error(`Random bytes length must be >= 16`);if(a[6]=a[6]&15|64,a[8]=a[8]&63|128,t){if(r||=0,r<0||r+16>t.length)throw RangeError(`UUID byte range ${r}:${r+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[r+e]=a[e];return t}return n(a)}var s=()=>a(),c=class{constructor(e){this.template=e}createHTML(t){return e.C.comment(t(this))}createBehavior(){return this}bind(e){let t=this.template.create();t.bind(e.source,e.context),t.appendTo(e.source),e.onUnbind({unbind:()=>{t.firstChild.parentNode&&t.lastChild.parentNode?t.dispose():t.unbind()}})}};e.x.define(c);function l(e){return new c(e)}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/bundled/render-in-light-dom.js

@@ -1,27 +1,24 @@
 import { C as e, x as t } from "./vivid-element.js";
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/stringify.js
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/stringify.js
 var n = [];
 for (let e = 0; e < 256; ++e) n.push((e + 256).toString(16).slice(1));
 function r(e, t = 0) {
 	return (n[e[t + 0]] + n[e[t + 1]] + n[e[t + 2]] + n[e[t + 3]] + "-" + n[e[t + 4]] + n[e[t + 5]] + "-" + n[e[t + 6]] + n[e[t + 7]] + "-" + n[e[t + 8]] + n[e[t + 9]] + "-" + n[e[t + 10]] + n[e[t + 11]] + n[e[t + 12]] + n[e[t + 13]] + n[e[t + 14]] + n[e[t + 15]]).toLowerCase();
 }
 //#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/rng.js
-var i, a = new Uint8Array(16);
-function o() {
-	if (!i) {
-		if (typeof crypto > "u" || !crypto.getRandomValues) throw Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-		i = crypto.getRandomValues.bind(crypto);
-	}
-	return i(a);
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/rng.js
+var i = new Uint8Array(16);
+function a() {
+	return crypto.getRandomValues(i);
 }
-var s = { randomUUID: typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto) };
 //#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/v4.js
-function c(e, t, n) {
-	if (s.randomUUID && !t && !e) return s.randomUUID();
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/v4.js
+function o(e, t, n) {
+	return !t && !e && crypto.randomUUID ? crypto.randomUUID() : s(e, t, n);
+}
+function s(e, t, n) {
 	e ||= {};
-	let i = e.random ?? e.rng?.() ?? o();
+	let i = e.random ?? e.rng?.() ?? a();
 	if (i.length < 16) throw Error("Random bytes length must be >= 16");
 	if (i[6] = i[6] & 15 | 64, i[8] = i[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`);
@@ -32,7 +29,7 @@ function c(e, t, n) {
 }
 //#endregion
 //#region src/shared/utils/randomId.ts
-var l = () => c(), u = class {
+var c = () => o(), l = class {
 	constructor(e) {
 		this.template = e;
 	}
@@ -49,9 +46,9 @@ var l = () => c(), u = class {
 		} });
 	}
 };
-t.define(u);
-function d(e) {
-	return new u(e);
+t.define(l);
+function u(e) {
+	return new l(e);
 }
 //#endregion
-export { l as n, d as t };
+export { c as n, u as t };

package/bundled/slider.template.cjs

@@ -1,29 +1,29 @@
-const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./aria.cjs`),i=require(`./class-names.cjs`),a=require(`./numbers.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./definition8.cjs`);var c=e=>{let t=e.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0))},l=(e,t)=>{let n=10**c(t),r=Math.round(e/t)*t;return Math.round(r*n)/n},u=e=>e>0?e:1,d={fromView(e){return u(Number(e))},toView(e){return e.toString()}},f=(e,t,n)=>e+(t-e)*n,p=(e,t,n)=>a.n(0,1,(n-e)/(t-e)),m=({disabled:e,connotation:t})=>i.t(`control`,[`disabled`,e],[`connotation-${t}`,!!t]),h=({_focusVisible:e})=>i.t(`thumb-container`,[`focus-visible`,e]),g=(t,n)=>{let r=t?[`right`,`center`,``,`100% repeat-x`]:[`bottom`,`top`,`100%`,`repeat-y`];return e.p` <div
+const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./aria.cjs`),i=require(`./class-names.cjs`),a=require(`./numbers.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./definition8.cjs`);var c=e=>{let t=e.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0))},l=(e,t)=>{let n=10**c(t),r=Math.round(e/t)*t;return Math.round(r*n)/n},u=e=>e>0?e:1,d={fromView(e){return u(Number(e))},toView(e){return e.toString()}},f=(e,t,n)=>e+(t-e)*n,p=(e,t,n)=>a.n(0,1,(n-e)/(t-e)),m=(t,n)=>{let r=t?[`right`,`center`,``,`100% repeat-x`]:[`bottom`,`top`,`100%`,`repeat-y`];return e.p` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${r[0]}, currentcolor 1px, transparent 0px)
 	0px ${r[1]} / ${r[2]} calc((100% - 1px) / ${n}) ${r[3]}
 	"
-	></div>`},_=i=>{let a=i.tagFor(s.i);return e.p`<template
+	></div>`},h=a=>{let c=a.tagFor(s.i);return e.p`<template
 		@focusin="${e=>e._onFocusIn()}"
 		@focusout="${e=>e._onFocusOut()}"
 	>
 		<div
 			tabindex="${e=>e.disabled?null:0}"
-			class="${m} ${e=>e.orientation}"
+			class="${e=>i.t(`control`,[`disabled`,e.disabled],[`connotation-${e.connotation}`,!!e.connotation])} ${e=>e.orientation}"
 			${o.n({role:`slider`,ariaValueText:e=>e.ariaValueText||e.valueTextFormatter(e.value),ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max,ariaDisabled:e=>e.disabled?`true`:null,ariaOrientation:e=>e.orientation})}
 		>
 			<div class="positioning-region">
 				<div ${t.t(`track`)} class="track">
-					${e=>e.markers?g(e.orientation===r.t.horizontal,Math.floor((e.max-e.min)/e.step)):void 0}
+					${e=>e.markers?m(e.orientation===r.t.horizontal,Math.floor((e.max-e.min)/e.step)):void 0}
 					<div class="track-start" style="${e=>e.position}"></div>
 				</div>
 				<div
 					${t.t(`thumb`)}
-					class="${e=>h(e)}"
+					class="${e=>i.t(`thumb-container`,[`focus-visible`,e._focusVisible])}"
 					style="${e=>e.position}"
 				></div>
-				${n.t(e=>e.pin,e.p`<${a}
+				${n.t(e=>e.pin,e.p`<${c}
 					class="popup"
 					arrow
 					alternate
@@ -35,7 +35,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.
 					aria-hidden="true"
 				>
 					<div class="tooltip">${e=>e.ariaValueText||e.valueTextFormatter(e.value)}</div>
-				</${a}>`)}
+				</${c}>`)}
 			</div>
 		</div></template
-	>`};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
+	>`};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});

package/bundled/slider.template.js

@@ -20,7 +20,7 @@ var l = (e) => {
 	toView(e) {
 		return e.toString();
 	}
-}, p = (e, t, n) => e + (t - e) * n, m = (e, t, n) => a(0, 1, (n - e) / (t - e)), h = ({ disabled: e, connotation: t }) => i("control", ["disabled", e], [`connotation-${t}`, !!t]), g = ({ _focusVisible: e }) => i("thumb-container", ["focus-visible", e]), _ = (t, n) => {
+}, p = (e, t, n) => e + (t - e) * n, m = (e, t, n) => a(0, 1, (n - e) / (t - e)), h = (t, n) => {
 	let r = t ? [
 		"right",
 		"center",
@@ -39,15 +39,15 @@ var l = (e) => {
 	0px ${r[1]} / ${r[2]} calc((100% - 1px) / ${n}) ${r[3]}
 	"
 	></div>`;
-}, v = (i) => {
-	let a = i.tagFor(s);
+}, g = (a) => {
+	let l = a.tagFor(s);
 	return e`<template
 		@focusin="${(e) => e._onFocusIn()}"
 		@focusout="${(e) => e._onFocusOut()}"
 	>
 		<div
 			tabindex="${(e) => e.disabled ? null : 0}"
-			class="${h} ${(e) => e.orientation}"
+			class="${(e) => i("control", ["disabled", e.disabled], [`connotation-${e.connotation}`, !!e.connotation])} ${(e) => e.orientation}"
 			${o({
 		role: "slider",
 		ariaValueText: (e) => e.ariaValueText || e.valueTextFormatter(e.value),
@@ -60,15 +60,15 @@ var l = (e) => {
 		>
 			<div class="positioning-region">
 				<div ${t("track")} class="track">
-					${(e) => e.markers ? _(e.orientation === r.horizontal, Math.floor((e.max - e.min) / e.step)) : void 0}
+					${(e) => e.markers ? h(e.orientation === r.horizontal, Math.floor((e.max - e.min) / e.step)) : void 0}
 					<div class="track-start" style="${(e) => e.position}"></div>
 				</div>
 				<div
 					${t("thumb")}
-					class="${(e) => g(e)}"
+					class="${(e) => i("thumb-container", ["focus-visible", e._focusVisible])}"
 					style="${(e) => e.position}"
 				></div>
-				${n((e) => e.pin, e`<${a}
+				${n((e) => e.pin, e`<${l}
 					class="popup"
 					arrow
 					alternate
@@ -80,10 +80,10 @@ var l = (e) => {
 					aria-hidden="true"
 				>
 					<div class="tooltip">${(e) => e.ariaValueText || e.valueTextFormatter(e.value)}</div>
-				</${a}>`)}
+				</${l}>`)}
 			</div>
 		</div></template
 	>`;
 };
 //#endregion
-export { f as a, p as i, _ as n, u as o, m as r, v as t };
+export { f as a, p as i, h as n, u as o, m as r, g as t };

package/bundled/text-field.cjs

@@ -1 +1 @@
-var e=`.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}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){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}`;Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});
+var e=`.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}`;Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});