@vonage/vivid 4.24.0 → 4.26.0

package/shared/picker-field.template.cjs

@@ -1,13 +1,14 @@
 'use strict';
 
 const index = require('./index.cjs');
-const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const mixins = require('./mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
-const formElements = require('./form-elements.cjs');
+const withErrorText = require('./with-error-text.cjs');
+const formElement = require('./form-element.cjs');
 const localized = require('./localized.cjs');
-const definition = require('./definition65.cjs');
-const definition$1 = require('./definition57.cjs');
+const definition = require('./definition67.cjs');
+const definition$1 = require('./definition58.cjs');
 const definition$2 = require('./definition11.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -48,15 +49,6 @@ const TrappedFocus = (Base) => {
 
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
-class _PickerField extends vividElement.VividElement {
-}
-class FormAssociatedPickerField extends formAssociated.FormAssociated(_PickerField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -66,8 +58,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PickerField extends TrappedFocus(
-  localized.Localized(FormAssociatedPickerField)
+class PickerField extends mixins.WithFeedback(
+  withErrorText.WithErrorText(
+    formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+  )
 ) {
   // --- Core ---
   constructor() {
@@ -79,6 +73,10 @@ class PickerField extends TrappedFocus(
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
     // Reformat the presentation value when the locale changes
     this.#localeChangeHandler = {
       handleChange: () => {
@@ -215,16 +213,9 @@ class PickerField extends TrappedFocus(
    * @internal
    */
   _onClearClick() {
-    this._closePopup();
     this.$emit("clear-click");
   }
 }
-__decorateClass([
-  vividElement.attr({ attribute: "value" })
-], PickerField.prototype, "initialValue");
-__decorateClass([
-  vividElement.attr({ attribute: "current-value" })
-], PickerField.prototype, "currentValue");
 __decorateClass([
   vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], PickerField.prototype, "readOnly");
@@ -234,7 +225,6 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], PickerField.prototype, "_presentationValue");
-applyMixinsWithObservables.applyMixinsWithObservables(PickerField, formElements.FormElementHelperText);
 
 const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
   const popupTag = context.tagFor(definition.Popup);
@@ -243,18 +233,18 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
   return vividElement.html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-											 ${ref.ref("_textFieldEl")}
-											 class='control'
-											 label='${(x) => x.label}'
-											 helper-text='${(x) => x.helperText}'
-											 error-text='${(x) => x.errorValidationMessage}'
-											 placeholder='${(x) => x._textFieldPlaceholder}'
-											 size='${(x) => x._textFieldSize}'
-											 current-value='${(x) => x._presentationValue}'
-											 ?disabled='${(x) => x.disabled}'
-											 ?readonly='${(x) => x.readOnly}'
-											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
-											 @change='${(x) => x._onTextFieldChange()}'
+				${ref.ref("_textFieldEl")}
+				class='control'
+				label='${(x) => x.label}'
+				helper-text='${(x) => x.helperText}'
+				error-text='${(x) => x.errorValidationMessage}'
+				placeholder='${(x) => x._textFieldPlaceholder}'
+				size='${(x) => x._textFieldSize}'
+				current-value='${(x) => x._presentationValue}'
+				?disabled='${(x) => x.disabled}'
+				?readonly='${(x) => x.readOnly}'
+				@input='${(x, c) => x._onTextFieldInput(c.event)}'
+				@change='${(x) => x._onTextFieldChange()}'
 			>
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
@@ -276,6 +266,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			<${popupTag}
 				?open='${(x) => x._popupOpen}'
 				:anchor='${(x) => x._textFieldEl}'
+				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
 				<div class="${() => classNames.classNames("dialog", [

package/shared/picker-field.template.js

@@ -1,11 +1,12 @@
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { a as WithFeedback } from './mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement, a as attr, o as observable, O as Observable, k as defaultExecutionContext, h as html } from './vivid-element.js';
-import { a as FormElementHelperText } from './form-elements.js';
+import { V as VividElement, O as Observable, i as defaultExecutionContext, a as attr, o as observable, h as html } from './vivid-element.js';
+import { W as WithErrorText } from './with-error-text.js';
+import { F as FormElement } from './form-element.js';
 import { L as Localized } from './localized.js';
-import { P as Popup } from './definition65.js';
-import { T as TextField } from './definition57.js';
+import { P as Popup } from './definition67.js';
+import { T as TextField } from './definition58.js';
 import { B as Button } from './definition11.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
@@ -46,15 +47,6 @@ const TrappedFocus = (Base) => {
 
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
-class _PickerField extends VividElement {
-}
-class FormAssociatedPickerField extends FormAssociated(_PickerField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -64,8 +56,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PickerField extends TrappedFocus(
-  Localized(FormAssociatedPickerField)
+class PickerField extends WithFeedback(
+  WithErrorText(
+    FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
+  )
 ) {
   // --- Core ---
   constructor() {
@@ -77,6 +71,10 @@ class PickerField extends TrappedFocus(
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
     // Reformat the presentation value when the locale changes
     this.#localeChangeHandler = {
       handleChange: () => {
@@ -213,16 +211,9 @@ class PickerField extends TrappedFocus(
    * @internal
    */
   _onClearClick() {
-    this._closePopup();
     this.$emit("clear-click");
   }
 }
-__decorateClass([
-  attr({ attribute: "value" })
-], PickerField.prototype, "initialValue");
-__decorateClass([
-  attr({ attribute: "current-value" })
-], PickerField.prototype, "currentValue");
 __decorateClass([
   attr({ attribute: "readonly", mode: "boolean" })
 ], PickerField.prototype, "readOnly");
@@ -232,7 +223,6 @@ __decorateClass([
 __decorateClass([
   observable
 ], PickerField.prototype, "_presentationValue");
-applyMixinsWithObservables(PickerField, FormElementHelperText);
 
 const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
   const popupTag = context.tagFor(Popup);
@@ -241,18 +231,18 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
   return html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-											 ${ref("_textFieldEl")}
-											 class='control'
-											 label='${(x) => x.label}'
-											 helper-text='${(x) => x.helperText}'
-											 error-text='${(x) => x.errorValidationMessage}'
-											 placeholder='${(x) => x._textFieldPlaceholder}'
-											 size='${(x) => x._textFieldSize}'
-											 current-value='${(x) => x._presentationValue}'
-											 ?disabled='${(x) => x.disabled}'
-											 ?readonly='${(x) => x.readOnly}'
-											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
-											 @change='${(x) => x._onTextFieldChange()}'
+				${ref("_textFieldEl")}
+				class='control'
+				label='${(x) => x.label}'
+				helper-text='${(x) => x.helperText}'
+				error-text='${(x) => x.errorValidationMessage}'
+				placeholder='${(x) => x._textFieldPlaceholder}'
+				size='${(x) => x._textFieldSize}'
+				current-value='${(x) => x._presentationValue}'
+				?disabled='${(x) => x.disabled}'
+				?readonly='${(x) => x.readOnly}'
+				@input='${(x, c) => x._onTextFieldInput(c.event)}'
+				@change='${(x) => x._onTextFieldChange()}'
 			>
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
@@ -274,6 +264,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			<${popupTag}
 				?open='${(x) => x._popupOpen}'
 				:anchor='${(x) => x._textFieldEl}'
+				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
 				<div class="${() => classNames("dialog", [

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, j as HTMLView } from './vivid-element.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,7 +1,7 @@
 'use strict';
 
 const numbers = require('./numbers.cjs');
-const definition = require('./definition65.cjs');
+const definition = require('./definition67.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');

package/shared/slider.template.js

@@ -1,5 +1,5 @@
 import { l as limit } from './numbers.js';
-import { P as Popup, a as PlacementStrategy } from './definition65.js';
+import { P as Popup, a as PlacementStrategy } from './definition67.js';
 import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';

package/shared/time-selection-picker.template.cjs

@@ -3,7 +3,6 @@
 const vividElement = require('./vivid-element.cjs');
 const pickerField_template = require('./picker-field.template.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
-const formElements = require('./form-elements.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
 const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
@@ -462,9 +461,9 @@ const parsePresentationTime = (input, use12HourClock) => {
 };
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -578,13 +577,12 @@ const TimeSelectionPicker = (Base) => {
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidTimeFilter = {
@@ -598,7 +596,7 @@ const ValidTimeFilter = {
     return value;
   }
 };
-exports.TimePicker = class TimePicker extends TimeSelectionPicker(
+class TimePicker extends TimeSelectionPicker(
   singleValuePicker.SingleValuePicker(pickerField_template.PickerField)
 ) {
   // --- Core ---
@@ -731,17 +729,13 @@ exports.TimePicker = class TimePicker extends TimeSelectionPicker(
     }
     return null;
   }
-};
+}
 __decorateClass([
   vividElement.attr({ converter: ValidTimeFilter })
-], exports.TimePicker.prototype, "min", 2);
+], TimePicker.prototype, "min");
 __decorateClass([
   vividElement.attr({ converter: ValidTimeFilter })
-], exports.TimePicker.prototype, "max", 2);
-exports.TimePicker = __decorateClass([
-  formElements.errorText,
-  formElements.formElements
-], exports.TimePicker);
+], TimePicker.prototype, "max");
 
 const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
   const inlineTimePickerTag = context.tagFor(InlineTimePicker);
@@ -764,6 +758,7 @@ const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
 	`;
 };
 
+exports.TimePicker = TimePicker;
 exports.TimeSelectionPicker = TimeSelectionPicker;
 exports.TimeSelectionPickerTemplate = TimeSelectionPickerTemplate;
 exports.ValidTimeFilter = ValidTimeFilter;

package/shared/time-selection-picker.template.js

@@ -1,7 +1,6 @@
-import { h as html, V as VividElement, o as observable, i as defineVividComponent, a as attr, O as Observable, k as defaultExecutionContext, D as DOM, n as nullableNumberConverter, v as volatile } from './vivid-element.js';
+import { h as html, V as VividElement, o as observable, f as defineVividComponent, a as attr, O as Observable, i as defaultExecutionContext, D as DOM, n as nullableNumberConverter, v as volatile } from './vivid-element.js';
 import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
-import { e as errorText, f as formElements } from './form-elements.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
 import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
@@ -460,9 +459,9 @@ const parsePresentationTime = (input, use12HourClock) => {
 };
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -576,13 +575,12 @@ const TimeSelectionPicker = (Base) => {
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidTimeFilter = {
@@ -596,7 +594,7 @@ const ValidTimeFilter = {
     return value;
   }
 };
-let TimePicker = class extends TimeSelectionPicker(
+class TimePicker extends TimeSelectionPicker(
   SingleValuePicker(PickerField)
 ) {
   // --- Core ---
@@ -729,17 +727,13 @@ let TimePicker = class extends TimeSelectionPicker(
     }
     return null;
   }
-};
+}
 __decorateClass([
   attr({ converter: ValidTimeFilter })
-], TimePicker.prototype, "min", 2);
+], TimePicker.prototype, "min");
 __decorateClass([
   attr({ converter: ValidTimeFilter })
-], TimePicker.prototype, "max", 2);
-TimePicker = __decorateClass([
-  errorText,
-  formElements
-], TimePicker);
+], TimePicker.prototype, "max");
 
 const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
   const inlineTimePickerTag = context.tagFor(InlineTimePicker);

package/shared/vivid-element.cjs

@@ -2541,6 +2541,7 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
   const registerComponent = (componentDefinition) => {
     const tag = prefixed(componentDefinition.name);
     let type = componentDefinition.type;
+    type.componentName = componentDefinition.name;
     if (registeredTags.has(tag)) {
       return;
     } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
@@ -2681,14 +2682,72 @@ const AriaMixin = (Base) => {
   return AriaMixinElement;
 };
 
-class VividElement extends AriaMixin(FASTElement) {
+const locateReplacedPropMetadata = createMetadataLocator();
+const replaces = (config) => ($target, $prop) => {
+  locateReplacedPropMetadata($target.constructor).push({
+    newPropertyName: $prop,
+    ...config
+  });
+};
+const ReplacedPropHandling = (Base) => {
+  class ReplacedPropHandlingElement extends Base {
+    #handleReplacedProp(replacedProp) {
+      let newDirty = false;
+      let deprecatedDirty = false;
+      const changeCouldBeFromDeprecated = (source) => deprecatedDirty && replacedProp.fromDeprecated(
+        source[replacedProp.deprecatedPropertyName]
+      ) === source[replacedProp.newPropertyName];
+      const changeCouldBeFromNew = (source) => newDirty && replacedProp.toDeprecated && replacedProp.toDeprecated(source[replacedProp.newPropertyName]) === source[replacedProp.deprecatedPropertyName];
+      const subscriber = {
+        handleChange(source, propertyName) {
+          if (propertyName === replacedProp.newPropertyName) {
+            newDirty = true;
+            if (!replacedProp.toDeprecated || changeCouldBeFromDeprecated(source)) {
+              return;
+            }
+            source[replacedProp.deprecatedPropertyName] = replacedProp.toDeprecated(source[replacedProp.newPropertyName]);
+          }
+          if (propertyName === replacedProp.deprecatedPropertyName) {
+            deprecatedDirty = true;
+            if (changeCouldBeFromNew(source)) {
+              return;
+            }
+            source[replacedProp.newPropertyName] = replacedProp.fromDeprecated(
+              source[replacedProp.deprecatedPropertyName]
+            );
+          }
+        }
+      };
+      const notifier = Observable.getNotifier(this);
+      notifier.subscribe(subscriber, replacedProp.newPropertyName);
+      notifier.subscribe(subscriber, replacedProp.deprecatedPropertyName);
+    }
+    constructor(...args) {
+      super(...args);
+      for (const replacedProp of locateReplacedPropMetadata(this.constructor)) {
+        this.#handleReplacedProp(replacedProp);
+      }
+    }
+  }
+  return ReplacedPropHandlingElement;
+};
+
+class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.24.0";
+    this.VIVID_VERSION = "4.26.0";
+  }
+  /**
+   * Add data-vvd-component attribute with component name globally,
+   * for referring to the elements in CSS, testing or debugging
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const name = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", name);
   }
 }
 
 exports.AttachedBehaviorHTMLDirective = AttachedBehaviorHTMLDirective;
-exports.AttributeConfiguration = AttributeConfiguration;
 exports.DOM = DOM;
 exports.HTMLDirective = HTMLDirective;
 exports.HTMLView = HTMLView;
@@ -2698,7 +2757,6 @@ exports.VividElement = VividElement;
 exports.ariaAttributeName = ariaAttributeName;
 exports.ariaMixinProperties = ariaMixinProperties;
 exports.attr = attr;
-exports.booleanConverter = booleanConverter;
 exports.createRegisterFunction = createRegisterFunction;
 exports.defaultExecutionContext = defaultExecutionContext;
 exports.defineVividComponent = defineVividComponent;
@@ -2706,6 +2764,7 @@ exports.emptyArray = emptyArray;
 exports.html = html;
 exports.nullableNumberConverter = nullableNumberConverter;
 exports.observable = observable;
+exports.replaces = replaces;
 exports.subscribeToAriaPropertyChanges = subscribeToAriaPropertyChanges;
 exports.unsubscribeFromAriaPropertyChanges = unsubscribeFromAriaPropertyChanges;
 exports.volatile = volatile;

package/shared/vivid-element.js

@@ -2539,6 +2539,7 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
   const registerComponent = (componentDefinition) => {
     const tag = prefixed(componentDefinition.name);
     let type = componentDefinition.type;
+    type.componentName = componentDefinition.name;
     if (registeredTags.has(tag)) {
       return;
     } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
@@ -2679,10 +2680,69 @@ const AriaMixin = (Base) => {
   return AriaMixinElement;
 };
 
-class VividElement extends AriaMixin(FASTElement) {
+const locateReplacedPropMetadata = createMetadataLocator();
+const replaces = (config) => ($target, $prop) => {
+  locateReplacedPropMetadata($target.constructor).push({
+    newPropertyName: $prop,
+    ...config
+  });
+};
+const ReplacedPropHandling = (Base) => {
+  class ReplacedPropHandlingElement extends Base {
+    #handleReplacedProp(replacedProp) {
+      let newDirty = false;
+      let deprecatedDirty = false;
+      const changeCouldBeFromDeprecated = (source) => deprecatedDirty && replacedProp.fromDeprecated(
+        source[replacedProp.deprecatedPropertyName]
+      ) === source[replacedProp.newPropertyName];
+      const changeCouldBeFromNew = (source) => newDirty && replacedProp.toDeprecated && replacedProp.toDeprecated(source[replacedProp.newPropertyName]) === source[replacedProp.deprecatedPropertyName];
+      const subscriber = {
+        handleChange(source, propertyName) {
+          if (propertyName === replacedProp.newPropertyName) {
+            newDirty = true;
+            if (!replacedProp.toDeprecated || changeCouldBeFromDeprecated(source)) {
+              return;
+            }
+            source[replacedProp.deprecatedPropertyName] = replacedProp.toDeprecated(source[replacedProp.newPropertyName]);
+          }
+          if (propertyName === replacedProp.deprecatedPropertyName) {
+            deprecatedDirty = true;
+            if (changeCouldBeFromNew(source)) {
+              return;
+            }
+            source[replacedProp.newPropertyName] = replacedProp.fromDeprecated(
+              source[replacedProp.deprecatedPropertyName]
+            );
+          }
+        }
+      };
+      const notifier = Observable.getNotifier(this);
+      notifier.subscribe(subscriber, replacedProp.newPropertyName);
+      notifier.subscribe(subscriber, replacedProp.deprecatedPropertyName);
+    }
+    constructor(...args) {
+      super(...args);
+      for (const replacedProp of locateReplacedPropMetadata(this.constructor)) {
+        this.#handleReplacedProp(replacedProp);
+      }
+    }
+  }
+  return ReplacedPropHandlingElement;
+};
+
+class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.24.0";
+    this.VIVID_VERSION = "4.26.0";
+  }
+  /**
+   * Add data-vvd-component attribute with component name globally,
+   * for referring to the elements in CSS, testing or debugging
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const name = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", name);
   }
 }
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, booleanConverter as b, AttributeConfiguration as c, ariaAttributeName as d, emptyArray as e, ariaMixinProperties as f, createRegisterFunction as g, html as h, defineVividComponent as i, HTMLView as j, defaultExecutionContext as k, nullableNumberConverter as n, observable as o, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u, volatile as v };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, ariaAttributeName as b, ariaMixinProperties as c, createRegisterFunction as d, emptyArray as e, defineVividComponent as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, replaces as r, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u, volatile as v };

package/shared/with-error-text.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+const vividElement = require('./vivid-element.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;
+};
+const WithErrorText = (Base) => {
+  class ElementWithErrorText extends Base {
+    /**
+     * @internal
+     */
+    errorTextChanged(_, newErrorText) {
+      if (newErrorText) {
+        this.#forceCustomError(newErrorText);
+      } else {
+        this.#clearCustomErrorAndRevalidate();
+      }
+    }
+    #blockValidateCalls = false;
+    #originalValidateFn;
+    constructor(...args) {
+      super(...args);
+      this.#originalValidateFn = this.validate;
+      this.validate = () => {
+        if (!this.#blockValidateCalls) this.#originalValidateFn();
+      };
+    }
+    #forceCustomError(errorMessage) {
+      this.setValidity(
+        { customError: true },
+        errorMessage,
+        this.control
+      );
+      this.errorValidationMessage = errorMessage;
+      this.#blockValidateCalls = true;
+    }
+    #clearCustomErrorAndRevalidate() {
+      this.setValidity({}, "", this.control);
+      this.#blockValidateCalls = false;
+      this.validate();
+    }
+  }
+  __decorateClass([
+    vividElement.attr({ attribute: "error-text" })
+  ], ElementWithErrorText.prototype, "errorText");
+  return ElementWithErrorText;
+};
+
+exports.WithErrorText = WithErrorText;