@vonage/vivid 4.16.1 → 4.17.0

package/shared/definition18.js

@@ -1,9 +1,9 @@
-import { p as popupDefinition } from './definition63.js';
+import { p as popupDefinition } from './definition64.js';
 import { b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition55.js';
+import { t as textFieldDefinition } from './definition56.js';
 import { d as dividerDefinition } from './definition22.js';
 import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
-import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 var __defProp = Object.defineProperty;
@@ -175,4 +175,4 @@ const datePickerDefinition = defineVividComponent(
 );
 const registerDatePicker = createRegisterFunction(datePickerDefinition);
 
-export { datePickerDefinition as d, registerDatePicker as r };
+export { DatePicker as D, datePickerDefinition as d, registerDatePicker as r };

package/shared/definition19.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition63.cjs');
-const definition$2 = require('./definition55.cjs');
+const definition$1 = require('./definition64.cjs');
+const definition$2 = require('./definition56.cjs');
 const definition$3 = require('./definition22.cjs');
 const presentationDate = require('./presentationDate.cjs');
 const vividElement = require('./vivid-element.cjs');
@@ -51,7 +51,7 @@ const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string
 function isDefined(value) {
   return !!value;
 }
-let DateRangePicker = class extends presentationDate.DatePickerBase {
+exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePickerBase {
   constructor() {
     super(...arguments);
     __privateAdd(this, _DateRangePicker_instances);
@@ -383,39 +383,39 @@ getVisibleRange_fn = function() {
 };
 __decorateClass([
   vividElement.attr({ mode: "fromView", attribute: "start" })
-], DateRangePicker.prototype, "initialStart", 2);
+], exports.DateRangePicker.prototype, "initialStart", 2);
 __decorateClass([
   vividElement.attr({ mode: "fromView", attribute: "end" })
-], DateRangePicker.prototype, "initialEnd", 2);
+], exports.DateRangePicker.prototype, "initialEnd", 2);
 __decorateClass([
   vividElement.observable
-], DateRangePicker.prototype, "start", 2);
+], exports.DateRangePicker.prototype, "start", 2);
 __decorateClass([
   vividElement.observable
-], DateRangePicker.prototype, "end", 2);
+], exports.DateRangePicker.prototype, "end", 2);
 __decorateClass([
   vividElement.attr({ attribute: "current-start" })
-], DateRangePicker.prototype, "currentStart", 2);
+], exports.DateRangePicker.prototype, "currentStart", 2);
 __decorateClass([
   vividElement.attr({ attribute: "current-end" })
-], DateRangePicker.prototype, "currentEnd", 2);
+], exports.DateRangePicker.prototype, "currentEnd", 2);
 __decorateClass([
   vividElement.observable
-], DateRangePicker.prototype, "_numCalendars", 2);
+], exports.DateRangePicker.prototype, "_numCalendars", 2);
 __decorateClass([
   vividElement.observable
-], DateRangePicker.prototype, "_hoverDate", 2);
+], exports.DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
   vividElement.volatile
