@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition42.cjs

@@ -1,638 +1,230 @@
 'use strict';
 
-const definition = require('./definition65.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
 const formAssociated = require('./form-associated.cjs');
-const slider_template = require('./slider.template.cjs');
-const localized = require('./localized.cjs');
-const aria = require('./aria.cjs');
-const numbers = require('./numbers.cjs');
-const formElements = require('./form-elements.cjs');
+const withErrorText = require('./with-error-text.cjs');
+const formElement = require('./form-element.cjs');
+const keyCodes = require('./key-codes.cjs');
 const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:hover .thumb-container,:host([internal-part]) .control:focus .thumb-container{opacity:1}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
-
-class _RangeSlider extends vividElement.VividElement {
-}
-class FormAssociatedRangeSlider extends formAssociated.FormAssociated(_RangeSlider) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.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(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 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;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _isInternalValueUpdate, _RangeSlider_instances, updateValues_fn, applyStep_fn, updateFormValue_fn, thumbs_get, thumbConstraints_get, getThumbId_fn, getThumbIdFromEvent_fn, updateThumbPositions_fn, thumbTrackEndOffset_fn, calculateValueFromMouseEvent_fn, roundToNearestStep_fn, _isNonVisibleFocus, focusThumbNonVisibly_fn, registerThumbListeners_fn, unregisterThumbListeners_fn, _onThumbFocus, _onThumbBlur, _onMouseOver, _onMouseOut, _onThumbMousedown, _onThumbKeydown, registerDragHandlers_fn, unregisterDragListeners_fn, _onDragMove, _onDragEnd;
-const Direction = {
-  Increment: 1,
-  Decrement: -1
-};
-exports.RangeSlider = class RangeSlider extends localized.Localized(FormAssociatedRangeSlider) {
+class Radio extends withErrorText.WithErrorText(
+  formElement.FormElement(formAssociated.CheckableFormAssociated(vividElement.VividElement))
+) {
   constructor() {
-    super(...arguments);
-    __privateAdd(this, _RangeSlider_instances);
-    // --- Start & end values ---
-    __privateAdd(this, _isInternalValueUpdate, false);
-    this.start = "";
-    this.end = "";
-    this.min = 0;
-    this.max = 10;
-    this.step = 1;
-    this.orientation = aria.Orientation.horizontal;
-    this.ariaStartLabel = null;
-    this.ariaEndLabel = null;
-    this.markers = false;
-    this.pin = false;
-    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
-    // --- Thumbs ---
+    super();
+    this.ariaLabel = null;
     /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
      * @internal
      */
-    this._trackEl = null;
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
     /**
      * @internal
      */
-    this._startThumbEl = null;
+    this.keypressHandler = (e) => {
+      switch (e.key) {
+        case keyCodes.keySpace:
+          if (!this.checked && !this.readOnly) {
+            this.checked = true;
+          }
+          return;
+      }
+      return true;
+    };
     /**
      * @internal
      */
-    this._endThumbEl = null;
-    this._draggingThumb = false;
-    this._visiblyFocusedThumb = null;
-    this._hoveredThumb = null;
-    this._startThumbCss = "";
-    this._endThumbCss = "";
-    this._selectedRangeCss = "";
-    __privateAdd(this, _isNonVisibleFocus, false);
-    __privateAdd(this, _onThumbFocus, (e) => {
-      if (!__privateGet(this, _isNonVisibleFocus)) {
-        this._visiblyFocusedThumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
-      }
-    });
-    __privateAdd(this, _onThumbBlur, () => {
-      this._visiblyFocusedThumb = null;
-    });
-    __privateAdd(this, _onMouseOver, (e) => {
-      this._hoveredThumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
-    });
-    __privateAdd(this, _onMouseOut, () => {
-      this._hoveredThumb = null;
-    });
-    __privateAdd(this, _onThumbMousedown, (event) => {
-      if (this.disabled || event.defaultPrevented) {
-        return;
-      }
-      let target = event.target;
-      if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) {
-        target = this._startThumbEl;
-      }
-      __privateMethod(this, _RangeSlider_instances, focusThumbNonVisibly_fn).call(this, target);
-      this._draggingThumb = __privateMethod(this, _RangeSlider_instances, getThumbId_fn).call(this, target);
-      __privateMethod(this, _RangeSlider_instances, registerDragHandlers_fn).call(this);
-    });
-    __privateAdd(this, _onThumbKeydown, (e) => {
-      const thumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
-      this._visiblyFocusedThumb = thumb;
-      if (e.key === keyCodes.keyHome) {
-        e.preventDefault();
-        __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, { [thumb]: `${__privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].min}` });
-      } else if (e.key === keyCodes.keyEnd) {
-        e.preventDefault();
-        __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, { [thumb]: `${__privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].max}` });
-      } else if (!e.shiftKey) {
-        switch (e.key) {
-          case keyCodes.keyArrowRight:
-          case keyCodes.keyArrowDown:
-            e.preventDefault();
-            __privateMethod(this, _RangeSlider_instances, applyStep_fn).call(this, thumb, Direction.Increment);
-            break;
-          case keyCodes.keyArrowLeft:
-          case keyCodes.keyArrowUp:
-            e.preventDefault();
-            __privateMethod(this, _RangeSlider_instances, applyStep_fn).call(this, thumb, Direction.Decrement);
-            break;
+    this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      const group = this.#radioGroup;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+          this.errorValidationMessage = "";
+          if (group) group.errorValidationMessage = "";
         }
       }
-    });
-    __privateAdd(this, _onDragMove, (e) => {
-      if (this.disabled || e.defaultPrevented || !this._draggingThumb) {
-        return;
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        const group = this.#radioGroup;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+            x.errorValidationMessage = "";
+            if (group) group.errorValidationMessage = "";
+          });
+        }
       }
-      const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
-      const value = __privateMethod(this, _RangeSlider_instances, calculateValueFromMouseEvent_fn).call(this, sourceEvent);
-      __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-        [this._draggingThumb]: `${__privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, this._draggingThumb, value)}`
-      });
-    });
-    __privateAdd(this, _onDragEnd, () => {
-      this._draggingThumb = false;
-      __privateMethod(this, _RangeSlider_instances, unregisterDragListeners_fn).call(this);
-    });
-  }
-  /**
-   * @internal
-   */
-  startChanged() {
-    this.currentStart = this.start;
-    if (!__privateGet(this, _isInternalValueUpdate)) {
-      this.dirtyValue = true;
-      __privateMethod(this, _RangeSlider_instances, updateFormValue_fn).call(this);
-    }
-    if (this.$fastController.isConnected) {
-      __privateMethod(this, _RangeSlider_instances, updateThumbPositions_fn).call(this);
-    }
-  }
-  /**
-   * @internal
-   */
-  initialStartChanged(_, newValue) {
-    if (newValue && !this.dirtyValue) {
-      this.start = newValue;
-      this.dirtyValue = false;
-    }
-  }
-  /**
-   * @internal
-   */
-  currentStartChanged() {
-    this.start = this.currentStart;
-  }
-  /**
-   * The start property, typed as a number.
-   *
-   * @public
-   */
-  get startAsNumber() {
-    return parseFloat(this.start);
-  }
-  set startAsNumber(next) {
-    this.start = next.toString();
-  }
-  /**
-   * @internal
-   */
-  endChanged() {
-    this.currentEnd = this.end;
-    if (!__privateGet(this, _isInternalValueUpdate)) {
-      this.dirtyValue = true;
-      __privateMethod(this, _RangeSlider_instances, updateFormValue_fn).call(this);
-    }
-    if (this.$fastController.isConnected) {
-      __privateMethod(this, _RangeSlider_instances, updateThumbPositions_fn).call(this);
-    }
+    };
+    this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
+    this.checked = this.defaultChecked;
+    this.dirtyChecked = false;
   }
