@vonage/vivid 3.35.0 → 3.37.0

package/shared/definition16.js

@@ -2,9 +2,8 @@ import { a as iconRegistries } from './definition24.js';
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, r as registerFactory } from './index.js';
 import { b as keyEnd, c as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, d as keyArrowDown, e as keyArrowUp, f as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
-import { e as elements } from './node-observation.js';
+import { e as elements, s as slotted } from './slotted.js';
 import { c as children } from './children.js';
-import { s as slotted } from './slotted.js';
 import { I as Icon } from './icon.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
@@ -910,9 +909,9 @@ __decorate([
 
 const dataGridStyles = ":host {\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-block-size: 400px;\n}\n\n.base {\n  position: relative;\n  overflow: auto;\n  block-size: inherit;\n  inline-size: 100%;\n  max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n  display: none;\n}";
 
-const dataGridRowStyles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
+const dataGridRowStyles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
 
-const dataGridCellStyles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-400);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
+const dataGridCellStyles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-400);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
 
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;

package/shared/definition17.js

@@ -1,11 +1,12 @@
-import { a as attr, F as FoundationElement, D as DOM, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, D as DOM, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
 import { P as Popup, p as popupRegistries } from './definition57.js';
 import { f as focusRegistries } from './definition55.js';
 import { B as Button, a as buttonRegistries } from './definition10.js';
 import { T as TextField, a as textFieldRegistries } from './definition50.js';
 import { D as Divider, a as dividerRegistries } from './definition19.js';
 import './affix.js';
-import { c as currentLocale } from './index2.js';
+import { c as currentLocale, e as errorText, f as formElements, a as FormElementHelperText } from './index2.js';
+import { F as FormAssociated } from './form-associated.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { r as ref } from './ref.js';
@@ -19,7 +20,7 @@ class Localized {
   }
 }
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.dialog .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.dialog .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.button: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.button: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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.dialog .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.dialog .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.button: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.button: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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5331,6 +5332,16 @@ const yearOfDate = (dateStr) => {
   return date.getFullYear();
 };
 
+class _DatePicker extends FoundationElement {
+}
+class FormAssociatedDatePicker extends FormAssociated(_DatePicker) {
+  constructor() {
+    super();
+    this.proxy = document.createElement("input");
+    this.proxy.type = "date";
+  }
+}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -5347,19 +5358,16 @@ const ValidDateFilter = {
     if (value && isValidDateStr(value)) {
       return value;
     }
-    return null;
+    return "";
   },
   toView(value) {
     return value;
   }
 };