-], DateRangePicker.prototype, "_calendarButtonLabel", 1);
-DateRangePicker = __decorateClass([
+], exports.DateRangePicker.prototype, "_calendarButtonLabel", 1);
+exports.DateRangePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
-], DateRangePicker);
+], exports.DateRangePicker);
 
 const dateRangePickerDefinition = vividElement.defineVividComponent(
   "date-range-picker",
-  DateRangePicker,
+  exports.DateRangePicker,
   presentationDate.DatePickerBaseTemplate,
   [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
   {

package/shared/definition19.js

@@ -1,9 +1,9 @@
 import { b as buttonDefinition } from './definition11.js';
-import { p as popupDefinition } from './definition63.js';
-import { t as textFieldDefinition } from './definition55.js';
+import { p as popupDefinition } from './definition64.js';
+import { t as textFieldDefinition } from './definition56.js';
 import { d as dividerDefinition } from './definition22.js';
 import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
-import { a as attr, o as observable, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { a as attr, o as observable, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 const formatRange = (from, to) => {
@@ -427,4 +427,4 @@ const registerDateRangePicker = createRegisterFunction(
   dateRangePickerDefinition
 );
 
-export { dateRangePickerDefinition as d, registerDateRangePicker as r };
+export { DateRangePicker as D, dateRangePickerDefinition as d, registerDateRangePicker as r };

package/shared/definition2.cjs

@@ -201,6 +201,7 @@ const accordionDefinition = vividElement.defineVividComponent(
 );
 const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
 
+exports.Accordion = Accordion;
 exports.AccordionExpandMode = AccordionExpandMode;
 exports.accordionDefinition = accordionDefinition;
 exports.registerAccordion = registerAccordion;

package/shared/definition2.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as AccordionItem, a as accordionItemDefinition } from './definition.js';
 import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';
@@ -199,4 +199,4 @@ const accordionDefinition = defineVividComponent(
 );
 const registerAccordion = createRegisterFunction(accordionDefinition);
 
-export { AccordionExpandMode as A, accordionDefinition as a, registerAccordion as r };
+export { AccordionExpandMode as A, accordionDefinition as a, Accordion as b, registerAccordion as r };

package/shared/definition20.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition55.cjs');
+const definition$2 = require('./definition56.cjs');
 const vividElement = require('./vivid-element.cjs');
 const definition$1 = require('./definition27.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
-const textField = require('./text-field2.cjs');
-const when = require('./when.cjs');
+const textField = require('./text-field.cjs');
 const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
+const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
+const ref = require('./ref.cjs');
 const keyCodes = require('./key-codes.cjs');
 
 const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
@@ -247,5 +247,6 @@ const dialPadDefinition = vividElement.defineVividComponent(
 );
 const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
 
+exports.DialPad = DialPad;
 exports.dialPadDefinition = dialPadDefinition;
 exports.registerDialPad = registerDialPad;

package/shared/definition20.js

@@ -1,14 +1,14 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition55.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { t as textFieldDefinition } from './definition56.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
-import { T as TextField } from './text-field2.js';
-import { w as when } from './when.js';
+import { T as TextField } from './text-field.js';
 import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
+import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
+import { r as ref } from './ref.js';
 import { k as keyEnter } from './key-codes.js';
 
 const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
@@ -245,4 +245,4 @@ const dialPadDefinition = defineVividComponent(
 );
 const registerDialPad = createRegisterFunction(dialPadDefinition);
 
-export { dialPadDefinition as d, registerDialPad as r };
+export { DialPad as D, dialPadDefinition as d, registerDialPad as r };

package/shared/definition21.cjs

@@ -2,14 +2,14 @@
 
 const definition$1 = require('./definition27.cjs');
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition62.cjs');
+const definition = require('./definition63.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const index = require('./index.cjs');
 const localized = require('./localized.cjs');
+const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
 
 const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
@@ -332,5 +332,6 @@ const dialogDefinition = vividElement.defineVividComponent(
 );
 const registerDialog = vividElement.createRegisterFunction(dialogDefinition);
 
+exports.Dialog = Dialog;
 exports.dialogDefinition = dialogDefinition;
 exports.registerDialog = registerDialog;

package/shared/definition21.js

@@ -1,13 +1,13 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { E as Elevation, e as elevationDefinition } from './definition62.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { E as Elevation, e as elevationDefinition } from './definition63.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { L as Localized } from './localized.js';
+import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
 
 const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
@@ -330,4 +330,4 @@ const dialogDefinition = defineVividComponent(
 );
 const registerDialog = createRegisterFunction(dialogDefinition);
 
-export { dialogDefinition as d, registerDialog as r };
+export { Dialog as D, dialogDefinition as d, registerDialog as r };

package/shared/definition22.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition23.cjs

@@ -2,9 +2,9 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
+const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container)}.icon-decoration-outlined .icon-container{--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px;box-shadow:inset 0 0 0 21px var(--_connotation-color-faint)}.icon-container .icon{color:var(--_connotation-color-firm-all)}.icon-decoration-outlined .icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
@@ -80,5 +80,6 @@ const emptyStateDefinition = vividElement.defineVividComponent(
 );
 const registerEmptyState = vividElement.createRegisterFunction(emptyStateDefinition);
 
+exports.EmptyState = EmptyState;
 exports.emptyStateDefinition = emptyStateDefinition;
 exports.registerEmptyState = registerEmptyState;

package/shared/definition23.js

@@ -1,8 +1,8 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container)}.icon-decoration-outlined .icon-container{--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px;box-shadow:inset 0 0 0 21px var(--_connotation-color-faint)}.icon-container .icon{color:var(--_connotation-color-firm-all)}.icon-decoration-outlined .icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
@@ -78,4 +78,4 @@ const emptyStateDefinition = defineVividComponent(
 );
 const registerEmptyState = createRegisterFunction(emptyStateDefinition);
 
-export { emptyStateDefinition as e, registerEmptyState as r };
+export { EmptyState as E, emptyStateDefinition as e, registerEmptyState as r };

package/shared/definition24.cjs

@@ -5,8 +5,8 @@ const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
 const button = require('./button.cjs');
-const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
+const ref = require('./ref.cjs');
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control:not(:disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
@@ -100,5 +100,6 @@ const fabDefinition = vividElement.defineVividComponent(
 );
 const registerFab = vividElement.createRegisterFunction(fabDefinition);
 
+exports.Fab = Fab;
 exports.fabDefinition = fabDefinition;
 exports.registerFab = registerFab;

package/shared/definition24.js

@@ -1,10 +1,10 @@
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { V as VividFoundationButton } from './button.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
+import { r as ref } from './ref.js';
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control:not(:disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
@@ -98,4 +98,4 @@ const fabDefinition = defineVividComponent(
 );
 const registerFab = createRegisterFunction(fabDefinition);
 
-export { fabDefinition as f, registerFab as r };
+export { Fab as F, fabDefinition as f, registerFab as r };

package/shared/definition25.cjs

@@ -5,8 +5,8 @@ const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const formElements = require('./form-elements.cjs');
 const localized = require('./localized.cjs');
+const formElements = require('./form-elements.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
@@ -2181,7 +2181,7 @@ const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
 </div>`;
 };
-let FilePicker = class extends FormAssociatedFilePicker {
+exports.FilePicker = class FilePicker extends FormAssociatedFilePicker {
   constructor() {
     super();
     __privateAdd(this, _FilePicker_instances);
@@ -2428,33 +2428,33 @@ formatNumbersInMessage_fn = function(message) {
 };
 __decorateClass([
   vividElement.attr({ attribute: "single-file", mode: "boolean" })
-], FilePicker.prototype, "singleFile", 2);
+], exports.FilePicker.prototype, "singleFile", 2);
 __decorateClass([
   vividElement.attr({ attribute: "max-files" })
-], FilePicker.prototype, "maxFiles", 2);
+], exports.FilePicker.prototype, "maxFiles", 2);
 __decorateClass([
   vividElement.attr({ mode: "fromView", attribute: "max-file-size" })
-], FilePicker.prototype, "maxFileSize", 2);
+], exports.FilePicker.prototype, "maxFileSize", 2);
 __decorateClass([
   vividElement.attr
-], FilePicker.prototype, "accept", 2);
+], exports.FilePicker.prototype, "accept", 2);
 __decorateClass([
   vividElement.attr
-], FilePicker.prototype, "size", 2);
+], exports.FilePicker.prototype, "size", 2);
 __decorateClass([
   vividElement.attr({ attribute: "invalid-file-type-error" })
-], FilePicker.prototype, "invalidFileTypeError", 2);
+], exports.FilePicker.prototype, "invalidFileTypeError", 2);
 __decorateClass([
   vividElement.attr({ attribute: "max-files-exceeded-error" })
-], FilePicker.prototype, "maxFilesExceededError", 2);
+], exports.FilePicker.prototype, "maxFilesExceededError", 2);
 __decorateClass([
   vividElement.attr({ attribute: "file-too-big-error" })
-], FilePicker.prototype, "fileTooBigError", 2);
-FilePicker = __decorateClass([
+], exports.FilePicker.prototype, "fileTooBigError", 2);
+exports.FilePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
-], FilePicker);
-applyMixinsWithObservables.applyMixinsWithObservables(FilePicker, formElements.FormElementHelperText, localized.Localized);
+], exports.FilePicker);
+applyMixinsWithObservables.applyMixinsWithObservables(exports.FilePicker, formElements.FormElementHelperText, localized.Localized);
 
 const getClasses = ({ size }) => classNames.classNames("control", "dz-default", "dz-message", [
   `size-${size}`,
@@ -2488,7 +2488,7 @@ const FilePickerTemplate = (context) => {
 
 const filePickerDefinition = vividElement.defineVividComponent(
   "file-picker",
-  FilePicker,
+  exports.FilePicker,
   FilePickerTemplate,
   [definition$1.iconDefinition, definition.buttonDefinition],
   {

package/shared/definition25.js

@@ -1,10 +1,10 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { e as errorText, f as formElements, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { L as Localized } from './localized.js';
+import { a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
@@ -2498,4 +2498,4 @@ const filePickerDefinition = defineVividComponent(
 );
 const registerFilePicker = createRegisterFunction(filePickerDefinition);
 
-export { filePickerDefinition as f, registerFilePicker as r };
+export { FilePicker as F, filePickerDefinition as f, registerFilePicker as r };

package/shared/definition26.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition62.cjs');
+const definition = require('./definition63.cjs');
 const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -69,5 +69,6 @@ const headerDefinition = vividElement.defineVividComponent(
 );
 const registerHeader = vividElement.createRegisterFunction(headerDefinition);
 
+exports.Header = Header;
 exports.headerDefinition = headerDefinition;
 exports.registerHeader = registerHeader;

package/shared/definition26.js

@@ -1,5 +1,5 @@
-import { E as Elevation, e as elevationDefinition } from './definition62.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { E as Elevation, e as elevationDefinition } from './definition63.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
@@ -67,4 +67,4 @@ const headerDefinition = defineVividComponent(
 );
 const registerHeader = createRegisterFunction(headerDefinition);
 
-export { headerDefinition as h, registerHeader as r };
+export { Header as H, headerDefinition as h, registerHeader as r };

package/shared/definition27.cjs

@@ -2,8 +2,8 @@
 
 const vividElement = require('./vivid-element.cjs');
 const _has = require('./_has.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 

package/shared/definition27.js

@@ -1,7 +1,7 @@
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 

package/shared/definition28.cjs

@@ -64,5 +64,6 @@ const layoutDefinition = vividElement.defineVividComponent(
 );
 const registerLayout = vividElement.createRegisterFunction(layoutDefinition);
 
+exports.Layout = Layout;
 exports.layoutDefinition = layoutDefinition;
 exports.registerLayout = registerLayout;

package/shared/definition28.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;
@@ -62,4 +62,4 @@ const layoutDefinition = defineVividComponent(
 );
 const registerLayout = createRegisterFunction(layoutDefinition);
 
-export { layoutDefinition as l, registerLayout as r };
+export { Layout as L, layoutDefinition as l, registerLayout as r };