+  // Map to proxy element
   /**
    * @internal
    */
-  initialEndChanged(_, newValue) {
-    if (newValue && !this.dirtyValue) {
-      this.end = newValue;
-      this.dirtyValue = false;
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
     }
   }
   /**
    * @internal
    */
-  currentEndChanged() {
-    this.end = this.currentEnd;
-  }
-  /**
-   * The end property, typed as a number.
-   *
-   * @public
-   */
-  get endAsNumber() {
-    return parseFloat(this.end);
-  }
-  set endAsNumber(next) {
-    this.end = next.toString();
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    if (this.$fastController.isConnected) {
-      __privateMethod(this, _RangeSlider_instances, updateThumbPositions_fn).call(this);
+  defaultCheckedChanged() {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
     }
   }
-  // --- Form handling ---
   /**
    * @internal
    */
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
-    __privateMethod(this, _RangeSlider_instances, updateFormValue_fn).call(this);
-  }
-  formResetCallback() {
-    __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-      start: this.initialStart ?? this.min.toString(),
-      end: this.initialEnd ?? this.max.toString()
-    });
-    super.formResetCallback();
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    vividElement.DOM.queueUpdate(this.validate);
   }
   /**
    * @internal
    */
-  _isThumbPopupOpen(thumb) {
-    return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
-  }
-  // --- Lifecycle ---
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-      start: this.start || this.initialStart || this.min.toString(),
-      end: this.end || this.initialEnd || this.max.toString()
-    }, false);
-    __privateMethod(this, _RangeSlider_instances, registerThumbListeners_fn).call(this);
-    __privateMethod(this, _RangeSlider_instances, updateThumbPositions_fn).call(this);
+    vividElement.DOM.queueUpdate(this.validate);
+    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
+      }
+    }
+    if (this.defaultChecked) {
+      if (!this.dirtyChecked) {
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked;
+          this.dirtyChecked = false;
+        }
+      }
+    }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateMethod(this, _RangeSlider_instances, unregisterThumbListeners_fn).call(this);
-    __privateMethod(this, _RangeSlider_instances, unregisterDragListeners_fn).call(this);
+  isInsideRadioGroup() {
+    const parent = this.closest(
+      "[role=radiogroup]"
+    );
+    return parent !== null;
   }
   /**
    * @internal
    */
