@vonage/vivid 4.14.0 → 4.14.1

package/custom-elements.json

@@ -2803,6 +2803,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Specifies extra information about the button. This information is typically used by browsers to display a tooltip.",
               "default": "''"
             },
             {
@@ -3226,7 +3227,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines if the element should receive document focus on page load.",
+              "description": "Specifies extra information about the button. This information is typically used by browsers to display a tooltip.",
               "fieldName": "title",
               "default": "''",
               "inheritedFrom": {
@@ -8150,6 +8151,13 @@
               },
               "description": "toggles the elevation's shadow.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "notRelative",
+              "type": {
+                "text": "boolean | undefined"
+              }
             }
           ],
           "attributes": [
@@ -8168,6 +8176,13 @@
               },
               "description": "toggles the elevation's shadow.",
               "fieldName": "noShadow"
+            },
+            {
+              "name": "not-relative",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "notRelative"
             }
           ],
           "superclass": {
@@ -13583,6 +13598,29 @@
             {
               "kind": "field",
               "name": "proxy"
+            },
+            {
+              "kind": "field",
+              "name": "#radioSiblings",
+              "privacy": "private",
+              "type": {
+                "text": "_Radio[]"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#validateValueMissingWithSiblings",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#syncSiblingsRequiredValidationStatus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validate"
             }
           ],
           "mixins": [
@@ -13727,6 +13765,45 @@
                 "name": "FormAssociatedRadio",
                 "module": "libs/components/src/lib/radio/radio.form-associated.ts"
               }
+            },
+            {
+              "kind": "field",
+              "name": "#radioSiblings",
+              "privacy": "private",
+              "type": {
+                "text": "_Radio[]"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#validateValueMissingWithSiblings",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#syncSiblingsRequiredValidationStatus",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validate",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
             }
           ],
           "events": [
@@ -13770,6 +13847,14 @@
               },
               "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
               "fieldName": "readOnly"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the radio. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute for more info.",
+              "fieldName": "name"
             }
           ],
           "superclass": {
@@ -18374,6 +18459,11 @@
               "description": "The id of the active tab",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "#isLastTabSelectedAfterRemove",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "activeindicator",
@@ -18505,18 +18595,13 @@
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "isHorizontal",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
+              "kind": "field",
+              "name": "#isHorizontal",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleTabKeyDown",
+              "name": "#handleTabKeyDown",
               "privacy": "private"
             },
             {
@@ -18562,7 +18647,7 @@
             },
             {
               "kind": "field",
-              "name": "moveToTabByIndex",
+              "name": "#moveToTabByIndex",
               "privacy": "private"
             },
             {
@@ -18623,6 +18708,16 @@
               "kind": "method",
               "name": "#updateScrollStatus"
             },