-class DatePicker extends FoundationElement {
+let DatePicker = class extends FormAssociatedDatePicker {
+  // --- Core ---
   constructor() {
-    super(...arguments);
-    this.min = null;
-    this.max = null;
-    this.value = null;
-    this.disabled = false;
+    super();
     this.readOnly = false;
     this._selectedMonth = getCurrentMonth();
     /**
@@ -5385,17 +5393,41 @@ class DatePicker extends FoundationElement {
     /// Used to stop the popup from immediately opening when closing popup and returning focus to text field
     this.#isClosingPopup = false;
     this._presentationValue = "";
-    this._internalValidationError = null;
     this._lastFocussedDate = null;
     this._monthPickerYear = null;
     this._lastFocussedMonth = null;
+    this.value = "";
+    this.min = "";
+    this.max = "";
+  }
+  /**
+   * @internal
+   */
+  minChanged(_, newMin) {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.min = newMin;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  maxChanged(_, newMax) {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.max = newMax;
+      this.validate();
+    }
   }
   /**
    * @internal
    */
-  valueChanged() {
-    this._internalValidationError = null;
-    if (this.value !== null) {
+  valueChanged(previous, next) {
+    super.valueChanged(previous, next);
+    if (this.value) {
+      if (!isValidDateStr(this.value)) {
+        this.value = "";
+        return;
+      }
       this._presentationValue = formatPresentationDate(
         this.value,
         this.locale.datePicker
@@ -5410,6 +5442,12 @@ class DatePicker extends FoundationElement {
     this.$emit("change");
     this.$emit("input");
   }
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
   #getFocusableEls() {
     const focusableEls = this.shadowRoot.querySelectorAll(
       ".button:not(:disabled), .vwc-button:not(:disabled)"
@@ -5423,7 +5461,7 @@ class DatePicker extends FoundationElement {
    * @internal
    */
   _isDateInValidRange(date) {
-    return (this.min === null || compareDateStr(date, this.min) >= 0) && (this.max === null || compareDateStr(date, this.max) <= 0);
+    return (!this.min || compareDateStr(date, this.min) >= 0) && (!this.max || compareDateStr(date, this.max) <= 0);
   }
   #isMonthAfterValidRange(month) {
     return this.max && compareMonths(month, monthOfDate(this.max)) > 0;
@@ -5437,7 +5475,6 @@ class DatePicker extends FoundationElement {
   _isMonthInValidRange(month) {
     return !(this.#isMonthBeforeValidRange(month) || this.#isMonthAfterValidRange(month));
   }
-  // --- Callbacks ---
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener("click", this.#dismissOnClickOutside);
@@ -5446,6 +5483,16 @@ class DatePicker extends FoundationElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#dismissOnClickOutside);
   }
+  validate() {
+    if (this.proxy) {
+      if (this.#isPresentationValueInvalid()) {
+        this.proxy.setCustomValidity(this.locale.datePicker.invalidDateError);
+      } else {
+        this.proxy.setCustomValidity("");
+      }
+    }
+    super.validate(this._textFieldEl?.shadowRoot?.querySelector("input") ?? void 0);
+  }
   #dismissOnClickOutside;
   #isClosingPopup;
   #openPopupIfPossible() {
@@ -5496,8 +5543,20 @@ class DatePicker extends FoundationElement {
     }
     return true;
   }
-  get _textFieldErrorText() {
-    return this.errorText || this._internalValidationError || "";
+  _presentationValueChanged() {
+    this.dirtyValue = true;
+    this.validate();
+  }
+  #isPresentationValueInvalid() {
+    if (this._presentationValue === "") {
+      return false;
+    }
+    try {
+      parsePresentationDate(this._presentationValue, this.locale.datePicker);
+      return false;
+    } catch (_) {
+      return true;
+    }
   }
   /**
    * @internal
@@ -5505,14 +5564,13 @@ class DatePicker extends FoundationElement {
   _onTextFieldInput(event) {
     const textField = event.currentTarget;
     this._presentationValue = textField.value;
-    this._internalValidationError = null;
   }
   /**
    * @internal
    */
   _onTextFieldChange() {
     if (this._presentationValue === "") {
-      this.#updateValueDueToUserInteraction(null);
+      this.#updateValueDueToUserInteraction("");
       return;
     }
     try {
@@ -5520,7 +5578,6 @@ class DatePicker extends FoundationElement {
         parsePresentationDate(this._presentationValue, this.locale.datePicker)
       );
     } catch (_) {
-      this._internalValidationError = this.locale.datePicker.invalidDateError;
       return;
     }
   }
@@ -5529,6 +5586,13 @@ class DatePicker extends FoundationElement {
    */
   _onTextFieldFocus() {
     this.#openPopupIfPossible();
+    this.$emit("focus", void 0, { bubbles: false });
+  }
+  /**
+   * @internal
+   */
+  _onTextFieldBlur() {
+    this.$emit("blur", void 0, { bubbles: false });
   }
   /**
    * @internal
@@ -5679,7 +5743,7 @@ class DatePicker extends FoundationElement {
       ...datesInGrid
     ];
     return candidates.find(
-      (date) => date !== null && areMonthsEqual(monthOfDate(date), this._selectedMonth) && this._isDateInValidRange(date)
+      (date) => date && areMonthsEqual(monthOfDate(date), this._selectedMonth) && this._isDateInValidRange(date)
     ) ?? null;
   }
   /**
@@ -5763,19 +5827,10 @@ class DatePicker extends FoundationElement {
    * @internal
    */
   _onClearClick() {
-    this.#updateValueDueToUserInteraction(null);
+    this.#updateValueDueToUserInteraction("");
     this.#closePopup();
   }
-}
-__decorateClass([
-  attr
-], DatePicker.prototype, "label", 2);
-__decorateClass([
-  attr({ attribute: "helper-text" })
-], DatePicker.prototype, "helperText", 2);
-__decorateClass([
-  attr({ attribute: "error-text" })
-], DatePicker.prototype, "errorText", 2);
+};
 __decorateClass([
   attr({ converter: ValidDateFilter })
 ], DatePicker.prototype, "min", 2);
@@ -5783,11 +5838,11 @@ __decorateClass([
   attr({ converter: ValidDateFilter })
 ], DatePicker.prototype, "max", 2);
 __decorateClass([
-  attr({ converter: ValidDateFilter })
-], DatePicker.prototype, "value", 2);
+  attr({ attribute: "value", converter: ValidDateFilter })
+], DatePicker.prototype, "initialValue", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], DatePicker.prototype, "disabled", 2);
+  attr({ attribute: "current-value", converter: ValidDateFilter })
+], DatePicker.prototype, "currentValue", 2);
 __decorateClass([
   attr({ attribute: "readonly", mode: "boolean" })
 ], DatePicker.prototype, "readOnly", 2);
@@ -5800,12 +5855,6 @@ __decorateClass([
 __decorateClass([
   observable
 ], DatePicker.prototype, "_presentationValue", 2);
-__decorateClass([
-  observable
-], DatePicker.prototype, "_internalValidationError", 2);
-__decorateClass([
-  volatile
-], DatePicker.prototype, "_textFieldErrorText", 1);
 __decorateClass([
   volatile
 ], DatePicker.prototype, "_isPrevYearDisabled", 1);
@@ -5827,7 +5876,11 @@ __decorateClass([
 __decorateClass([
   volatile
 ], DatePicker.prototype, "_tabbableMonth", 1);
-applyMixins(DatePicker, Localized);
+DatePicker = __decorateClass([
+  errorText,
+  formElements
+], DatePicker);
+applyMixins(DatePicker, Localized, FormElementHelperText);
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(Button);
@@ -6052,7 +6105,7 @@ const DatePickerTemplate = (context) => {
 										 icon="calendar-line"
 										 label="${(x) => x.label}"
 										 helper-text="${(x) => x.helperText}"
-										 error-text="${(x) => x._textFieldErrorText}"
+										 error-text="${(x) => x.errorValidationMessage}"
 										 placeholder="${(x) => x.locale.datePicker.dateFormatPlaceholder}"
 										 current-value="${(x) => x._presentationValue}"
 										 ?disabled="${(x) => x.disabled}"
@@ -6060,6 +6113,7 @@ const DatePickerTemplate = (context) => {
 										 @input="${(x, c) => x._onTextFieldInput(c.event)}"
 										 @change="${(x) => x._onTextFieldChange()}"
 										 @focus="${(x) => x._onTextFieldFocus()}"
+										 @blur="${(x) => x._onTextFieldBlur()}"
 										 @click="${(x) => x._onTextFieldClick()}"
 										 @keydown="${(x, c) => x._onTextFieldKeydown(c.event)}"
 		></${textFieldTag}>

package/shared/definition18.js

@@ -9,7 +9,7 @@ import { c as classNames } from './class-names.js';
 
 const dialogPolyfillStyles = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition19.js

@@ -51,7 +51,7 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
 
 class Divider extends Divider$1 {
 }

package/shared/definition2.js

@@ -2,8 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h
 import { A as AccordionItem$1, b as accordionItemRegistries } from './definition.js';
 import { b as keyEnd, c as keyHome, d as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';
-import { e as elements } from './node-observation.js';
-import { s as slotted } from './slotted.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
 /**
@@ -187,7 +186,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition20.js

@@ -5,7 +5,7 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition21.js

@@ -1,14 +1,14 @@
 import { a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition24.js';
 import { f as focusRegistries } from './definition55.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { B as Button$1 } from './button.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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: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: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\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.size-expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control.size-extended .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.control:not(.connotation-accent, .connotation-cta) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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: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: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\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.size-expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\nslot[name=icon] {\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n}\n.control.size-extended slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.control:not(.connotation-accent, .connotation-cta) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -40,12 +40,13 @@ const getClasses = ({
   icon,
   label,
   iconTrailing,
-  disabled
+  disabled,
+  iconSlottedContent
 }) => classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!icon],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
   ["icon-trailing", iconTrailing],
   ["disabled", disabled]
 );
@@ -90,7 +91,7 @@ const FabTemplate = (context) => {
             ${ref("control")}
         >
             ${() => focusTemplate}
-            ${(x) => affixIconTemplate(x.icon)}
+					  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
             ${(x) => x.label}
         </button>
 `;

package/shared/definition22.js

@@ -9,7 +9,7 @@ import { f as focusTemplateFactory } from './focus2.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 Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  display: block;\n  max-inline-size: 400px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  border: 1px dashed var(--vvd-color-neutral-400);\n  background-color: var(--vvd-color-cta-50);\n  border-radius: 6px;\n  color: var(--vvd-color-neutral-600);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  min-block-size: 52px;\n  outline: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:not(.size-expanded) {\n  min-block-size: 52px;\n}\n.control.size-expanded {\n  min-block-size: 120px;\n}\n\n.main {\n  pointer-events: none;\n}\n\n.dz-preview {\n  display: grid;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  border-radius: 6px;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n.dz-preview .dz-details {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n  overflow: hidden;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n  color: var(--vvd-color-alert-500);\n  font: var(--vvd-typography-base-condensed);\n  margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n  display: none;\n}\n.dz-preview.dz-error {\n  border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n  display: none;\n}\n.dz-preview .remove-btn {\n  display: inline;\n  align-self: center;\n  grid-column: 2/-1;\n  grid-row: 1/-1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-block-start: 12px;\n  overflow-y: auto;\n}\n.preview-list:empty {\n  display: none;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: block;\n  max-inline-size: 400px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  border: 1px dashed var(--vvd-color-neutral-400);\n  background-color: var(--vvd-color-cta-50);\n  border-radius: 6px;\n  color: var(--vvd-color-neutral-600);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  min-block-size: 52px;\n  outline: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:not(.size-expanded) {\n  min-block-size: 52px;\n}\n.control.size-expanded {\n  min-block-size: 120px;\n}\n\n.main {\n  pointer-events: none;\n}\n\n.dz-preview {\n  display: grid;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  border-radius: 6px;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n.dz-preview .dz-details {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n  overflow: hidden;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n  color: var(--vvd-color-alert-500);\n  font: var(--vvd-typography-base-condensed);\n  margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n  display: none;\n}\n.dz-preview.dz-error {\n  border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n  display: none;\n}\n.dz-preview .remove-btn {\n  display: inline;\n  align-self: center;\n  grid-column: 2/-1;\n  grid-row: 1/-1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-block-start: 12px;\n  overflow-y: auto;\n}\n.preview-list:empty {\n  display: none;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 var objectExtend = extend;
 

package/shared/definition23.js

@@ -2,7 +2,7 @@ import { a as attr, F as FoundationElement, h as html, r as registerFactory } fr
 import { E as Elevation, e as elevationRegistries } from './definition56.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;