-  _onMouseDown(e) {
-    if (this.disabled || this._draggingThumb) {
-      return;
+  clickHandler(_) {
+    if (!this.disabled && !this.readOnly && !this.checked) {
+      this.checked = true;
     }
-    const value = __privateMethod(this, _RangeSlider_instances, calculateValueFromMouseEvent_fn).call(this, e);
-    const startDistance = Math.abs(value - Number(this.start));
-    const endDistance = Math.abs(value - Number(this.end));
-    const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
-    __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-      [thumb]: `${__privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, thumb, value)}`
-    });
-    this._draggingThumb = thumb;
-    __privateMethod(this, _RangeSlider_instances, focusThumbNonVisibly_fn).call(this, __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb]);
-    __privateMethod(this, _RangeSlider_instances, registerDragHandlers_fn).call(this);
-  }
-};
-_isInternalValueUpdate = new WeakMap();
-_RangeSlider_instances = new WeakSet();
-updateValues_fn = function({ start, end }, emitEvents = true) {
-  if (start === this.start) {
-    start = void 0;
-  }
-  if (end === this.end) {
-    end = void 0;
-  }
-  if (start === void 0 && end === void 0) {
-    return;
   }
-  __privateSet(this, _isInternalValueUpdate, true);
-  if (start !== void 0) {
-    this.start = start;
-  }
-  if (end !== void 0) {
-    this.end = end;
-  }
-  __privateSet(this, _isInternalValueUpdate, false);
-  if (emitEvents) {
-    if (start !== void 0) {
-      this.$emit("input:start");
-    }
-    if (end !== void 0) {
-      this.$emit("input:end");
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
     }
-    this.$emit("input");
-    this.$emit("change");
-    this.dirtyValue = true;
+    return [];
   }
-  __privateMethod(this, _RangeSlider_instances, updateFormValue_fn).call(this);
-};
-applyStep_fn = function(thumb, direction) {
-  __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-    [thumb]: __privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, thumb, Number(this[thumb]) + direction * this.step).toString()
-  });
-};
-updateFormValue_fn = function() {
-  if (!this.name) {
-    this.setFormValue(null);
-  } else {
-    const formData = new FormData();
-    formData.append(this.name, this.start);
-    formData.append(this.name, this.end);
-    this.setFormValue(formData);
-  }
-};
-thumbs_get = function() {
-  return {
-    start: this._startThumbEl,
-    end: this._endThumbEl
-  };
-};
-thumbConstraints_get = function() {
-  return {
-    start: { min: this.min, max: this.endAsNumber },
-    end: { min: this.startAsNumber, max: this.max }
-  };
-};
-getThumbId_fn = function(thumb) {
-  return thumb === this._startThumbEl ? "start" : "end";
-};
-getThumbIdFromEvent_fn = function(e) {
-  return __privateMethod(this, _RangeSlider_instances, getThumbId_fn).call(this, e.target);
-};
-updateThumbPositions_fn = function() {
-  const startOffsetPct = __privateMethod(this, _RangeSlider_instances, thumbTrackEndOffset_fn).call(this, this.startAsNumber);
-  const endOffsetPct = __privateMethod(this, _RangeSlider_instances, thumbTrackEndOffset_fn).call(this, this.endAsNumber);
-  const [dirProp, dimProp] = this.orientation === aria.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
-  const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
-  this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
-  this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
-  this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
-};
-thumbTrackEndOffset_fn = function(value) {
-  return (1 - slider_template.inverseLerp(this.min, this.max, value)) * 100;
-};
-calculateValueFromMouseEvent_fn = function(e) {
-  const trackClientRect = this._trackEl.getBoundingClientRect();
-  const [minPos, maxPos, valuePos] = this.orientation === aria.Orientation.horizontal ? [
-    this._trackEl.clientLeft,
-    this._trackEl.clientWidth,
-    e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-  ] : [
-    trackClientRect.top,
-    trackClientRect.bottom,
-    e.pageY - document.documentElement.scrollTop
-  ];
-  return slider_template.lerp(this.min, this.max, slider_template.inverseLerp(minPos, maxPos, valuePos));
-};
-roundToNearestStep_fn = function(thumb, value) {
-  return numbers.limit(
-    __privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].min,
-    __privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].max,
-    slider_template.roundToStepValue(value - this.min, this.step) + this.min
-  );
-};
-_isNonVisibleFocus = new WeakMap();
-focusThumbNonVisibly_fn = function(thumb) {
-  __privateSet(this, _isNonVisibleFocus, true);
-  thumb.focus();
-  __privateSet(this, _isNonVisibleFocus, false);
-};
-// --- Event handling ---
-registerThumbListeners_fn = function() {
-  for (const thumb of ["start", "end"]) {
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("keydown", __privateGet(this, _onThumbKeydown));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener(
-      "mousedown",
-      __privateGet(this, _onThumbMousedown),
-      { passive: true }
-    );
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener(
-      "touchstart",
-      __privateGet(this, _onThumbMousedown),
-      { passive: true }
+  get #radioGroup() {
+    const parentGroup = this.closest(
+      `${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`
     );
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("mouseover", __privateGet(this, _onMouseOver), {
-      passive: true
-    });
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("mouseout", __privateGet(this, _onMouseOut), {
-      passive: true
-    });
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("focus", __privateGet(this, _onThumbFocus));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("blur", __privateGet(this, _onThumbBlur));
+    if (parentGroup) {
+      return parentGroup;
+    }
+    return null;
   }
-};
-unregisterThumbListeners_fn = function() {
-  for (const thumb of ["start", "end"]) {
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("keydown", __privateGet(this, _onThumbKeydown));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener(
-      "mousedown",
-      __privateGet(this, _onThumbMousedown)
-    );
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener(
-      "touchstart",
-      __privateGet(this, _onThumbMousedown)
-    );
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("mouseover", __privateGet(this, _onMouseOver));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("mouseout", __privateGet(this, _onMouseOut));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("focus", __privateGet(this, _onThumbFocus));
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("blur", __privateGet(this, _onThumbBlur));
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
+  /**
+   * @internal
+   */
+  validate(anchor) {
+    super.validate(anchor);
+    if (this.proxy) {
+      this.errorValidationMessage = this.validationMessage || "";
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    }
   }
-};
-_onThumbFocus = new WeakMap();
-_onThumbBlur = new WeakMap();
-_onMouseOver = new WeakMap();
-_onMouseOut = new WeakMap();
-_onThumbMousedown = new WeakMap();
-_onThumbKeydown = new WeakMap();
-registerDragHandlers_fn = function() {
-  window.addEventListener("mousemove", __privateGet(this, _onDragMove), { passive: true });
-  window.addEventListener("touchmove", __privateGet(this, _onDragMove), { passive: true });
-  window.addEventListener("mouseup", __privateGet(this, _onDragEnd));
-  window.addEventListener("touchend", __privateGet(this, _onDragEnd));
-  window.document.addEventListener("mouseleave", __privateGet(this, _onDragEnd));
-};
-unregisterDragListeners_fn = function() {
-  window.removeEventListener("mouseup", __privateGet(this, _onDragEnd));
-  window.document.removeEventListener("mouseleave", __privateGet(this, _onDragEnd));
-  window.removeEventListener("mousemove", __privateGet(this, _onDragMove));
-  window.removeEventListener("touchmove", __privateGet(this, _onDragMove));
-  window.removeEventListener("touchend", __privateGet(this, _onDragEnd));
-};
-_onDragMove = new WeakMap();
-_onDragEnd = new WeakMap();
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "start", 2);
-__decorateClass([
-  vividElement.attr({ mode: "fromView", attribute: "start" })
-], exports.RangeSlider.prototype, "initialStart", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "current-start" })
-], exports.RangeSlider.prototype, "currentStart", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "end", 2);
-__decorateClass([
-  vividElement.attr({ mode: "fromView", attribute: "end" })
-], exports.RangeSlider.prototype, "initialEnd", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "current-end" })
-], exports.RangeSlider.prototype, "currentEnd", 2);
-__decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
-], exports.RangeSlider.prototype, "min", 2);
-__decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
-], exports.RangeSlider.prototype, "max", 2);
-__decorateClass([
-  vividElement.attr({ converter: slider_template.defaultToOneConverter })
-], exports.RangeSlider.prototype, "step", 2);
-__decorateClass([
-  vividElement.attr
-], exports.RangeSlider.prototype, "orientation", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "aria-start-label" })
-], exports.RangeSlider.prototype, "ariaStartLabel", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "aria-end-label" })
-], exports.RangeSlider.prototype, "ariaEndLabel", 2);
+}
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], exports.RangeSlider.prototype, "markers", 2);
+  vividElement.attr({ attribute: "aria-label" })
+], Radio.prototype, "ariaLabel");
 __decorateClass([
   vividElement.attr
-], exports.RangeSlider.prototype, "connotation", 2);
+], Radio.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], exports.RangeSlider.prototype, "pin", 2);
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly");
 __decorateClass([
   vividElement.observable
-], exports.RangeSlider.prototype, "valueTextFormatter", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_draggingThumb", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_visiblyFocusedThumb", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_hoveredThumb", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_startThumbCss", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_endThumbCss", 2);
-__decorateClass([
-  vividElement.observable
-], exports.RangeSlider.prototype, "_selectedRangeCss", 2);
-exports.RangeSlider = __decorateClass([
-  formElements.formElements
-], exports.RangeSlider);
+], Radio.prototype, "defaultSlottedNodes");
 
