@vonage/vivid 5.23.0 → 5.23.1

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/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}});

package/bundled/text-field.js

@@ -1,4 +1,4 @@
 //#region src/lib/text-field/text-field.scss?inline
-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}";
+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}";
 //#endregion
 export { e as t };

package/bundled/time-selection-picker.template.cjs

@@ -1,4 +1,4 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./repeat.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./trapped-focus.cjs`),s=require(`./class-names.cjs`),c=require(`./picker-field.template.cjs`),l=require(`./scrollIntoView.cjs`),u=require(`./single-value-picker.cjs`);var d=e=>{let t=e.split(`:`);if(t.length!==3)return!1;let[n,r,i]=t;if(n.length!==2||r.length!==2||i.length!==2)return!1;let a=parseInt(n,10),o=parseInt(r,10),s=parseInt(i,10);return!(isNaN(a)||isNaN(o)||isNaN(s)||a<0||a>23||o<0||o>59||s<0||s>59)},f=e=>Number.parseInt(e,10),p=e=>e.toString().padStart(2,`0`),m=e=>{let[t,n,r]=e.split(`:`),i=f(t);return{hourStr:t,hours:i,minuteStr:n,minutes:f(n),secondStr:r,seconds:f(r),meridiem:i<12?`AM`:`PM`}},h=(e,t)=>e>t?1:e<t?-1:0,g=e=>e%12||12,_=(e,t)=>e===`AM`&&t<12||e===`PM`&&t>=12,v=(e,t,n)=>{let r=[],i=e?m(e).hours:0,a=t?m(t).hours:23;for(let e=i;e<=a;e++)n&&!_(n,e)||r.push({value:p(e),label:p(n?g(e):e)});return r},y=(e,t,n,r)=>{let i=[],a=0,o=59;if(n){let{hourStr:e,minutes:r}=m(n);t&&m(t).hourStr===e&&(a=r)}if(r){let{hourStr:e,minutes:n}=m(r);t&&m(t).hourStr===e&&(o=n)}for(let t=a;t<=o;t+=Math.max(1,e??1)){let e=p(t);i.push({value:e,label:e})}return i},b=(e,t,n,r)=>{let i=[],a=0,o=59;if(n){let e=m(n);t&&(m(t).hourStr===e.hourStr&&m(t).minuteStr)===e.minuteStr&&(a=e.seconds)}if(r){let e=m(r);t&&(m(t).hourStr===e.hourStr&&m(t).minuteStr)===e.minuteStr&&(o=e.seconds)}for(let t=a;t<=o;t+=Math.max(1,e)){let e=p(t);i.push({value:e,label:e})}return i},x=(e,t)=>{let n=[];return e&&m(e).meridiem===`PM`||n.push({value:`AM`,label:`AM`}),t&&m(t).meridiem===`AM`||n.push({value:`PM`,label:`PM`}),n},S={id:`hours`,getLabel:e=>e.locale.timePicker.hoursLabel,getOptions:e=>v(e.min,e.max,e.clock===`12h`?T.getSelectedOptionValue(e)??T.getOptions(e)[0].value:void 0),getSelectedOptionValue:e=>e.value?m(e.value).hourStr:void 0,updatedValue:(e,t)=>{if(e.value){let{minuteStr:n,secondStr:r}=m(e.value);return`${t}:${n}:${r}`}else return`${t}:00:00`}},C={id:`minutes`,getLabel:e=>e.locale.timePicker.minutesLabel,getOptions:e=>y(e.minutesStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).minuteStr:void 0,updatedValue:(e,t)=>{if(e.value){let{hourStr:n,secondStr:r}=m(e.value);return`${n}:${t}:${r}`}else return`00:${t}:00`}},w={id:`seconds`,getLabel:e=>e.locale.timePicker.secondsLabel,getOptions:e=>b(e.secondsStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).secondStr:void 0,updatedValue:(e,t)=>{if(e.value){let{hourStr:n,minuteStr:r}=m(e.value);return`${n}:${r}:${t}`}else return`00:00:${t}`}},T={id:`meridies`,getLabel:e=>e.locale.timePicker.meridiesLabel,getOptions:e=>x(e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).meridiem:void 0,updatedValue:(e,t)=>{if(e.value){let{hours:n,minuteStr:r,secondStr:i}=m(e.value),a=n;return t===`AM`&&n>=12?a-=12:t===`PM`&&n<12&&(a+=12),`${p(a)}:${r}:${i}`}else if(t===`AM`)return`00:00:00`;else return`12:00:00`}},E=e=>e.secondsStep!==void 0,D=e=>e.clock===`12h`,O=(e,t,n)=>{M(e,t.updatedValue(e,n)),A(e,t.id,n,`start`);let r=(e.shadowRoot.querySelector(`#${t.id}`)?.closest(`.picker-wrapper`)?.nextElementSibling)?.querySelector(`.picker`);r?r.focus():e.$emit(`last-column-selected`,void 0,{bubbles:!1})},k=(e,t,n)=>{let r=t.getOptions(e),i=t.getSelectedOptionValue(e),a={ArrowUp:-1,ArrowDown:1}[n.key];if(a){n.preventDefault();let o=r.findIndex(e=>e.value===i),s=r[((o===-1?0:o+a)+r.length)%r.length].value;M(e,t.updatedValue(e,s)),A(e,t.id,s,`nearest`),e._clearFocusedClasses()}return!0},A=(e,t,n,r)=>{let i=e.shadowRoot.querySelector(`#${t}-${n}`);i&&l.t(i,i.parentElement,r)},j=(e,t)=>{if(t.key===`Tab`){let n=e.shadowRoot.querySelectorAll(`.picker`),r=t.shiftKey?n[0]:n[n.length-1];e.shadowRoot.activeElement!==r&&o.n(t),e._applyFocusedClass()}return!0},M=(e,t)=>{e.$emit(`change`,t,{bubbles:!1,composed:!1})},N=e=>t.p`<div class="picker-wrapper">
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./repeat.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./picker-field.template.cjs`),c=require(`./scrollIntoView.cjs`),l=require(`./trapped-focus.cjs`),u=require(`./single-value-picker.cjs`);var d=e=>{let t=e.split(`:`);if(t.length!==3)return!1;let[n,r,i]=t;if(n.length!==2||r.length!==2||i.length!==2)return!1;let a=parseInt(n,10),o=parseInt(r,10),s=parseInt(i,10);return!(isNaN(a)||isNaN(o)||isNaN(s)||a<0||a>23||o<0||o>59||s<0||s>59)},f=e=>Number.parseInt(e,10),p=e=>e.toString().padStart(2,`0`),m=e=>{let[t,n,r]=e.split(`:`),i=f(t);return{hourStr:t,hours:i,minuteStr:n,minutes:f(n),secondStr:r,seconds:f(r),meridiem:i<12?`AM`:`PM`}},h=(e,t)=>e>t?1:e<t?-1:0,g=e=>e%12||12,_=(e,t)=>e===`AM`&&t<12||e===`PM`&&t>=12,v=(e,t,n)=>{let r=[],i=e?m(e).hours:0,a=t?m(t).hours:23;for(let e=i;e<=a;e++)n&&!_(n,e)||r.push({value:p(e),label:p(n?g(e):e)});return r},y=(e,t,n,r)=>{let i=[],a=0,o=59;if(n){let{hourStr:e,minutes:r}=m(n);t&&m(t).hourStr===e&&(a=r)}if(r){let{hourStr:e,minutes:n}=m(r);t&&m(t).hourStr===e&&(o=n)}for(let t=a;t<=o;t+=Math.max(1,e??1)){let e=p(t);i.push({value:e,label:e})}return i},b=(e,t,n,r)=>{let i=[],a=0,o=59;if(n){let e=m(n);t&&(m(t).hourStr===e.hourStr&&m(t).minuteStr)===e.minuteStr&&(a=e.seconds)}if(r){let e=m(r);t&&(m(t).hourStr===e.hourStr&&m(t).minuteStr)===e.minuteStr&&(o=e.seconds)}for(let t=a;t<=o;t+=Math.max(1,e)){let e=p(t);i.push({value:e,label:e})}return i},x=(e,t)=>{let n=[];return e&&m(e).meridiem===`PM`||n.push({value:`AM`,label:`AM`}),t&&m(t).meridiem===`AM`||n.push({value:`PM`,label:`PM`}),n},S={id:`hours`,getLabel:e=>e.locale.timePicker.hoursLabel,getOptions:e=>v(e.min,e.max,e.clock===`12h`?T.getSelectedOptionValue(e)??T.getOptions(e)[0].value:void 0),getSelectedOptionValue:e=>e.value?m(e.value).hourStr:void 0,updatedValue:(e,t)=>{if(e.value){let{minuteStr:n,secondStr:r}=m(e.value);return`${t}:${n}:${r}`}else return`${t}:00:00`}},C={id:`minutes`,getLabel:e=>e.locale.timePicker.minutesLabel,getOptions:e=>y(e.minutesStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).minuteStr:void 0,updatedValue:(e,t)=>{if(e.value){let{hourStr:n,secondStr:r}=m(e.value);return`${n}:${t}:${r}`}else return`00:${t}:00`}},w={id:`seconds`,getLabel:e=>e.locale.timePicker.secondsLabel,getOptions:e=>b(e.secondsStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).secondStr:void 0,updatedValue:(e,t)=>{if(e.value){let{hourStr:n,minuteStr:r}=m(e.value);return`${n}:${r}:${t}`}else return`00:00:${t}`}},T={id:`meridies`,getLabel:e=>e.locale.timePicker.meridiesLabel,getOptions:e=>x(e.min,e.max),getSelectedOptionValue:e=>e.value?m(e.value).meridiem:void 0,updatedValue:(e,t)=>{if(e.value){let{hours:n,minuteStr:r,secondStr:i}=m(e.value),a=n;return t===`AM`&&n>=12?a-=12:t===`PM`&&n<12&&(a+=12),`${p(a)}:${r}:${i}`}else if(t===`AM`)return`00:00:00`;else return`12:00:00`}},E=e=>e.secondsStep!==void 0,D=e=>e.clock===`12h`,O=(e,t,n)=>{M(e,t.updatedValue(e,n)),A(e,t.id,n,`start`);let r=(e.shadowRoot.querySelector(`#${t.id}`)?.closest(`.picker-wrapper`)?.nextElementSibling)?.querySelector(`.picker`);r?r.focus():e.$emit(`last-column-selected`,void 0,{bubbles:!1})},k=(e,t,n)=>{let r=t.getOptions(e),i=t.getSelectedOptionValue(e),a={ArrowUp:-1,ArrowDown:1}[n.key];if(a){n.preventDefault();let o=r.findIndex(e=>e.value===i),s=r[((o===-1?0:o+a)+r.length)%r.length].value;M(e,t.updatedValue(e,s)),A(e,t.id,s,`nearest`),e._clearFocusedClasses()}return!0},A=(e,t,n,r)=>{let i=e.shadowRoot.querySelector(`#${t}-${n}`);i&&c.t(i,i.parentElement,r)},j=(e,t)=>{if(t.key===`Tab`){let n=e.shadowRoot.querySelectorAll(`.picker`),r=t.shiftKey?n[0]:n[n.length-1];e.shadowRoot.activeElement!==r&&l.n(t),e._applyFocusedClass()}return!0},M=(e,t)=>{e.$emit(`change`,t,{bubbles:!1,composed:!1})},N=e=>t.p`<div class="picker-wrapper">
 		<ul
 			id="${e.id}"
 			class="picker"
