@vonage/vivid 3.34.0 → 3.36.0

package/shared/definition53.js

@@ -13,7 +13,7 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) .icon {\n  color: var(--vvd-color-neutral-600);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) .icon {\n  color: var(--vvd-color-neutral-600);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition55.js

@@ -1,7 +1,7 @@
 import { h as html, r as registerFactory } from './index.js';
 import { F as Focus } from './focus.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
 
 const focusTemplate = () => html`
         <span class="control"></span>`;

package/shared/definition6.js

@@ -32,7 +32,7 @@ __decorateClass([
 ], Badge.prototype, "text", 2);
 applyMixins(Badge, AffixIconWithTrailing);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}";
 
 const getClasses = ({
   connotation,

package/shared/definition7.js

@@ -6,7 +6,7 @@ import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content .icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content .icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition8.js

@@ -7,7 +7,7 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/icon.js

@@ -143,7 +143,7 @@ _curry2(function memoizeWith(mFn, fn) {
 const memoizeWith$1 = memoizeWith;
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.3.0";
+const ICONS_VERSION = "4.4.0";
 
 const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
     <g>

package/shared/index2.js

@@ -1,9 +1,9 @@
 import { I as Icon } from './icon.js';
-import { a as attr, o as observable, v as volatile, h as html } from './index.js';
+import { a as attr, o as observable, 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}";
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 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;
@@ -16,8 +16,6 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
     __defProp$1(target, key, result);
   return result;
 };
-const ElementInternalsKey = "ElementInternals";
-const supportsElementInternals = () => ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
 class FormElementHelperText {
 }
 __decorateClass$1([
@@ -43,131 +41,126 @@ function formElements(constructor) {
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);
-      this.userValid = true;
-      this.#blurred = false;
+      this.errorValidationMessage = "";
+      this.#forceErrorDisplay = false;
+      this.#hasBeenTouched = false;
       this.#handleInvalidEvent = () => {
-        if (this.#blurred && this.dirtyValue)
-          return;
-        this.#blurred = true;
-        this.dirtyValue = true;
+        this.#forceErrorDisplay = 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;
-        }
+        super.validate();
+        const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
+        this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
       };
       this.addEventListener("blur", () => {
-        this.#blurred = true;
+        this.#hasBeenTouched = true;
+        this.#forceErrorDisplay = false;
         this.validate();
       });
       this.addEventListener("focus", () => {
-        this.#blurred = false;
+        this.#hasBeenTouched = false;
       });
       this.addEventListener("invalid", () => {
         this.proxy.dispatchEvent(new Event("invalid"));
       });
     }
-    #blurred;
-    get errorValidationMessage() {
-      return this.userValid ? "" : this.validationMessage;
-    }
+    #forceErrorDisplay;
+    #hasBeenTouched;
     connectedCallback() {
-      super.connectedCallback?.();
+      super.connectedCallback();
       this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
     }
     #handleInvalidEvent;
     disconnectedCallback() {
-      super.disconnectedCallback?.();
+      super.disconnectedCallback();
       this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
     }
+    formResetCallback() {
+      this.#forceErrorDisplay = false;
+      super.formResetCallback();
+      this.validate();
+    }
   }
   __decorateClass$1([
     attr
   ], Decorated.prototype, "label", 2);
   __decorateClass$1([
     observable
-  ], Decorated.prototype, "userValid", 2);
-  __decorateClass$1([
-    volatile
-  ], Decorated.prototype, "errorValidationMessage", 1);
+  ], Decorated.prototype, "errorValidationMessage", 2);
   return Decorated;
 }
 function getFeedbackTemplate(messageType, context) {
   const MessageTypeMap = {
-    "helper": {
-      "messageProperty": "helperText",
-      "className": "helper",
-      "iconType": ""
+    helper: {
+      messageProperty: "helperText",
+      className: "helper",
+      iconType: ""
     },
-    "error": {
-      "messageProperty": "errorValidationMessage",
-      "className": "error",
-      "iconType": "info-line"
+    error: {
+      messageProperty: "errorValidationMessage",
+      className: "error",
+      iconType: "info-line"
     },
-    "success": {
-      "messageProperty": "successText",
-      "className": "success",
-      "iconType": "check-circle-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({
+  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>`;
+		</div>`;
 }
-function feedbackMessage({ messageProperty }) {
+function feedbackMessage({
+  messageProperty
+}) {
   return html`
-	  <span class="message-text">${(x) => x[messageProperty]}</span>
+		<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.#blockValidateCalls = false;
       this._validate = this.validate;
       this.validate = () => {
-        if (this.#shouldValidate)
+        if (!this.#blockValidateCalls)
           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;
+    #blockValidateCalls;
+    errorTextChanged(_, newErrorText) {
+      if (newErrorText) {
+        this.#forceCustomError(newErrorText);
       } else {
-        this.setValidity({ customError: false }, "", this.control);
-        this.successText = this.#prevSuccessText;
-        this.userValid = true;
-        this.#shouldValidate = true;
-        this._validate();
+        this.#clearCustomErrorAndRevalidate();
       }
     }
+    #forceCustomError(errorMessage) {
+      this.setValidity({ customError: true }, errorMessage, this.control);
+      this.errorValidationMessage = errorMessage;
+      this.#blockValidateCalls = true;
+    }
+    #clearCustomErrorAndRevalidate() {
+      this.setValidity({ customError: false }, "", this.control);
+      this.#blockValidateCalls = false;
+      this.validate();
+    }
   }
   __decorateClass$1([
     attr({ attribute: "error-text" })

package/shared/patterns/affix.d.ts

@@ -6,4 +6,8 @@ export declare class AffixIcon {
 export declare class AffixIconWithTrailing extends AffixIcon {
     iconTrailing: boolean;
 }
-export declare const affixIconTemplateFactory: (context: ElementDefinitionContext, withWrapper?: boolean) => (icon?: string) => ViewTemplate<AffixIcon> | null;
+export declare const IconWrapper: {
+    Slot: boolean;
+    Span: boolean;
+};
+export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string, slottedState?: boolean) => ViewTemplate<AffixIcon> | null;

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

@@ -1,6 +1,6 @@
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 export interface FormElement {
-    errorValidationMessage: boolean;
+    errorValidationMessage: string;
     label: string;
     userValid: boolean;
     dirtyValue: boolean;
@@ -32,12 +32,13 @@ export declare function formElements<T extends {
     new (...args: any[]): {
         [x: string]: any;
         label?: string | undefined;
-        userValid: boolean;
-        "__#2@#blurred": boolean;
-        readonly errorValidationMessage: any;
+        errorValidationMessage: string;
+        "__#2@#forceErrorDisplay": boolean;
+        "__#2@#hasBeenTouched": boolean;
         connectedCallback(): void;
         "__#2@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
+        formResetCallback(): void;
         validate: () => void;
     };
 } & T;
@@ -49,9 +50,10 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#3@#shouldValidate": boolean;
-        "__#3@#prevSuccessText": string;
-        errorTextChanged(_: string, newmsg: string | undefined): void;
+        "__#3@#blockValidateCalls": boolean;
+        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        "__#3@#forceCustomError"(errorMessage: string): void;
+        "__#3@#clearCustomErrorAndRevalidate"(): void;
     };
 } & T;
 export {};

package/shared/text-field.js

@@ -1,3 +1,3 @@
-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}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 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 { styles as s };