+            {
+              "kind": "field",
+              "name": "#shouldMoveIndicator",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#patchIndicatorStyleTransition"
+            },
             {
               "kind": "field",
               "name": "#resizeObserver",
@@ -18663,13 +18758,25 @@
             },
             {
               "kind": "method",
-              "name": "handleActiveIndicatorPosition",
-              "privacy": "private"
+              "name": "#handleActiveIndicatorPosition",
+              "parameters": [
+                {
+                  "name": "animate",
+                  "default": "true"
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "animateActiveIndicator",
-              "privacy": "private"
+              "name": "#animateActiveIndicator",
+              "parameters": [
+                {
+                  "name": "animate",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -19311,8 +19418,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "name": "text-anchor"
@@ -21382,8 +21489,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
@@ -21596,8 +21703,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
@@ -23596,8 +23703,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           }
         }
       ],

package/lib/elevation/elevation.d.ts

@@ -2,4 +2,5 @@ import { VividElement } from '../../shared/foundation/vivid-element/vivid-elemen
 export declare class Elevation extends VividElement {
     dp?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
     noShadow?: boolean;
+    notRelative?: boolean;
 }

package/lib/radio/radio.form-associated.d.ts

@@ -6,6 +6,8 @@ interface _Radio extends CheckableFormAssociated {
 }
 declare const FormAssociatedRadio_base: typeof _Radio;
 export declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    #private;
     proxy: HTMLInputElement;
+    validate: (anchor?: HTMLElement) => void;
 }
 export {};

package/lib/tabs/tabs.d.ts

@@ -25,12 +25,9 @@ export declare class Tabs extends VividElement {
     private getTabPanelIds;
     private setComponent;
     private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
     adjust(adjustment: number): void;
     private adjustForward;
     private adjustBackward;
-    private moveToTabByIndex;
     private focusTab;
     tablist?: HTMLElement;
     connotation?: TabsConnotation;
@@ -39,6 +36,4 @@ export declare class Tabs extends VividElement {
     tabsLayout?: 'align-start' | 'stretch';
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleActiveIndicatorPosition;
-    private animateActiveIndicator;
 }

package/lib/text-anchor/text-anchor.d.ts

@@ -1,10 +1,10 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Anchor } from '../../shared/foundation/anchor/anchor';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export type TextAnchorConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type TextAnchorAppearance = Extract<Appearance, Appearance.Ghost | Appearance.GhostLight>;
-export declare class TextAnchor extends FoundationElement {
+export declare class TextAnchor extends VividElement {
     text?: string;
     connotation?: TextAnchorConnotation;
     appearance?: TextAnchorAppearance;

package/lib/tree-item/tree-item.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function isTreeItemElement(el: Element): el is HTMLElement;
-export declare class TreeItem extends FoundationElement {
+export declare class TreeItem extends VividElement {
     text?: string;
     expanded: boolean;
     expandedChanged(): void;

package/lib/tree-view/tree-view.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { TreeItem } from '../tree-item/tree-item.js';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function getDisplayedNodes(rootNode: HTMLElement, selector: string): HTMLElement[];
-export declare class TreeView extends FoundationElement {
+export declare class TreeView extends VividElement {
     renderCollapsedNodes: boolean;
     currentSelected: HTMLElement | TreeItem | null;
     slottedTreeItemsChanged(): void;

package/listbox/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('../shared/definition35.cjs');
-const defineVividComponent = require('../shared/defineVividComponent.cjs');
+const vividElement = require('../shared/vivid-element.cjs');
 const listbox = require('../shared/listbox2.cjs');
 const slotted = require('../shared/slotted.cjs');
 const classNames = require('../shared/class-names.cjs');
@@ -13,7 +13,7 @@ const getClasses = ({ appearance, shape, disabled, orientation }) => classNames.
   [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
   [`orientation-${orientation}`, Boolean(orientation)]
 );
-const ListboxTemplate = defineVividComponent.html`
+const ListboxTemplate = vividElement.html`
 	<template
 		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
 		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
@@ -40,7 +40,7 @@ const ListboxTemplate = defineVividComponent.html`
 
 const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
-const listboxDefinition = defineVividComponent.defineVividComponent(
+const listboxDefinition = vividElement.defineVividComponent(
   "listbox",
   listbox.Listbox,
   ListboxTemplate,
@@ -49,6 +49,6 @@ const listboxDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerListbox = defineVividComponent.createRegisterFunction(listboxDefinition);
+const registerListbox = vividElement.createRegisterFunction(listboxDefinition);
 
 registerListbox();

package/listbox/index.js

@@ -1,5 +1,5 @@
 import { l as listboxOptionDefinition } from '../shared/definition35.js';
-import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/defineVividComponent.js';
+import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/vivid-element.js';
 import { L as ListboxElement, a as Listbox } from '../shared/listbox2.js';
 import { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.14.0",
+	"version": "4.14.1",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/affix.cjs

@@ -2,7 +2,7 @@
 
 const definition = require('./definition27.cjs');
 const slotted = require('./slotted.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,10 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 class AffixIcon {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], AffixIcon.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], AffixIcon.prototype, "iconSlottedContent");
 class AffixIconWithTrailing extends AffixIcon {
   constructor() {
@@ -28,7 +28,7 @@ class AffixIconWithTrailing extends AffixIcon {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean",
     attribute: "icon-trailing"
   })
@@ -45,7 +45,7 @@ const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
     if (!icon && !slottedState) {
-      return defineVividComponent.html`<slot
+      return vividElement.html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
 				${slotted.slotted("iconSlottedContent")}
@@ -54,10 +54,10 @@ const affixIconTemplateFactory = (context) => {
     if (!icon && slottedState) {
       return null;
     }
-    const iconTemplate = defineVividComponent.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? defineVividComponent.html`<span class="icon" aria-hidden="${() => ariaHidden}"
+    const iconTemplate = vividElement.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
+    return slottedState ? vividElement.html`<span class="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</span
-			  >` : defineVividComponent.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+			  >` : vividElement.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</slot
 			  >`;
   };

package/shared/affix.js

@@ -1,6 +1,6 @@
 import { I as Icon } from './definition27.js';
 import { s as slotted } from './slotted.js';
-import { a as attr, h as html } from './defineVividComponent.js';
+import { a as attr, h as html } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/anchor.cjs

@@ -2,7 +2,7 @@
 
 const ariaGlobal = require('./aria-global.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,41 +17,41 @@ class Anchor {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "download");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "href");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "hreflang");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "ping");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "referrerpolicy");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "rel");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "target");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Anchor.prototype, "type");
 class DelegatesARIALink {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-expanded" })
+  vividElement.attr({ attribute: "aria-expanded" })
 ], DelegatesARIALink.prototype, "ariaExpanded");
 applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(Anchor, DelegatesARIALink);

package/shared/anchor.js

@@ -1,6 +1,6 @@
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { a as attr } from './defineVividComponent.js';
+import { a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/anchored.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const slotted = require('./slotted.cjs');
 
 var __defProp = Object.defineProperty;
@@ -27,7 +27,7 @@ function anchored(constructor) {
       const isOccupied = Boolean(
         this._slottedAnchor && this._slottedAnchor.length > 0
       );
-      defineVividComponent.DOM.setBooleanAttribute(
+      vividElement.DOM.setBooleanAttribute(
         this,
         "slotted-anchor",
         isOccupied
@@ -79,17 +79,17 @@ function anchored(constructor) {
     }
   }
   __decorateClass([
-    defineVividComponent.attr
+    vividElement.attr
   ], Decorated.prototype, "anchor");
   __decorateClass([
-    defineVividComponent.observable
+    vividElement.observable
   ], Decorated.prototype, "_slottedAnchor");
   __decorateClass([
-    defineVividComponent.observable
+    vividElement.observable
   ], Decorated.prototype, "_anchorEl");
   return Decorated;
 }
-const anchorSlotTemplateFactory = () => defineVividComponent.html`<slot name="anchor" ${slotted.slotted("_slottedAnchor")}></slot>`;
+const anchorSlotTemplateFactory = () => vividElement.html`<slot name="anchor" ${slotted.slotted("_slottedAnchor")}></slot>`;
 
 exports.anchorSlotTemplateFactory = anchorSlotTemplateFactory;
 exports.anchored = anchored;

package/shared/anchored.js

@@ -1,4 +1,4 @@
-import { h as html, a as attr, o as observable, D as DOM } from './defineVividComponent.js';
+import { h as html, a as attr, o as observable, D as DOM } from './vivid-element.js';
 import { s as slotted } from './slotted.js';
 
 var __defProp = Object.defineProperty;

package/shared/apply-mixins.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 function applyMixins(derivedCtor, ...baseCtors) {
-  const derivedAttributes = defineVividComponent.AttributeConfiguration.locate(derivedCtor);
+  const derivedAttributes = vividElement.AttributeConfiguration.locate(derivedCtor);
   baseCtors.forEach((baseCtor) => {
     Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
       if (name !== "constructor") {
@@ -15,7 +15,7 @@ function applyMixins(derivedCtor, ...baseCtors) {
         );
       }
     });
-    const baseAttributes = defineVividComponent.AttributeConfiguration.locate(baseCtor);
+    const baseAttributes = vividElement.AttributeConfiguration.locate(baseCtor);
     baseAttributes.forEach((x) => derivedAttributes.push(x));
   });
 }

package/shared/apply-mixins.js

@@ -1,4 +1,4 @@
-import { A as AttributeConfiguration } from './defineVividComponent.js';
+import { A as AttributeConfiguration } from './vivid-element.js';
 
 function applyMixins(derivedCtor, ...baseCtors) {
   const derivedAttributes = AttributeConfiguration.locate(derivedCtor);

package/shared/apply-mixins2.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * Apply mixins to a constructor.
@@ -8,7 +8,7 @@ const defineVividComponent = require('./defineVividComponent.cjs');
  * @public
  */
 function applyMixins(derivedCtor, ...baseCtors) {
-    const derivedAttributes = defineVividComponent.AttributeConfiguration.locate(derivedCtor);
+    const derivedAttributes = vividElement.AttributeConfiguration.locate(derivedCtor);
     baseCtors.forEach(baseCtor => {
         Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
             if (name !== "constructor") {
@@ -17,7 +17,7 @@ function applyMixins(derivedCtor, ...baseCtors) {
                 Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
             }
         });
-        const baseAttributes = defineVividComponent.AttributeConfiguration.locate(baseCtor);
+        const baseAttributes = vividElement.AttributeConfiguration.locate(baseCtor);
         baseAttributes.forEach(x => derivedAttributes.push(x));
     });
 }

package/shared/apply-mixins2.js

@@ -1,4 +1,4 @@
-import { A as AttributeConfiguration } from './defineVividComponent.js';
+import { A as AttributeConfiguration } from './vivid-element.js';
 
 /**
  * Apply mixins to a constructor.

package/shared/applyMixinsWithObservables.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 const applyMixins = require('./apply-mixins2.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 function applyMixinsWithObservables(derivedCtor, ...baseCtors) {
   applyMixins.applyMixins(derivedCtor, ...baseCtors);
   baseCtors.forEach((baseCtor) => {
-    defineVividComponent.Observable.getAccessors(baseCtor.prototype).forEach((accessor) => {
-      defineVividComponent.Observable.defineProperty(derivedCtor.prototype, accessor.name);
+    vividElement.Observable.getAccessors(baseCtor.prototype).forEach((accessor) => {
+      vividElement.Observable.defineProperty(derivedCtor.prototype, accessor.name);
     });
   });
 }