@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition29.cjs

@@ -2,10 +2,9 @@
 
 const definition$1 = require('./definition63.cjs');
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
 const direction = require('./direction.cjs');
 const anchored = require('./anchored.cjs');
@@ -158,7 +157,7 @@ exports.Menu = class Menu extends vividElement.VividElement {
         return;
       }
       const newValue = !this.open;
-      defineVividComponent.DOM.queueUpdate(() => this.open = newValue);
+      vividElement.DOM.queueUpdate(() => this.open = newValue);
     });
     this._onFocusout = (e) => {
       const focusTarget = e.relatedTarget;
@@ -181,7 +180,7 @@ exports.Menu = class Menu extends vividElement.VividElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    defineVividComponent.DOM.queueUpdate(() => {
+    vividElement.DOM.queueUpdate(() => {
       this.setItems();
     });
   }
@@ -346,31 +345,31 @@ cleanupAnchor_fn = function(a) {
 _onAnchorClick = new WeakMap();
 exports.Menu.focusableElementRoles = roleForMenuItem;
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], exports.Menu.prototype, "items", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], exports.Menu.prototype, "ariaLabel", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], exports.Menu.prototype, "placement", 2);
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.Menu.prototype, "trigger", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean", attribute: "auto-dismiss" })
+  vividElement.attr({ mode: "boolean", attribute: "auto-dismiss" })
 ], exports.Menu.prototype, "autoDismiss", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "fromView", attribute: "position-strategy" })
+  vividElement.attr({ mode: "fromView", attribute: "position-strategy" })
 ], exports.Menu.prototype, "positionStrategy", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], exports.Menu.prototype, "open", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], exports.Menu.prototype, "headerSlottedContent", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], exports.Menu.prototype, "actionItemsSlottedContent", 2);
 exports.Menu = __decorateClass$1([
   anchored.anchored
@@ -519,7 +518,7 @@ class MenuItem extends vividElement.VividElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    defineVividComponent.DOM.queueUpdate(() => {
+    vividElement.DOM.queueUpdate(() => {
       this.updateSubmenu();
     });
     this.observer = new MutationObserver(this.updateSubmenu);
@@ -578,52 +577,52 @@ class MenuItem extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "expanded");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], MenuItem.prototype, "role");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "submenuRegion");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "hasSubmenu");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "currentDirection");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "submenu");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], MenuItem.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "text-secondary" })
+  vividElement.attr({ attribute: "text-secondary" })
 ], MenuItem.prototype, "textSecondary");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], MenuItem.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean", attribute: "check-trailing" })
+  vividElement.attr({ mode: "boolean", attribute: "check-trailing" })
 ], MenuItem.prototype, "checkTrailing");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "check-appearance" })
+  vividElement.attr({ attribute: "check-appearance" })
 ], MenuItem.prototype, "checkedAppearance");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "metaSlottedContent");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "trailingMetaSlottedContent");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], MenuItem.prototype, "slottedSubmenu");
 applyMixins.applyMixins(MenuItem, affix.AffixIcon);
 
@@ -668,22 +667,22 @@ function handleClick(x, { event }) {
 }
 function checkIndicator(context) {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html`${when.when(
+  return vividElement.html`${when.when(
     (x) => x.role === MenuItemRole.menuitemcheckbox || x.role === MenuItemRole.menuitemradio,
-    defineVividComponent.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`
+    vividElement.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`
   )}`;
 }
 function text() {
-  return defineVividComponent.html`${when.when(
+  return vividElement.html`${when.when(
     (x) => x.text || x.textSecondary,
-    defineVividComponent.html`<span class="text">
+    vividElement.html`<span class="text">
 			${when.when(
       (x) => x.text,
-      defineVividComponent.html`<span class="text-primary">${(x) => x.text}</span>`
+      vividElement.html`<span class="text-primary">${(x) => x.text}</span>`
     )}
 			${when.when(
       (x) => x.textSecondary,
-      defineVividComponent.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+      vividElement.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
     )}
 		</span>`
   )}`;
@@ -691,7 +690,7 @@ function text() {
 const MenuItemTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template
 			role="${(x) => x.role ? x.role : MenuItemRole.menuitem}"
 			aria-haspopup="${(x) => x.hasSubmenu ? "menu" : void 0}"
@@ -708,7 +707,7 @@ const MenuItemTemplate = (context) => {
 				${checkIndicator(context)}
 				${when.when(
     (x) => x.icon,
-    defineVividComponent.html`<span class="decorative"
+    vividElement.html`<span class="decorative"
 						>${(x) => affixIconTemplate(x.icon)}</span
 					>`
   )}
