@vonage/vivid 4.14.0 → 4.14.2

package/shared/presentationDate.cjs

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

package/shared/presentationDate.js

@@ -2,7 +2,7 @@ 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, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './defineVividComponent.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';
@@ -11,7 +11,6 @@ import { c as classNames } from './class-names.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { T as TrappedFocus } from './trapped-focus.js';
 import { a as FormElementHelperText } from './form-elements.js';
 import { L as Localized } from './localized.js';

package/shared/ref.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.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 defineVividComponent.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 './defineVividComponent.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 defineVividComponent = require('./defineVividComponent.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 defineVividComponent.emptyArray;
+        return vividElement.emptyArray;
     }
     if (currentStart === currentEnd) {
         const splice = newSplice(currentStart, [], 0);
@@ -345,7 +345,7 @@ function adjustIndex(changeRecord, array) {
     changeRecord.index = index;
     return changeRecord;
 }
-class ArrayObserver extends defineVividComponent.SubscriberSet {
+class ArrayObserver extends vividElement.SubscriberSet {
     constructor(source) {
         super(source);
         this.oldCollection = void 0;
@@ -370,14 +370,14 @@ class ArrayObserver extends defineVividComponent.SubscriberSet {
         }
         if (this.needsQueue) {
             this.needsQueue = false;
-            defineVividComponent.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     reset(oldCollection) {
         this.oldCollection = oldCollection;
         if (this.needsQueue) {
             this.needsQueue = false;
-            defineVividComponent.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     flush() {
@@ -410,7 +410,7 @@ function enableArrayObservation() {
         return;
     }
     arrayObservationEnabled = true;
-    defineVividComponent.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 = defineVividComponent.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = defineVividComponent.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 = defineVividComponent.emptyArray;
+            this.items = vividElement.emptyArray;
             return;
         }
         const oldObserver = this.itemsObserver;
-        const newObserver = (this.itemsObserver = defineVividComponent.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
-            defineVividComponent.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 defineVividComponent.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 defineVividComponent.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 = defineVividComponent.DOM.createBlockPlaceholder;
+        this.createPlaceholder = vividElement.DOM.createBlockPlaceholder;
         enableArrayObservation();
-        this.isItemsBindingVolatile = defineVividComponent.Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = defineVividComponent.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, g as HTMLView } from './defineVividComponent.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

@@ -2,7 +2,7 @@
 
 const numbers = require('./numbers.cjs');
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.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 defineVividComponent.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 defineVividComponent.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,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate

package/shared/slider.template.js

@@ -1,6 +1,6 @@
 import { l as limit } from './numbers.js';
 import { P as Popup, a as PlacementStrategy } from './definition63.js';
-import { h as html } from './defineVividComponent.js';
+import { h as html } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';

package/shared/slotted.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -39,7 +39,7 @@ class NodeObservationBehavior {
      */
     bind(source) {
         const name = this.options.property;
-        this.shouldUpdate = defineVividComponent.Observable.getAccessors(source).some((x) => x.name === name);
+        this.shouldUpdate = vividElement.Observable.getAccessors(source).some((x) => x.name === name);
         this.source = source;
         this.updateTarget(this.computeNodes());
         if (this.shouldUpdate) {
@@ -51,7 +51,7 @@ class NodeObservationBehavior {
      * @param source - The source to unbind from.
      */
     unbind() {
-        this.updateTarget(defineVividComponent.emptyArray);
+        this.updateTarget(vividElement.emptyArray);
         this.source = null;
         if (this.shouldUpdate) {
             this.disconnect();
@@ -115,7 +115,7 @@ function slotted(propertyOrOptions) {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = { property: propertyOrOptions };
     }
-    return new defineVividComponent.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
 }
 
 exports.NodeObservationBehavior = NodeObservationBehavior;

package/shared/slotted.js

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './defineVividComponent.js';
+import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/shared/start-end.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const ref = require('./ref.cjs');
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+vividElement.html `
+    <span part="end" ${ref.ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref.ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+vividElement.html `
+    <span part="start" ${ref.ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref.ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+exports.StartEnd = StartEnd;

package/shared/start-end.js

@@ -0,0 +1,50 @@
+import { h as html } from './vivid-element.js';
+import { r as ref } from './ref.js';
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+export { StartEnd as S };

package/shared/text-anchor.cjs

@@ -3,8 +3,7 @@
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const anchor = require('./anchor.cjs');
-const foundationElement = require('./foundation-element.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends foundationElement.FoundationElement {
+class TextAnchor extends vividElement.VividElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -25,13 +24,13 @@ class TextAnchor extends foundationElement.FoundationElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "appearance");
 applyMixins.applyMixins(TextAnchor, affix.AffixIcon, anchor.Anchor);