@vonage/vivid 5.4.0 → 5.6.0

package/unbundled/form-associated.cjs

@@ -139,6 +139,7 @@ const FormAssociated = (Base) => {
      * @internal
      */
     nameChanged(_previous, _next) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLElement) {
         this.proxy.name = this.name;
       }
@@ -226,6 +227,7 @@ const FormAssociated = (Base) => {
         const { valid, ...cleanFlags } = flags;
         flags = cleanFlags;
       }
+      /* v8 ignore else -- @preserve */
       if (this.elementInternals) {
         this.elementInternals.setValidity(flags, message, anchor);
       } else if (typeof message === "string") {
@@ -264,6 +266,7 @@ const FormAssociated = (Base) => {
         if (typeof this.name === "string") {
           this.proxy.name = this.name;
         }
+        /* v8 ignore else -- @preserve */
         if (typeof this.value === "string") {
           this.proxy.value = this.value;
         }
@@ -385,6 +388,7 @@ const CheckableFormAssociated = (Base) => {
      * @internal
      */
     defaultCheckedChanged() {
+      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;

package/unbundled/form-associated.js

@@ -137,6 +137,7 @@ const FormAssociated = (Base) => {
      * @internal
      */
     nameChanged(_previous, _next) {
+      /* v8 ignore if -- @preserve */
       if (this.proxy instanceof HTMLElement) {
         this.proxy.name = this.name;
       }
@@ -224,6 +225,7 @@ const FormAssociated = (Base) => {
         const { valid, ...cleanFlags } = flags;
         flags = cleanFlags;
       }
+      /* v8 ignore else -- @preserve */
       if (this.elementInternals) {
         this.elementInternals.setValidity(flags, message, anchor);
       } else if (typeof message === "string") {
@@ -262,6 +264,7 @@ const FormAssociated = (Base) => {
         if (typeof this.name === "string") {
           this.proxy.name = this.name;
         }
+        /* v8 ignore else -- @preserve */
         if (typeof this.value === "string") {
           this.proxy.value = this.value;
         }
@@ -383,6 +386,7 @@ const CheckableFormAssociated = (Base) => {
      * @internal
      */
     defaultCheckedChanged() {
+      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;

package/unbundled/listbox.cjs

@@ -177,6 +177,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   handleChange(source, propertyName) {
     switch (propertyName) {
       case "selected": {
+        /* v8 ignore else -- @preserve */
         if (_Listbox.slottedOptionFilter(source)) {
           this.selectedIndex = this.options.indexOf(source);
         }
@@ -196,6 +197,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   handleTypeAhead(key) {
+    /* v8 ignore else -- @preserve */
     if (this.typeaheadTimeout) {
       window.clearTimeout(this.typeaheadTimeout);
     }
@@ -218,6 +220,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     const key = e.key;
     switch (key) {
       case fastWebUtilities.keyHome: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectFirstOption();
@@ -225,6 +228,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
         break;
       }
       case fastWebUtilities.keyArrowDown: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
@@ -232,6 +236,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
         break;
       }
       case fastWebUtilities.keyArrowUp: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
@@ -250,11 +255,14 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
       case fastWebUtilities.keyEnter:
       case fastWebUtilities.keyEscape:
         return true;
-      case fastWebUtilities.keySpace:
+      case fastWebUtilities.keySpace: {
+        /* v8 ignore else -- @preserve */
         if (this.typeaheadExpired) {
           return true;
         }
+      }
       default: {
+        /* v8 ignore else -- @preserve */
         if (key.length === 1) {
           this.handleTypeAhead(`${key}`);
         }
@@ -312,6 +320,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   selectFirstOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled) {
       this.selectedIndex = this.options.findIndex((o) => !o.disabled);
     }
@@ -322,6 +331,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   selectLastOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled) {
       this.selectedIndex = fastWebUtilities.findLastIndex(this.options, (o) => !o.disabled);
     }
@@ -332,6 +342,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   selectNextOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled && this.selectedIndex < this.options.length - 1) {
       this.selectedIndex += 1;
     }
@@ -342,6 +353,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   selectPreviousOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled && this.selectedIndex > 0) {
       this.selectedIndex = this.selectedIndex - 1;
     }
@@ -376,6 +388,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
+      /* v8 ignore else -- @preserve */
       if (option_definition.isListboxOption(item)) {
         options.push(item);
       }
@@ -398,8 +411,10 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   typeaheadBufferChanged(_prev, _next) {
     if (this.$fastController.isConnected) {
       const typeaheadMatches = this.getTypeaheadMatches();
+      /* v8 ignore else -- @preserve */
       if (typeaheadMatches.length) {
         const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
+        /* v8 ignore else -- @preserve */
         if (selectedIndex > -1) {
           this.selectedIndex = selectedIndex;
         }

package/unbundled/listbox.js

@@ -175,6 +175,7 @@ const _Listbox = class _Listbox extends VividElement {
   handleChange(source, propertyName) {
     switch (propertyName) {
       case "selected": {
+        /* v8 ignore else -- @preserve */
         if (_Listbox.slottedOptionFilter(source)) {
           this.selectedIndex = this.options.indexOf(source);
         }
@@ -194,6 +195,7 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   handleTypeAhead(key) {
+    /* v8 ignore else -- @preserve */
     if (this.typeaheadTimeout) {
       window.clearTimeout(this.typeaheadTimeout);
     }
@@ -216,6 +218,7 @@ const _Listbox = class _Listbox extends VividElement {
     const key = e.key;
     switch (key) {
       case keyHome: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectFirstOption();
@@ -223,6 +226,7 @@ const _Listbox = class _Listbox extends VividElement {
         break;
       }
       case keyArrowDown: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
@@ -230,6 +234,7 @@ const _Listbox = class _Listbox extends VividElement {
         break;
       }
       case keyArrowUp: {
+        /* v8 ignore else -- @preserve */
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
@@ -248,11 +253,14 @@ const _Listbox = class _Listbox extends VividElement {
       case keyEnter:
       case keyEscape:
         return true;
-      case keySpace:
+      case keySpace: {
+        /* v8 ignore else -- @preserve */
         if (this.typeaheadExpired) {
           return true;
         }
+      }
       default: {
+        /* v8 ignore else -- @preserve */
         if (key.length === 1) {
           this.handleTypeAhead(`${key}`);
         }
@@ -310,6 +318,7 @@ const _Listbox = class _Listbox extends VividElement {
    * @public
    */
   selectFirstOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled) {
       this.selectedIndex = this.options.findIndex((o) => !o.disabled);
     }
@@ -320,6 +329,7 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   selectLastOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled) {
       this.selectedIndex = findLastIndex(this.options, (o) => !o.disabled);
     }
@@ -330,6 +340,7 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   selectNextOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled && this.selectedIndex < this.options.length - 1) {
       this.selectedIndex += 1;
     }
@@ -340,6 +351,7 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   selectPreviousOption() {
+    /* v8 ignore else -- @preserve */
     if (!this.disabled && this.selectedIndex > 0) {
       this.selectedIndex = this.selectedIndex - 1;
     }
@@ -374,6 +386,7 @@ const _Listbox = class _Listbox extends VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
+      /* v8 ignore else -- @preserve */
       if (isListboxOption(item)) {
         options.push(item);
       }
@@ -396,8 +409,10 @@ const _Listbox = class _Listbox extends VividElement {
   typeaheadBufferChanged(_prev, _next) {
     if (this.$fastController.isConnected) {
       const typeaheadMatches = this.getTypeaheadMatches();
+      /* v8 ignore else -- @preserve */
       if (typeaheadMatches.length) {
         const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
+        /* v8 ignore else -- @preserve */
         if (selectedIndex > -1) {
           this.selectedIndex = selectedIndex;
         }

package/unbundled/localized.cjs

@@ -36,6 +36,42 @@ const Localized = (Base) => {
   }
   return LocalizedElement;
 };
+const WithObservableLocale = (Base) => {
+  class WithObservableLocaleElement extends Localized(Base) {
+    /**
+     * Called whenever the locale changes.
+     * @internal
+     */
+    localeChanged() {
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.#startObservingLocaleChanges();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.#stopObservingLocaleChanges();
+    }
+    #localeChangeHandler = {
+      handleChange: () => {
+        this.localeChanged();
+      }
+    };
+    #localeChangeObserver;
+    #startObservingLocaleChanges() {
+      this.#localeChangeObserver = fastElement.Observable.binding(
+        () => this.locale,
+        this.#localeChangeHandler
+      );
+      this.#localeChangeObserver.observe(this, fastElement.ExecutionContext.default);
+    }
+    #stopObservingLocaleChanges() {
+      this.#localeChangeObserver.dispose();
+    }
+  }
+  return WithObservableLocaleElement;
+};
 
 exports.Localized = Localized;
+exports.WithObservableLocale = WithObservableLocale;
 exports.setLocale = setLocale;

package/unbundled/localized.js

@@ -1,4 +1,4 @@
-import { observable } from '@microsoft/fast-element';
+import { observable, Observable, ExecutionContext } from '@microsoft/fast-element';
 import enUS from '../locales/en-US.js';
 
 var __defProp = Object.defineProperty;
@@ -34,5 +34,40 @@ const Localized = (Base) => {
   }
   return LocalizedElement;
 };
+const WithObservableLocale = (Base) => {
+  class WithObservableLocaleElement extends Localized(Base) {
+    /**
+     * Called whenever the locale changes.
+     * @internal
+     */
+    localeChanged() {
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.#startObservingLocaleChanges();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.#stopObservingLocaleChanges();
+    }
+    #localeChangeHandler = {
+      handleChange: () => {
+        this.localeChanged();
+      }
+    };
+    #localeChangeObserver;
+    #startObservingLocaleChanges() {
+      this.#localeChangeObserver = Observable.binding(
+        () => this.locale,
+        this.#localeChangeHandler
+      );
+      this.#localeChangeObserver.observe(this, ExecutionContext.default);
+    }
+    #stopObservingLocaleChanges() {
+      this.#localeChangeObserver.dispose();
+    }
+  }
+  return WithObservableLocaleElement;
+};
 
-export { Localized as L, setLocale as s };
+export { Localized as L, WithObservableLocale as W, setLocale as s };

package/unbundled/mixins.cjs

@@ -93,6 +93,7 @@ class RenderInLightDomBehaviour {
    * Handles change of the template itself.
    */
   handleChange(source, args) {
+    /* v8 ignore else -- @preserve */
     if (args === this.templateBindingObserver) {
       const template = this.templateBindingObserver.bind(this.controller);
       this.instantiateTemplate(template);
@@ -212,6 +213,7 @@ const WithLightDOMFeedback = (Base) => {
      */
     _helperTextSlottedContentChanged(_, newContent) {
       for (const el of newContent) {
+        /* v8 ignore else -- @preserve */
         if (!el.id) {
           el.id = randomSlottedContentId();
         }

package/unbundled/mixins.js

@@ -91,6 +91,7 @@ class RenderInLightDomBehaviour {
    * Handles change of the template itself.
    */
   handleChange(source, args) {
+    /* v8 ignore else -- @preserve */
     if (args === this.templateBindingObserver) {
       const template = this.templateBindingObserver.bind(this.controller);
       this.instantiateTemplate(template);
@@ -210,6 +211,7 @@ const WithLightDOMFeedback = (Base) => {
      */
     _helperTextSlottedContentChanged(_, newContent) {
       for (const el of newContent) {
+        /* v8 ignore else -- @preserve */
         if (!el.id) {
           el.id = randomSlottedContentId();
         }

package/unbundled/picker-field.template.cjs

@@ -8,45 +8,13 @@ const vividElement = require('./vivid-element.cjs');
 const withContextualHelp = require('./with-contextual-help.cjs');
 const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
+const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const popup_definition = require('./definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const button_definition = require('./definition.cjs');
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":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 __defProp = Object.defineProperty;
@@ -61,7 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class PickerField extends withContextualHelp.WithContextualHelp(
   mixins.WithFeedback(
     withErrorText.WithErrorText(
-      formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+      formElement.FormElement(trappedFocus.TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
     )
   )
 ) {
@@ -153,6 +121,7 @@ class PickerField extends withContextualHelp.WithContextualHelp(
   }
   #dismissOnClickOutside;
   #openPopupIfPossible() {
+    /* v8 ignore else -- @preserve */
     if (!this.readOnly) {
       this._popupOpen = true;
     }
@@ -308,5 +277,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 
 exports.PickerField = PickerField;
 exports.PickerFieldTemplate = PickerFieldTemplate;
-exports.ignoreEventInFocusTraps = ignoreEventInFocusTraps;
 exports.pickerFieldStyles = pickerFieldStyles;

package/unbundled/picker-field.template.js

@@ -6,45 +6,13 @@ import { V as VividElement } from './vivid-element.js';
 import { W as WithContextualHelp } from './with-contextual-help.js';
 import { W as WithErrorText } from './with-error-text.js';
 import { F as FormElement } from './form-element.js';
+import { T as TrappedFocus } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { P as Popup } from './definition5.js';
 import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
 import { B as Button } from './definition.js';
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":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 __defProp = Object.defineProperty;
@@ -151,6 +119,7 @@ class PickerField extends WithContextualHelp(
   }
   #dismissOnClickOutside;
   #openPopupIfPossible() {
+    /* v8 ignore else -- @preserve */
     if (!this.readOnly) {
       this._popupOpen = true;
     }
@@ -304,4 +273,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 		</div>`;
 };
 
-export { PickerFieldTemplate as P, PickerField as a, ignoreEventInFocusTraps as i, pickerFieldStyles as p };
+export { PickerFieldTemplate as P, PickerField as a, pickerFieldStyles as p };

package/unbundled/scrollIntoView.cjs

@@ -43,6 +43,7 @@ function flatTreeOffsetParent(element) {
     if (style.position !== "static" || style.filter !== "none") {
       return ancestor;
     }
+    /* v8 ignore else -- @preserve */
     if (ancestor.tagName === "BODY") return ancestor;
   }
   return null;

package/unbundled/scrollIntoView.js

@@ -41,6 +41,7 @@ function flatTreeOffsetParent(element) {
     if (style.position !== "static" || style.filter !== "none") {
       return ancestor;
     }
+    /* v8 ignore else -- @preserve */
     if (ancestor.tagName === "BODY") return ancestor;
   }
   return null;

package/unbundled/text-field.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-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(--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}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-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;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)}.label-wrapper{grid-column:1/4;grid-row:1}.char-count+.label-wrapper{grid-column:1/3}.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 = styles;

package/unbundled/text-field.js

@@ -1,3 +1,3 @@
-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(--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}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-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;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)}.label-wrapper{grid-column:1/4;grid-row:1}.char-count+.label-wrapper{grid-column:1/3}.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}";
 
 export { styles as s };