@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition35.cjs

@@ -1,11 +1,10 @@
 '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 ariaGlobal = require('./aria-global.cjs');
-const vividElement = require('./vivid-element.cjs');
 const dom = require('./dom.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -129,10 +128,10 @@ class ListboxOption extends vividElement.VividElement {
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.value = newValue;
     }
-    defineVividComponent.Observable.notify(this, "value");
+    vividElement.Observable.notify(this, "value");
   }
   get value() {
-    defineVividComponent.Observable.track(this, "value");
+    vividElement.Observable.track(this, "value");
     return this._value ?? this.text;
   }
   get form() {
@@ -146,61 +145,61 @@ class ListboxOption extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "checked");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "defaultSelected");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], ListboxOption.prototype, "disabled");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ attribute: "selected", mode: "boolean" })
+  vividElement.attr({ attribute: "selected", mode: "boolean" })
 ], ListboxOption.prototype, "selectedAttribute");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "selected");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "value", mode: "fromView" })
+  vividElement.attr({ attribute: "value", mode: "fromView" })
 ], ListboxOption.prototype, "initialValue");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "text"
   })
 ], ListboxOption.prototype, "_text");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "_highlighted");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "_displayCheckmark");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], ListboxOption.prototype, "_matchedRange");
 class DelegatesARIAListboxOption {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaChecked");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaSelected");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaSetSize");
 applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