-const getClasses = ({ disabled, connotation }) => classNames.classNames(
-  "control",
-  ["disabled", Boolean(disabled)],
-  [`connotation-${connotation}`, Boolean(connotation)]
+const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["checked", Boolean(checked)],
+  ["readonly", Boolean(readOnly)],
+  ["disabled", Boolean(disabled)]
 );
-const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames.classNames("thumb-container", [
-  "focus-visible",
-  _visiblyFocusedThumb === thumb
-]);
-const RangeSliderTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html` <template
-		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
-	>
-		<div class="${getClasses} ${(x) => x.orientation}">
-			<div class="positioning-region">
-				<div ${ref.ref("_trackEl")} class="track">
-					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
-					${when.when(
-    (x) => x.markers,
-    vividElement.html`${(x) => slider_template.getMarkersTemplate(
-      x.orientation === aria.Orientation.horizontal,
-      Math.floor((x.max - x.min) / x.step)
-    )}`
-  )}
-				</div>
-				<div
-					${ref.ref("_startThumbEl")}
-					class="${getThumbClassesFor("start")}"
-					style="${(x) => x._startThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
-					aria-valuenow="${(x) => x.start}"
-					aria-valuemin="${(x) => x.min}"
-					aria-valuemax="${(x) => x.end}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${when.when(
-    (x) => x.pin,
-    vividElement.html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._startThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("start")}
-					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
-				</${popupTag}>`
-  )}
-				<div
-					${ref.ref("_endThumbEl")}
-					class="${getThumbClassesFor("end")}"
-					style="${(x) => x._endThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
-					aria-valuenow="${(x) => x.end}"
-					aria-valuemin="${(x) => x.start}"
-					aria-valuemax="${(x) => x.max}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${when.when(
-    (x) => x.pin,
-    vividElement.html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._endThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("end")}
-					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
-				</${popupTag}>`
-  )}
-			</div>
-		</div>
-	</template>`;
-};
+const RadioTemplate = vividElement.html`<template
+	aria-checked="${(x) => x.checked}"
+	aria-disabled="${(x) => x.disabled}"
+	aria-required="${(x) => x.required}"
+	@keypress="${(x, c) => x.keypressHandler(c.event)}"
+	@click="${(x, c) => x.clickHandler(c.event)}"
+	role="radio"
+>
+	<div class="${getClasses}">
+		<div class="control"></div>
+		${when.when(
+  (x) => x.label,
+  vividElement.html`<label class="label">${(x) => x.label}</label>`
+)}
+	</div>
+</template>`;
 
-const rangeSliderDefinition = vividElement.defineVividComponent(
-  "range-slider",
-  exports.RangeSlider,
-  RangeSliderTemplate,
-  [definition.popupDefinition],
+const radioDefinition = vividElement.defineVividComponent(
+  "radio",
+  Radio,
+  RadioTemplate,
+  [],
   {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
+    styles
   }
 );
-const registerRangeSlider = vividElement.createRegisterFunction(
-  rangeSliderDefinition
-);
+const registerRadio = vividElement.createRegisterFunction(radioDefinition);
 
-exports.rangeSliderDefinition = rangeSliderDefinition;
-exports.registerRangeSlider = registerRangeSlider;
+exports.Radio = Radio;
+exports.radioDefinition = radioDefinition;
+exports.registerRadio = registerRadio;