@vonage/vivid 4.4.0 → 4.6.0

package/shared/presentationDate.js

@@ -1,21 +1,21 @@
 import { B as Button } from './definition11.js';
-import { P as Popup } from './definition63.js';
-import { T as TextField } from './definition55.js';
+import { P as Popup } from './definition64.js';
+import { T as TextField } from './definition56.js';
 import { D as Divider } from './definition22.js';
-import { h as html, F as FoundationElement, a as attr, o as observable, v as volatile, D as DOM } from './index.js';
+import { h as html, F as FoundationElement, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
-import './affix.js';
-import { a as FormElementHelperText } from './index2.js';
-import { L as Localized } from './localized.js';
-import { T as TrappedFocus } from './trapped-focus.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { F as FormAssociated } from './form-associated.js';
+import { T as TrappedFocus } from './trapped-focus.js';
+import { a as FormElementHelperText } from './form-elements.js';
+import { L as Localized } from './localized.js';
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -1287,7 +1287,7 @@ function formatTimezoneShort(offset, dirtyDelimiter) {
   if (minutes === 0) {
     return sign + String(hours);
   }
-  var delimiter = dirtyDelimiter ;
+  var delimiter = dirtyDelimiter;
   return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
 }
 function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
@@ -2404,7 +2404,7 @@ function _unsupportedIterableToArray(o, minLen) {
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike  ) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
       if (it) o = it;
       var i = 0;
       var F = function F() {};
@@ -5832,7 +5832,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
    * @internal
    */
   _onBaseKeyDown(event) {
-    if (event.key === "Escape") {
+    if (this._popupOpen && handleEscapeKeyAndStopPropogation(event)) {
       this._closePopup();
       return false;
     }

package/shared/scrollIntoView.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+function scrollIntoView(element, parent, position) {
+  const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
+  switch (position) {
+    case "start":
+      parent.scrollTop = offsetTop;
+      break;
+    case "nearest":
+      if (offsetTop < parent.scrollTop) {
+        parent.scrollTop = offsetTop;
+      }
+      if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) {
+        parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
+      }
+      break;
+  }
+}
+function flatTreeOffsetTop(element) {
+  const offsetParent = element.offsetParent;
+  let value = element.offsetTop;
+  let nextOffsetParent = flatTreeOffsetParent(element);
+  while (nextOffsetParent !== offsetParent) {
+    value -= nextOffsetParent.offsetTop;
+    nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
+  }
+  return value;
+}
+function flatTreeParent(element) {
+  if (element.assignedSlot) {
+    return element.assignedSlot;
+  }
+  if (element.parentNode instanceof ShadowRoot) {
+    return element.parentNode.host;
+  }
+  return element.parentNode;
+}
+function flatTreeOffsetParent(element) {
+  for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
+    if (!(ancestor instanceof Element)) continue;
+    const style = getComputedStyle(ancestor);
+    if (style.display === "contents") continue;
+    if (style.position !== "static" || style.filter !== "none") {
+      return ancestor;
+    }
+    if (ancestor.tagName === "BODY") return ancestor;
+  }
+  return null;
+}
+
+exports.scrollIntoView = scrollIntoView;

package/shared/scrollIntoView.js

@@ -0,0 +1,49 @@
+function scrollIntoView(element, parent, position) {
+  const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
+  switch (position) {
+    case "start":
+      parent.scrollTop = offsetTop;
+      break;
+    case "nearest":
+      if (offsetTop < parent.scrollTop) {
+        parent.scrollTop = offsetTop;
+      }
+      if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) {
+        parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
+      }
+      break;
+  }
+}
+function flatTreeOffsetTop(element) {
+  const offsetParent = element.offsetParent;
+  let value = element.offsetTop;
+  let nextOffsetParent = flatTreeOffsetParent(element);
+  while (nextOffsetParent !== offsetParent) {
+    value -= nextOffsetParent.offsetTop;
+    nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
+  }
+  return value;
+}
+function flatTreeParent(element) {
+  if (element.assignedSlot) {
+    return element.assignedSlot;
+  }
+  if (element.parentNode instanceof ShadowRoot) {
+    return element.parentNode.host;
+  }
+  return element.parentNode;
+}
+function flatTreeOffsetParent(element) {
+  for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
+    if (!(ancestor instanceof Element)) continue;
+    const style = getComputedStyle(ancestor);
+    if (style.display === "contents") continue;
+    if (style.position !== "static" || style.filter !== "none") {
+      return ancestor;
+    }
+    if (ancestor.tagName === "BODY") return ancestor;
+  }
+  return null;
+}
+
+export { scrollIntoView as s };

