@vonage/vivid 3.31.0 → 3.34.0

package/shared/index2.js

@@ -0,0 +1,202 @@
+import { I as Icon } from './icon.js';
+import { a as attr, o as observable, v as volatile, h as html } from './index.js';
+import { w as when } from './when.js';
+import enUS from '../locales/en-US.js';
+
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+const ElementInternalsKey = "ElementInternals";
+const supportsElementInternals = () => ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+class FormElementHelperText {
+}
+__decorateClass$1([
+  attr({ attribute: "helper-text" })
+], FormElementHelperText.prototype, "helperText", 2);
+class FormElementSuccessText {
+}
+__decorateClass$1([
+  attr({ attribute: "success-text" })
+], FormElementSuccessText.prototype, "successText", 2);
+class FormElementCharCount {
+  constructor() {
+    this.charCount = false;
+  }
+}
+__decorateClass$1([
+  attr({
+    attribute: "char-count",
+    mode: "boolean"
+  })
+], FormElementCharCount.prototype, "charCount", 2);
+function formElements(constructor) {
+  class Decorated extends constructor {
+    constructor(...args) {
+      super(...args);
+      this.userValid = true;
+      this.#blurred = false;
+      this.#handleInvalidEvent = () => {
+        if (this.#blurred && this.dirtyValue)
+          return;
+        this.#blurred = true;
+        this.dirtyValue = true;
+        this.validate();
+      };
+      this.validate = () => {
+        if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
+          this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
+        } else {
+          super.validate();
+        }
+        this.userValid = !this.userValid;
+        if (this.proxy instanceof HTMLElement) {
+          this.userValid = this.#blurred && this.dirtyValue ? !this.validationMessage : true;
+        }
+      };
+      this.addEventListener("blur", () => {
+        this.#blurred = true;
+        this.validate();
+      });
+      this.addEventListener("focus", () => {
+        this.#blurred = false;
+      });
+      this.addEventListener("invalid", () => {
+        this.proxy.dispatchEvent(new Event("invalid"));
+      });
+    }
+    #blurred;
+    get errorValidationMessage() {
+      return this.userValid ? "" : this.validationMessage;
+    }
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
+    }
+    #handleInvalidEvent;
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
+    }
+  }
+  __decorateClass$1([
+    attr
+  ], Decorated.prototype, "label", 2);
+  __decorateClass$1([
+    observable
+  ], Decorated.prototype, "userValid", 2);
+  __decorateClass$1([
+    volatile
+  ], Decorated.prototype, "errorValidationMessage", 1);
+  return Decorated;
+}
+function getFeedbackTemplate(messageType, context) {
+  const MessageTypeMap = {
+    "helper": {
+      "messageProperty": "helperText",
+      "className": "helper",
+      "iconType": ""
+    },
+    "error": {
+      "messageProperty": "errorValidationMessage",
+      "className": "error",
+      "iconType": "info-line"
+    },
+    "success": {
+      "messageProperty": "successText",
+      "className": "success",
+      "iconType": "check-circle-line"
+    }
+  };
+  const iconTag = context.tagFor(Icon);
+  const messageTypeConfig = MessageTypeMap[messageType];
+  const iconType = messageTypeConfig.iconType;
+  return html`
+			<style>
+				${messageStyles}
+
+			</style>
+			<div class="message ${MessageTypeMap[messageType].className}-message">
+		  	${when(() => iconType, html`
+					  <${iconTag} class="message-icon" name="${iconType}"></${iconTag}>`)}
+				${feedbackMessage({
+    messageProperty: MessageTypeMap[messageType].messageProperty
+  })}
+			</div>`;
+}
+function feedbackMessage({ messageProperty }) {
+  return html`
+	  <span class="message-text">${(x) => x[messageProperty]}</span>
+	`;
+}
+function errorText(constructor) {
+  class Decorated extends constructor {
+    constructor(...args) {
+      super(...args);
+      this.#shouldValidate = true;
+      this.#prevSuccessText = "";
+      this._validate = this.validate;
+      this.validate = () => {
+        if (this.#shouldValidate)
+          this._validate();
+      };
+    }
+    #shouldValidate;
+    #prevSuccessText;
+    errorTextChanged(_, newmsg) {
+      if (newmsg) {
+        this.setValidity({ customError: true }, newmsg, this.control);
+        this.#prevSuccessText = this.successText;
+        this.successText = "";
+        this.userValid = !this.userValid;
+        this.userValid = false;
+        this.#shouldValidate = false;
+      } else {
+        this.setValidity({ customError: false }, "", this.control);
+        this.successText = this.#prevSuccessText;
+        this.userValid = true;
+        this.#shouldValidate = true;
+        this._validate();
+      }
+    }
+  }
+  __decorateClass$1([
+    attr({ attribute: "error-text" })
+  ], Decorated.prototype, "errorText", 2);
+  return Decorated;
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class CurrentLocale {
+  constructor() {
+    this.locale = enUS;
+  }
+}
+__decorateClass([
+  observable
+], CurrentLocale.prototype, "locale", 2);
+const currentLocale = new CurrentLocale();
+const setLocale = (locale) => {
+  currentLocale.locale = locale;
+};
+
+export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, currentLocale as c, errorText as e, formElements as f, getFeedbackTemplate as g, setLocale as s };

package/shared/key-codes.js

@@ -97,4 +97,4 @@ const ArrowKeys = {
     ArrowUp: keyArrowUp,
 };
 
-export { ArrowKeys as A, keyHome as a, keyArrowDown as b, keyArrowUp as c, keyEnter as d, keySpace as e, keyEscape as f, keyTab as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnd as k, keyPageUp as l, keyFunction2 as m };
+export { ArrowKeys as A, keySpace as a, keyEnd as b, keyHome as c, keyArrowDown as d, keyArrowUp as e, keyEscape as f, keyTab as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/listbox.js

@@ -1,8 +1,8 @@
-import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter, b as __metadata } from './index.js';
-import { i as isListboxOption } from './definition21.js';
+import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
+import { i as isListboxOption } from './definition33.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { e as keySpace, f as keyEscape, d as keyEnter, g as keyTab, k as keyEnd, c as keyArrowUp, b as keyArrowDown, a as keyHome } from './key-codes.js';
+import { a as keySpace, f as keyEscape, k as keyEnter, g as keyTab, b as keyEnd, e as keyArrowUp, d as keyArrowDown, c as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
 import { i as inRange } from './numbers.js';
 
@@ -30,7 +30,7 @@ function findLastIndex(array, predicate) {
  *
  * @public
  */
-class Listbox$1 extends FoundationElement {
+let Listbox$1 = class Listbox extends FoundationElement {
     constructor() {
         super(...arguments);
         /**
@@ -226,7 +226,7 @@ class Listbox$1 extends FoundationElement {
     handleChange(source, propertyName) {
         switch (propertyName) {
             case "selected": {
-                if (Listbox$1.slottedOptionFilter(source)) {
+                if (Listbox.slottedOptionFilter(source)) {
                     this.selectedIndex = this.options.indexOf(source);
                 }
                 this.setSelectedOptions();
@@ -248,7 +248,7 @@ class Listbox$1 extends FoundationElement {
         if (this.typeaheadTimeout) {
             window.clearTimeout(this.typeaheadTimeout);
         }
-        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox$1.TYPE_AHEAD_TIMEOUT_MS);
+        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox.TYPE_AHEAD_TIMEOUT_MS);
         if (key.length > 1) {
             return;
         }
@@ -374,7 +374,7 @@ class Listbox$1 extends FoundationElement {
      */
     selectedOptionsChanged(prev, next) {
         var _a;
-        const filteredNext = next.filter(Listbox$1.slottedOptionFilter);
+        const filteredNext = next.filter(Listbox.slottedOptionFilter);
         (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
             const notifier = Observable.getNotifier(o);
             notifier.unsubscribe(this, "selected");
@@ -493,7 +493,7 @@ class Listbox$1 extends FoundationElement {
             this.typeaheadExpired = false;
         }
     }
-}
+};
 /**
  * A static filter to include only selectable options.
  *
@@ -989,7 +989,84 @@ __decorate([
     attr({ converter: nullableNumberConverter })
 ], ListboxElement.prototype, "size", void 0);
 
-class Listbox extends ListboxElement {}
-__decorate([attr, __metadata("design:type", String)], Listbox.prototype, "appearance", void 0);
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Listbox extends ListboxElement {
+  orientationChanged() {
+    if (this.orientation === "horizontal") {
+      this.addEventListener("keydown", this.#horizontalKeydownHandler);
+    } else {
+      this.removeEventListener("keydown", this.#horizontalKeydownHandler);
+    }
+  }
+  /**
+   * Handles `keydown` actions for horizontal listbox navigation and typeahead.
+   *
+   * @internal
+   */
+  #horizontalKeydownHandler(e) {
+    if (this.disabled) {
+      return true;
+    }
+    const key = e.key;
+    switch (key) {
+      case keyArrowRight: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectNextOption();
+        }
+        break;
+      }
+      case keyArrowLeft: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectPreviousOption();
+        }
+        break;
+      }
+    }
+  }
+  slottedOptionsChanged(prev, next) {
+    super.slottedOptionsChanged(prev, next);
+    this.#disableSlottedChildren();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === "disabled") {
+      this.#disableSlottedChildren();
+    }
+  }
+  #disableSlottedChildren() {
+    this.options.forEach((optionElement) => {
+      if (!optionElement.disabled) {
+        optionElement.disabled = this.disabled;
+      }
+    });
+  }
+}
+__decorateClass([
+  attr
+], Listbox.prototype, "appearance", 2);
+__decorateClass([
+  attr
+], Listbox.prototype, "orientation", 2);
+__decorateClass([
+  attr
+], Listbox.prototype, "shape", 2);
 
