@vonage/vivid 5.1.0 → 5.2.0

package/bundled/definition6.js

@@ -1,24 +1,24 @@
 import { P as x, p as v } from "./definition9.js";
 import { M as l, a as g, m as I, b } from "./definition7.js";
-import { D as m, V as y, o as h, a as d, h as E, c as k, d as C } from "./vivid-element.js";
-import { A as $, a as _ } from "./anchored.js";
-import { D as A, d as w } from "./delegates-aria.js";
-import { D as F } from "./divider.js";
-import { a as D, k as S, c as M, b as L } from "./key-codes.js";
-import { h as P } from "./index.js";
-import { r as z } from "./ref.js";
-import { c as T } from "./class-names.js";
+import { D as m, V as y, a as d, n as E, o as h, h as k, c as C, d as $ } from "./vivid-element.js";
+import { A as _, a as A } from "./anchored.js";
+import { D as w, d as F } from "./delegates-aria.js";
+import { D } from "./divider.js";
+import { a as S, k as M, c as L, b as P } from "./key-codes.js";
+import { h as z } from "./index.js";
+import { r as T } from "./ref.js";
+import { c as O } from "./class-names.js";
 import { s as u } from "./slotted.js";
-const O = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,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;display:block}.header{padding-block-start:4px;padding-inline:8px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
-var H = Object.defineProperty, r = (o, e, s, i) => {
+const H = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,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;display:block}.header{padding:4px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+var K = Object.defineProperty, r = (o, e, s, i) => {
   for (var t = void 0, n = o.length - 1, c; n >= 0; n--)
     (c = o[n]) && (t = c(e, s, t) || t);
-  return t && H(e, s, t), t;
+  return t && K(e, s, t), t;
 };
-const K = (o) => o instanceof l && o.controlType === "checkbox", p = (o) => o instanceof l && o.controlType === "radio", f = (o) => o instanceof F ? !0 : o.role === "separator", q = (o) => o instanceof l ? !0 : !!(o.role && o.role in g);
-class a extends $(A(y)) {
+const q = (o) => o instanceof l && o.controlType === "checkbox", p = (o) => o instanceof l && o.controlType === "radio", f = (o) => o instanceof D ? !0 : o.role === "separator", N = (o) => o instanceof l ? !0 : !!(o.role && o.role in g);
+class a extends _(w(y)) {
   constructor() {
-    super(...arguments), this.expandedItem = null, this.focusIndex = -1, this.handleFocusOut = (e) => {
+    super(...arguments), this.offset = null, this.expandedItem = null, this.focusIndex = -1, this.handleFocusOut = (e) => {
       !this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length && (this.collapseExpandedItem(), this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.menuItems[0].setAttribute("tabindex", "0"), this.focusIndex = 0);
     }, this.handleItemFocus = (e) => {
       const s = e.target;
@@ -35,7 +35,7 @@ class a extends $(A(y)) {
       });
     }, this.setItems = () => {
       const e = this.domChildren();
-      this.removeItemListeners(), this.menuItems = e.filter(q), this.menuItems.length && (this.focusIndex = 0), this.menuItems.forEach((s, i) => {
+      this.removeItemListeners(), this.menuItems = e.filter(N), this.menuItems.length && (this.focusIndex = 0), this.menuItems.forEach((s, i) => {
         s instanceof l && (s._isPresentational = !1), s.setAttribute("tabindex", i === 0 ? "0" : "-1"), s.addEventListener("expanded-change", this.handleExpandedChanged), s.addEventListener("focus", this.handleItemFocus);
       });
     }, this.placement = "bottom", this.autoDismiss = !1, this.positionStrategy = "fixed", this.open = !1, this.#t = () => {
@@ -94,16 +94,16 @@ class a extends $(A(y)) {
   handleMenuKeyDown(e) {
     if (!(e.defaultPrevented || this.menuItems === void 0))
       switch (e.key) {
-        case L:
+        case P:
           this.setFocus(this.focusIndex + 1);
           return;
-        case M:
+        case L:
           this.setFocus(this.focusIndex - 1);
           return;
-        case S:
+        case M:
           this.setFocus(this.menuItems.length - 1);
           return;
-        case D:
+        case S:
           this.setFocus(0);
           return;
         default:
@@ -150,7 +150,7 @@ class a extends $(A(y)) {
   _onChange(e) {
     if (this.menuItems === void 0 || !(e.target instanceof Element))
       return;
-    this.#e === "auto" && !K(e.target) && (this.open = !1);
+    this.#e === "auto" && !q(e.target) && (this.open = !1);
     const s = this.domChildren(), i = s.indexOf(e.target);
     if (i !== -1) {
       if (p(e.target) && e.target.checked) {
@@ -169,6 +169,9 @@ class a extends $(A(y)) {
     }
   }
 }
+r([
+  d({ attribute: "offset", converter: E })
+], a.prototype, "offset");
 r([
   h
 ], a.prototype, "items");
@@ -200,31 +203,31 @@ const R = ({
   headerSlottedContent: o,
   actionItemsSlottedContent: e,
   items: s
-}) => T(
+}) => O(
   "base",
   ["hide-header", !o?.length],
   ["hide-actions", !e?.length],
   ["hide-body", s && !s.length]
 );
 function U(o, e) {
-  return o.open && P(e) && (o.open = !1), !0;
+  return o.open && z(e) && (o.open = !1), !0;
 }
 const V = (o) => {
-  const e = o.tagFor(x), s = _();
+  const e = o.tagFor(x), s = A();
   function i(t, n, c) {
     n.stopPropagation(), t.open = c;
   }
-  return E`
+  return k`
 		<template @change="${(t, n) => t._onChange(n.event)}"
 							@focusout="${(t, n) => t._onFocusout(n.event)}">
 			${s}
 			<${e}
-				${z("_popupEl")}
+				${T("_popupEl")}
 				:placement=${(t) => t.placement}
 				:open=${(t) => t.open}
 				:anchor=${(t) => t._anchorEl}
 				:strategy="${(t) => t.positionStrategy}"
-				:offset=${(t) => t._popupOffset}
+				:offset=${(t) => t.offset || t._popupOffset}
 				@keydown="${(t, n) => U(t, n.event)}"
 				@vwc-popup:open="${(t, n) => i(t, n.event, !0)}"
 				@vwc-popup:close="${(t, n) => i(t, n.event, !1)}"
@@ -235,7 +238,7 @@ const V = (o) => {
 				</div>
 				<div
 					class="body"
-					${w({
+					${F({
     role: "menu"
   })}
 					@keydown="${(t, n) => t.handleMenuKeyDown(n.event)}"
@@ -249,17 +252,17 @@ const V = (o) => {
 			</div>
 		</${e}>
 	</template>`;
-}, j = C(
+}, j = $(
   b,
   a,
   V,
   [v, I],
   {
-    styles: O
+    styles: H
   }
-), se = k(j);
+), ne = C(j);
 export {
   a as M,
   j as m,
-  se as r
+  ne as r
 };

package/bundled/localized.cjs

@@ -1 +1 @@
-"use strict";const J=require("./vivid-element.cjs"),s="Play",l="Pause",c="Replay",d="Duration",u="LIVE",p="Loaded",b="Progress",g="Fullscreen",m="Mute",h="Unmute",y="Subtitles",f="Captions",L="Chapters",S="Descriptions",P="Close",T="Text",w="White",v="Black",k="Red",C="Green",M="Blue",D="Yellow",B="Magenta",E="Cyan",x="Background",F="Window",$="Transparent",A="Opaque",R="None",O="Raised",I="Depressed",Y="Uniform",N="Casual",W="Script",z="Reset",U="Done",V="Color",G="Opacity",q={"Audio Player":"Audio Player","Video Player":"Video Player",Play:s,Pause:l,Replay:c,"Current Time":"Current Time",Duration:d,"Remaining Time":"Remaining Time","Stream Type":"Stream Type",LIVE:u,"Seek to live, currently behind live":"Seek to live, currently behind live","Seek to live, currently playing live":"Seek to live, currently playing live",Loaded:p,Progress:b,"Progress Bar":"Progress Bar","progress bar timing: currentTime={1} duration={2}":"{1} of {2}",Fullscreen:g,"Exit Fullscreen":"Exit Fullscreen",Mute:m,Unmute:h,"Playback Rate":"Playback Rate",Subtitles:y,"subtitles off":"subtitles off",Captions:f,"captions off":"captions off",Chapters:L,Descriptions:S,"descriptions off":"descriptions off","Audio Track":"Audio Track","Volume Level":"Volume Level","You aborted the media playback":"You aborted the media playback","A network error caused the media download to fail part-way.":"A network error caused the media download to fail part-way.","The media could not be loaded, either because the server or network failed or because the format is not supported.":"The media could not be loaded, either because the server or network failed or because the format is not supported.","The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.","No compatible source was found for this media.":"No compatible source was found for this media.","The media is encrypted and we do not have the keys to decrypt it.":"The media is encrypted and we do not have the keys to decrypt it.","Play Video":"Play Video",Close:P,"Close Modal Dialog":"Close Modal Dialog","Modal Window":"Modal Window","This is a modal window":"This is a modal window","This modal can be closed by pressing the Escape key or activating the close button.":"This modal can be closed by pressing the Escape key or activating the close button.",", opens captions settings dialog":", opens captions settings dialog",", opens subtitles settings dialog":", opens subtitles settings dialog",", opens descriptions settings dialog":", opens descriptions settings dialog",", selected":", selected","captions settings":"captions settings","subtitles settings":"subtitles settings","descriptions settings":"descriptions settings",Text:T,White:w,Black:v,Red:k,Green:C,Blue:M,Yellow:D,Magenta:B,Cyan:E,Background:x,Window:F,Transparent:$,"Semi-Transparent":"Semi-Transparent",Opaque:A,"Font Size":"Font Size","Text Edge Style":"Text Edge Style",None:R,Raised:O,Depressed:I,Uniform:Y,"Drop shadow":"Drop shadow","Font Family":"Font Family","Proportional Sans-Serif":"Proportional Sans-Serif","Monospace Sans-Serif":"Monospace Sans-Serif","Proportional Serif":"Proportional Serif","Monospace Serif":"Monospace Serif",Casual:N,Script:W,"Small Caps":"Small Caps",Reset:z,"restore all settings to the default values":"restore all settings to the default values",Done:U,"Caption Settings Dialog":"Caption Settings Dialog","Beginning of dialog window. Escape will cancel and close the window.":"Beginning of dialog window. Escape will cancel and close the window.","End of dialog window.":"End of dialog window.","{1} is loading.":"{1} is loading.","Exit Picture-in-Picture":"Exit Picture-in-Picture","Picture-in-Picture":"Picture-in-Picture","No content":"No content",Color:V,Opacity:G,"Text Background":"Text Background","Caption Area Background":"Caption Area Background","Playing in Picture-in-Picture":"Playing in Picture-in-Picture","Skip backward {1} seconds":"Skip backward {1} seconds","Skip forward {1} seconds":"Skip forward {1} seconds"},H=Object.freeze(Object.defineProperty({__proto__:null,Background:x,Black:v,Blue:M,Captions:f,Casual:N,Chapters:L,Close:P,Color:V,Cyan:E,Depressed:I,Descriptions:S,Done:U,Duration:d,Fullscreen:g,Green:C,LIVE:u,Loaded:p,Magenta:B,Mute:m,None:R,Opacity:G,Opaque:A,Pause:l,Play:s,Progress:b,Raised:O,Red:k,Replay:c,Reset:z,Script:W,Subtitles:y,Text:T,Transparent:$,Uniform:Y,Unmute:h,White:w,Window:F,Yellow:D,default:q},Symbol.toStringTag,{value:"Module"})),j={lang:"en-US",common:{useCommaAsDecimalSeparator:!1},pickerField:{clearLabel:"Clear",okLabel:"OK"},calendarPicker:{months:{name:["January","February","March","April","May","June","July","August","September","October","November","December"],shorthand:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},weekdays:{name:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shorthand:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]},firstDayOfWeek:0,dateFormat:"MM/dd/yyyy",dateFormatPlaceholder:"MM/DD/YYYY",chooseDateLabel:"Choose date",changeDateLabel:e=>`Change date, ${e}`,chooseDatesLabel:"Choose dates",changeDatesLabel:e=>`Change dates, ${e}`,prevYearLabel:"Previous year",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",nextYearLabel:"Next year",todayLabel:"today",selectedLabel:"selected",currentLabel:"current",changeMonthLabel:e=>`Change month, ${e} selected`,showCalendarForMonthLabel:e=>`Show calendar for ${e}`,invalidDateError:"Please enter a valid date.",invalidDateRangeError:"Please enter a valid date range.",startDateAfterMinDateError:e=>`The start date must be ${e} or later.`,endDateBeforeMaxDateError:e=>`The end date must be ${e} or earlier.`},timePicker:{defaultTo12HourClock:!0,chooseTimeLabel:"Choose time",changeTimeLabel:e=>`Change time, ${e}`,hoursLabel:"hours",minutesLabel:"minutes",secondsLabel:"seconds",meridiesLabel:"AM/PM",invalidTimeError:"Please enter a valid time."},dateTimePicker:{chooseDateTimeLabel:"Choose date and time",changeDateTimeLabel:e=>`Change date and time, ${e}`,invalidDateTimeError:"Please enter a valid date and time.",dateBeforeMinDateError:e=>`Date must be ${e} or later.`,dateAfterMaxDateError:e=>`Date must be ${e} or earlier.`,timeBeforeMinTimeError:e=>`Time must be ${e} or later.`,timeAfterMaxTimeError:e=>`Time must be ${e} or earlier.`},filePicker:{invalidFileTypeError:"You can't select files of this type.",maxFilesExceededError:"You can't select any more files.",fileTooBigError:"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",removeFileLabel:"Remove file",invalidFilesError:"One or more selected files are invalid. Please, upload only valid file types under the size limit.",uploadFilesLabel:"Upload files"},audioPlayer:{playButtonLabel:"Play",pauseButtonLabel:"Pause",sliderLabel:"Audio progress bar",skipForwardButton:"Skip Forward",skipBackwardButton:"Skip Backward"},alert:{dismissButtonLabel:"Close"},dialog:{dismissButtonLabel:"Close"},banner:{dismissButtonLabel:"Close"},numberField:{incrementButtonLabel:e=>e===1?"Increase value":`Increase value by ${e}`,decrementButtonLabel:e=>e===1?"Decrease value":`Decrease value by ${e}`,updatedValueAnnouncement:e=>`Updated value: ${e}`},splitButton:{showMoreActionsLabel:"Show more actions"},videoPlayer:H,rangeSlider:{startThumbLabel:"min",endThumbLabel:"max"},dialPad:{inputLabel:"Phone number",deleteButtonLabel:"Delete last digit",callButtonLabel:"Call",endCallButtonLabel:"End call",digitOneLabel:"1",digitTwoLabel:"2 ABC",digitThreeLabel:"3 DEF",digitFourLabel:"4 GHI",digitFiveLabel:"5 JKL",digitSixLabel:"6 MNO",digitSevenLabel:"7 PQRS",digitEightLabel:"8 TUV",digitNineLabel:"9 WXYZ",digitAsteriskLabel:"*",digitZeroLabel:"0",digitHashtagLabel:"#"},tab:{dismissButtonLabel:"Press the DELETE key to close this tab"},searchableSelect:{clearButtonLabel:"Clear selection",noOptionsMessage:"No options",noMatchesMessage:"No options found",loadingOptionsMessage:"Loading...",removeTagButtonLabel:e=>`Remove ${e}`,optionSelectedMessage:e=>`Option ${e} selected.`,optionDeselectedMessage:e=>`Option ${e} deselected.`,optionFocusedMessage:(e,t,a,n)=>`Option ${e} focused, ${n?"selected, ":""}${t} of ${a}.`,maxSelectedMessage:(e,t)=>`${e} of ${t} selected.`},richTextEditor:{textBlockType:"Text Block Type",textSize:"Text Size",bold:"Bold",italics:"Italics",underline:"Underline",strikethrough:"Strikethrough",monospace:"Monospace",dragAndDropFilesHere:"Drag&Drop files here"},button:{pendingLabel:"Loading..."},feedbackMessage:{errorIconText:"Error:",successIconText:"Success:"},connotationAnnoncement:{accentIcon:"Accent:",alertIcon:"Alert:",informationIcon:"Information:",successIcon:"Success:",warningIcon:"Warning:",announcementIcon:"Announcement:",ctaIcon:"Call to action:"},charCount:{charactersLimitMessage:e=>`You can enter up to ${e} characters`,charactersRemainingMessage:e=>`You have ${e} characters remaining`},dataGrid:{cell:{selected:"Selected",button:"(button)"}},pagination:{previousPageLabel:"Go to previous page",nextPageLabel:"Go to next page",goToPageLabel:e=>`Go to page ${e}`},tag:{remove:e=>`Remove ${e}`},toggletip:{anchorLabel:e=>e?`Show more information about ${e}`:"Show more information"},simpleColorPicker:{colorPaletteLabel:"Color palette",colorSwatchLabel:(e,t,a)=>{let n=t?`Select ${t}, hex: ${e}`:`Select ${e}`;return a&&(n+=", selected."),n}}};var K=Object.defineProperty,Z=(e,t,a,n)=>{for(var o=void 0,i=e.length-1,r;i>=0;i--)(r=e[i])&&(o=r(t,a,o)||o);return o&&K(t,a,o),o};class _{constructor(){this.locale=j}}Z([J.observable],_.prototype,"locale");const Q=new _,X=e=>{class t extends e{get locale(){return Q.locale}}return t};exports.Localized=X;
+"use strict";const J=require("./vivid-element.cjs"),s="Play",l="Pause",c="Replay",d="Duration",u="LIVE",p="Loaded",b="Progress",g="Fullscreen",m="Mute",h="Unmute",y="Subtitles",f="Captions",L="Chapters",S="Descriptions",P="Close",T="Text",w="White",v="Black",k="Red",C="Green",M="Blue",D="Yellow",B="Magenta",E="Cyan",x="Background",F="Window",$="Transparent",A="Opaque",R="None",O="Raised",I="Depressed",Y="Uniform",N="Casual",W="Script",z="Reset",U="Done",V="Color",G="Opacity",q={"Audio Player":"Audio Player","Video Player":"Video Player",Play:s,Pause:l,Replay:c,"Current Time":"Current Time",Duration:d,"Remaining Time":"Remaining Time","Stream Type":"Stream Type",LIVE:u,"Seek to live, currently behind live":"Seek to live, currently behind live","Seek to live, currently playing live":"Seek to live, currently playing live",Loaded:p,Progress:b,"Progress Bar":"Progress Bar","progress bar timing: currentTime={1} duration={2}":"{1} of {2}",Fullscreen:g,"Exit Fullscreen":"Exit Fullscreen",Mute:m,Unmute:h,"Playback Rate":"Playback Rate",Subtitles:y,"subtitles off":"subtitles off",Captions:f,"captions off":"captions off",Chapters:L,Descriptions:S,"descriptions off":"descriptions off","Audio Track":"Audio Track","Volume Level":"Volume Level","You aborted the media playback":"You aborted the media playback","A network error caused the media download to fail part-way.":"A network error caused the media download to fail part-way.","The media could not be loaded, either because the server or network failed or because the format is not supported.":"The media could not be loaded, either because the server or network failed or because the format is not supported.","The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.","No compatible source was found for this media.":"No compatible source was found for this media.","The media is encrypted and we do not have the keys to decrypt it.":"The media is encrypted and we do not have the keys to decrypt it.","Play Video":"Play Video",Close:P,"Close Modal Dialog":"Close Modal Dialog","Modal Window":"Modal Window","This is a modal window":"This is a modal window","This modal can be closed by pressing the Escape key or activating the close button.":"This modal can be closed by pressing the Escape key or activating the close button.",", opens captions settings dialog":", opens captions settings dialog",", opens subtitles settings dialog":", opens subtitles settings dialog",", opens descriptions settings dialog":", opens descriptions settings dialog",", selected":", selected","captions settings":"captions settings","subtitles settings":"subtitles settings","descriptions settings":"descriptions settings",Text:T,White:w,Black:v,Red:k,Green:C,Blue:M,Yellow:D,Magenta:B,Cyan:E,Background:x,Window:F,Transparent:$,"Semi-Transparent":"Semi-Transparent",Opaque:A,"Font Size":"Font Size","Text Edge Style":"Text Edge Style",None:R,Raised:O,Depressed:I,Uniform:Y,"Drop shadow":"Drop shadow","Font Family":"Font Family","Proportional Sans-Serif":"Proportional Sans-Serif","Monospace Sans-Serif":"Monospace Sans-Serif","Proportional Serif":"Proportional Serif","Monospace Serif":"Monospace Serif",Casual:N,Script:W,"Small Caps":"Small Caps",Reset:z,"restore all settings to the default values":"restore all settings to the default values",Done:U,"Caption Settings Dialog":"Caption Settings Dialog","Beginning of dialog window. Escape will cancel and close the window.":"Beginning of dialog window. Escape will cancel and close the window.","End of dialog window.":"End of dialog window.","{1} is loading.":"{1} is loading.","Exit Picture-in-Picture":"Exit Picture-in-Picture","Picture-in-Picture":"Picture-in-Picture","No content":"No content",Color:V,Opacity:G,"Text Background":"Text Background","Caption Area Background":"Caption Area Background","Playing in Picture-in-Picture":"Playing in Picture-in-Picture","Skip backward {1} seconds":"Skip backward {1} seconds","Skip forward {1} seconds":"Skip forward {1} seconds"},H=Object.freeze(Object.defineProperty({__proto__:null,Background:x,Black:v,Blue:M,Captions:f,Casual:N,Chapters:L,Close:P,Color:V,Cyan:E,Depressed:I,Descriptions:S,Done:U,Duration:d,Fullscreen:g,Green:C,LIVE:u,Loaded:p,Magenta:B,Mute:m,None:R,Opacity:G,Opaque:A,Pause:l,Play:s,Progress:b,Raised:O,Red:k,Replay:c,Reset:z,Script:W,Subtitles:y,Text:T,Transparent:$,Uniform:Y,Unmute:h,White:w,Window:F,Yellow:D,default:q},Symbol.toStringTag,{value:"Module"})),j={lang:"en-US",common:{useCommaAsDecimalSeparator:!1},pickerField:{clearLabel:"Clear",okLabel:"OK"},calendarPicker:{months:{name:["January","February","March","April","May","June","July","August","September","October","November","December"],shorthand:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},weekdays:{name:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shorthand:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]},firstDayOfWeek:0,dateFormat:"MM/dd/yyyy",dateFormatPlaceholder:"MM/DD/YYYY",chooseDateLabel:"Choose date",changeDateLabel:e=>`Change date, ${e}`,chooseDatesLabel:"Choose dates",changeDatesLabel:e=>`Change dates, ${e}`,prevYearLabel:"Previous year",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",nextYearLabel:"Next year",todayLabel:"today",selectedLabel:"selected",currentLabel:"current",changeMonthLabel:e=>`Change month, ${e} selected`,showCalendarForMonthLabel:e=>`Show calendar for ${e}`,invalidDateError:"Please enter a valid date.",invalidDateRangeError:"Please enter a valid date range.",startDateAfterMinDateError:e=>`The start date must be ${e} or later.`,endDateBeforeMaxDateError:e=>`The end date must be ${e} or earlier.`},timePicker:{defaultTo12HourClock:!0,chooseTimeLabel:"Choose time",changeTimeLabel:e=>`Change time, ${e}`,hoursLabel:"hours",minutesLabel:"minutes",secondsLabel:"seconds",meridiesLabel:"AM/PM",invalidTimeError:"Please enter a valid time."},dateTimePicker:{chooseDateTimeLabel:"Choose date and time",changeDateTimeLabel:e=>`Change date and time, ${e}`,invalidDateTimeError:"Please enter a valid date and time.",dateBeforeMinDateError:e=>`Date must be ${e} or later.`,dateAfterMaxDateError:e=>`Date must be ${e} or earlier.`,timeBeforeMinTimeError:e=>`Time must be ${e} or later.`,timeAfterMaxTimeError:e=>`Time must be ${e} or earlier.`},filePicker:{invalidFileTypeError:"You can't select files of this type.",maxFilesExceededError:"You can't select any more files.",fileTooBigError:"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",removeFileLabel:"Remove file",invalidFilesError:"One or more selected files are invalid. Please, upload only valid file types under the size limit.",uploadFilesLabel:"Upload files"},audioPlayer:{playButtonLabel:"Play",pauseButtonLabel:"Pause",sliderLabel:"Audio progress bar",skipForwardButton:"Skip Forward",skipBackwardButton:"Skip Backward"},alert:{dismissButtonLabel:"Close"},dialog:{dismissButtonLabel:"Close"},banner:{dismissButtonLabel:"Close"},numberField:{incrementButtonLabel:e=>e===1?"Increase value":`Increase value by ${e}`,decrementButtonLabel:e=>e===1?"Decrease value":`Decrease value by ${e}`,updatedValueAnnouncement:e=>`Updated value: ${e}`},splitButton:{showMoreActionsLabel:"Show more actions"},videoPlayer:H,rangeSlider:{startThumbLabel:"min",endThumbLabel:"max"},dialPad:{inputLabel:"Phone number",deleteButtonLabel:"Delete last digit",callButtonLabel:"Call",endCallButtonLabel:"End call",digitOneLabel:"1",digitTwoLabel:"2 ABC",digitThreeLabel:"3 DEF",digitFourLabel:"4 GHI",digitFiveLabel:"5 JKL",digitSixLabel:"6 MNO",digitSevenLabel:"7 PQRS",digitEightLabel:"8 TUV",digitNineLabel:"9 WXYZ",digitAsteriskLabel:"*",digitZeroLabel:"0",digitHashtagLabel:"#",errorLabel:"Error:"},tab:{dismissButtonLabel:"Press the DELETE key to close this tab"},searchableSelect:{clearButtonLabel:"Clear selection",noOptionsMessage:"No options",noMatchesMessage:"No options found",loadingOptionsMessage:"Loading...",removeTagButtonLabel:e=>`Remove ${e}`,optionSelectedMessage:e=>`Option ${e} selected.`,optionDeselectedMessage:e=>`Option ${e} deselected.`,optionFocusedMessage:(e,t,a,n)=>`Option ${e} focused, ${n?"selected, ":""}${t} of ${a}.`,maxSelectedMessage:(e,t)=>`${e} of ${t} selected.`},richTextEditor:{textBlockType:"Text Block Type",textSize:"Text Size",bold:"Bold",italics:"Italics",underline:"Underline",strikethrough:"Strikethrough",monospace:"Monospace",dragAndDropFilesHere:"Drag&Drop files here"},button:{pendingLabel:"Loading..."},feedbackMessage:{errorIconText:"Error:",successIconText:"Success:"},connotationAnnoncement:{accentIcon:"Accent:",alertIcon:"Alert:",informationIcon:"Information:",successIcon:"Success:",warningIcon:"Warning:",announcementIcon:"Announcement:",ctaIcon:"Call to action:"},charCount:{charactersLimitMessage:e=>`You can enter up to ${e} characters`,charactersRemainingMessage:e=>`You have ${e} characters remaining`},dataGrid:{cell:{selected:"Selected",button:"(button)"}},pagination:{previousPageLabel:"Go to previous page",nextPageLabel:"Go to next page",goToPageLabel:e=>`Go to page ${e}`},tag:{remove:e=>`Remove ${e}`},toggletip:{anchorLabel:e=>e?`Show more information about ${e}`:"Show more information"},simpleColorPicker:{colorPaletteLabel:"Color palette",colorSwatchLabel:(e,t,a)=>{let n=t?`Select ${t}, hex: ${e}`:`Select ${e}`;return a&&(n+=", selected."),n}}};var K=Object.defineProperty,Z=(e,t,a,n)=>{for(var o=void 0,i=e.length-1,r;i>=0;i--)(r=e[i])&&(o=r(t,a,o)||o);return o&&K(t,a,o),o};class _{constructor(){this.locale=j}}Z([J.observable],_.prototype,"locale");const Q=new _,X=e=>{class t extends e{get locale(){return Q.locale}}return t};exports.Localized=X;

package/bundled/localized.js

@@ -326,7 +326,8 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Error:"
   },
   tab: {
     dismissButtonLabel: "Press the DELETE key to close this tab"

package/bundled/picker-field.template.cjs

@@ -1,6 +1,6 @@
-"use strict";const b=require("./index.cjs"),_=require("./mixins.cjs"),v=require("./form-associated.cjs"),r=require("./vivid-element.cjs"),g=require("./with-error-text.cjs"),$=require("./form-element.cjs"),m=require("./localized.cjs"),k=require("./definition9.cjs"),x=require("./definition13.cjs"),F=require("./definition3.cjs"),p=require("./ref.cjs"),E=require("./slotted.cjs"),h=require("./class-names.cjs"),f=new WeakSet,y=o=>{f.add(o)},C=o=>{class t extends o{_trappedFocus(a,i){if(!f.has(a)&&a.key==="Tab"){const l=i(),s=l[0],e=l[l.length-1];if(a.shiftKey){if(this.shadowRoot.activeElement===s)return e.focus(),!0}else if(this.shadowRoot.activeElement===e)return s.focus(),!0}return!1}}return t},O=":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";var T=Object.defineProperty,u=(o,t,n,a)=>{for(var i=void 0,l=o.length-1,s;l>=0;l--)(s=o[l])&&(i=s(t,n,i)||i);return i&&T(t,n,i),i};class c extends _.WithFeedback(g.WithErrorText($.FormElement(C(m.Localized(v.FormAssociated(r.VividElement)))))){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.#o={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#s=t=>{if(!this._popupOpen)return;const n=t.composedPath();[this._dialogEl,this._pickerButtonEl].some(i=>n.includes(i))||this._closePopup(!1)},this._presentationValue="",this.value=""}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#s),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t),this.#l()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#s),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t),this.#n()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??""),super.validate(this._textFieldEl?.querySelector("input")??void 0)}#o;#i;#l(){this.#i=r.Observable.binding(()=>this.locale,this.#o),this.#i.observe(this,r.defaultExecutionContext)}#n(){this.#i.disconnect()}#s;#a(){this.readOnly||(this._popupOpen=!0)}_closePopup(t=!0){this._popupOpen=!1,t&&this._textFieldEl.focus()}_onBaseKeyDown(t){return this._popupOpen&&b.handleEscapeKeyAndStopPropogation(t)?(this._closePopup(),!1):!this._trappedFocus(t,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(t){const n=t.currentTarget;this._presentationValue=n.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#a()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit("clear-click")}}u([r.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");u([r.observable],c.prototype,"_popupOpen");u([r.observable],c.prototype,"_presentationValue");const P=(o,t,{withSeparator:n,padded:a})=>{const i=o.tagFor(k.Popup),l=o.tagFor(x.TextField),s=o.tagFor(F.Button);return r.html`
+"use strict";const _=require("./index.cjs"),v=require("./mixins.cjs"),g=require("./form-associated.cjs"),r=require("./vivid-element.cjs"),$=require("./with-contextual-help.cjs"),x=require("./with-error-text.cjs"),m=require("./form-element.cjs"),k=require("./localized.cjs"),F=require("./definition9.cjs"),E=require("./definition13.cjs"),y=require("./definition3.cjs"),p=require("./ref.cjs"),h=require("./slotted.cjs"),f=require("./class-names.cjs"),b=new WeakSet,C=l=>{b.add(l)},O=l=>{class t extends l{_trappedFocus(a,i){if(!b.has(a)&&a.key==="Tab"){const s=i(),o=s[0],e=s[s.length-1];if(a.shiftKey){if(this.shadowRoot.activeElement===o)return e.focus(),!0}else if(this.shadowRoot.activeElement===e)return o.focus(),!0}return!1}}return t},T=":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";var P=Object.defineProperty,u=(l,t,n,a)=>{for(var i=void 0,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=o(t,n,i)||i);return i&&P(t,n,i),i};class c extends $.WithContextualHelp(v.WithFeedback(x.WithErrorText(m.FormElement(O(k.Localized(g.FormAssociated(r.VividElement))))))){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.#l={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=t=>{if(!this._popupOpen)return;const n=t.composedPath();[this._dialogEl,this._pickerButtonEl].some(i=>n.includes(i))||this._closePopup(!1)},this._presentationValue="",this.value=""}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#o),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t),this.#s()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#o),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t),this.#n()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??""),super.validate(this._textFieldEl?.querySelector("input")??void 0)}#l;#i;#s(){this.#i=r.Observable.binding(()=>this.locale,this.#l),this.#i.observe(this,r.defaultExecutionContext)}#n(){this.#i.disconnect()}#o;#a(){this.readOnly||(this._popupOpen=!0)}_closePopup(t=!0){this._popupOpen=!1,t&&this._textFieldEl.focus()}_onBaseKeyDown(t){return this._popupOpen&&_.handleEscapeKeyAndStopPropogation(t)?(this._closePopup(),!1):!this._trappedFocus(t,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(t){const n=t.currentTarget;this._presentationValue=n.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#a()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit("clear-click")}}u([r.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");u([r.observable],c.prototype,"_popupOpen");u([r.observable],c.prototype,"_presentationValue");const q=(l,t,{withSeparator:n,padded:a})=>{const i=l.tagFor(F.Popup),s=l.tagFor(E.TextField),o=l.tagFor(y.Button);return r.html`
 		<div class='base' @keydown='${(e,{event:d})=>e._onBaseKeyDown(d)}'>
-			<${l} id='text-field'
+			<${s} id='text-field'
 				${p.ref("_textFieldEl")}
 				class='control'
 				label='${e=>e.label}'
@@ -17,9 +17,14 @@
 				<slot
 					slot='${e=>e._helperTextSlottedContent?.length?"helper-text":void 0}'
 					name='helper-text'
-					${E.slotted("_helperTextSlottedContent")}
+					${h.slotted("_helperTextSlottedContent")}
 				></slot>
-				<${s}
+				<slot
+					slot='${e=>e._contextualHelpSlottedContent?.length?"contextual-help":void 0}'
+					name='contextual-help'
+					${h.slotted("_contextualHelpSlottedContent")}
+				></slot>
+				<${o}
 					id='picker-button'
 					${p.ref("_pickerButtonEl")}
 					slot='action-items'
@@ -29,34 +34,34 @@
 					?disabled='${e=>e.disabled||e.readOnly}'
 					aria-label='${e=>e._pickerButtonLabel}'
 					@click='${e=>e._onPickerButtonClick()}'
-				></${s}>
-			</${l}>
+				></${o}>
+			</${s}>
 			<${i}
 				?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="${()=>h.classNames("dialog",["dialog--padded",a])}" role='dialog' ${p.ref("_dialogEl")} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
+				<div class="${()=>f.classNames("dialog",["dialog--padded",a])}" role='dialog' ${p.ref("_dialogEl")} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
 					${()=>t}
-					<div class="${()=>h.classNames("footer",["footer--with-separator",n])}">
-						<${s}
+					<div class="${()=>f.classNames("footer",["footer--with-separator",n])}">
+						<${o}
 							id='clear-button'
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'
 							label='${e=>e.locale.pickerField.clearLabel}'
 							@click='${e=>e._onClearClick()}'
-						></${s}>
-						<${s}
+						></${o}>
+						<${o}
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'
 							appearance='filled'
 							label='${e=>e.locale.pickerField.okLabel}'
 							@click='${e=>e._onOkClick()}'
-						></${s}>
+						></${o}>
 					</div>
 				</div>
 			</${i}>
-		</div>`};exports.PickerField=c;exports.PickerFieldTemplate=P;exports.ignoreEventInFocusTraps=y;exports.pickerFieldStyles=O;
+		</div>`};exports.PickerField=c;exports.PickerFieldTemplate=q;exports.ignoreEventInFocusTraps=C;exports.pickerFieldStyles=T;

package/bundled/picker-field.template.js

@@ -1,26 +1,27 @@
-import { h as m } from "./index.js";
-import { W as b } from "./mixins.js";
-import { F as _ } from "./form-associated.js";
-import { V as g, O as v, b as $, a as k, o as h, h as x } from "./vivid-element.js";
-import { W as F } from "./with-error-text.js";
-import { F as y } from "./form-element.js";
-import { L as E } from "./localized.js";
-import { P as C } from "./definition9.js";
-import { T as O } from "./definition13.js";
-import { B as T } from "./definition3.js";
+import { h as b } from "./index.js";
+import { W as _ } from "./mixins.js";
+import { F as g } from "./form-associated.js";
+import { V as v, O as $, b as x, a as k, o as f, h as F } from "./vivid-element.js";
+import { W as y } from "./with-contextual-help.js";
+import { W as C } from "./with-error-text.js";
+import { F as E } from "./form-element.js";
+import { L as O } from "./localized.js";
+import { P as T } from "./definition9.js";
+import { T as P } from "./definition13.js";
+import { B as L } from "./definition3.js";
 import { r as p } from "./ref.js";
-import { s as P } from "./slotted.js";
-import { c as u } from "./class-names.js";
-const f = /* @__PURE__ */ new WeakSet(), q = (s) => {
-  f.add(s);
-}, L = (s) => {
+import { s as u } from "./slotted.js";
+import { c as h } from "./class-names.js";
+const m = /* @__PURE__ */ new WeakSet(), G = (s) => {
+  m.add(s);
+}, V = (s) => {
   class t extends s {
     /**
      * @returns Whether focus was trapped.
      * @internal
      */
     _trappedFocus(n, o) {
-      if (!f.has(n) && n.key === "Tab") {
+      if (!m.has(n) && n.key === "Tab") {
         const l = o(), i = l[0], e = l[l.length - 1];
         if (n.shiftKey) {
           if (this.shadowRoot.activeElement === i)
@@ -32,15 +33,17 @@ const f = /* @__PURE__ */ new WeakSet(), q = (s) => {
     }
   }
   return t;
-}, N = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
-var V = Object.defineProperty, d = (s, t, a, n) => {
+}, J = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
+var w = Object.defineProperty, d = (s, t, a, n) => {
   for (var o = void 0, l = s.length - 1, i; l >= 0; l--)
     (i = s[l]) && (o = i(t, a, o) || o);
-  return o && V(t, a, o), o;
+  return o && w(t, a, o), o;
 };
-class c extends b(
-  F(
-    y(L(E(_(g))))
+class c extends y(
+  _(
+    C(
+      E(V(O(g(v))))
+    )
   )
 ) {
   // --- Core ---
@@ -89,10 +92,10 @@ class c extends b(
   #s;
   #o;
   #l() {
-    this.#o = v.binding(
+    this.#o = $.binding(
       () => this.locale,
       this.#s
-    ), this.#o.observe(this, $);
+    ), this.#o.observe(this, x);
   }
   #a() {
     this.#o.disconnect();
@@ -112,7 +115,7 @@ class c extends b(
    * @internal
    */
   _onBaseKeyDown(t) {
-    return this._popupOpen && m(t) ? (this._closePopup(), !1) : !this._trappedFocus(t, () => this._focusableElsWithinDialog());
+    return this._popupOpen && b(t) ? (this._closePopup(), !1) : !this._trappedFocus(t, () => this._focusableElsWithinDialog());
   }
   /**
    * @internal
@@ -151,14 +154,14 @@ d([
   k({ attribute: "readonly", mode: "boolean" })
 ], c.prototype, "readOnly");
 d([
-  h
+  f
 ], c.prototype, "_popupOpen");
 d([
-  h
+  f
 ], c.prototype, "_presentationValue");
-const G = (s, t, { withSeparator: a, padded: n }) => {
-  const o = s.tagFor(C), l = s.tagFor(O), i = s.tagFor(T);
-  return x`
+const Q = (s, t, { withSeparator: a, padded: n }) => {
+  const o = s.tagFor(T), l = s.tagFor(P), i = s.tagFor(L);
+  return F`
 		<div class='base' @keydown='${(e, { event: r }) => e._onBaseKeyDown(r)}'>
 			<${l} id='text-field'
 				${p("_textFieldEl")}
@@ -177,7 +180,12 @@ const G = (s, t, { withSeparator: a, padded: n }) => {
 				<slot
 					slot='${(e) => e._helperTextSlottedContent?.length ? "helper-text" : void 0}'
 					name='helper-text'
-					${P("_helperTextSlottedContent")}
+					${u("_helperTextSlottedContent")}
+				></slot>
+				<slot
+					slot='${(e) => e._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+					name='contextual-help'
+					${u("_contextualHelpSlottedContent")}
 				></slot>
 				<${i}
 					id='picker-button'
@@ -197,14 +205,14 @@ const G = (s, t, { withSeparator: a, padded: n }) => {
 				offset='${(e) => e._helperTextSlottedContent?.length || e.helperText || e.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => u("dialog", [
+				<div class="${() => h("dialog", [
     "dialog--padded",
     n
   ])}" role='dialog' ${p(
     "_dialogEl"
   )} aria-modal='true' aria-label='${(e) => e._dialogLabel}'>
 					${() => t}
-					<div class="${() => u("footer", ["footer--with-separator", a])}">
+					<div class="${() => h("footer", ["footer--with-separator", a])}">
 						<${i}
 							id='clear-button'
 							tabindex='3'
@@ -228,7 +236,7 @@ const G = (s, t, { withSeparator: a, padded: n }) => {
 };
 export {
   c as P,
-  G as a,
-  q as i,
-  N as p
+  Q as a,
+  G as i,
+  J as p
 };

package/bundled/text-field.cjs

@@ -1 +1 @@
-"use strict";const e='.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}: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-300);--_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-300);--_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))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: 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;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.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)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.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){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.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),.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{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;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(--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(--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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);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}';exports.styles=e;
+"use strict";const e=':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-300);--_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-300);--_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))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: 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;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.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)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.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){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.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),.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{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;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(--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(--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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);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}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}';exports.styles=e;

package/bundled/text-field.js

@@ -1,4 +1,4 @@
-const e = '.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}: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-300);--_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-300);--_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))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: 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;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.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)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.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){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.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),.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{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;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(--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(--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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);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}';
+const e = ':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-300);--_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-300);--_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))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: 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;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.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)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.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){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.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),.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{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;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(--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(--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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);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}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}';
 export {
   e as s
 };