@vonage/vivid 5.15.1 → 5.17.0

package/radio/definition.cjs

@@ -1,227 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const formAssociated = require('../unbundled/form-associated.cjs');
-const withErrorText = require('../unbundled/with-error-text.cjs');
-const formElement = require('../unbundled/form-element.cjs');
-
-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)}@media(hover:hover){.base: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.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: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.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)}@media(hover:hover){.base:checked: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.checked.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: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.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.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(--focus-stroke-color, 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 __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;
-};
-class Radio extends withErrorText.WithErrorText(
-  formElement.FormElement(formAssociated.CheckableFormAssociated(vividElement.VividElement))
-) {
-  constructor() {
-    super();
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
-     *
-     * @internal
-     */
-    this.initialValue = "on";
-    this.defaultSlottedNodes = [];
-    /**
-     * @internal
-     */
-    this.keypressHandler = (e) => {
-      switch (e.key) {
-        case fastWebUtilities.keySpace:
-          if (!this.checked && !this.readOnly) {
-            this.checked = true;
-          }
-          return;
-      }
-      return true;
-    };
-    /**
-     * @internal
-     */
-    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 = "";
-        }
-      }
-    };
-    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 = "";
-          });
-        }
-      }
-    };
-    this.proxy.setAttribute("type", "radio");
-    this.proxy.setAttribute("name", this.name);
-    this.checked = this.defaultChecked;
-    this.dirtyChecked = false;
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-  }
-  /**
-   * @internal
-   */
-  defaultCheckedChanged() {
-    if (this.$fastController.isConnected && !this.dirtyChecked) {
-      if (!this.isInsideRadioGroup()) {
-        this.checked = this.defaultChecked;
-        this.dirtyChecked = false;
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    fastElement.Updates.enqueue(this.validate);
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    fastElement.Updates.enqueue(this.validate);
-    if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && 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;
-        }
-      }
-    }
-  }
-  isInsideRadioGroup() {
-    const parent = this.closest(
-      '[data-vvd-component="radio-group"]'
-    );
-    return parent !== null;
-  }
-  /**
-   * @internal
-   */
-  clickHandler(_) {
-    if (!this.disabled && !this.readOnly && !this.checked) {
-      this.checked = true;
-    }
-  }
-  get #radioSiblings() {
-    const siblings = this.parentElement?.querySelectorAll(
-      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
-    );
-    if (siblings) {
-      return Array.from(siblings);
-    }
-    return [];
-  }
-  get #radioGroup() {
-    const parentGroup = this.closest(
-      `${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`
-    );
-    if (parentGroup) {
-      return parentGroup;
-    }
-    return null;
-  }
-  #validateValueMissingWithSiblings;
-  #syncSiblingsRequiredValidationStatus;
-  /**
-   * @internal
-   */
-  validate(anchor) {
-    super.validate(anchor);
-    if (this.proxy) {
-      this.errorValidationMessage = this.validationMessage || "";
-      if (this.validity.valueMissing) {
-        this.#validateValueMissingWithSiblings();
-      } else {
-        this.#syncSiblingsRequiredValidationStatus();
-      }
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Radio.prototype, "connotation");
-__decorateClass([
-  fastElement.attr({ attribute: "readonly", mode: "boolean" })
-], Radio.prototype, "readOnly");
-__decorateClass([
-  fastElement.observable
-], Radio.prototype, "defaultSlottedNodes");
-
-const getClasses = ({ connotation, checked, readOnly, disabled }) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["checked", Boolean(checked)],
-  ["readonly", Boolean(readOnly)],
-  ["disabled", Boolean(disabled)]
-);
-const RadioTemplate = fastElement.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>
-		${fastElement.when(
-  (x) => x?.label,
-  fastElement.html`<label class="label">${(x) => x?.label}</label>`
-)}
-	</div>
-</template>`;
-
-const radioDefinition = vividElement.defineVividComponent(
-  "radio",
-  Radio,
-  RadioTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerRadio = vividElement.createRegisterFunction(radioDefinition);
-
-exports.VwcRadioElement = Radio;
-exports.radioDefinition = radioDefinition;
-exports.registerRadio = registerRadio;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition53.cjs");
+exports.VwcRadioElement = require_definition.Radio;
+exports.radioDefinition = require_definition.radioDefinition;
+exports.registerRadio = require_definition.registerRadio;

package/radio/definition.js

@@ -1,221 +1,2 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { Updates, attr, observable, when, html } from '@microsoft/fast-element';
-import { keySpace, classNames } from '@microsoft/fast-web-utilities';
-import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
-import { W as WithErrorText } from '../unbundled/with-error-text.js';
-import { F as FormElement } from '../unbundled/form-element.js';
-
-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)}@media(hover:hover){.base: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.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: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.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)}@media(hover:hover){.base:checked: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.checked.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: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.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.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(--focus-stroke-color, 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 __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;
-};
-class Radio extends WithErrorText(
-  FormElement(CheckableFormAssociated(VividElement))
-) {
-  constructor() {
-    super();
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
-     *
-     * @internal
-     */
-    this.initialValue = "on";
-    this.defaultSlottedNodes = [];
-    /**
-     * @internal
-     */
-    this.keypressHandler = (e) => {
-      switch (e.key) {
-        case keySpace:
-          if (!this.checked && !this.readOnly) {
-            this.checked = true;
-          }
-          return;
-      }
-      return true;
-    };
-    /**
-     * @internal
-     */
-    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 = "";
-        }
-      }
-    };
-    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 = "";
-          });
-        }
-      }
-    };
-    this.proxy.setAttribute("type", "radio");
-    this.proxy.setAttribute("name", this.name);
-    this.checked = this.defaultChecked;
-    this.dirtyChecked = false;
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-  }
-  /**
-   * @internal
-   */
-  defaultCheckedChanged() {
-    if (this.$fastController.isConnected && !this.dirtyChecked) {
-      if (!this.isInsideRadioGroup()) {
-        this.checked = this.defaultChecked;
-        this.dirtyChecked = false;
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    Updates.enqueue(this.validate);
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(this.validate);
-    if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && 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;
-        }
-      }
-    }
-  }
-  isInsideRadioGroup() {
-    const parent = this.closest(
-      '[data-vvd-component="radio-group"]'
-    );
-    return parent !== null;
-  }
-  /**
-   * @internal
-   */
-  clickHandler(_) {
-    if (!this.disabled && !this.readOnly && !this.checked) {
-      this.checked = true;
-    }
-  }
-  get #radioSiblings() {
-    const siblings = this.parentElement?.querySelectorAll(
-      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
-    );
-    if (siblings) {
-      return Array.from(siblings);
-    }
-    return [];
-  }
-  get #radioGroup() {
-    const parentGroup = this.closest(
-      `${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`
-    );
-    if (parentGroup) {
-      return parentGroup;
-    }
-    return null;
-  }
-  #validateValueMissingWithSiblings;
-  #syncSiblingsRequiredValidationStatus;
-  /**
-   * @internal
-   */
-  validate(anchor) {
-    super.validate(anchor);
-    if (this.proxy) {
-      this.errorValidationMessage = this.validationMessage || "";
-      if (this.validity.valueMissing) {
-        this.#validateValueMissingWithSiblings();
-      } else {
-        this.#syncSiblingsRequiredValidationStatus();
-      }
-    }
-  }
-}
-__decorateClass([
-  attr
-], Radio.prototype, "connotation");
-__decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], Radio.prototype, "readOnly");
-__decorateClass([
-  observable
-], Radio.prototype, "defaultSlottedNodes");
-
-const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["checked", Boolean(checked)],
-  ["readonly", Boolean(readOnly)],
-  ["disabled", Boolean(disabled)]
-);
-const RadioTemplate = 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(
-  (x) => x?.label,
-  html`<label class="label">${(x) => x?.label}</label>`
-)}
-	</div>
-</template>`;
-
-const radioDefinition = defineVividComponent(
-  "radio",
-  Radio,
-  RadioTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerRadio = createRegisterFunction(radioDefinition);
-
+import { n as registerRadio, r as Radio, t as radioDefinition } from "../unbundled/definition53.js";
 export { Radio as VwcRadioElement, radioDefinition, registerRadio };

package/radio/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition18.cjs");i.registerRadio();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition16.cjs`).n();

package/radio/index.js

@@ -1,2 +1,5 @@
-import { r } from "../bundled/definition18.js";
-r();
+import "../bundled/vivid-element.js";
+import { n as e } from "../bundled/definition16.js";
+//#region src/lib/radio/index.ts
+e();
+//#endregion