-export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b };
+export { DelegatesARIAListbox as D, ListboxElement as L, Listbox as a, Listbox$1 as b };

package/shared/localization/Locale.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerLocale } from '../../lib/date-picker/locale';
+export interface Locale {
+    datePicker: DatePickerLocale;
+}

package/shared/localization/index.d.ts

@@ -0,0 +1,7 @@
+import type { Locale } from './Locale';
+declare class CurrentLocale {
+    locale: Locale;
+}
+export declare const currentLocale: CurrentLocale;
+export declare const setLocale: (locale: Locale) => void;
+export {};

package/shared/patterns/form-elements/form-elements.d.ts

@@ -33,10 +33,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         userValid: boolean;
-        "__#9578@#blurred": boolean;
+        "__#2@#blurred": boolean;
         readonly errorValidationMessage: any;
         connectedCallback(): void;
-        "__#9578@#handleInvalidEvent": () => void;
+        "__#2@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         validate: () => void;
     };
@@ -49,8 +49,8 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#9579@#shouldValidate": boolean;
-        "__#9579@#prevSuccessText": string;
+        "__#3@#shouldValidate": boolean;
+        "__#3@#prevSuccessText": string;
         errorTextChanged(_: string, newmsg: string | undefined): void;
     };
 } & T;

package/shared/patterns/index.d.ts

