@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition25.cjs

@@ -2,11 +2,10 @@
 
 const definition$1 = require('./definition27.cjs');
 const definition = require('./definition11.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 const localized = require('./localized.cjs');
 const when = require('./when.cjs');
@@ -2422,28 +2421,28 @@ formatNumbersInMessage_fn = function(message) {
   return message;
 };
 __decorateClass([
-  defineVividComponent.attr({ attribute: "single-file", mode: "boolean" })
+  vividElement.attr({ attribute: "single-file", mode: "boolean" })
 ], FilePicker.prototype, "singleFile", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "max-files" })
+  vividElement.attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "max-file-size" })
+  vividElement.attr({ mode: "fromView", attribute: "max-file-size" })
 ], FilePicker.prototype, "maxFileSize", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], FilePicker.prototype, "accept", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], FilePicker.prototype, "size", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "invalid-file-type-error" })
+  vividElement.attr({ attribute: "invalid-file-type-error" })
 ], FilePicker.prototype, "invalidFileTypeError", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "max-files-exceeded-error" })
+  vividElement.attr({ attribute: "max-files-exceeded-error" })
 ], FilePicker.prototype, "maxFilesExceededError", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "file-too-big-error" })
+  vividElement.attr({ attribute: "file-too-big-error" })
 ], FilePicker.prototype, "fileTooBigError", 2);
 FilePicker = __decorateClass([
   formElements.errorText,
@@ -2456,14 +2455,14 @@ const getClasses = ({ size }) => classNames.classNames("control", "dz-default",
   Boolean(size)
 ]);
 const FilePickerTemplate = (context) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		${(x) => {
     x.setButtonTag(context.tagFor(definition.Button));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
 			${when.when(
     (x) => x.label,
-    defineVividComponent.html`<label>${(x) => x.label}</label>`
+    vividElement.html`<label>${(x) => x.label}</label>`
   )}
 			<div
 				${ref.ref("control")}
@@ -2480,7 +2479,7 @@ const FilePickerTemplate = (context) => {
 	`;
 };
 
-const filePickerDefinition = defineVividComponent.defineVividComponent(
+const filePickerDefinition = vividElement.defineVividComponent(
   "file-picker",
   FilePicker,
   FilePickerTemplate,
@@ -2492,7 +2491,7 @@ const filePickerDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerFilePicker = defineVividComponent.createRegisterFunction(filePickerDefinition);
+const registerFilePicker = vividElement.createRegisterFunction(filePickerDefinition);
 
 exports.filePickerDefinition = filePickerDefinition;
 exports.registerFilePicker = registerFilePicker;

package/shared/definition25.js

@@ -1,10 +1,9 @@
 import { i as iconDefinition } from './definition27.js';
 import { B as Button, b as buttonDefinition } from './definition11.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 { C as Connotation } from './enums.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { e as errorText, f as formElements, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { L as Localized } from './localized.js';
 import { w as when } from './when.js';

package/shared/definition26.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const definition = require('./definition62.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -24,13 +23,13 @@ class Header extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "elevation-shadow",
     mode: "boolean"
   })
 ], Header.prototype, "elevationShadow");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], Header.prototype, "alternate");
@@ -38,7 +37,7 @@ __decorateClass([
 const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
-  return defineVividComponent.html`
+  return vividElement.html`
     <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
       <header class="base" part="base">
         <!-- a container is needed to distinguish the surface background color of the
@@ -59,7 +58,7 @@ const headerTemplate = (context) => {
 	`;
 };
 
-const headerDefinition = defineVividComponent.defineVividComponent(
+const headerDefinition = vividElement.defineVividComponent(
   "header",
   Header,
   headerTemplate,
@@ -68,7 +67,7 @@ const headerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerHeader = defineVividComponent.createRegisterFunction(headerDefinition);
+const registerHeader = vividElement.createRegisterFunction(headerDefinition);
 
 exports.headerDefinition = headerDefinition;
 exports.registerHeader = registerHeader;

package/shared/definition26.js

@@ -1,6 +1,5 @@
 import { E as Elevation, e as elevationDefinition } from './definition62.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 { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";

package/shared/definition27.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const _has = require('./_has.cjs');
 const when = require('./when.cjs');
@@ -244,22 +243,22 @@ class Icon extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Icon.prototype, "connotation", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: numberConverter })
+  vividElement.attr({ converter: numberConverter })
 ], Icon.prototype, "size", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Icon.prototype, "_svg", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Icon.prototype, "iconLoaded", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Icon.prototype, "name", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], Icon.prototype, "iconUrl", 1);
 
 const getClasses = ({ connotation, size }) => classNames.classNames(
@@ -267,25 +266,25 @@ const getClasses = ({ connotation, size }) => classNames.classNames(
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
-const iconTemplate = defineVividComponent.html`
+const iconTemplate = vividElement.html`
 	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
 		<slot>
 			${when.when(
   (x) => !x.iconLoaded,
-  defineVividComponent.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+  vividElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
 )}
 			${when.when(
   (x) => x.iconLoaded && x._svg,
-  (x) => defineVividComponent.html`${x._svg}`
+  (x) => vividElement.html`${x._svg}`
 )}
 		</slot>
 	</figure>
 `;
 
-const iconDefinition = defineVividComponent.defineVividComponent("icon", Icon, iconTemplate, [], {
+const iconDefinition = vividElement.defineVividComponent("icon", Icon, iconTemplate, [], {
   styles
 });
-const registerIcon = defineVividComponent.createRegisterFunction(iconDefinition);
+const registerIcon = vividElement.createRegisterFunction(iconDefinition);
 
 exports.Icon = Icon;
 exports.iconDefinition = iconDefinition;

package/shared/definition27.js

@@ -1,5 +1,4 @@
-import { a as attr, o as observable, v as volatile, 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, v as volatile, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition28.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -16,22 +15,22 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Layout extends vividElement.VividElement {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Layout.prototype, "gutters");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "column-basis" })
+  vividElement.attr({ attribute: "column-basis" })
 ], Layout.prototype, "columnBasis");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "column-spacing" })
+  vividElement.attr({ attribute: "column-spacing" })
 ], Layout.prototype, "columnSpacing");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "row-spacing" })
+  vividElement.attr({ attribute: "row-spacing" })
 ], Layout.prototype, "rowSpacing");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "auto-sizing" })
+  vividElement.attr({ attribute: "auto-sizing" })
 ], Layout.prototype, "autoSizing");
 
-const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}";
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}@media not all and (width >= 600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width >= 600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}";
 
 const getClasses = ({
   columnBasis,
@@ -50,11 +49,11 @@ const getClasses = ({
   ],
   [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
 );
-const layoutTemplate = defineVividComponent.html` <div class="${getClasses}">
+const layoutTemplate = vividElement.html` <div class="${getClasses}">
 	<slot></slot>
 </div>`;
 
-const layoutDefinition = defineVividComponent.defineVividComponent(
+const layoutDefinition = vividElement.defineVividComponent(
   "layout",
   Layout,
   layoutTemplate,
@@ -63,7 +62,7 @@ const layoutDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerLayout = defineVividComponent.createRegisterFunction(layoutDefinition);
+const registerLayout = vividElement.createRegisterFunction(layoutDefinition);
 
 exports.layoutDefinition = layoutDefinition;
 exports.registerLayout = registerLayout;

package/shared/definition28.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';
 
 var __defProp = Object.defineProperty;
@@ -29,7 +28,7 @@ __decorateClass([
   attr({ attribute: "auto-sizing" })
 ], Layout.prototype, "autoSizing");
 
-const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}";
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}@media not all and (width >= 600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width >= 600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}";
 
 const getClasses = ({
   columnBasis,

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 { 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,