@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition4.cjs

@@ -1,14 +1,15 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition = require('./definition63.cjs');
+const definition = require('./definition62.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const definition$2 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
+const localized = require('./localized.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -31,7 +32,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Announcement, "sparkles-line"],
   [enums.Connotation.Alert, "error-line"]
 ]);
-class Alert extends index.FoundationElement {
+class Alert extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -40,7 +41,7 @@ class Alert extends index.FoundationElement {
     this.timeoutms = 0;
     this.open = false;
     this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && index$1.handleEscapeKeyAndStopPropogation(e)) {
+      if (this.open && this.removable && index.handleEscapeKeyAndStopPropogation(e)) {
         this.open = false;
       }
     };
@@ -105,37 +106,37 @@ class Alert extends index.FoundationElement {
   #onTransitionEnd;
 }
 __decorateClass([
-  index.attr({ attribute: "dismiss-button-aria-label" })
+  defineVividComponent.attr({ attribute: "dismiss-button-aria-label" })
 ], Alert.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], Alert.prototype, "removable");
 __decorateClass([
-  index.attr({ mode: "fromView" })
+  defineVividComponent.attr({ mode: "fromView" })
 ], Alert.prototype, "placement");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Alert.prototype, "headline");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Alert.prototype, "text");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Alert.prototype, "icon");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "fromView",
-    converter: index.nullableNumberConverter
+    converter: defineVividComponent.nullableNumberConverter
   })
 ], Alert.prototype, "timeoutms");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Alert.prototype, "connotation");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Alert.prototype, "strategy");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], Alert.prototype, "open");
 applyMixins.applyMixins(Alert, affix.AffixIcon);
 applyMixins.applyMixins(Alert, localized.Localized);