package/shared/slider.template.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition63.cjs');
+const definition = require('./definition64.cjs');
 const aria = require('./aria.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');

package/shared/slider.template.js

@@ -1,4 +1,4 @@
-import { P as Popup, a as PlacementStrategy } from './definition63.js';
+import { P as Popup, a as PlacementStrategy } from './definition64.js';
 import { O as Orientation } from './aria.js';
 import { h as html } from './index.js';
 import { r as ref } from './ref.js';

package/shared/text-anchor.cjs

@@ -2,8 +2,8 @@
 
 const affix = require('./affix.cjs');
 const anchor = require('./anchor.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const index = require('./index.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/text-anchor.js

@@ -1,7 +1,7 @@
 import { A as AffixIcon } from './affix.js';
 import { A as Anchor } from './anchor.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { a as attr } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/text-field.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const styles = ":host{display:inline-block}.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) ;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.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:where(.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))}@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);grid-column:3/4}.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:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.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(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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)}: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 styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.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:where(.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%;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);grid-column:3/4}.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(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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 = styles;

package/shared/text-field.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:inline-block}.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) ;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.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:where(.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))}@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);grid-column:3/4}.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:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.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(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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)}: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 styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.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:where(.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%;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);grid-column:3/4}.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(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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}";
 
 export { styles as s };

package/shared/utils/playbackRates.d.ts

@@ -0,0 +1 @@
+export declare function getPlaybackRatesArray(playbackRates: string): number[];

package/shared/utils/scrollIntoView.d.ts

@@ -0,0 +1 @@
+export declare function scrollIntoView(element: HTMLElement, parent: HTMLElement, position: 'nearest' | 'start'): void;

package/side-drawer/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition45.cjs');
+const definition = require('../shared/definition46.cjs');
 
 definition.registerSideDrawer();

package/side-drawer/index.js

@@ -1,3 +1,3 @@
-import { r as registerSideDrawer } from '../shared/definition45.js';
+import { r as registerSideDrawer } from '../shared/definition46.js';
 
 registerSideDrawer();

package/slider/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition46.cjs');
+const definition = require('../shared/definition47.cjs');
 
 definition.registerSlider();

package/slider/index.js

@@ -1,3 +1,3 @@
-import { r as registerSlider } from '../shared/definition46.js';
+import { r as registerSlider } from '../shared/definition47.js';
 
 registerSlider();

package/split-button/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition47.cjs');
+const definition = require('../shared/definition48.cjs');
 
 definition.registerSplitButton();

package/split-button/index.js

@@ -1,3 +1,3 @@
-import { r as registerSplitButton } from '../shared/definition47.js';
+import { r as registerSplitButton } from '../shared/definition48.js';
 
 registerSplitButton();

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:52:05 GMT
+ * Generated on Thu, 03 Oct 2024 10:57:19 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/switch/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition48.cjs');
+const definition = require('../shared/definition49.cjs');
 
 definition.registerSwitch();

package/switch/index.js

@@ -1,3 +1,3 @@
-import { r as registerSwitch } from '../shared/definition48.js';
+import { r as registerSwitch } from '../shared/definition49.js';
 
 registerSwitch();

package/tab/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition50.cjs');
+const definition = require('../shared/definition51.cjs');
 
 definition.registerTab();

package/tab/index.js

