@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition19.cjs

@@ -5,7 +5,7 @@ const definition$1 = require('./definition63.cjs');
 const definition$2 = require('./definition55.cjs');
 const definition$3 = require('./definition22.cjs');
 const presentationDate = require('./presentationDate.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 
 const formatRange = (from, to) => {
@@ -382,38 +382,38 @@ getVisibleRange_fn = function() {
   return { start, end };
 };
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "start" })
+  vividElement.attr({ mode: "fromView", attribute: "start" })
 ], DateRangePicker.prototype, "initialStart", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "end" })
+  vividElement.attr({ mode: "fromView", attribute: "end" })
 ], DateRangePicker.prototype, "initialEnd", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "start", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "end", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-start" })
+  vividElement.attr({ attribute: "current-start" })
 ], DateRangePicker.prototype, "currentStart", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-end" })
+  vividElement.attr({ attribute: "current-end" })
 ], DateRangePicker.prototype, "currentEnd", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "_numCalendars", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], DateRangePicker.prototype, "_calendarButtonLabel", 1);
 DateRangePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
 ], DateRangePicker);
 
-const dateRangePickerDefinition = defineVividComponent.defineVividComponent(
+const dateRangePickerDefinition = vividElement.defineVividComponent(
   "date-range-picker",
   DateRangePicker,
   presentationDate.DatePickerBaseTemplate,
@@ -425,7 +425,7 @@ const dateRangePickerDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerDateRangePicker = defineVividComponent.createRegisterFunction(
+const registerDateRangePicker = vividElement.createRegisterFunction(
   dateRangePickerDefinition
 );
 

package/shared/definition19.js

@@ -3,7 +3,7 @@ import { p as popupDefinition } from './definition63.js';
 import { t as textFieldDefinition } from './definition55.js';
 import { d as dividerDefinition } from './definition22.js';
 import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
-import { a as attr, o as observable, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as attr, o as observable, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 const formatRange = (from, to) => {

package/shared/definition2.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const definition = require('./definition.cjs');
 const vividElement = require('./vivid-element.cjs');
+const definition = require('./definition.cjs');
 const keyCodes = require('./key-codes.cjs');
 const numbers = require('./numbers.cjs');
 const slotted = require('./slotted.cjs');
@@ -173,21 +172,21 @@ class Accordion extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "expand-mode" })
+  vividElement.attr({ attribute: "expand-mode" })
 ], Accordion.prototype, "expandmode");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Accordion.prototype, "accordionItems");
 
 const getClasses = (_) => classNames.classNames("base");