@@ -149,10 +150,10 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
 );
 function renderIcon(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
+  return defineVividComponent.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
 }
 function renderDismissButton(buttonTag) {
-  return index.html`
+  return defineVividComponent.html`
 		<${buttonTag}
 			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -164,7 +165,7 @@ function renderDismissButton(buttonTag) {
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const buttonTag = context.tagFor(definition$1.Button);
-  return index.html`
+  return defineVividComponent.html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
 			class="${getControlClasses}"
@@ -176,9 +177,9 @@ const AlertTemplate = (context) => {
 				<div class="alert-text">
 					${when.when(
     (x) => x.headline,
-    index.html`<header class="headline">${(x) => x.headline}</header>`
+    defineVividComponent.html`<header class="headline">${(x) => x.headline}</header>`
   )}
-					${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
+					${when.when((x) => x.text, defineVividComponent.html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
@@ -189,19 +190,16 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = Alert.compose({
-  baseName: "alert",
-  template: AlertTemplate,
-  styles
-});
-const alertRegistries = [
-  alertDefinition(),
-  ...definition$2.iconRegistries,
-  ...definition$1.buttonRegistries,
-  ...definition.elevationRegistries
-];
-const registerAlert = index.registerFactory(alertRegistries);
+const alertDefinition = defineVividComponent.defineVividComponent(
+  "alert",
+  Alert,
+  AlertTemplate,
+  [definition$2.iconDefinition, definition$1.buttonDefinition, definition.elevationDefinition],
+  {
+    styles
+  }
+);
+const registerAlert = defineVividComponent.createRegisterFunction(alertDefinition);
 
 exports.alertDefinition = alertDefinition;
-exports.alertRegistries = alertRegistries;
 exports.registerAlert = registerAlert;

package/shared/definition4.js

@@ -1,12 +1,13 @@
-import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { B as Button$1, a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition63.js';
-import { a as iconRegistries } from './definition27.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { E as Elevation, e as elevationDefinition } from './definition62.js';
+import { a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { i as iconDefinition } from './definition27.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
-import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
+import { V as VividElement } from './vivid-element.js';
+import { L as Localized } from './localized.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
@@ -29,7 +30,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Announcement, "sparkles-line"],
   [Connotation.Alert, "error-line"]
 ]);
-class Alert extends FoundationElement {
+class Alert extends VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -161,7 +162,7 @@ function renderDismissButton(buttonTag) {
 }
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
-  const buttonTag = context.tagFor(Button$1);
+  const buttonTag = context.tagFor(Button);
   return html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
@@ -187,17 +188,15 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = Alert.compose({
-  baseName: "alert",
-  template: AlertTemplate,
-  styles
-});
-const alertRegistries = [
-  alertDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries,
-  ...elevationRegistries
-];
-const registerAlert = registerFactory(alertRegistries);
+const alertDefinition = defineVividComponent(
+  "alert",
+  Alert,
+  AlertTemplate,
+  [iconDefinition, buttonDefinition, elevationDefinition],
+  {
+    styles
+  }
+);
+const registerAlert = createRegisterFunction(alertDefinition);
 
-export { alertDefinition as a, alertRegistries as b, registerAlert as r };
+export { alertDefinition as a, registerAlert as r };

package/shared/definition40.cjs

@@ -1,13 +1,22 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const formAssociated = require('./form-associated.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
-const aria = require('./aria.cjs');
-const radio = require('./radio.cjs');
-const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
 
-const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+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(--_connotation-color-intermediate)}.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(--_connotation-color-fierce)}.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-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
+
+class _Radio extends vividElement.VividElement {
+}
+class FormAssociatedRadio extends formAssociated.CheckableFormAssociated(_Radio) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,272 +27,146 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends index.FoundationElement {
+class Radio extends FormAssociatedRadio {
   constructor() {
-    super(...arguments);
-    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    aria.Orientation.horizontal;
-    this.slottedRadioButtons = [];
-    this.radioChangeHandler = (e) => {
-      const changedRadio = e.target;
-      if (changedRadio.checked) {
-        this.slottedRadioButtons.forEach((radio) => {
-          if (radio !== changedRadio) {
-            radio.checked = false;
-          }
-        });
-        this.value = changedRadio.value;
-        this.#setTabRovingTarget(changedRadio);
-      }
-      e.stopPropagation();
-    };
-    this.moveToRadioByIndex = (group, index) => {
-      const radio = group[index];
-      if (!this.isInsideToolbar && !radio.readOnly) {
-        radio.checked = true;
-      }
-      radio.focus();
-    };
-    this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    };
-    this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    };
-    this.moveRight = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = 0;
-      index = group.indexOf(radio) + 1;
-      if (index === group.length && this.isInsideToolbar && e.key === keyCodes.keyArrowRight) {
-        this.moveRightOffGroup();
-        return;
-      }
-      if (index === group.length) {
-        index = 0;
-      }
-      this.moveToRadioByIndex(group, index);
-    };
-    this.moveLeft = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = group.indexOf(radio) - 1;
-      if (this.isInsideToolbar && e.key === keyCodes.keyArrowLeft && index < 0) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      index = index < 0 ? group.length - 1 : index;
-      this.moveToRadioByIndex(group, index);
-    };
+    super();
+    this.ariaLabel = null;
     /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
      *
      * @internal
      */
-    this.keydownHandler = (e) => {
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
       switch (e.key) {
-        case keyCodes.keyEnter:
-          this.checkFocusedRadio(e.target);
-          break;
-        case keyCodes.keyArrowRight:
-        case keyCodes.keyArrowDown:
-          this.moveRight(e);
-          break;
-        case keyCodes.keyArrowLeft:
-        case keyCodes.keyArrowUp:
-          this.moveLeft(e);
-          break;
-        default:
-          return true;
+        case keyCodes.keySpace:
+          if (!this.checked && !this.readOnly) {
+            this.checked = true;
+          }
+          return;
       }
+      return true;
     };
+    this.proxy.setAttribute("type", "radio");
   }
+  // Map to proxy element
   /**
    * @internal
    */
   readOnlyChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.readOnly) {
-        radio.readOnly = true;
-      } else {
-        radio.readOnly = false;
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  disabledChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.disabled) {
-        radio.disabled = true;
-      } else {
-        radio.disabled = false;
-      }
-    });
-  }
-  nameChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.setAttribute("name", this.name);
-    });
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
   }
   /**
    * @internal
    */
-  valueChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (radio.value === this.value) {
-        radio.checked = true;
+  defaultCheckedChanged() {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
       }
-    });
-    this.$emit("change");
-  }
-  get #focusableRadioButtons() {
-    return this.slottedRadioButtons.filter((radio) => !radio.disabled);
-  }
-  /**
-   * @internal
-   */
-  slottedRadioButtonsChanged() {
-    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-      this.setupRadioButtons();
     }
   }
-  get isInsideToolbar() {
-    return !!this.closest('[role="toolbar"]');
-  }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.removeEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-    });
-  }
-  setupRadioButtons() {
-    let foundMatchingVal = false;
-    for (const radio of this.slottedRadioButtons) {
-      if (this.name !== void 0) {
-        radio.setAttribute("name", this.name);
+    this.validate();
+    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
       }
-      if (this.disabled) {
-        radio.disabled = true;
-      }
-      if (this.readOnly) {
-        radio.readOnly = true;
-      }
-      if (this.value && this.value === radio.value) {
-        radio.checked = true;
-        this.#setTabRovingTarget(radio);
-        foundMatchingVal = true;
-      } else {
-        radio.checked = false;
-      }
-      radio.addEventListener(
-        "change",
-        this.radioChangeHandler
-      );
     }
-    if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
-      const checkedRadios = this.slottedRadioButtons.filter(
-        (radio) => radio.hasAttribute("checked")
-      );
-      if (checkedRadios.length > 0 && !foundMatchingVal) {
-        const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-        lastCheckedRadio.checked = true;
-        this.#setTabRovingTarget(lastCheckedRadio);
-      } else {
-        this.#setTabRovingTarget(this.slottedRadioButtons[0]);
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked;
+          this.dirtyChecked = false;
+        }
       }
     }
   }
+  isInsideRadioGroup() {
+    const parent = this.closest(
+      "[role=radiogroup]"
+    );
+    return parent !== null;
+  }
   /**
    * @internal
    */
-  focusInHandler(e) {
-    this.#setTabRovingTarget(e.target);
-  }
-  #setTabRovingTarget(radio) {
-    radio.setAttribute("tabindex", "0");
-    for (const slottedRadio of this.slottedRadioButtons) {
-      if (slottedRadio !== radio) {
-        slottedRadio.setAttribute("tabindex", "-1");
-      }
-    }
-  }
-  checkFocusedRadio(target) {
-    if (!target.readOnly) {
-      target.checked = true;
+  clickHandler(_) {
+    if (!this.disabled && !this.readOnly && !this.checked) {
+      this.checked = true;
     }
   }
 }
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "label");
-__decorateClass([
-  index.attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup.prototype, "readOnly");
+  defineVividComponent.attr({ attribute: "aria-label" })
+], Radio.prototype, "ariaLabel");
 __decorateClass([
-  index.attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup.prototype, "disabled");
+  defineVividComponent.attr
+], Radio.prototype, "label");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "name");
+  defineVividComponent.attr
+], Radio.prototype, "connotation");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "value");
+  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "orientation");
+  defineVividComponent.observable
+], Radio.prototype, "name");
 __decorateClass([
-  index.observable
-], RadioGroup.prototype, "slottedRadioButtons");
+  defineVividComponent.observable
+], Radio.prototype, "defaultSlottedNodes");
 
-const RadioGroupTemplate = (context) => {
-  return index.html`
-		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			${when.when(
-    (x) => x.label,
-    index.html`<label>${(x) => x.label}</label>`
-  )}
+const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["checked", Boolean(checked)],
+  ["readonly", Boolean(readOnly)],
+  ["disabled", Boolean(disabled)]
+);
+const RadioTemplate = defineVividComponent.html`<template
+	role="${(x) => x.ariaLabel ? "presentation" : null}"
+>
+	<div
+		class="${getClasses}"
+		role="radio"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-checked="${(x) => x.checked}"
+		aria-required="${(x) => x.required}"
+		aria-disabled="${(x) => x.disabled}"
+		@keypress="${(x, c) => x.keypressHandler(c.event)}"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+	>
+		<div class="control"></div>
+		${when.when(
+  (x) => x.label,
+  defineVividComponent.html`<label class="label">${(x) => x.label}</label>`
+)}
+	</div>
+</template>`;
 
-			<div
-				class="positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
-			>
-				<slot
-					${slotted.slotted({
-    property: "slottedRadioButtons",
-    filter: slotted.elements(context.tagFor(radio.Radio))
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
-
-const radioGroupDefinition = RadioGroup.compose({
-  baseName: "radio-group",
-  template: RadioGroupTemplate,
-  styles
-});
-const radioGroupRegistries = [radioGroupDefinition()];
-const registerRadioGroup = index.registerFactory(radioGroupRegistries);
+const radioDefinition = defineVividComponent.defineVividComponent(
+  "radio",
+  Radio,
+  RadioTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerRadio = defineVividComponent.createRegisterFunction(radioDefinition);
 
-exports.radioGroupDefinition = radioGroupDefinition;
-exports.radioGroupRegistries = radioGroupRegistries;
-exports.registerRadioGroup = registerRadioGroup;
+exports.Radio = Radio;
+exports.radioDefinition = radioDefinition;
+exports.registerRadio = registerRadio;