@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition39.cjs

@@ -1,11 +1,14 @@
 'use strict';
 
-const index = require('./index.cjs');
-const baseProgress = require('./base-progress.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const definition = require('./definition40.cjs');
+const keyCodes = require('./key-codes.cjs');
+const vividElement = require('./vivid-element.cjs');
+const aria = require('./aria.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
 
-const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
+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)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,73 +19,274 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Progress extends baseProgress.BaseProgress {
+class RadioGroup extends vividElement.VividElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.reverse = false;
+    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);
+    };
+    /**
+     * 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'
+     *
+     * @internal
+     */
+    this.keydownHandler = (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;
+      }
+    };
+  }
+  /**
+   * @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);
+    });
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      if (radio.value === this.value) {
+        radio.checked = true;
+      }
+    });
+    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);
+      }
+      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]);
+      }
+    }
+  }
+  /**
+   * @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;
+    }
   }
 }
 __decorateClass([
-  index.attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel");
+  defineVividComponent.attr
+], RadioGroup.prototype, "label");
+__decorateClass([
+  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  defineVividComponent.attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
 __decorateClass([
-  index.attr()
-], Progress.prototype, "shape");
+  defineVividComponent.attr
+], RadioGroup.prototype, "name");
 __decorateClass([
-  index.attr()
-], Progress.prototype, "connotation");
+  defineVividComponent.attr
+], RadioGroup.prototype, "value");
 __decorateClass([
-  index.attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
+  defineVividComponent.attr
+], RadioGroup.prototype, "orientation");
+__decorateClass([
+  defineVividComponent.observable
+], RadioGroup.prototype, "slottedRadioButtons");
 
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
-);
-function determinate() {
-  return index.html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return index.html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = (_) => {
-  return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-		<div
-			role="progressbar"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-valuenow="${(x) => x.value}"
-			aria-valuemin="${(x) => x.min}"
-			aria-valuemax="${(x) => x.max}"
-			class="${getClasses}"
+const RadioGroupTemplate = (context) => {
+  return defineVividComponent.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)}"
 		>
-			<div class="progress">
-				${when.when((x) => typeof x.value === "number", determinate())}
-				${when.when((x) => typeof x.value !== "number", indeterminate())}
+			${when.when(
+    (x) => x.label,
+    defineVividComponent.html`<label>${(x) => x.label}</label>`
+  )}
+
+			<div
+				class="positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
+			>
+				<slot
+					${slotted.slotted({
+    property: "slottedRadioButtons",
+    filter: slotted.elements(context.tagFor(definition.Radio))
+  })}
+				></slot>
 			</div>
-		</div>
-	</template>`;
+		</template>
+	`;
 };
 
-const progressDefinition = Progress.compose(
+const radioGroupDefinition = defineVividComponent.defineVividComponent(
+  "radio-group",
+  RadioGroup,
+  RadioGroupTemplate,
+  [definition.radioDefinition],
   {
-    baseName: "progress",
-    template: ProgressTemplate,
     styles
   }
 );
-const progressRegistries = [progressDefinition()];
-const registerProgress = index.registerFactory(progressRegistries);
+const registerRadioGroup = defineVividComponent.createRegisterFunction(radioGroupDefinition);
 
-exports.progressDefinition = progressDefinition;
-exports.progressRegistries = progressRegistries;
-exports.registerProgress = registerProgress;
+exports.radioGroupDefinition = radioGroupDefinition;
+exports.registerRadioGroup = registerRadioGroup;

package/shared/definition39.js

@@ -1,9 +1,12 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { B as BaseProgress } from './base-progress.js';
+import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { R as Radio, r as radioDefinition } from './definition40.js';
+import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
+import { V as VividElement } from './vivid-element.js';
+import { O as Orientation } from './aria.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
 
-const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
+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)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,71 +17,273 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Progress extends BaseProgress {
+class RadioGroup extends VividElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.reverse = false;
+    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    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 === 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 === keyArrowLeft && index < 0) {
+        this.moveLeftOffGroup();
+        return;
+      }
+      index = index < 0 ? group.length - 1 : index;
+      this.moveToRadioByIndex(group, index);
+    };
+    /**
+     * 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'
+     *
+     * @internal
+     */
+    this.keydownHandler = (e) => {
+      switch (e.key) {
+        case keyEnter:
+          this.checkFocusedRadio(e.target);
+          break;
+        case keyArrowRight:
+        case keyArrowDown:
+          this.moveRight(e);
+          break;
+        case keyArrowLeft:
+        case keyArrowUp:
+          this.moveLeft(e);
+          break;
+        default:
+          return true;
+      }
+    };
+  }
+  /**
+   * @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);
+    });
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      if (radio.value === this.value) {
+        radio.checked = true;
+      }
+    });
+    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);
+      }
+      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]);
+      }
+    }
+  }
+  /**
+   * @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;
+    }
   }
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel");
+  attr
+], RadioGroup.prototype, "label");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
 __decorateClass([
-  attr()
-], Progress.prototype, "shape");
+  attr
+], RadioGroup.prototype, "name");
 __decorateClass([
-  attr()
-], Progress.prototype, "connotation");
+  attr
+], RadioGroup.prototype, "value");
 __decorateClass([
-  attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
+  attr
+], RadioGroup.prototype, "orientation");
+__decorateClass([
+  observable
+], RadioGroup.prototype, "slottedRadioButtons");
 
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
-);
-function determinate() {
-  return html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = (_) => {
-  return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-		<div
-			role="progressbar"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-valuenow="${(x) => x.value}"
-			aria-valuemin="${(x) => x.min}"
-			aria-valuemax="${(x) => x.max}"
-			class="${getClasses}"
+const RadioGroupTemplate = (context) => {
+  return 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)}"
 		>
-			<div class="progress">
-				${when((x) => typeof x.value === "number", determinate())}
-				${when((x) => typeof x.value !== "number", indeterminate())}
+			${when(
+    (x) => x.label,
+    html`<label>${(x) => x.label}</label>`
+  )}
+
+			<div
+				class="positioning-region ${(x) => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
+			>
+				<slot
+					${slotted({
+    property: "slottedRadioButtons",
+    filter: elements(context.tagFor(Radio))
+  })}
+				></slot>
 			</div>
-		</div>
-	</template>`;
+		</template>
+	`;
 };
 
-const progressDefinition = Progress.compose(
+const radioGroupDefinition = defineVividComponent(
+  "radio-group",
+  RadioGroup,
+  RadioGroupTemplate,
+  [radioDefinition],
   {
-    baseName: "progress",
-    template: ProgressTemplate,
     styles
   }
 );
-const progressRegistries = [progressDefinition()];
-const registerProgress = registerFactory(progressRegistries);
+const registerRadioGroup = createRegisterFunction(radioGroupDefinition);
 
-export { progressRegistries as a, progressDefinition as p, registerProgress as r };
+export { registerRadioGroup as a, radioGroupDefinition as r };