@@ -1,3 +1,3 @@
-import { r as registerTab } from '../shared/definition50.js';
+import { r as registerTab } from '../shared/definition51.js';
 
 registerTab();

package/tab-panel/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition49.cjs');
+const definition = require('../shared/definition50.cjs');
 
 definition.registerTabPanel();

package/tab-panel/index.js

@@ -1,3 +1,3 @@
-import { r as registerTabPanel } from '../shared/definition49.js';
+import { r as registerTabPanel } from '../shared/definition50.js';
 
 registerTabPanel();

package/tabs/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition51.cjs');
+const definition = require('../shared/definition52.cjs');
 
 definition.registerTabs();

package/tabs/index.js

@@ -1,3 +1,3 @@
-import { r as registerTabs } from '../shared/definition51.js';
+import { r as registerTabs } from '../shared/definition52.js';
 
 registerTabs();

package/tag/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition53.cjs');
+const definition = require('../shared/definition54.cjs');
 
 definition.registerTag();

package/tag/index.js

@@ -1,3 +1,3 @@
-import { r as registerTag } from '../shared/definition53.js';
+import { r as registerTag } from '../shared/definition54.js';
 
 registerTag();

package/tag-group/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition52.cjs');
+const definition = require('../shared/definition53.cjs');
 
 definition.registerTagGroup();

package/tag-group/index.js

@@ -1,3 +1,3 @@
-import { r as registerTagGroup } from '../shared/definition52.js';
+import { r as registerTagGroup } from '../shared/definition53.js';
 
 registerTagGroup();

package/text-area/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition54.cjs');
+const definition = require('../shared/definition55.cjs');
 
 definition.registerTextArea();

package/text-area/index.js

@@ -1,3 +1,3 @@
-import { r as registerTextArea } from '../shared/definition54.js';
+import { r as registerTextArea } from '../shared/definition55.js';
 
 registerTextArea();

package/text-field/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition55.cjs');
+const definition = require('../shared/definition56.cjs');
 
 definition.registerTextField();

package/text-field/index.js

@@ -1,3 +1,3 @@
-import { r as registerTextField } from '../shared/definition55.js';
+import { r as registerTextField } from '../shared/definition56.js';
 
 registerTextField();

package/time-picker/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition56.cjs');
+const definition = require('../shared/definition57.cjs');
 
 definition.registerTimePicker();

package/time-picker/index.js

@@ -1,3 +1,3 @@
-import { r as registerTimePicker } from '../shared/definition56.js';
+import { r as registerTimePicker } from '../shared/definition57.js';
 
 registerTimePicker();

package/toggletip/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition57.cjs');
+const definition = require('../shared/definition58.cjs');
 
 definition.registerToggletip();

package/toggletip/index.js

@@ -1,3 +1,3 @@
-import { r as registerToggletip } from '../shared/definition57.js';
+import { r as registerToggletip } from '../shared/definition58.js';
 
 registerToggletip();

package/tooltip/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition58.cjs');
+const definition = require('../shared/definition59.cjs');
 
 definition.registerTooltip();

package/tooltip/index.js

@@ -1,3 +1,3 @@
-import { r as registerTooltip } from '../shared/definition58.js';
+import { r as registerTooltip } from '../shared/definition59.js';
 
 registerTooltip();

package/tree-item/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition59.cjs');
+const definition = require('../shared/definition60.cjs');
 
 definition.registerTreeItem();

package/tree-item/index.js

@@ -1,3 +1,3 @@
-import { r as registerTreeItem } from '../shared/definition59.js';
+import { r as registerTreeItem } from '../shared/definition60.js';
 
 registerTreeItem();

package/tree-view/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition60.cjs');
+const definition = require('../shared/definition61.cjs');
 
 definition.registerTreeView();

package/tree-view/index.js

@@ -1,3 +1,3 @@
-import { r as registerTreeView } from '../shared/definition60.js';
+import { r as registerTreeView } from '../shared/definition61.js';
 
 registerTreeView();