@@ -216,7 +215,7 @@ const getClasses = (x) => classNames.classNames(
 const ListboxOptionTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template
 			aria-checked="${(x) => x.ariaChecked}"
 			aria-disabled="${(x) => x.ariaDisabled}"
@@ -229,10 +228,10 @@ const ListboxOptionTemplate = (context) => {
 				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 				${when.when(
     (x) => x.text,
-    defineVividComponent.html`<div class="text">
+    vividElement.html`<div class="text">
 						${when.when(
       (x) => x._matchedRange,
-      defineVividComponent.html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
+      vividElement.html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
 									>${(x) => x.text.slice(
         x._matchedRangeSafe.from,
         x._matchedRangeSafe.to
@@ -243,7 +242,7 @@ const ListboxOptionTemplate = (context) => {
   )}
 				${when.when(
     (x) => x._displayCheckmark && x.selected,
-    defineVividComponent.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+    vividElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
   )}
 			</div>
 		</template>
@@ -252,7 +251,7 @@ const ListboxOptionTemplate = (context) => {
 
 const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
 
-const listboxOptionDefinition = defineVividComponent.defineVividComponent(
+const listboxOptionDefinition = vividElement.defineVividComponent(
   "option",
   ListboxOption,
   ListboxOptionTemplate,
@@ -261,7 +260,7 @@ const listboxOptionDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerOption = defineVividComponent.createRegisterFunction(listboxOptionDefinition);
+const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
 
 exports.ListboxOption = ListboxOption;
 exports.isListboxOption = isListboxOption;

package/shared/definition35.js

@@ -1,9 +1,8 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { O as Observable, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, O as Observable, o as observable, 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 { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { V as VividElement } from './vivid-element.js';
 import { i as isHTMLElement } from './dom.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition36.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
 const slotted = require('./slotted.cjs');
@@ -94,31 +93,31 @@ class Pagination extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Pagination.prototype, "size", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Pagination.prototype, "shape", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Pagination.prototype, "paginationButtons", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Pagination.prototype, "prevButton", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Pagination.prototype, "nextButton", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "nav-icons", mode: "boolean" })
+  vividElement.attr({ attribute: "nav-icons", mode: "boolean" })
 ], Pagination.prototype, "navIcons", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], Pagination.prototype, "pagesList", 1);
 __decorateClass([
-  defineVividComponent.attr({ mode: "reflect", converter: totalConverter })
+  vividElement.attr({ mode: "reflect", converter: totalConverter })
 ], Pagination.prototype, "total", 2);
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "reflect",
     converter: totalConverter,
     attribute: "selected-index"
@@ -148,9 +147,9 @@ const getClasses = (_) => classNames.classNames("control");
 function getButtonAppearance(value, { parent }) {
   return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
 }
-const paginationButtonRenderer = (buttonTag) => defineVividComponent.html` ${when.when(
+const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
   (value) => value !== "...",
-  defineVividComponent.html`
+  vividElement.html`
 		<${buttonTag} class="vwc-pagination-button"
 									label="${(value) => value}"
 									appearance="${getButtonAppearance}"
@@ -166,7 +165,7 @@ const paginationButtonRenderer = (buttonTag) => defineVividComponent.html` ${whe
 )}
 ${when.when(
   (value) => value === "...",
-  defineVividComponent.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+  vividElement.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
 		...
 	</div>`
 )}`;
@@ -188,7 +187,7 @@ const getPaginationButtonWidth = (value) => {
 const PaginationTemplate = (context) => {
   const buttonTag = context.tagFor(definition.Button);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 	<div class="${getClasses}">
 		<${buttonTag} class="prev-button" ${ref.ref("prevButton")}
 									label="${(x) => !x.navIcons ? "Previous" : null}"
@@ -215,7 +214,7 @@ const PaginationTemplate = (context) => {
 </div>`;
 };
 
-const paginationDefinition = defineVividComponent.defineVividComponent(
+const paginationDefinition = vividElement.defineVividComponent(
   "pagination",
   Pagination,
   PaginationTemplate,
@@ -224,7 +223,7 @@ const paginationDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerPagination = defineVividComponent.createRegisterFunction(paginationDefinition);
+const registerPagination = vividElement.createRegisterFunction(paginationDefinition);
 
 exports.paginationDefinition = paginationDefinition;
 exports.registerPagination = registerPagination;

package/shared/definition36.js

@@ -1,6 +1,5 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-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 { b as Size, S as Shape } from './enums.js';
 import { e as elements } from './slotted.js';
 import { r as ref } from './ref.js';

package/shared/definition37.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const baseProgress = require('./base-progress.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -23,13 +23,13 @@ class ProgressRing extends baseProgress.BaseProgress {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], ProgressRing.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], ProgressRing.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], ProgressRing.prototype, "size");
 
 const getClasses = ({ connotation, size, paused }) => classNames.classNames(
@@ -39,7 +39,7 @@ const getClasses = ({ connotation, size, paused }) => classNames.classNames(
   [`size-${size}`, !!size]
 );
 const progressSegments = 44;
-const ProgressRingTemplate = defineVividComponent.html`<template
+const ProgressRingTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -52,7 +52,7 @@ const ProgressRingTemplate = defineVividComponent.html`<template
 	>
 		${when.when(
   (x) => typeof x.value === "number",
-  defineVividComponent.html`
+  vividElement.html`
 				<svg class="progress" viewBox="0 0 16 16">
 					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
 					<circle
@@ -67,7 +67,7 @@ const ProgressRingTemplate = defineVividComponent.html`<template
 )}
 		${when.when(
   (x) => typeof x.value !== "number",
-  defineVividComponent.html`
+  vividElement.html`
 				<svg class="progress" viewBox="0 0 16 16">
 					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
 					<circle
@@ -82,7 +82,7 @@ const ProgressRingTemplate = defineVividComponent.html`<template
 	</div>
 </template>`;
 
-const progressRingDefinition = defineVividComponent.defineVividComponent(
+const progressRingDefinition = vividElement.defineVividComponent(
   "progress-ring",
   ProgressRing,
   ProgressRingTemplate,
@@ -91,7 +91,7 @@ const progressRingDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerProgressRing = defineVividComponent.createRegisterFunction(
+const registerProgressRing = vividElement.createRegisterFunction(
   progressRingDefinition
 );
 

package/shared/definition37.js

@@ -1,4 +1,4 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition38.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const baseProgress = require('./base-progress.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -24,16 +24,16 @@ class Progress extends baseProgress.BaseProgress {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Progress.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Progress.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Progress.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Progress.prototype, "reverse");
 
 const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
@@ -44,18 +44,18 @@ const getClasses = ({ connotation, shape, reverse, paused }) => classNames.class
   ["paused", Boolean(paused)]
 );
 function determinate() {
-  return defineVividComponent.html` <span
+  return vividElement.html` <span
 		class="determinate"
 		style="width: ${(x) => x.percentComplete}%"
 	></span>`;
 }
 function indeterminate() {
-  return defineVividComponent.html` <span class="indeterminate" name="indeterminate">
+  return vividElement.html` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = defineVividComponent.html`<template
+const ProgressTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -73,7 +73,7 @@ const ProgressTemplate = defineVividComponent.html`<template
 	</div>
 </template>`;
 
-const progressDefinition = defineVividComponent.defineVividComponent(
+const progressDefinition = vividElement.defineVividComponent(
   "progress",
   Progress,
   ProgressTemplate,
@@ -82,7 +82,7 @@ const progressDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerProgress = defineVividComponent.createRegisterFunction(progressDefinition);
+const registerProgress = vividElement.createRegisterFunction(progressDefinition);
 
 exports.progressDefinition = progressDefinition;
 exports.registerProgress = registerProgress;

package/shared/definition38.js

@@ -1,4 +1,4 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition39.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition40.cjs');
 const keyCodes = require('./key-codes.cjs');
-const vividElement = require('./vivid-element.cjs');
 const aria = require('./aria.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -227,29 +226,29 @@ class RadioGroup extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], RadioGroup.prototype, "readOnly");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "disabled", mode: "boolean" })
+  vividElement.attr({ attribute: "disabled", mode: "boolean" })
 ], RadioGroup.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "name");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "value");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "orientation");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template
 			role="radiogroup"
 			aria-disabled="${(x) => x.disabled}"
@@ -260,7 +259,7 @@ const RadioGroupTemplate = (context) => {
 		>
 			${when.when(
     (x) => x.label,
-    defineVividComponent.html`<label>${(x) => x.label}</label>`
+    vividElement.html`<label>${(x) => x.label}</label>`
   )}
 
 			<div
@@ -277,7 +276,7 @@ const RadioGroupTemplate = (context) => {
 	`;
 };
 
-const radioGroupDefinition = defineVividComponent.defineVividComponent(
+const radioGroupDefinition = vividElement.defineVividComponent(
   "radio-group",
   RadioGroup,
   RadioGroupTemplate,
@@ -286,7 +285,7 @@ const radioGroupDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerRadioGroup = defineVividComponent.createRegisterFunction(radioGroupDefinition);
+const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
 
 exports.radioGroupDefinition = radioGroupDefinition;
 exports.registerRadioGroup = registerRadioGroup;

package/shared/definition39.js

@@ -1,7 +1,6 @@
-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 { R as Radio, r as radioDefinition } from './definition40.js';
 import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
-import { V as VividElement } from './vivid-element.js';
 import { O as Orientation } from './aria.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';

package/shared/definition4.cjs

@@ -2,13 +2,12 @@
 
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition62.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition$2 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.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 classNames = require('./class-names.cjs');
@@ -106,37 +105,37 @@ class Alert extends vividElement.VividElement {
   #onTransitionEnd;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "dismiss-button-aria-label" })
+  vividElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Alert.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], Alert.prototype, "placement");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "headline");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "fromView",
-    converter: defineVividComponent.nullableNumberConverter
+    converter: vividElement.nullableNumberConverter
   })
 ], Alert.prototype, "timeoutms");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "strategy");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "open");
 applyMixins.applyMixins(Alert, affix.AffixIcon);
 applyMixins.applyMixins(Alert, localized.Localized);
@@ -150,10 +149,10 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
 );
 function renderIcon(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
+  return vividElement.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
 }
 function renderDismissButton(buttonTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${buttonTag}
 			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -165,7 +164,7 @@ function renderDismissButton(buttonTag) {
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
 			class="${getControlClasses}"
@@ -177,9 +176,9 @@ const AlertTemplate = (context) => {
 				<div class="alert-text">
 					${when.when(
     (x) => x.headline,
-    defineVividComponent.html`<header class="headline">${(x) => x.headline}</header>`
+    vividElement.html`<header class="headline">${(x) => x.headline}</header>`
   )}
-					${when.when((x) => x.text, defineVividComponent.html`<div class="main-text">${(x) => x.text}</div>`)}
+					${when.when((x) => x.text, vividElement.html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
@@ -190,7 +189,7 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = defineVividComponent.defineVividComponent(
+const alertDefinition = vividElement.defineVividComponent(
   "alert",
   Alert,
   AlertTemplate,
@@ -199,7 +198,7 @@ const alertDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerAlert = defineVividComponent.createRegisterFunction(alertDefinition);
+const registerAlert = vividElement.createRegisterFunction(alertDefinition);
 
 exports.alertDefinition = alertDefinition;
 exports.registerAlert = registerAlert;

package/shared/definition4.js

@@ -1,12 +1,11 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { E as Elevation, e as elevationDefinition } from './definition62.js';
-import { a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { i as iconDefinition } from './definition27.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.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 { c as classNames } from './class-names.js';