@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition20.js

@@ -1,15 +1,15 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
-import { a as textFieldRegistries } from './definition56.js';
+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 { 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 { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 import { r as repeat } from './repeat.js';
-import { g as keyEnter } from './key-codes.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}";
 
@@ -22,7 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class DialPad extends FoundationElement {
+class DialPad extends VividElement {
   constructor() {
     super(...arguments);
     this.helperText = null;
@@ -161,7 +161,7 @@ function renderTextField(textFieldTag, buttonTag) {
             ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
             @keydown="${(x, c) => handleKeyDown(x, c.event)}"
-            @input="${syncFieldAndPadValues}" 
+            @input="${syncFieldAndPadValues}"
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
@@ -169,12 +169,12 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
-                				slot="action-items" 
-								size='super-condensed' 
-								icon="backspace-line" 
+                				slot="action-items"
+								size='super-condensed'
+								icon="backspace-line"
 								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' 
-								?disabled="${(x) => x.disabled || x.callActive}" 
+								appearance='ghost'
+								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
@@ -191,20 +191,20 @@ function renderDigits(buttonTag, iconTag) {
 		${repeat(
     (_) => DIAL_PAD_BUTTONS,
     html`
-			<${buttonTag} 
+			<${buttonTag}
 					  id="${(x) => x.id}"
-					  value="${(x) => x.value}" 
-					  stacked 
-					  appearance="ghost-light" 
-					  shape="pill" 
+					  value="${(x) => x.value}"
+					  stacked
+					  appearance="ghost-light"
+					  shape="pill"
 					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
-					  size='condensed' 
-					  class="digit-btn" 
-					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}" 
-					  ?disabled="${(_, c) => c.parent.disabled}" 
+					  size='condensed'
+					  class="digit-btn"
+					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
+					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
-					  	<${iconTag} slot="icon" 
-									name="${(x) => x.icon}" 
+					  	<${iconTag} slot="icon"
+									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
 		`
@@ -234,16 +234,15 @@ const DialPadTemplate = (context) => {
 	</div>`;
 };
 
-const dialPadDefinition = DialPad.compose({
-  baseName: "dial-pad",
-  template: DialPadTemplate,
-  styles
-});
-const dialPadRegistries = [
-  dialPadDefinition(),
-  ...buttonRegistries,
-  ...textFieldRegistries
-];
-const registerDialPad = registerFactory(dialPadRegistries);
+const dialPadDefinition = defineVividComponent(
+  "dial-pad",
+  DialPad,
+  DialPadTemplate,
+  [buttonDefinition, textFieldDefinition, iconDefinition],
+  {
+    styles
+  }
+);
+const registerDialPad = createRegisterFunction(dialPadDefinition);
 
-export { dialPadRegistries as a, dialPadDefinition as d, registerDialPad as r };
+export { dialPadDefinition as d, registerDialPad as r };

package/shared/definition21.cjs

@@ -1,18 +1,17 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition$2 = require('./definition27.cjs');
-const definition$1 = require('./definition11.cjs');
-const definition = require('./definition63.cjs');
-const index$1 = require('./index2.cjs');
+const definition$1 = require('./definition27.cjs');
+const definition$2 = require('./definition11.cjs');
+const definition = require('./definition62.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const index = require('./index.cjs');
 const localized = require('./localized.cjs');
-const icon$1 = require('./icon.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{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]{--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}";
+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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,7 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Dialog extends index.FoundationElement {
+class Dialog extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -125,7 +124,7 @@ class Dialog extends index.FoundationElement {
    * @internal
    */
   _onKeyDown(event) {
-    if (index$1.handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
+    if (index.handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
       if (this.#isDismissibleVia("escape")) {
         this._handleCloseRequest();
       }
@@ -194,55 +193,55 @@ class Dialog extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Dialog.prototype, "open");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Dialog.prototype, "icon");
 __decorateClass([
-  index.attr({ attribute: "icon-placement" })
+  vividElement.attr({ attribute: "icon-placement" })
 ], Dialog.prototype, "iconPlacement");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Dialog.prototype, "subtitle");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Dialog.prototype, "headline");
 __decorateClass([
-  index.attr({ attribute: "full-width-body", mode: "boolean" })
+  vividElement.attr({ attribute: "full-width-body", mode: "boolean" })
 ], Dialog.prototype, "fullWidthBody");
 __decorateClass([
-  index.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Dialog.prototype, "ariaLabel");
 __decorateClass([
-  index.attr({ attribute: "dismiss-button-aria-label" })
+  vividElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Dialog.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  index.attr({ attribute: "no-light-dismiss", mode: "boolean" })
+  vividElement.attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
 __decorateClass([
-  index.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+  vividElement.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
 ], Dialog.prototype, "noDismissOnEsc");
 __decorateClass([
-  index.attr({ attribute: "no-dismiss-button", mode: "boolean" })
+  vividElement.attr({ attribute: "no-dismiss-button", mode: "boolean" })
 ], Dialog.prototype, "noDismissButton");
 __decorateClass([
-  index.attr({ attribute: "non-dismissible", mode: "boolean" })
+  vividElement.attr({ attribute: "non-dismissible", mode: "boolean" })
 ], Dialog.prototype, "nonDismissible");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], Dialog.prototype, "_openedAsModal");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], Dialog.prototype, "bodySlottedContent");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], Dialog.prototype, "footerSlottedContent");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], Dialog.prototype, "actionItemsSlottedContent");
 applyMixins.applyMixins(Dialog, localized.Localized);
 
@@ -263,18 +262,18 @@ const getClasses = ({
   ["modal", _openedAsModal]
 );
 function icon(iconTag) {
-  return index.html`
+  return vividElement.html`
 		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 	`;
 }
 function headline() {
-  return index.html` <div class="headline">${(x) => x.headline}</div> `;
+  return vividElement.html` <div class="headline">${(x) => x.headline}</div> `;
 }
 function subtitle() {
-  return index.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
+  return vividElement.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
 function renderDismissButton(buttonTag) {
-  return index.html`
+  return vividElement.html`
 	<${buttonTag}
 		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
 		size="condensed"
@@ -285,10 +284,10 @@ function renderDismissButton(buttonTag) {
 }
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
-  const iconTag = context.tagFor(icon$1.Icon);
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`
-	<${elevationTag} dp="8">
+  const iconTag = context.tagFor(definition$1.Icon);
+  const buttonTag = context.tagFor(definition$2.Button);
+  return vividElement.html`
+	<${elevationTag} dp="8" not-relative>
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
@@ -322,19 +321,16 @@ const DialogTemplate = (context) => {
 	</${elevationTag}>`;
 };
 
-const dialogDefinition = Dialog.compose({
-  baseName: "dialog",
-  template: DialogTemplate,
-  styles
-});
-const dialogRegistries = [
-  dialogDefinition(),
-  ...definition$2.iconRegistries,
-  ...definition$1.buttonRegistries,
-  ...definition.elevationRegistries
-];
-const registerDialog = index.registerFactory(dialogRegistries);
+const dialogDefinition = vividElement.defineVividComponent(
+  "dialog",
+  Dialog,
+  DialogTemplate,
+  [definition$1.iconDefinition, definition$2.buttonDefinition, definition.elevationDefinition],
+  {
+    styles
+  }
+);
+const registerDialog = vividElement.createRegisterFunction(dialogDefinition);
 
 exports.dialogDefinition = dialogDefinition;
-exports.dialogRegistries = dialogRegistries;
 exports.registerDialog = registerDialog;

package/shared/definition21.js

@@ -1,16 +1,15 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition63.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
+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 { a as applyMixins } from './apply-mixins.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { L as Localized } from './localized.js';
-import { I as Icon } from './icon.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{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]{--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}";
+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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Dialog extends FoundationElement {
+class Dialog extends VividElement {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -286,7 +285,7 @@ const DialogTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   const buttonTag = context.tagFor(Button);
   return html`
-	<${elevationTag} dp="8">
+	<${elevationTag} dp="8" not-relative>
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
@@ -320,17 +319,15 @@ const DialogTemplate = (context) => {
 	</${elevationTag}>`;
 };
 
-const dialogDefinition = Dialog.compose({
-  baseName: "dialog",
-  template: DialogTemplate,
-  styles
-});
-const dialogRegistries = [
-  dialogDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries,
-  ...elevationRegistries
-];
-const registerDialog = registerFactory(dialogRegistries);
+const dialogDefinition = defineVividComponent(
+  "dialog",
+  Dialog,
+  DialogTemplate,
+  [iconDefinition, buttonDefinition, elevationDefinition],
+  {
+    styles
+  }
+);
+const registerDialog = createRegisterFunction(dialogDefinition);
 
-export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };
+export { dialogDefinition as d, registerDialog as r };

package/shared/definition22.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -25,7 +25,7 @@ const DividerRole = {
    */
   presentation: "presentation"
 };
-class Divider extends index.FoundationElement {
+class Divider extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.role = DividerRole.separator;
@@ -33,28 +33,30 @@ class Divider extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Divider.prototype, "role");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => index.html` <span
+const DividerTemplate = vividElement.html` <span
 	class="${getClasses}"
 	orientation="${(x) => x.orientation}"
 	role="${(x) => x.role}"
 ></span>`;
 
-const dividerDefinition = Divider.compose({
-  baseName: "divider",
-  template: DividerTemplate,
-  styles
-});
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = index.registerFactory(dividerRegistries);
+const dividerDefinition = vividElement.defineVividComponent(
+  "divider",
+  Divider,
+  DividerTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerDivider = vividElement.createRegisterFunction(dividerDefinition);
 
 exports.Divider = Divider;
 exports.dividerDefinition = dividerDefinition;
-exports.dividerRegistries = dividerRegistries;
 exports.registerDivider = registerDivider;

package/shared/definition22.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
@@ -23,7 +23,7 @@ const DividerRole = {
    */
   presentation: "presentation"
 };
-class Divider extends FoundationElement {
+class Divider extends VividElement {
   constructor() {
     super(...arguments);
     this.role = DividerRole.separator;
@@ -38,18 +38,21 @@ __decorateClass([
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => html` <span
+const DividerTemplate = html` <span
 	class="${getClasses}"
 	orientation="${(x) => x.orientation}"
 	role="${(x) => x.role}"
 ></span>`;
 
-const dividerDefinition = Divider.compose({
-  baseName: "divider",
-  template: DividerTemplate,
-  styles
-});
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = registerFactory(dividerRegistries);
+const dividerDefinition = defineVividComponent(
+  "divider",
+  Divider,
+  DividerTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerDivider = createRegisterFunction(dividerDefinition);
 
-export { Divider as D, dividerRegistries as a, dividerDefinition as d, registerDivider as r };
+export { Divider as D, dividerDefinition as d, registerDivider as r };

package/shared/definition23.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
-const icon = require('./icon.cjs');
+const vividElement = require('./vivid-element.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
@@ -18,22 +17,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class EmptyState extends index.FoundationElement {
+class EmptyState extends vividElement.VividElement {
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], EmptyState.prototype, "connotation");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], EmptyState.prototype, "headline");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], EmptyState.prototype, "icon");
 __decorateClass([
-  index.attr({ attribute: "icon-decoration" })
+  vividElement.attr({ attribute: "icon-decoration" })
 ], EmptyState.prototype, "iconDecoration");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], EmptyState.prototype, "slottedActionItems");
 
 const getClasses = ({
@@ -47,12 +46,12 @@ const getClasses = ({
   ["no-actions", slottedActionItems?.length === 0]
 );
 const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(icon.Icon);
-  return index.html` <div class="${getClasses}">
+  const iconTag = context.tagFor(definition.Icon);
+  return vividElement.html` <div class="${getClasses}">
 		<slot name="graphic">
 			${when.when(
     (x) => x.icon,
-    index.html`<div class="icon-container">
+    vividElement.html`<div class="icon-container">
 					<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 				</div>`
   )}
@@ -60,7 +59,7 @@ const EmptyStateTemplate = (context) => {
 		<div class="content">
 			${when.when(
     (x) => x.headline,
-    index.html`<header>${(x) => x.headline}</header>`
+    vividElement.html`<header>${(x) => x.headline}</header>`
   )}
 			<slot></slot>
 		</div>
@@ -70,14 +69,16 @@ const EmptyStateTemplate = (context) => {
 	</div>`;
 };
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: "empty-state",
-  template: EmptyStateTemplate,
-  styles
-});
-const emptyStateRegistries = [emptyStateDefinition(), ...definition.iconRegistries];
-const registerEmptyState = index.registerFactory(emptyStateRegistries);
+const emptyStateDefinition = vividElement.defineVividComponent(
+  "empty-state",
+  EmptyState,
+  EmptyStateTemplate,
+  [definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerEmptyState = vividElement.createRegisterFunction(emptyStateDefinition);
 
 exports.emptyStateDefinition = emptyStateDefinition;
-exports.emptyStateRegistries = emptyStateRegistries;
 exports.registerEmptyState = registerEmptyState;

package/shared/definition23.js

@@ -1,6 +1,5 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { I as Icon } from './icon.js';
+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 { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
@@ -16,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class EmptyState extends FoundationElement {
+class EmptyState extends VividElement {
 }
 __decorateClass([
   attr
@@ -68,12 +67,15 @@ const EmptyStateTemplate = (context) => {
 	</div>`;
 };
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: "empty-state",
-  template: EmptyStateTemplate,
-  styles
-});
-const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
-const registerEmptyState = registerFactory(emptyStateRegistries);
+const emptyStateDefinition = defineVividComponent(
+  "empty-state",
+  EmptyState,
+  EmptyStateTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerEmptyState = createRegisterFunction(emptyStateDefinition);
 
-export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };
+export { emptyStateDefinition as e, registerEmptyState as r };