@@ -10,7 +10,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 		>
 			${n.n(t=>e.getOptions(t),t.p`<li
 					id="${t=>`${e.id}-${t.value}`}"
-					class="${(t,n)=>s.t(`option`,[`selected`,e.getSelectedOptionValue(n.parent)===t.value])}"
+					class="${(t,n)=>o.t(`option`,[`selected`,e.getSelectedOptionValue(n.parent)===t.value])}"
 					aria-selected="${(t,n)=>e.getSelectedOptionValue(n.parent)===t.value}"
 					role="option"
 					@click="${(t,n)=>O(n.parent,e,t.value)}"
@@ -27,7 +27,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 		${N(S)} ${N(C)}
 		${i.t(E,N(w))}
 		${i.t(D,N(T))}
-	</div>`,F=class extends e.t(t.t){constructor(...e){super(...e),this.minutesStep=1,this.clock=`24h`,this.focusedPickerClass=`focused`,this._onFocusOut=()=>{this._clearFocusedClasses()},this._onPointerDown=()=>{this._clearFocusedClasses()}}valueChanged(e,t){t!==void 0&&!d(t)&&(this.value=void 0)}scrollSelectedOptionsToTop(){S.getSelectedOptionValue(this)&&A(this,`hours`,S.getSelectedOptionValue(this),`start`),C.getSelectedOptionValue(this)&&A(this,`minutes`,C.getSelectedOptionValue(this),`start`),E(this)&&w.getSelectedOptionValue(this)&&A(this,`seconds`,w.getSelectedOptionValue(this),`start`),D(this)&&T.getSelectedOptionValue(this)&&A(this,`meridies`,T.getSelectedOptionValue(this),`start`)}focus(e){this.shadowRoot.querySelector(`.picker`).focus(e),this._applyFocusedClass()}_applyFocusedClass(){let e=this.shadowRoot.querySelectorAll(`.picker`);requestAnimationFrame(()=>{let t=this.shadowRoot.activeElement;e.forEach(e=>{e===t?e.parentElement?.classList.add(this.focusedPickerClass):e.parentElement?.classList.remove(this.focusedPickerClass)})})}_clearFocusedClasses(){this.shadowRoot.querySelectorAll(`.picker`).forEach(e=>{e.parentElement?.classList.remove(this.focusedPickerClass)})}};a.t([t.A],F.prototype,`value`,void 0),a.t([t.A],F.prototype,`minutesStep`,void 0),a.t([t.A],F.prototype,`secondsStep`,void 0),a.t([t.A],F.prototype,`clock`,void 0),a.t([t.A],F.prototype,`min`,void 0),a.t([t.A],F.prototype,`max`,void 0);var I=t.u(`inline-time-picker`,F,P,[],{styles:`:host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:"";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}`,shadowOptions:{delegatesFocus:!0}});t.d(I);var L=e=>{class n extends e{constructor(...e){super(...e),this.minutesStep=null,this.secondsStep=null,this.#e={handleChange:()=>{this.value&&(this._presentationValue=this._toPresentationValue(this.value))}}}get _displaySeconds(){return this.secondsStep!==null}get _use12hClock(){return this.clock?this.clock===`12h`:this.locale.timePicker.defaultTo12HourClock}get _timePlaceholder(){let e=`hh:mm`;return this._displaySeconds&&(e+=`:ss`),this._use12hClock&&(e+=` aa`),e}#e;#t;#n(){this.#t=t.k.binding(()=>this._use12hClock,this.#e),this.#t.observe(this,t.O.default)}#r(){this.#t.dispose()}connectedCallback(){super.connectedCallback(),this.#n()}disconnectedCallback(){super.disconnectedCallback(),this.#r()}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(t.M.process(),this._inlineTimePickerEl.scrollSelectedOptionsToTop())}_onInlineTimePickerChange(e){this._updateValueDueToUserInteraction(this._withUpdatedTime(e.detail),!1)}_onInlineTimePickerLastColumnSelected(){this._closePopup()}}return a.t([t.m({attribute:`minutes-step`,converter:t.h})],n.prototype,`minutesStep`,void 0),a.t([t.m({attribute:`seconds-step`,converter:t.h})],n.prototype,`secondsStep`,void 0),a.t([t.m],n.prototype,`clock`,void 0),a.t([t.j],n.prototype,`_use12hClock`,null),n},R=(e,t,n)=>{let r=m(e),i=`${p(n?g(r.hours):r.hours)}:${r.minuteStr}`;return t&&(i+=`:${r.secondStr}`),n&&(i+=` ${r.meridiem}`),i},z=e=>e>=`0`&&e<=`9`,B=(e,t)=>{let n=e.toLowerCase(),r=[],i;for(let e=0;e<n.length;e++){let t=n[e];if(t===`a`&&n[e+1]===`m`&&(e++,i=`AM`),t===`p`&&n[e+1]===`m`&&(e++,i=`PM`),z(t)){let i=t;for(;z(n[e+1]);)e++,i+=n[e];r.push(Number.parseInt(i,10))}}if(r.length===0||r.length>3||i&&(r[0]<1||r[0]>12))throw Error(`Invalid time format`);(i||t)&&r[0]===12&&(r[0]=0),i===`PM`&&(r[0]+=12);let[a,o=0,s=0]=r;if(a>23||o>59||s>59)throw Error(`Invalid value`);return[a,o,s].map(p).join(`:`)},V={fromView:e=>e&&d(e)?e:``,toView(e){return e}},H=class extends L(u.t(c.n)){_toPresentationValue(e){return R(e,this._displaySeconds,this._use12hClock)}_parsePresentationValue(e){return B(e,this._use12hClock)}get _timeValue(){return this.value}_withUpdatedTime(e){return e}get _resolvedMinTime(){return this.min||null}get _resolvedMaxTime(){return this.max||null}minChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.min=t,this.validate())}maxChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.max=t,this.validate())}constructor(){super(),this._isValidValue=d,this.min=``,this.max=``,this.proxy.type=`time`,this.proxy.step=`1`}get _textFieldPlaceholder(){return this._timePlaceholder}get _pickerButtonIcon(){return`clock-line`}get _pickerButtonLabel(){return this.value?this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value)):this.locale.timePicker.chooseTimeLabel}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(t.M.process(),this._focusableElsWithinDialog()[0]?.focus())}get _dialogLabel(){return this.locale.timePicker.chooseTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`#inline-time-picker, .vwc-button`)}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.timePicker.invalidTimeError:null}};a.t([t.m({converter:V})],H.prototype,`min`,void 0),a.t([t.m({converter:V})],H.prototype,`max`,void 0);var U=(e,n)=>{let i=e.tagFor(F);return t.p`
+	</div>`,F=class extends e.t(t.t){constructor(...e){super(...e),this.minutesStep=1,this.clock=`24h`,this.focusedPickerClass=`focused`,this._onFocusOut=()=>{this._clearFocusedClasses()},this._onPointerDown=()=>{this._clearFocusedClasses()}}valueChanged(e,t){t!==void 0&&!d(t)&&(this.value=void 0)}scrollSelectedOptionsToTop(){S.getSelectedOptionValue(this)&&A(this,`hours`,S.getSelectedOptionValue(this),`start`),C.getSelectedOptionValue(this)&&A(this,`minutes`,C.getSelectedOptionValue(this),`start`),E(this)&&w.getSelectedOptionValue(this)&&A(this,`seconds`,w.getSelectedOptionValue(this),`start`),D(this)&&T.getSelectedOptionValue(this)&&A(this,`meridies`,T.getSelectedOptionValue(this),`start`)}focus(e){this.shadowRoot.querySelector(`.picker`).focus(e),this._applyFocusedClass()}_applyFocusedClass(){let e=this.shadowRoot.querySelectorAll(`.picker`);requestAnimationFrame(()=>{let t=this.shadowRoot.activeElement;e.forEach(e=>{e===t?e.parentElement?.classList.add(this.focusedPickerClass):e.parentElement?.classList.remove(this.focusedPickerClass)})})}_clearFocusedClasses(){this.shadowRoot.querySelectorAll(`.picker`).forEach(e=>{e.parentElement?.classList.remove(this.focusedPickerClass)})}};a.t([t.A],F.prototype,`value`,void 0),a.t([t.A],F.prototype,`minutesStep`,void 0),a.t([t.A],F.prototype,`secondsStep`,void 0),a.t([t.A],F.prototype,`clock`,void 0),a.t([t.A],F.prototype,`min`,void 0),a.t([t.A],F.prototype,`max`,void 0);var I=t.u(`inline-time-picker`,F,P,[],{styles:`:host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:"";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}`,shadowOptions:{delegatesFocus:!0}});t.d(I);var L=e=>{class n extends e{constructor(...e){super(...e),this.minutesStep=null,this.secondsStep=null,this.#e={handleChange:()=>{this.value&&(this._presentationValue=this._toPresentationValue(this.value))}}}get _displaySeconds(){return this.secondsStep!==null}get _use12hClock(){return this.clock?this.clock===`12h`:this.locale.timePicker.defaultTo12HourClock}get _timePlaceholder(){let e=`hh:mm`;return this._displaySeconds&&(e+=`:ss`),this._use12hClock&&(e+=` aa`),e}#e;#t;#n(){this.#t=t.k.binding(()=>this._use12hClock,this.#e),this.#t.observe(this,t.O.default)}#r(){this.#t.dispose()}connectedCallback(){super.connectedCallback(),this.#n()}disconnectedCallback(){super.disconnectedCallback(),this.#r()}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(t.M.process(),this._inlineTimePickerEl.scrollSelectedOptionsToTop())}_onInlineTimePickerChange(e){this._updateValueDueToUserInteraction(this._withUpdatedTime(e.detail),!1)}_onInlineTimePickerLastColumnSelected(){this._closePopup()}}return a.t([t.m({attribute:`minutes-step`,converter:t.h})],n.prototype,`minutesStep`,void 0),a.t([t.m({attribute:`seconds-step`,converter:t.h})],n.prototype,`secondsStep`,void 0),a.t([t.m],n.prototype,`clock`,void 0),a.t([t.j],n.prototype,`_use12hClock`,null),n},R=(e,t,n)=>{let r=m(e),i=`${p(n?g(r.hours):r.hours)}:${r.minuteStr}`;return t&&(i+=`:${r.secondStr}`),n&&(i+=` ${r.meridiem}`),i},z=e=>e>=`0`&&e<=`9`,B=(e,t)=>{let n=e.toLowerCase(),r=[],i;for(let e=0;e<n.length;e++){let t=n[e];if(t===`a`&&n[e+1]===`m`&&(e++,i=`AM`),t===`p`&&n[e+1]===`m`&&(e++,i=`PM`),z(t)){let i=t;for(;z(n[e+1]);)e++,i+=n[e];r.push(Number.parseInt(i,10))}}if(r.length===0||r.length>3||i&&(r[0]<1||r[0]>12))throw Error(`Invalid time format`);(i||t)&&r[0]===12&&(r[0]=0),i===`PM`&&(r[0]+=12);let[a,o=0,s=0]=r;if(a>23||o>59||s>59)throw Error(`Invalid value`);return[a,o,s].map(p).join(`:`)},V={fromView:e=>e&&d(e)?e:``,toView(e){return e}},H=class extends L(u.t(s.n)){_toPresentationValue(e){return R(e,this._displaySeconds,this._use12hClock)}_parsePresentationValue(e){return B(e,this._use12hClock)}get _timeValue(){return this.value}_withUpdatedTime(e){return e}get _resolvedMinTime(){return this.min||null}get _resolvedMaxTime(){return this.max||null}minChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.min=t,this.validate())}maxChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.max=t,this.validate())}constructor(){super(),this._isValidValue=d,this.min=``,this.max=``,this.proxy.type=`time`,this.proxy.step=`1`}get _textFieldPlaceholder(){return this._timePlaceholder}get _pickerButtonIcon(){return`clock-line`}get _pickerButtonLabel(){return this.value?this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value)):this.locale.timePicker.chooseTimeLabel}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(t.M.process(),this._focusableElsWithinDialog()[0]?.focus())}get _dialogLabel(){return this.locale.timePicker.chooseTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`#inline-time-picker, .vwc-button`)}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.timePicker.invalidTimeError:null}};a.t([t.m({converter:V})],H.prototype,`min`,void 0),a.t([t.m({converter:V})],H.prototype,`max`,void 0);var U=(e,n)=>{let i=e.tagFor(F);return t.p`
 		<${i}
 			id='inline-time-picker'
 			${r.t(`_inlineTimePickerEl`)}

package/bundled/time-selection-picker.template.js

@@ -4,10 +4,10 @@ import { n as f } from "./repeat.js";
 import { t as p } from "./ref.js";
 import { t as m } from "./when.js";
 import { t as h } from "./decorate.js";
-import { n as g } from "./trapped-focus.js";
-import { t as _ } from "./class-names.js";
-import { n as v } from "./picker-field.template.js";
-import { t as y } from "./scrollIntoView.js";
+import { t as g } from "./class-names.js";
+import { n as _ } from "./picker-field.template.js";
+import { t as v } from "./scrollIntoView.js";
+import { n as y } from "./trapped-focus.js";
 import { t as b } from "./single-value-picker.js";
 //#region src/shared/datetime/time.ts
 var x = (e) => {
@@ -142,11 +142,11 @@ var x = (e) => {
 	return !0;
 }, B = (e, t, n, r) => {
 	let i = e.shadowRoot.querySelector(`#${t}-${n}`);
-	i && y(i, i.parentElement, r);
+	i && v(i, i.parentElement, r);
 }, V = (e, t) => {
 	if (t.key === "Tab") {
 		let n = e.shadowRoot.querySelectorAll(".picker"), r = t.shiftKey ? n[0] : n[n.length - 1];
-		e.shadowRoot.activeElement !== r && g(t), e._applyFocusedClass();
+		e.shadowRoot.activeElement !== r && y(t), e._applyFocusedClass();
 	}
 	return !0;
 }, H = (e, t) => {
@@ -166,7 +166,7 @@ var x = (e) => {
 		>
 			${f((t) => e.getOptions(t), l`<li
 					id="${(t) => `${e.id}-${t.value}`}"
-					class="${(t, n) => _("option", ["selected", e.getSelectedOptionValue(n.parent) === t.value])}"
+					class="${(t, n) => g("option", ["selected", e.getSelectedOptionValue(n.parent) === t.value])}"
 					aria-selected="${(t, n) => e.getSelectedOptionValue(n.parent) === t.value}"
 					role="option"
 					@click="${(t, n) => R(n.parent, e, t.value)}"
@@ -219,7 +219,7 @@ h([t], G.prototype, "value", void 0), h([t], G.prototype, "minutesStep", void 0)
 //#endregion
 //#region src/shared/picker-field/mixins/inline-time-picker/definition.ts
 var K = d("inline-time-picker", G, W, [], {
-	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
+	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;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))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.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){.time-pickers .option.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}}.time-pickers .option.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}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--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))}",
 	shadowOptions: { delegatesFocus: !0 }
 });
 i(K);
@@ -300,7 +300,7 @@ var q = (e) => {
 	toView(e) {
 		return e;
 	}
-}, Q = class extends q(b(v)) {
+}, Q = class extends q(b(_)) {
 	_toPresentationValue(e) {
 		return J(e, this._displaySeconds, this._use12hClock);
 	}