-const AccordionTemplate = defineVividComponent.html`
+const AccordionTemplate = vividElement.html`
 	<div class="${getClasses}">
 		<slot ${slotted.slotted({ property: "accordionItems", filter: slotted.elements() })}></slot>
 	</div>
 `;
 
-const accordionDefinition = defineVividComponent.defineVividComponent(
+const accordionDefinition = vividElement.defineVividComponent(
   "accordion",
   Accordion,
   AccordionTemplate,
@@ -196,7 +195,7 @@ const accordionDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerAccordion = defineVividComponent.createRegisterFunction(accordionDefinition);
+const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
 
 exports.accordionDefinition = accordionDefinition;
 exports.registerAccordion = registerAccordion;

package/shared/definition2.js

@@ -1,6 +1,5 @@
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.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 AccordionItem, a as accordionItemDefinition } from './definition.js';
-import { V as VividElement } from './vivid-element.js';
 import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';
 import { s as slotted, e as elements } from './slotted.js';

package/shared/definition20.cjs

@@ -2,10 +2,9 @@
 
 const definition = require('./definition11.cjs');
 const definition$2 = require('./definition55.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition$1 = require('./definition27.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const textField = require('./text-field2.cjs');
 const when = require('./when.cjs');
@@ -55,37 +54,37 @@ class DialPad extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "helper-text" })
+  vividElement.attr({ attribute: "helper-text" })
 ], DialPad.prototype, "helperText");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], DialPad.prototype, "placeholder");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "value");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "pattern");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "pending");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "call-active", mode: "boolean" })
+  vividElement.attr({ attribute: "call-active", mode: "boolean" })
 ], DialPad.prototype, "callActive");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean", attribute: "no-call" })
+  vividElement.attr({ mode: "boolean", attribute: "no-call" })
 ], DialPad.prototype, "noCall");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean", attribute: "no-input" })
+  vividElement.attr({ mode: "boolean", attribute: "no-input" })
 ], DialPad.prototype, "noInput");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "end-call-button-label" })
+  vividElement.attr({ attribute: "end-call-button-label" })
 ], DialPad.prototype, "endCallButtonLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "call-button-label" })
+  vividElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
 applyMixins.applyMixins(DialPad, localized.Localized);
 
@@ -157,7 +156,7 @@ function deleteLastCharacter(dialPad) {
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
-  return defineVividComponent.html`<${textFieldTag} ${ref.ref(
+  return vividElement.html`<${textFieldTag} ${ref.ref(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
@@ -171,7 +170,7 @@ function renderTextField(textFieldTag, buttonTag) {
 			>
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
-    defineVividComponent.html`<${buttonTag}
+    vividElement.html`<${buttonTag}
                 				slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
@@ -190,10 +189,10 @@ function onDigitClick(digit, { parent: dialPad, event }) {
   dialPad.$emit("change");
 }
 function renderDigits(buttonTag, iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		${repeat.repeat(
     (_) => DIAL_PAD_BUTTONS,
-    defineVividComponent.html`
+    vividElement.html`
 			<${buttonTag}
 					  id="${(x) => x.id}"
 					  value="${(x) => x.value}"
@@ -215,7 +214,7 @@ function renderDigits(buttonTag, iconTag) {
 	`;
 }
 function renderDialButton(buttonTag) {
-  return defineVividComponent.html`<${buttonTag} class="call-btn"
+  return vividElement.html`<${buttonTag} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
@@ -230,14 +229,14 @@ const DialPadTemplate = (context) => {
   const buttonTag = context.tagFor(definition.Button);
   const iconTag = context.tagFor(definition$1.Icon);
   const textFieldTag = context.tagFor(textField.TextField);
-  return defineVividComponent.html` <div class="${getClasses}">
+  return vividElement.html` <div class="${getClasses}">
 		${when.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when.when((x) => !x.noCall, renderDialButton(buttonTag))}
 	</div>`;
 };
 
-const dialPadDefinition = defineVividComponent.defineVividComponent(
+const dialPadDefinition = vividElement.defineVividComponent(
   "dial-pad",
   DialPad,
   DialPadTemplate,
@@ -246,7 +245,7 @@ const dialPadDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerDialPad = defineVividComponent.createRegisterFunction(dialPadDefinition);
+const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
 
 exports.dialPadDefinition = dialPadDefinition;
 exports.registerDialPad = registerDialPad;

package/shared/definition20.js

@@ -1,9 +1,8 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { t as textFieldDefinition } from './definition55.js';
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.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 { V as VividElement } from './vivid-element.js';
 import { L as Localized } from './localized.js';
 import { T as TextField } from './text-field2.js';
 import { w as when } from './when.js';

package/shared/definition21.cjs

@@ -3,16 +3,15 @@
 const definition$1 = require('./definition27.cjs');
 const definition$2 = require('./definition11.cjs');
 const definition = require('./definition62.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const index = require('./index.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.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) => {
@@ -194,55 +193,55 @@ class Dialog extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Dialog.prototype, "open");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Dialog.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "icon-placement" })
+  vividElement.attr({ attribute: "icon-placement" })
 ], Dialog.prototype, "iconPlacement");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Dialog.prototype, "subtitle");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Dialog.prototype, "headline");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "full-width-body", mode: "boolean" })
+  vividElement.attr({ attribute: "full-width-body", mode: "boolean" })
 ], Dialog.prototype, "fullWidthBody");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Dialog.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "dismiss-button-aria-label" })
+  vividElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Dialog.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "no-light-dismiss", mode: "boolean" })
+  vividElement.attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+  vividElement.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
 ], Dialog.prototype, "noDismissOnEsc");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "no-dismiss-button", mode: "boolean" })
+  vividElement.attr({ attribute: "no-dismiss-button", mode: "boolean" })
 ], Dialog.prototype, "noDismissButton");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "non-dismissible", mode: "boolean" })
+  vividElement.attr({ attribute: "non-dismissible", mode: "boolean" })
 ], Dialog.prototype, "nonDismissible");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Dialog.prototype, "_openedAsModal");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Dialog.prototype, "bodySlottedContent");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Dialog.prototype, "footerSlottedContent");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Dialog.prototype, "actionItemsSlottedContent");
 applyMixins.applyMixins(Dialog, localized.Localized);
 
@@ -263,18 +262,18 @@ const getClasses = ({
   ["modal", _openedAsModal]
 );
 function icon(iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 	`;
 }
 function headline() {
-  return defineVividComponent.html` <div class="headline">${(x) => x.headline}</div> `;
+  return vividElement.html` <div class="headline">${(x) => x.headline}</div> `;
 }
 function subtitle() {
-  return defineVividComponent.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
+  return vividElement.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
 function renderDismissButton(buttonTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 	<${buttonTag}
 		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
 		size="condensed"
@@ -287,8 +286,8 @@ const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const iconTag = context.tagFor(definition$1.Icon);
   const buttonTag = context.tagFor(definition$2.Button);
-  return defineVividComponent.html`
-	<${elevationTag} dp="8">
+  return vividElement.html`
+	<${elevationTag} dp="8" not-relative>
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
@@ -322,7 +321,7 @@ const DialogTemplate = (context) => {
 	</${elevationTag}>`;
 };
 
-const dialogDefinition = defineVividComponent.defineVividComponent(
+const dialogDefinition = vividElement.defineVividComponent(
   "dialog",
   Dialog,
   DialogTemplate,
@@ -331,7 +330,7 @@ const dialogDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerDialog = defineVividComponent.createRegisterFunction(dialogDefinition);
+const registerDialog = vividElement.createRegisterFunction(dialogDefinition);
 
 exports.dialogDefinition = dialogDefinition;
 exports.registerDialog = registerDialog;

package/shared/definition21.js

@@ -1,16 +1,15 @@
 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 { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.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 { V as VividElement } from './vivid-element.js';
 import { L as Localized } from './localized.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) => {
@@ -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()}"

package/shared/definition22.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
@@ -34,20 +33,21 @@ class Divider extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Divider.prototype, "role");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = defineVividComponent.html` <span
+const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
+const DividerTemplate = vividElement.html` <span
 	class="${getClasses}"
-	orientation="${(x) => x.orientation}"
+	aria-orientation="${getAriaOrientation}"
 	role="${(x) => x.role}"
 ></span>`;
 
-const dividerDefinition = defineVividComponent.defineVividComponent(
+const dividerDefinition = vividElement.defineVividComponent(
   "divider",
   Divider,
   DividerTemplate,
@@ -56,7 +56,7 @@ const dividerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerDivider = defineVividComponent.createRegisterFunction(dividerDefinition);
+const registerDivider = vividElement.createRegisterFunction(dividerDefinition);
 
 exports.Divider = Divider;
 exports.dividerDefinition = dividerDefinition;

package/shared/definition22.js

@@ -1,5 +1,4 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { V as VividElement } from './vivid-element.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';
 
@@ -39,9 +38,10 @@ __decorateClass([
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
+const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = html` <span
 	class="${getClasses}"
-	orientation="${(x) => x.orientation}"
+	aria-orientation="${getAriaOrientation}"
 	role="${(x) => x.role}"
 ></span>`;
 

package/shared/definition23.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
@@ -21,19 +20,19 @@ var __decorateClass = (decorators, target, key, kind) => {
 class EmptyState extends vividElement.VividElement {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], EmptyState.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], EmptyState.prototype, "headline");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], EmptyState.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "icon-decoration" })
+  vividElement.attr({ attribute: "icon-decoration" })
 ], EmptyState.prototype, "iconDecoration");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], EmptyState.prototype, "slottedActionItems");
 
 const getClasses = ({
@@ -48,11 +47,11 @@ const getClasses = ({
 );
 const EmptyStateTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html` <div class="${getClasses}">
+  return vividElement.html` <div class="${getClasses}">
 		<slot name="graphic">
 			${when.when(
     (x) => x.icon,
-    defineVividComponent.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,
-    defineVividComponent.html`<header>${(x) => x.headline}</header>`
+    vividElement.html`<header>${(x) => x.headline}</header>`
   )}
 			<slot></slot>
 		</div>
@@ -70,7 +69,7 @@ const EmptyStateTemplate = (context) => {
 	</div>`;
 };
 
-const emptyStateDefinition = defineVividComponent.defineVividComponent(
+const emptyStateDefinition = vividElement.defineVividComponent(
   "empty-state",
   EmptyState,
   EmptyStateTemplate,
@@ -79,7 +78,7 @@ const emptyStateDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerEmptyState = defineVividComponent.createRegisterFunction(emptyStateDefinition);
+const registerEmptyState = vividElement.createRegisterFunction(emptyStateDefinition);
 
 exports.emptyStateDefinition = emptyStateDefinition;
 exports.registerEmptyState = registerEmptyState;

package/shared/definition23.js

@@ -1,6 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { V as VividElement } from './vivid-element.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';