@@ -719,7 +718,7 @@ const MenuItemTemplate = (context) => {
 				></slot>
 				${when.when(
     (x) => x.hasSubmenu,
-    defineVividComponent.html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`
+    vividElement.html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`
   )}
 			</div>
 			<slot
@@ -733,7 +732,7 @@ const MenuItemTemplate = (context) => {
 	`;
 };
 
-const menuItemDefinition = defineVividComponent.defineVividComponent(
+const menuItemDefinition = vividElement.defineVividComponent(
   "menu-item",
   MenuItem,
   MenuItemTemplate,
@@ -742,9 +741,9 @@ const menuItemDefinition = defineVividComponent.defineVividComponent(
     styles: styles$1
   }
 );
-const registerMenuItem = defineVividComponent.createRegisterFunction(menuItemDefinition);
+const registerMenuItem = vividElement.createRegisterFunction(menuItemDefinition);
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,
@@ -769,7 +768,7 @@ const MenuTemplate = (context) => {
     e.stopPropagation();
     x.open = state;
   }
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template role="presentation"
 							@change="${(x, c) => x._onChange(c.event)}"
 							@focusout="${(x, c) => x._onFocusout(c.event)}">
@@ -806,7 +805,7 @@ const MenuTemplate = (context) => {
 };
 
 const menuName = "menu";
-const menuDefinition = defineVividComponent.defineVividComponent(
+const menuDefinition = vividElement.defineVividComponent(
   menuName,
   exports.Menu,
   MenuTemplate,
@@ -815,7 +814,7 @@ const menuDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerMenu = defineVividComponent.createRegisterFunction(menuDefinition);
+const registerMenu = vividElement.createRegisterFunction(menuDefinition);
 
 exports.MenuItem = MenuItem;
 exports.MenuItemRole = MenuItemRole;

package/shared/definition29.js

@@ -1,9 +1,8 @@
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { D as DOM, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, D as DOM, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown, h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
-import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { V as VividElement } from './vivid-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { a as applyMixins } from './apply-mixins2.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
@@ -742,7 +741,7 @@ const menuItemDefinition = defineVividComponent(
 );
 const registerMenuItem = createRegisterFunction(menuItemDefinition);
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,

package/shared/definition3.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -24,21 +23,21 @@ class ActionGroup extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], ActionGroup.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], ActionGroup.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], ActionGroup.prototype, "tight");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], ActionGroup.prototype, "role");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], ActionGroup.prototype, "ariaLabel");
 
 const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
@@ -47,7 +46,7 @@ const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
   [`shape-${shape}`, Boolean(shape)],
   ["tight", tight]
 );
-const ActionGroupTemplate = defineVividComponent.html`<div
+const ActionGroupTemplate = vividElement.html`<div
 	class="${getClasses}"
 	role="${(x) => x.role ? x.role : "group"}"
 	aria-label="${(x) => x.ariaLabel}"
@@ -55,7 +54,7 @@ const ActionGroupTemplate = defineVividComponent.html`<div
 	<slot></slot>
 </div>`;
 
-const actionGroupDefinition = defineVividComponent.defineVividComponent(
+const actionGroupDefinition = vividElement.defineVividComponent(
   "action-group",
   ActionGroup,
   ActionGroupTemplate,
@@ -64,7 +63,7 @@ const actionGroupDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerActionGroup = defineVividComponent.createRegisterFunction(
+const registerActionGroup = vividElement.createRegisterFunction(
   actionGroupDefinition
 );
 

package/shared/definition3.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 { c as classNames } from './class-names.js';
 
 const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";

package/shared/definition30.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -47,19 +46,19 @@ class NavDisclosure extends vividElement.VividElement {
   #onToggle;
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], NavDisclosure.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], NavDisclosure.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], NavDisclosure.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], NavDisclosure.prototype, "open");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-current" })
+  vividElement.attr({ attribute: "aria-current" })
 ], NavDisclosure.prototype, "ariaCurrent");
 applyMixins.applyMixins(NavDisclosure, affix.AffixIcon);
 
@@ -74,7 +73,7 @@ const getClasses = ({ appearance, connotation }) => classNames.classNames(
 const NavDisclosureTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
+  return vividElement.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
         <summary class="${getClasses}"
             role="button"
             aria-controls="disclosure-content"
@@ -93,7 +92,7 @@ const NavDisclosureTemplate = (context) => {
 	`;
 };
 
-const navDisclosureDefinition = defineVividComponent.defineVividComponent(
+const navDisclosureDefinition = vividElement.defineVividComponent(
   "nav-disclosure",
   NavDisclosure,
   NavDisclosureTemplate,
@@ -102,7 +101,7 @@ const navDisclosureDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerNavDisclosure = defineVividComponent.createRegisterFunction(
+const registerNavDisclosure = vividElement.createRegisterFunction(
   navDisclosureDefinition
 );
 

package/shared/definition30.js

@@ -1,8 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition27.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 { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { V as VividElement } from './vivid-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition31.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const textAnchor = require('./text-anchor.cjs');
@@ -11,14 +11,14 @@ const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:c
 
 class NavItem extends textAnchor.TextAnchor {
   getBodyTemplate() {
-    return defineVividComponent.html`<slot name="meta"></slot>`;
+    return vividElement.html`<slot name="meta"></slot>`;
   }
 }
 applyMixins.applyMixins(NavItem, affix.AffixIcon);
 
-const NavItemTemplate = (context) => defineVividComponent.html` ${textAnchor_template.textAnchorTemplate(context)} `;
+const NavItemTemplate = (context) => vividElement.html` ${textAnchor_template.textAnchorTemplate(context)} `;
 
-const navItemDefinition = defineVividComponent.defineVividComponent(
+const navItemDefinition = vividElement.defineVividComponent(
   "nav-item",
   NavItem,
   NavItemTemplate,
@@ -30,7 +30,7 @@ const navItemDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerNavItem = defineVividComponent.createRegisterFunction(navItemDefinition);
+const registerNavItem = vividElement.createRegisterFunction(navItemDefinition);
 
 exports.navItemDefinition = navItemDefinition;
 exports.registerNavItem = registerNavItem;

package/shared/definition31.js

@@ -1,6 +1,6 @@
 import { i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { A as AffixIcon } from './affix.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { b as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { T as TextAnchor } from './text-anchor.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';

package/shared/definition32.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 const styles = "nav{display:flex;flex-direction:column;gap:4px}";
@@ -8,12 +7,12 @@ const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 class Nav extends vividElement.VividElement {
 }
 
-const NavTemplate = defineVividComponent.html` <nav><slot></slot></nav> `;
+const NavTemplate = vividElement.html` <nav><slot></slot></nav> `;
 
-const navDefinition = defineVividComponent.defineVividComponent("nav", Nav, NavTemplate, [], {
+const navDefinition = vividElement.defineVividComponent("nav", Nav, NavTemplate, [], {
   styles
 });
-const registerNav = defineVividComponent.createRegisterFunction(navDefinition);
+const registerNav = vividElement.createRegisterFunction(navDefinition);
 
 exports.navDefinition = navDefinition;
 exports.registerNav = registerNav;

package/shared/definition32.js

@@ -1,5 +1,4 @@
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { V as VividElement } from './vivid-element.js';
+import { V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 
 const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 

package/shared/definition33.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
 const affix = require('./affix.cjs');
@@ -22,20 +21,20 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Note extends vividElement.VividElement {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Note.prototype, "headline");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Note.prototype, "connotation");
 applyMixins.applyMixins(Note, affix.AffixIcon);
 
 const getClasses = ({ connotation }) => classNames.classNames("base", `connotation-${connotation}`);
 function getHeaderTemplate() {
-  return defineVividComponent.html`<div class="headline">${(x) => x.headline}</div>`;
+  return vividElement.html`<div class="headline">${(x) => x.headline}</div>`;
 }
 const NoteTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="${getClasses}">
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			<div class="text">
@@ -46,7 +45,7 @@ const NoteTemplate = (context) => {
 	`;
 };
 
-const noteDefinition = defineVividComponent.defineVividComponent(
+const noteDefinition = vividElement.defineVividComponent(
   "note",
   Note,
   NoteTemplate,
@@ -55,7 +54,7 @@ const noteDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerNote = defineVividComponent.createRegisterFunction(noteDefinition);
+const registerNote = vividElement.createRegisterFunction(noteDefinition);
 
 exports.noteDefinition = noteDefinition;
 exports.registerNote = registerNote;

package/shared/definition33.js

@@ -1,8 +1,7 @@
 import { i as iconDefinition } from './definition27.js';
-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 { a as applyMixins } from './apply-mixins2.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';