@vonage/vivid 4.13.0 → 4.14.1

package/shared/localized.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const locales_enUS = require('../locales/en-US.cjs');
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,7 +18,7 @@ class CurrentLocale {
   }
 }
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], CurrentLocale.prototype, "locale");
 const currentLocale = new CurrentLocale();
 const setLocale = (locale) => {

package/shared/localized.js

@@ -1,5 +1,5 @@
 import enUS from '../locales/en-US.js';
-import { o as observable } from './index.js';
+import { o as observable } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/numbers.cjs

@@ -21,6 +21,18 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
 
+exports.inRange = inRange;
 exports.limit = limit;
 exports.wrapInBounds = wrapInBounds;

package/shared/numbers.js

@@ -19,5 +19,16 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
 
-export { limit as l, wrapInBounds as w };
+export { inRange as i, limit as l, wrapInBounds as w };

package/shared/patterns/affix.d.ts

@@ -1,5 +1,5 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../design-system/defineVividComponent';
 export declare class AffixIcon {
     icon?: string;
 }
@@ -14,6 +14,6 @@ export declare const IconAriaHidden: {
     Hidden: string;
     Visible: string;
 };
-type affixIconTemplateFactoryReturnType = (context: ElementDefinitionContext) => (icon?: string, slottedState?: boolean, ariaHidden?: string) => ViewTemplate<AffixIcon> | null;
+type affixIconTemplateFactoryReturnType = (context: VividElementDefinitionContext) => (icon?: string, slottedState?: boolean, ariaHidden?: string) => ViewTemplate<AffixIcon> | null;
 export declare const affixIconTemplateFactory: affixIconTemplateFactoryReturnType;
 export {};

package/shared/patterns/chevron.d.ts

@@ -1,2 +1,2 @@
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-export declare const chevronTemplateFactory: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<any, any>;
+import type { VividElementDefinitionContext } from '../design-system/defineVividComponent';
+export declare const chevronTemplateFactory: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<any, any>;

package/shared/patterns/form-elements/form-elements.d.ts

@@ -1,4 +1,4 @@
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../design-system/defineVividComponent';
 export interface FormElement {
     errorValidationMessage: string;
     label: string;
@@ -43,7 +43,7 @@ export declare function formElements<T extends {
         validate: () => void;
     };
 } & T;
-export declare function getFeedbackTemplate(context: ElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<Partial<FormElement & FormElementHelperText & FormElementSuccessText & ErrorText>, any>;
+export declare function getFeedbackTemplate(context: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<Partial<FormElement & FormElementHelperText & FormElementSuccessText & ErrorText>, any>;
 export declare function errorText<T extends {
     new (...args: any[]): Record<string, any>;
 }>(constructor: T): {

package/shared/presentationDate.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 const definition$1 = require('./definition11.cjs');
-const definition = require('./definition64.cjs');
+const definition = require('./definition63.cjs');
 const textField = require('./text-field2.cjs');
 const definition$2 = require('./definition22.cjs');
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
-const index$1 = require('./index2.cjs');
+const index = require('./index.cjs');
 const formAssociated = require('./form-associated.cjs');
 const trappedFocus = require('./trapped-focus.cjs');
 const formElements = require('./form-elements.cjs');
@@ -5525,11 +5525,11 @@ const areMonthsEqual = (a, b) => compareMonths(a, b) === 0;
 const monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(month + 1).toString().padStart(2, "0")}`;
 
 function renderDialogHeader(context) {
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`<div class="header">
+  const buttonTag = context.tagFor(definition$1.Button);
+  return vividElement.html`<div class="header">
 		${when.when(
     (x) => x.prevYearButton,
-    index.html`
+    vividElement.html`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -5543,7 +5543,7 @@ function renderDialogHeader(context) {
   )}
 		${when.when(
     (x) => x.prevMonthButton,
-    index.html`
+    vividElement.html`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -5558,7 +5558,7 @@ function renderDialogHeader(context) {
 		<div class="title">
 			${when.when(
     (x) => x.titleClickable,
-    index.html`
+    vividElement.html`
 					<button
 						tabindex="1"
 						id="${(x) => `grid-label-${x.id}`}"
@@ -5572,7 +5572,7 @@ function renderDialogHeader(context) {
   )}
 			${when.when(
     (x) => !x.titleClickable,
-    index.html`
+    vividElement.html`
 					<div
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action"
@@ -5586,7 +5586,7 @@ function renderDialogHeader(context) {
 
 		${when.when(
     (x) => x.nextMonthButton,
-    index.html`
+    vividElement.html`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -5600,7 +5600,7 @@ function renderDialogHeader(context) {
   )}
 		${when.when(
     (x) => x.nextYearButton,
-    index.html`
+    vividElement.html`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -5616,7 +5616,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(definition$2.Divider);
-  return index.html`<div
+  return vividElement.html`<div
 		class="calendar"
 		role="grid"
 		aria-labelledby="${(x) => `grid-label-${x.id}`}"
@@ -5624,7 +5624,7 @@ function renderCalendarGrid(context) {
 		<div class="calendar-weekdays" role="row">
 			${repeat.repeat(
     (x) => x.calendar.weekdays,
-    index.html`
+    vividElement.html`
 					<div
 						class="calendar-weekday"
 						role="columnheader"
@@ -5638,17 +5638,17 @@ function renderCalendarGrid(context) {
 		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
 		${repeat.repeat(
     (x) => x.calendar.grid,
-    index.html` <div class="calendar-week" role="row">
+    vividElement.html` <div class="calendar-week" role="row">
 				${repeat.repeat(
       (x) => x,
-      index.html`
+      vividElement.html`
 			${when.when(
         (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
-        index.html`<div class="calendar-day"></div>`
+        vividElement.html`<div class="calendar-day"></div>`
       )}
 			${when.when(
         (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
-        index.html` <span role="gridcell">
+        vividElement.html` <span role="gridcell">
 					<button
 						class="${(x, c) => classNames.classNames(
           "calendar-day",
@@ -5706,7 +5706,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(definition$2.Divider);
-  return index.html`
+  return vividElement.html`
 		<${dividerTag}
 			class="months-separator"
 			role="presentation"
@@ -5718,11 +5718,11 @@ function renderMonthPickerGrid(context) {
 	>
 		${repeat.repeat(
     (x) => x.months,
-    index.html`
+    vividElement.html`
 				<div class="months-row" role="row">
 					${repeat.repeat(
       (x) => x,
-      index.html`
+      vividElement.html`
 							<span role="gridcell">
 								<button
 									class="${(x, c) => classNames.classNames(
@@ -5777,11 +5777,11 @@ function renderMonthPickerGrid(context) {
   )}
 	</div>`;
 }
-const DatePickerBaseTemplate = (context, _) => {
+const DatePickerBaseTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
   const textFieldTag = context.tagFor(textField.TextField);
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
+  const buttonTag = context.tagFor(definition$1.Button);
+  return vividElement.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
 		<${textFieldTag} id="text-field"
 										 ${ref.ref("_textFieldEl")}
 										 class="control"
@@ -5824,15 +5824,15 @@ const DatePickerBaseTemplate = (context, _) => {
 				<div class="segments">
 					${repeat.repeat(
     (x) => x._segments,
-    index.html` <div class="segment">
+    vividElement.html` <div class="segment">
 							${renderDialogHeader(context)}
 							${when.when(
       (x) => x.type === "month-picker",
-      index.html`${renderMonthPickerGrid(context)}`
+      vividElement.html`${renderMonthPickerGrid(context)}`
     )}
 							${when.when(
       (x) => x.type === "calendar",
-      index.html`${renderCalendarGrid(context)}`
+      vividElement.html`${renderCalendarGrid(context)}`
     )}
 						</div>`
   )}
@@ -5937,7 +5937,7 @@ const yearOfDate = (dateStr) => {
   return date.getFullYear();
 };
 
-class _DatePickerBase extends index.FoundationElement {
+class _DatePickerBase extends vividElement.VividElement {
 }
 class FormAssociatedDatePickerBase extends formAssociated.FormAssociated(
   _DatePickerBase
@@ -6087,11 +6087,11 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
-    this.#localeChangeObserver = index.Observable.binding(
+    this.#localeChangeObserver = vividElement.Observable.binding(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, index.defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, vividElement.defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -6134,7 +6134,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
    * @internal
    */
   _onBaseKeyDown(event) {
-    if (this._popupOpen && index$1.handleEscapeKeyAndStopPropogation(event)) {
+    if (this._popupOpen && index.handleEscapeKeyAndStopPropogation(event)) {
       this._closePopup();
       return false;
     }
@@ -6171,7 +6171,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
       this._closePopup();
     } else {
       this.#openPopupIfPossible();
-      index.DOM.processUpdates();
+      vividElement.DOM.processUpdates();
       const tabbableDate = this.shadowRoot.querySelector(
         `[data-date="${this._tabbableDate}"]`
       );
@@ -6339,7 +6339,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     if (newDate && this._isDateInValidRange(newDate)) {
       if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-        index.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
       }
       this._dialogEl.querySelector(
         `[data-date="${newDate}"]`
@@ -6405,7 +6405,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     if (newMonth && this._isMonthInValidRange(newMonth)) {
       if (newMonth.year !== this._monthPickerYear) {
         this._monthPickerYear = newMonth.year;
-        index.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
       }
       this._dialogEl.querySelector(
         `[data-month="${monthToStr(newMonth)}"]`
@@ -6449,52 +6449,52 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
   }
 }
 __decorateClass([
-  index.attr({ converter: ValidDateFilter })
+  vividElement.attr({ converter: ValidDateFilter })
 ], DatePickerBase.prototype, "min", 2);
 __decorateClass([
-  index.attr({ converter: ValidDateFilter })
+  vividElement.attr({ converter: ValidDateFilter })
 ], DatePickerBase.prototype, "max", 2);
 __decorateClass([
-  index.attr({ attribute: "value" })
+  vividElement.attr({ attribute: "value" })
 ], DatePickerBase.prototype, "initialValue", 2);
 __decorateClass([
-  index.attr({ attribute: "current-value" })
+  vividElement.attr({ attribute: "current-value" })
 ], DatePickerBase.prototype, "currentValue", 2);
 __decorateClass([
-  index.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], DatePickerBase.prototype, "readOnly", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_selectedMonth", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_popupOpen", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_presentationValue", 2);
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_isPrevYearDisabled", 1);
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_isNextYearDisabled", 1);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_numCalendars", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_lastFocussedDate", 2);
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_tabbableDate", 1);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_monthPickerYear", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_lastFocussedMonth", 2);
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_tabbableMonth", 1);
 applyMixinsWithObservables.applyMixinsWithObservables(
   DatePickerBase,

package/shared/presentationDate.js

@@ -1,15 +1,15 @@
-import { c as Button } from './definition11.js';
-import { P as Popup } from './definition64.js';
+import { B as Button } from './definition11.js';
+import { P as Popup } from './definition63.js';
 import { T as TextField } from './text-field2.js';
 import { D as Divider } from './definition22.js';
-import { h as html, F as FoundationElement, O as Observable, g as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
+import { h as html, V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { F as FormAssociated } from './form-associated.js';
 import { T as TrappedFocus } from './trapped-focus.js';
 import { a as FormElementHelperText } from './form-elements.js';
@@ -5775,7 +5775,7 @@ function renderMonthPickerGrid(context) {
   )}
 	</div>`;
 }
-const DatePickerBaseTemplate = (context, _) => {
+const DatePickerBaseTemplate = (context) => {
   const popupTag = context.tagFor(Popup);
   const textFieldTag = context.tagFor(TextField);
   const buttonTag = context.tagFor(Button);
@@ -5935,7 +5935,7 @@ const yearOfDate = (dateStr) => {
   return date.getFullYear();
 };
 
-class _DatePickerBase extends FoundationElement {
+class _DatePickerBase extends VividElement {
 }
 class FormAssociatedDatePickerBase extends FormAssociated(
   _DatePickerBase

package/shared/ref.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * The runtime behavior for template references.
@@ -37,7 +37,7 @@ class RefBehavior {
  * @public
  */
 function ref(propertyName) {
-    return new index.AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
 }
 
 exports.ref = ref;

package/shared/ref.js

@@ -1,4 +1,4 @@
-import { b as AttachedBehaviorHTMLDirective } from './index.js';
+import { b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
 /**
  * The runtime behavior for template references.

package/shared/repeat.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /** @internal */
 function newSplice(index, removed, addedCount) {
@@ -188,7 +188,7 @@ function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     currentEnd -= suffixCount;
     oldEnd -= suffixCount;
     if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
-        return index.emptyArray;
+        return vividElement.emptyArray;
     }
     if (currentStart === currentEnd) {
         const splice = newSplice(currentStart, [], 0);
@@ -203,7 +203,7 @@ function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
     const splices = [];
     let splice = void 0;
-    let index$1 = currentStart;
+    let index = currentStart;
     let oldIndex = oldStart;
     for (let i = 0; i < ops.length; ++i) {
         switch (ops[i]) {
@@ -212,28 +212,28 @@ function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
                     splices.push(splice);
                     splice = void 0;
                 }
-                index$1++;
+                index++;
                 oldIndex++;
                 break;
             case EDIT_UPDATE:
                 if (splice === void 0) {
-                    splice = newSplice(index$1, [], 0);
+                    splice = newSplice(index, [], 0);
                 }
                 splice.addedCount++;
-                index$1++;
+                index++;
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
                 break;
             case EDIT_ADD:
                 if (splice === void 0) {
-                    splice = newSplice(index$1, [], 0);
+                    splice = newSplice(index, [], 0);
                 }
                 splice.addedCount++;
-                index$1++;
+                index++;
                 break;
             case EDIT_DELETE:
                 if (splice === void 0) {
-                    splice = newSplice(index$1, [], 0);
+                    splice = newSplice(index, [], 0);
                 }
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
@@ -345,7 +345,7 @@ function adjustIndex(changeRecord, array) {
     changeRecord.index = index;
     return changeRecord;
 }
-class ArrayObserver extends index.SubscriberSet {
+class ArrayObserver extends vividElement.SubscriberSet {
     constructor(source) {
         super(source);
         this.oldCollection = void 0;
@@ -370,14 +370,14 @@ class ArrayObserver extends index.SubscriberSet {
         }
         if (this.needsQueue) {
             this.needsQueue = false;
-            index.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     reset(oldCollection) {
         this.oldCollection = oldCollection;
         if (this.needsQueue) {
             this.needsQueue = false;
-            index.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     flush() {
@@ -410,7 +410,7 @@ function enableArrayObservation() {
         return;
     }
     arrayObservationEnabled = true;
-    index.Observable.setArrayObserverFactory((collection) => {
+    vividElement.Observable.setArrayObserverFactory((collection) => {
         return new ArrayObserver(collection);
     });
     const proto = Array.prototype;
@@ -541,8 +541,8 @@ class RepeatBehavior {
         this.originalContext = void 0;
         this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = index.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = index.Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+        this.itemsBindingObserver = vividElement.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+        this.templateBindingObserver = vividElement.Observable.binding(templateBinding, this, isTemplateBindingVolatile);
         if (options.positioning) {
             this.bindView = bindWithPositioning;
         }
@@ -594,11 +594,11 @@ class RepeatBehavior {
     }
     observeItems(force = false) {
         if (!this.items) {
-            this.items = index.emptyArray;
+            this.items = vividElement.emptyArray;
             return;
         }
         const oldObserver = this.itemsObserver;
-        const newObserver = (this.itemsObserver = index.Observable.getNotifier(this.items));
+        const newObserver = (this.itemsObserver = vividElement.Observable.getNotifier(this.items));
         const hasNewObserver = oldObserver !== newObserver;
         if (hasNewObserver && oldObserver !== null) {
             oldObserver.unsubscribe(this);
@@ -674,7 +674,7 @@ class RepeatBehavior {
         let viewsLength = views.length;
         if (itemsLength === 0 || templateChanged || !this.options.recycle) {
             // all views need to be removed
-            index.HTMLView.disposeContiguousBatch(views);
+            vividElement.HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
         }
         if (viewsLength === 0) {
@@ -719,7 +719,7 @@ class RepeatBehavior {
  * A directive that configures list rendering.
  * @public
  */
-class RepeatDirective extends index.HTMLDirective {
+class RepeatDirective extends vividElement.HTMLDirective {
     /**
      * Creates an instance of RepeatDirective.
      * @param itemsBinding - The binding that provides the array to render.
@@ -735,10 +735,10 @@ class RepeatDirective extends index.HTMLDirective {
          * Creates a placeholder string based on the directive's index within the template.
          * @param index - The index of the directive within the template.
          */
-        this.createPlaceholder = index.DOM.createBlockPlaceholder;
+        this.createPlaceholder = vividElement.DOM.createBlockPlaceholder;
         enableArrayObservation();
-        this.isItemsBindingVolatile = index.Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = index.Observable.isVolatileBinding(templateBinding);
+        this.isItemsBindingVolatile = vividElement.Observable.isVolatileBinding(itemsBinding);
+        this.isTemplateBindingVolatile = vividElement.Observable.isVolatileBinding(templateBinding);
     }
     /**
      * Creates a behavior for the provided target node.

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView } from './index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, g as HTMLView } from './vivid-element.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/shared/slider.template.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const numbers = require('./numbers.cjs');
-const definition = require('./definition64.cjs');
-const index = require('./index.cjs');
+const definition = require('./definition63.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const aria = require('./aria.cjs');
 const when = require('./when.cjs');
@@ -35,7 +35,7 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
 const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return index.html` <div
+  return vividElement.html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -45,7 +45,7 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 };
 const SliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
-  return index.html`<template
+  return vividElement.html`<template
 		role="${(x) => x.ariaLabel ? "presentation" : null}"
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
@@ -77,7 +77,7 @@ const SliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    index.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate