@vonage/vivid 3.53.0 → 3.55.0

package/shared/definition20.js

@@ -11,16 +11,15 @@ import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 import { b as keyEnter } from './key-codes2.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}.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{--vvd-button-accent-primary: 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{--_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:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}\n";
+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{--vvd-button-accent-primary: 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{--_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:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -32,8 +31,12 @@ class DialPad extends FoundationElement {
     this.value = "";
     this.pattern = "^[0-9#*]*$";
     this.disabled = false;
+    this.pending = false;
     this.callActive = false;
     this.noCall = false;
+    this.noInput = false;
+    this.endCallButtonLabel = null;
+    this.callButtonLabel = null;
     /**
      *
      * @internal
@@ -98,30 +101,42 @@ class DialPad extends FoundationElement {
 }
 __decorateClass([
   attr({ attribute: "helper-text" })
-], DialPad.prototype, "helperText", 2);
+], DialPad.prototype, "helperText");
 __decorateClass([
   attr
-], DialPad.prototype, "placeholder", 2);
+], DialPad.prototype, "placeholder");
 __decorateClass([
   attr({ mode: "fromView" })
-], DialPad.prototype, "value", 2);
+], DialPad.prototype, "value");
 __decorateClass([
   attr({ mode: "fromView" })
-], DialPad.prototype, "pattern", 2);
+], DialPad.prototype, "pattern");
 __decorateClass([
   attr({ mode: "boolean" })
-], DialPad.prototype, "disabled", 2);
+], DialPad.prototype, "disabled");
+__decorateClass([
+  attr({ mode: "boolean" })
+], DialPad.prototype, "pending");
 __decorateClass([
   attr({ attribute: "call-active", mode: "boolean" })
-], DialPad.prototype, "callActive", 2);
+], DialPad.prototype, "callActive");
 __decorateClass([
   attr({ mode: "boolean", attribute: "no-call" })
-], DialPad.prototype, "noCall", 2);
+], DialPad.prototype, "noCall");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "no-input" })
+], DialPad.prototype, "noInput");
+__decorateClass([
+  attr({ attribute: "end-call-button-label" })
+], DialPad.prototype, "endCallButtonLabel");
+__decorateClass([
+  attr({ attribute: "call-button-label" })
+], DialPad.prototype, "callButtonLabel");
 applyMixins(DialPad, Localized);
 
-const getClasses = (_) => classNames("base");
+const getClasses = ({ noInput }) => classNames("base", ["no-input", Boolean(noInput)]);
 function handleKeyDown(x, e) {
-  if (e.key === keyEnter) {
+  if (e.key === keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
     const key = e.key === "*" ? "Asterisk" : e.key === "#" ? "Hashtag" : e.key;
@@ -138,7 +153,7 @@ function handleKeyDown(x, e) {
 function renderTextField(textFieldTag, buttonTag) {
   return html`<${textFieldTag} ${ref(
     "_textFieldEl"
-  )} class="phone-field" internal-part
+  )} class="phone-field" internal-part type="tel"
         value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
             ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
@@ -149,7 +164,7 @@ function renderTextField(textFieldTag, buttonTag) {
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
                 slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-                appearance='ghost' ?disabled="${(x) => x.disabled}" @click="${(x) => x._deleteLastCharacter()}">
+								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;
@@ -201,8 +216,9 @@ function renderDialButton(buttonTag) {
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(x) => x.callActive ? "alert" : "cta"}"
         ?disabled="${(x) => x.disabled}"
+		?pending="${(x) => x.pending}"
         @click="${(x) => x._onDial()}"
-        label="${(x) => x.callActive ? x.locale.dialPad.endCallButtonLabel : x.locale.dialPad.callButtonLabel}">
+        label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {
@@ -210,7 +226,7 @@ const DialPadTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   const textFieldTag = context.tagFor(TextField);
   return html` <div class="${getClasses}">
-		${renderTextField(textFieldTag, buttonTag)}
+		${when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when((x) => !x.noCall, renderDialButton(buttonTag))}
 	</div>`;

package/shared/definition21.cjs

@@ -13,18 +13,17 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}\n";
+const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:#0000001a}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}";
 
-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{position:fixed;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]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
+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{position:fixed;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]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -142,40 +141,40 @@ class Dialog extends index.FoundationElement {
 }
 __decorateClass([
   index.attr({ mode: "boolean" })
-], Dialog.prototype, "open", 2);
+], Dialog.prototype, "open");
 __decorateClass([
   index.attr
-], Dialog.prototype, "icon", 2);
+], Dialog.prototype, "icon");
 __decorateClass([
   index.attr({ attribute: "icon-placement" })
-], Dialog.prototype, "iconPlacement", 2);
+], Dialog.prototype, "iconPlacement");
 __decorateClass([
   index.attr
-], Dialog.prototype, "subtitle", 2);
+], Dialog.prototype, "subtitle");
 __decorateClass([
   index.attr
-], Dialog.prototype, "headline", 2);
+], Dialog.prototype, "headline");
 __decorateClass([
   index.attr({ attribute: "full-width-body", mode: "boolean" })
-], Dialog.prototype, "fullWidthBody", 2);
+], Dialog.prototype, "fullWidthBody");
 __decorateClass([
   index.attr({ attribute: "aria-label" })
-], Dialog.prototype, "ariaLabel", 2);
+], Dialog.prototype, "ariaLabel");
 __decorateClass([
   index.attr({ attribute: "dismiss-button-aria-label" })
-], Dialog.prototype, "dismissButtonAriaLabel", 2);
+], Dialog.prototype, "dismissButtonAriaLabel");
 __decorateClass([
   index.attr({ attribute: "no-light-dismiss", mode: "boolean" })
-], Dialog.prototype, "noLightDismiss", 2);
+], Dialog.prototype, "noLightDismiss");
 __decorateClass([
   index.observable
-], Dialog.prototype, "bodySlottedContent", 2);
+], Dialog.prototype, "bodySlottedContent");
 __decorateClass([
   index.observable
-], Dialog.prototype, "footerSlottedContent", 2);
+], Dialog.prototype, "footerSlottedContent");
 __decorateClass([
   index.observable
-], Dialog.prototype, "actionItemsSlottedContent", 2);
+], Dialog.prototype, "actionItemsSlottedContent");
 applyMixins.applyMixins(Dialog, localized.Localized);
 
 const getClasses = ({

package/shared/definition21.js

@@ -11,18 +11,17 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}\n";
+const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:#0000001a}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}";
 
-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{position:fixed;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]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
+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{position:fixed;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]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -140,40 +139,40 @@ class Dialog extends FoundationElement {
 }
 __decorateClass([
   attr({ mode: "boolean" })
-], Dialog.prototype, "open", 2);
+], Dialog.prototype, "open");
 __decorateClass([
   attr
-], Dialog.prototype, "icon", 2);
+], Dialog.prototype, "icon");
 __decorateClass([
   attr({ attribute: "icon-placement" })
-], Dialog.prototype, "iconPlacement", 2);
+], Dialog.prototype, "iconPlacement");
 __decorateClass([
   attr
-], Dialog.prototype, "subtitle", 2);
+], Dialog.prototype, "subtitle");
 __decorateClass([
   attr
-], Dialog.prototype, "headline", 2);
+], Dialog.prototype, "headline");
 __decorateClass([
   attr({ attribute: "full-width-body", mode: "boolean" })
-], Dialog.prototype, "fullWidthBody", 2);
+], Dialog.prototype, "fullWidthBody");
 __decorateClass([
   attr({ attribute: "aria-label" })
-], Dialog.prototype, "ariaLabel", 2);
+], Dialog.prototype, "ariaLabel");
 __decorateClass([
   attr({ attribute: "dismiss-button-aria-label" })
-], Dialog.prototype, "dismissButtonAriaLabel", 2);
+], Dialog.prototype, "dismissButtonAriaLabel");
 __decorateClass([
   attr({ attribute: "no-light-dismiss", mode: "boolean" })
-], Dialog.prototype, "noLightDismiss", 2);
+], Dialog.prototype, "noLightDismiss");
 __decorateClass([
   observable
-], Dialog.prototype, "bodySlottedContent", 2);
+], Dialog.prototype, "bodySlottedContent");
 __decorateClass([
   observable
-], Dialog.prototype, "footerSlottedContent", 2);
+], Dialog.prototype, "footerSlottedContent");
 __decorateClass([
   observable
-], Dialog.prototype, "actionItemsSlottedContent", 2);
+], Dialog.prototype, "actionItemsSlottedContent");
 applyMixins(Dialog, Localized);
 
 const getClasses = ({

package/shared/definition22.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const aria = require('./aria.cjs');
+const aria = require('./aria2.cjs');
 const classNames = require('./class-names.cjs');
 
 /**
@@ -53,7 +53,7 @@ index.__decorate([
     index.attr
 ], Divider$1.prototype, "orientation", void 0);
 
-const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}\n";
+const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
 class Divider extends Divider$1 {
 }

package/shared/definition22.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria.js';
+import { O as Orientation } from './aria2.js';
 import { c as classNames } from './class-names.js';
 
 /**
@@ -51,7 +51,7 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}\n";
+const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
 class Divider extends Divider$1 {
 }

package/shared/definition23.cjs

@@ -7,16 +7,15 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -24,13 +23,13 @@ class EmptyState extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], EmptyState.prototype, "headline", 2);
+], EmptyState.prototype, "headline");
 __decorateClass([
   index.attr
-], EmptyState.prototype, "icon", 2);
+], EmptyState.prototype, "icon");
 __decorateClass([
   index.observable
-], EmptyState.prototype, "slottedActionItems", 2);
+], EmptyState.prototype, "slottedActionItems");
 
 const getClasses = (x) => classNames.classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
 const EmptyStateTemplate = (context) => {

package/shared/definition23.js

@@ -5,16 +5,15 @@ 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{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -22,13 +21,13 @@ class EmptyState extends FoundationElement {
 }
 __decorateClass([
   attr
-], EmptyState.prototype, "headline", 2);
+], EmptyState.prototype, "headline");
 __decorateClass([
   attr
-], EmptyState.prototype, "icon", 2);
+], EmptyState.prototype, "icon");
 __decorateClass([
   observable
-], EmptyState.prototype, "slottedActionItems", 2);
+], EmptyState.prototype, "slottedActionItems");
 
 const getClasses = (x) => classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
 const EmptyStateTemplate = (context) => {

package/shared/definition24.cjs

@@ -8,16 +8,15 @@ const button = require('./button.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".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.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{--_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: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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}\n";
+const styles = ".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.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{--_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: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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -25,13 +24,13 @@ class Fab extends button.Button {
 }
 __decorateClass([
   index.attr
-], Fab.prototype, "connotation", 2);
+], Fab.prototype, "connotation");
 __decorateClass([
   index.attr
-], Fab.prototype, "size", 2);
+], Fab.prototype, "size");
 __decorateClass([
   index.attr
-], Fab.prototype, "label", 2);
+], Fab.prototype, "label");
 applyMixins.applyMixins(Fab, affix.AffixIconWithTrailing);
 
 const getClasses = ({

package/shared/definition24.js

@@ -6,16 +6,15 @@ import { B as Button$1 } from './button.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".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.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{--_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: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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}\n";
+const styles = ".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.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{--_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: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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -23,13 +22,13 @@ class Fab extends Button$1 {
 }
 __decorateClass([
   attr
-], Fab.prototype, "connotation", 2);
+], Fab.prototype, "connotation");
 __decorateClass([
   attr
-], Fab.prototype, "size", 2);
+], Fab.prototype, "size");
 __decorateClass([
   attr
-], Fab.prototype, "label", 2);
+], Fab.prototype, "label");
 applyMixins(Fab, AffixIconWithTrailing);
 
 const getClasses = ({

package/shared/definition25.cjs

@@ -13,7 +13,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}\n";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2176,7 +2176,7 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {

package/shared/definition25.js

@@ -11,7 +11,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}\n";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2174,7 +2174,7 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {

package/shared/definition26.cjs

@@ -4,16 +4,15 @@ const index = require('./index.cjs');
 const definition = require('./definition62.cjs');
 const classNames = require('./class-names.cjs');
 
-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)))}\n";
+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))) }";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -29,12 +28,12 @@ __decorateClass([
     attribute: "elevation-shadow",
     mode: "boolean"
   })
-], Header.prototype, "elevationShadow", 2);
+], Header.prototype, "elevationShadow");
 __decorateClass([
   index.attr({
     mode: "boolean"
   })
-], Header.prototype, "alternate", 2);
+], Header.prototype, "alternate");
 
 const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {