@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition35.cjs

@@ -1,210 +1,12 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.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 option = require('./option.cjs');
+const affix = require('./affix.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function isListboxOption(el) {
-  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
-}
-class ListboxOption extends vividElement.VividElement {
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._matchedRange = null;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.initialValue = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  /**
-   * Updates the ariaChecked property when the checked property changes.
-   *
-   * @param _ - the previous checked value
-   * @param next - the current checked value
-   *
-   * @public
-   */
-  checkedChanged(_, next) {
-    if (typeof next === "boolean") {
-      this.ariaChecked = next ? "true" : "false";
-      return;
-    }
-    this.ariaChecked = null;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
-      }
-    }
-  }
-  disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.disabled = this.disabled;
-    }
-  }
-  selectedAttributeChanged() {
-    this.defaultSelected = this.selectedAttribute;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.defaultSelected = this.defaultSelected;
-    }
-  }
-  selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
-    if (!this.dirtySelected) {
-      this.dirtySelected = true;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.selected = this.selected;
-    }
-  }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  set value(next) {
-    const newValue = `${next ?? ""}`;
-    this._value = newValue;
-    this.dirtyValue = true;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = newValue;
-    }
-    defineVividComponent.Observable.notify(this, "value");
-  }
-  get value() {
-    defineVividComponent.Observable.track(this, "value");
-    return this._value ?? this.text;
-  }
-  get form() {
-    return null;
-  }
-  /**
-   * @internal
-   */
-  get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
-  }
-}
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "checked");
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "defaultSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "selected");
-__decorateClass([
-  defineVividComponent.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
-__decorateClass([
-  defineVividComponent.attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label");
-__decorateClass([
-  defineVividComponent.attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "_highlighted");
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "_displayCheckmark");
-__decorateClass([
-  defineVividComponent.observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  defineVividComponent.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
-
 const getClasses = (x) => classNames.classNames(
   "base",
   ["disabled", x.disabled],
@@ -216,7 +18,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 +31,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 +45,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,18 +54,16 @@ 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,
+  option.ListboxOption,
   ListboxOptionTemplate,
   [definition.iconDefinition],
   {
     styles
   }
 );
-const registerOption = defineVividComponent.createRegisterFunction(listboxOptionDefinition);
+const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
 
-exports.ListboxOption = ListboxOption;
-exports.isListboxOption = isListboxOption;
 exports.listboxOptionDefinition = listboxOptionDefinition;
 exports.registerOption = registerOption;

package/shared/definition35.js

@@ -1,208 +1,10 @@
 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 { 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 { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { L as ListboxOption } from './option.js';
+import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function isListboxOption(el) {
-  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
-}
-class ListboxOption extends VividElement {
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._matchedRange = null;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.initialValue = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  /**
-   * Updates the ariaChecked property when the checked property changes.
-   *
-   * @param _ - the previous checked value
-   * @param next - the current checked value
-   *
-   * @public
-   */
-  checkedChanged(_, next) {
-    if (typeof next === "boolean") {
-      this.ariaChecked = next ? "true" : "false";
-      return;
-    }
-    this.ariaChecked = null;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
-      }
-    }
-  }
-  disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.disabled = this.disabled;
-    }
-  }
-  selectedAttributeChanged() {
-    this.defaultSelected = this.selectedAttribute;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.defaultSelected = this.defaultSelected;
-    }
-  }
-  selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
-    if (!this.dirtySelected) {
-      this.dirtySelected = true;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.selected = this.selected;
-    }
-  }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  set value(next) {
-    const newValue = `${next ?? ""}`;
-    this._value = newValue;
-    this.dirtyValue = true;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = newValue;
-    }
-    Observable.notify(this, "value");
-  }
-  get value() {
-    Observable.track(this, "value");
-    return this._value ?? this.text;
-  }
-  get form() {
-    return null;
-  }
-  /**
-   * @internal
-   */
-  get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
-  }
-}
-__decorateClass([
-  observable
-], ListboxOption.prototype, "checked");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "defaultSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "selected");
-__decorateClass([
-  attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
-__decorateClass([
-  attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label");
-__decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_highlighted");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_displayCheckmark");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
-
 const getClasses = (x) => classNames(
   "base",
   ["disabled", x.disabled],
@@ -261,4 +63,4 @@ const listboxOptionDefinition = defineVividComponent(
 );
 const registerOption = createRegisterFunction(listboxOptionDefinition);
 
-export { ListboxOption as L, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
+export { listboxOptionDefinition as l, registerOption as r };

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';