@@ -1,3 +1,4 @@
 export * from './affix';
 export * from './focus';
 export * from './form-elements';
+export * from './localized';

package/shared/patterns/localized.d.ts

@@ -0,0 +1,4 @@
+import type { Locale } from '../localization/Locale';
+export declare class Localized {
+    get locale(): Locale;
+}

package/shared/radio.js

@@ -1,6 +1,6 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { e as keySpace } from './key-codes.js';
+import { a as keySpace } from './key-codes.js';
 
 class _Radio extends FoundationElement {
 }
@@ -28,7 +28,7 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
  *
  * @public
  */
-class Radio$1 extends FormAssociatedRadio {
+let Radio$1 = class Radio extends FormAssociatedRadio {
     constructor() {
         super();
         /**
@@ -110,7 +110,7 @@ class Radio$1 extends FormAssociatedRadio {
             this.checked = true;
         }
     }
-}
+};
 __decorate([
     attr({ attribute: "readonly", mode: "boolean" })
 ], Radio$1.prototype, "readOnly", void 0);
@@ -121,8 +121,24 @@ __decorate([
     observable
 ], Radio$1.prototype, "defaultSlottedNodes", void 0);
 
-class Radio extends Radio$1 {}
-__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
-__decorate([attr, __metadata("design:type", String)], Radio.prototype, "connotation", void 0);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Radio extends Radio$1 {
+}
+__decorateClass([
+  attr
+], Radio.prototype, "label", 2);
+__decorateClass([
+  attr
+], Radio.prototype, "connotation", 2);
 
 export { Radio as R };

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, i as HTMLView } from './index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView } from './index.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/shared/text-anchor.js

@@ -1,14 +1,31 @@
-import { _ as __decorate, a as attr, b as __metadata } from './index.js';
-import { b as AffixIcon } from './affix.js';
+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';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 class TextAnchor extends Anchor {
+  /**
+   * Allows subclasses to provide a body template that will be rendered inside the anchor.
+   * @internal
+   */
   getBodyTemplate() {
-    return undefined;
+    return void 0;
   }
 }
-__decorate([attr, __metadata("design:type", String)], TextAnchor.prototype, "text", void 0);
+__decorateClass([
+  attr
+], TextAnchor.prototype, "text", 2);
 applyMixins(TextAnchor, AffixIcon);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.js

@@ -4,52 +4,49 @@ import { h as html } from './index.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const getClasses = ({
-  text,
-  icon
-}) => classNames('control', ['icon-only', !text && !!icon]);
-const textAnchorTemplate = context => {
+const getClasses = ({ text, icon }) => classNames(
+  "control",
+  ["icon-only", !text && !!icon]
+);
+const textAnchorTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
   return html`<a
         class="${getClasses}"
-        download="${x => x.download}"
-        href="${x => x.href}"
-        hreflang="${x => x.hreflang}"
-        ping="${x => x.ping}"
-        referrerpolicy="${x => x.referrerpolicy}"
-        rel="${x => x.rel}"
-        target="${x => x.target}"
-        type="${x => x.type}"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
+        download="${(x) => x.download}"
+        href="${(x) => x.href}"
+        hreflang="${(x) => x.hreflang}"
+        ping="${(x) => x.ping}"
+        referrerpolicy="${(x) => x.referrerpolicy}"
+        rel="${(x) => x.rel}"
+        target="${(x) => x.target}"
+        type="${(x) => x.type}"
+        aria-atomic="${(x) => x.ariaAtomic}"
+        aria-busy="${(x) => x.ariaBusy}"
+        aria-controls="${(x) => x.ariaControls}"
+        aria-current="${(x) => x.ariaCurrent}"
+        aria-describedby="${(x) => x.ariaDescribedby}"
+        aria-details="${(x) => x.ariaDetails}"
+        aria-disabled="${(x) => x.ariaDisabled}"
+        aria-errormessage="${(x) => x.ariaErrormessage}"
+        aria-expanded="${(x) => x.ariaExpanded}"
+        aria-flowto="${(x) => x.ariaFlowto}"
+        aria-haspopup="${(x) => x.ariaHaspopup}"
+        aria-hidden="${(x) => x.ariaHidden}"
+        aria-invalid="${(x) => x.ariaInvalid}"
+        aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+        aria-label="${(x) => x.ariaLabel}"
+        aria-labelledby="${(x) => x.ariaLabelledby}"
+        aria-live="${(x) => x.ariaLive}"
+        aria-owns="${(x) => x.ariaOwns}"
+        aria-relevant="${(x) => x.ariaRelevant}"
+        aria-roledescription="${(x) => x.ariaRoledescription}"
+        ${ref("control")}
     >
       ${() => focusTemplate}
-      ${x => affixIconTemplate(x.icon)}
-      ${x => x.text}
-			${x => {
-    var _a, _b;
-    return (_b = (_a = x.getBodyTemplate) === null || _a === void 0 ? void 0 : _a.call(x)) !== null && _b !== void 0 ? _b : '';
-  }}
+      ${(x) => affixIconTemplate(x.icon)}
+      ${(x) => x.text}
+			${(x) => x.getBodyTemplate?.() ?? ""}
     </a>
 `;
 };

package/shared/text-field.js

@@ -1,3 +1,3 @@
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  position: relative;\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus-visible {\n  outline: none;\n}\n.base.action-items .control {\n  padding-inline-end: var(--text-field-inline-end-padding, calc(var(--_text-field-icon-size) + var(--_text-field-gutter)));\n}\n\n.action-items-wrapper {\n  position: absolute;\n  inset-inline-end: calc(var(--_text-field-gutter) / 4);\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-inline-start: var(--_text-field-gutter);\n  line-height: 1;\n}\n.icon + .wrapper .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset::after {\n  position: absolute;\n  display: block;\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inline-size: 100%;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus-visible {\n  outline: none;\n}\n.has-icon .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-block-start: 50%;\n  inset-inline-start: calc(100% + var(--_text-field-gutter));\n  line-height: 1;\n  transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n  position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n  display: none;\n}\n\n.action-items-wrapper {\n  margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
-export { css_248z as c };
+export { styles as s };