@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition42.cjs → radio/definition.cjs}

@@ -1,14 +1,15 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const formAssociated = require('./form-associated.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 when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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)}";
+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(--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) => {
@@ -24,7 +25,6 @@ class Radio extends withErrorText.WithErrorText(
 ) {
   constructor() {
     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"]
@@ -38,7 +38,7 @@ class Radio extends withErrorText.WithErrorText(
      */
     this.keypressHandler = (e) => {
       switch (e.key) {
-        case keyCodes.keySpace:
+        case fastWebUtilities.keySpace:
           if (!this.checked && !this.readOnly) {
             this.checked = true;
           }
@@ -106,14 +106,14 @@ class Radio extends withErrorText.WithErrorText(
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    vividElement.DOM.queueUpdate(this.validate);
+    fastElement.DOM.queueUpdate(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    vividElement.DOM.queueUpdate(this.validate);
+    fastElement.DOM.queueUpdate(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -178,26 +178,23 @@ class Radio extends withErrorText.WithErrorText(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
-__decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Radio.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Radio.prototype, "readOnly");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Radio.prototype, "defaultSlottedNodes");
 
-const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
+const getClasses = ({ connotation, checked, readOnly, disabled }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   ["checked", Boolean(checked)],
   ["readonly", Boolean(readOnly)],
   ["disabled", Boolean(disabled)]
 );
-const RadioTemplate = vividElement.html`<template
+const RadioTemplate = fastElement.html`<template
 	aria-checked="${(x) => x.checked}"
 	aria-disabled="${(x) => x.disabled}"
 	aria-required="${(x) => x.required}"
@@ -207,9 +204,9 @@ const RadioTemplate = vividElement.html`<template
 >
 	<div class="${getClasses}">
 		<div class="control"></div>
-		${when.when(
+		${fastElement.when(
   (x) => x.label,
-  vividElement.html`<label class="label">${(x) => x.label}</label>`
+  fastElement.html`<label class="label">${(x) => x.label}</label>`
 )}
 	</div>
 </template>`;
@@ -225,6 +222,6 @@ const radioDefinition = vividElement.defineVividComponent(
 );
 const registerRadio = vividElement.createRegisterFunction(radioDefinition);
 
-exports.Radio = Radio;
+exports.VwcRadioElement = Radio;
 exports.radioDefinition = radioDefinition;
 exports.registerRadio = registerRadio;

package/{shared/definition42.js → radio/definition.js}

@@ -1,12 +1,11 @@
-import { D as DOM, V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { F as FormElement } from './form-element.js';
-import { a as keySpace } from './key-codes.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { DOM, 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)}.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)}";
+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(--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) => {
@@ -22,7 +21,6 @@ class Radio extends WithErrorText(
 ) {
   constructor() {
     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"]
@@ -175,9 +173,6 @@ class Radio extends WithErrorText(
     }
   }
 }
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
 __decorateClass([
   attr
 ], Radio.prototype, "connotation");
@@ -223,4 +218,4 @@ const radioDefinition = defineVividComponent(
 );
 const registerRadio = createRegisterFunction(radioDefinition);
 
-export { Radio as R, registerRadio as a, radioDefinition as r };
+export { Radio as VwcRadioElement, radioDefinition, registerRadio };

package/radio/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition42.cjs');
-
-definition.registerRadio();
+"use strict";const i=require("../bundled/definition17.cjs");i.registerRadio();

package/radio/index.js

@@ -1,3 +1,2 @@
-import { a as registerRadio } from '../shared/definition42.js';
-
-registerRadio();
+import { r } from "../bundled/definition17.js";
+r();

package/{shared/definition41.cjs → radio-group/definition.cjs}

@@ -1,13 +1,14 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition42.cjs');
-const mixins = require('./mixins.cjs');
-const keyCodes = require('./key-codes.cjs');
-const aria = require('./aria.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const slotted = require('./slotted.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const radio_definition = require('../radio/definition.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const keyCodes = require('../unbundled/key-codes.cjs');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
 
 const styles = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
 
@@ -25,7 +26,7 @@ class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
     super(...arguments);
     this.errorValidationMessage = "";
     this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    aria.Orientation.horizontal;
+    fastWebUtilities.Orientation.horizontal;
     this.slottedRadioButtons = [];
     this.radioErrorHandler = (e) => {
       const radio = e.target;
@@ -90,15 +91,15 @@ class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
      */
     this.keydownHandler = (e) => {
       switch (e.key) {
-        case keyCodes.keyEnter:
+        case fastWebUtilities.keyEnter:
           this.checkFocusedRadio(e.target);
           break;
         case keyCodes.keyArrowRight:
-        case keyCodes.keyArrowDown:
+        case fastWebUtilities.keyArrowDown:
           this.moveRight(e);
           break;
         case keyCodes.keyArrowLeft:
-        case keyCodes.keyArrowUp:
+        case fastWebUtilities.keyArrowUp:
           this.moveLeft(e);
           break;
         default:
@@ -276,38 +277,38 @@ class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RadioGroup.prototype, "label");
 __decorateClass([
-  vividElement.attr({ attribute: "required", mode: "boolean" })
+  fastElement.attr({ attribute: "required", mode: "boolean" })
 ], RadioGroup.prototype, "required");
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], RadioGroup.prototype, "readOnly");
 __decorateClass([
-  vividElement.attr({ attribute: "disabled", mode: "boolean" })
+  fastElement.attr({ attribute: "disabled", mode: "boolean" })
 ], RadioGroup.prototype, "disabled");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RadioGroup.prototype, "name");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RadioGroup.prototype, "value");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RadioGroup.prototype, "errorValidationMessage");
 __decorateClass([
-  vividElement.attr({ attribute: "error-text" })
+  fastElement.attr({ attribute: "error-text" })
 ], RadioGroup.prototype, "errorText");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RadioGroup.prototype, "orientation");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
-  return vividElement.html`
+  return fastElement.html`
 		<template
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
 			@focusin="${(x, c) => x.focusInHandler(c.event)}"
@@ -323,16 +324,16 @@ const RadioGroupTemplate = (context) => {
 					aria-labelledby="label"
 					aria-describedby="${(x) => x._feedbackDescribedBy}"
 					aria-invalid="${(x) => x.errorText ? "true" : "false"}"
-					class="control positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
+					class="control positioning-region ${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? "horizontal" : "vertical"}"
 				>
-					${when.when(
+					${fastElement.when(
     (x) => x.label,
-    vividElement.html`<legend id="label">${(x) => x.label}</legend>`
+    fastElement.html`<legend id="label">${(x) => x.label}</legend>`
   )}
 					<slot
-						${slotted.slotted({
+						${fastElement.slotted({
     property: "slottedRadioButtons",
-    filter: slotted.elements(context.tagFor(definition.Radio))
+    filter: fastElement.elements(context.tagFor(radio_definition.VwcRadioElement))
   })}
 						@slotchange="${(x) => x.handleSlotChange()}"
 					></slot>
@@ -347,13 +348,13 @@ const radioGroupDefinition = vividElement.defineVividComponent(
   "radio-group",
   RadioGroup,
   RadioGroupTemplate,
-  [definition.radioDefinition, mixins.feedbackMessageDefinition],
+  [radio_definition.radioDefinition, mixins.feedbackMessageDefinition],
   {
     styles
   }
 );
 const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
 
-exports.RadioGroup = RadioGroup;
+exports.VwcRadioGroupElement = RadioGroup;
 exports.radioGroupDefinition = radioGroupDefinition;
 exports.registerRadioGroup = registerRadioGroup;

package/{shared/definition41.js → radio-group/definition.js}

@@ -1,11 +1,10 @@
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { R as Radio, r as radioDefinition } from './definition42.js';
-import { a as WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
-import { h as keyArrowRight, i as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
-import { O as Orientation } from './aria.js';
-import { d as delegateAria } from './delegates-aria.js';
-import { s as slotted, e as elements } from './slotted.js';
-import { w as when } from './when.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { VwcRadioElement as Radio, radioDefinition } from '../radio/definition.js';
+import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
+import { attr, observable, when, slotted, html, elements } from '@microsoft/fast-element';
+import { Orientation, keyArrowUp, keyArrowDown, keyEnter } from '@microsoft/fast-web-utilities';
+import { k as keyArrowRight, a as keyArrowLeft } from '../unbundled/key-codes.js';
+import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
 const styles = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
 
@@ -352,4 +351,4 @@ const radioGroupDefinition = defineVividComponent(
 );
 const registerRadioGroup = createRegisterFunction(radioGroupDefinition);
 
-export { RadioGroup as R, registerRadioGroup as a, radioGroupDefinition as r };
+export { RadioGroup as VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup };

package/radio-group/index.cjs

@@ -1,5 +1,23 @@
-'use strict';
-
-const definition = require('../shared/definition41.cjs');
-
-definition.registerRadioGroup();
+"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition17.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),u=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),v=".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";var y=Object.defineProperty,s=(d,e,t,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(e,t,o)||o);return o&&y(e,t,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=e=>{const t=e.target;this.errorValidationMessage=t.errorValidationMessage||""},this.radioChangeHandler=e=>{const t=e.target;t.checked&&(this.slottedRadioButtons?.forEach(i=>{i!==t&&(i.checked=!1)}),this.value=t.value,this.#e(t)),e.stopPropagation()},this.moveToRadioByIndex=(e,t)=>{const i=e[t];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=e=>{const t=e.target,i=this.#t;let o=0;if(o=i.indexOf(t)+1,o===i.length&&this.isInsideToolbar&&e.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=e=>{const t=e.target,i=this.#t;let o=i.indexOf(t)-1;if(this.isInsideToolbar&&e.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=e=>{switch(e.key){case n.keyEnter:this.checkFocusedRadio(e.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(e);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(e);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(e=>{this.required?e.required=!0:e.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(e=>{this.readOnly?e.readOnly=!0:e.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(e=>{this.disabled?e.disabled=!0:e.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(e=>{e.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(e=>{e.value===this.value&&(e.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(e=>{e.errorText=this.errorText})}errorTextChanged(e,t){t?this.errorValidationMessage=t:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(e=>!e.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(e=>{e.removeEventListener("change",this.radioChangeHandler),e.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){let e=!1;for(const t of this.slottedRadioButtons)this.name!==void 0&&t.setAttribute("name",this.name),this.disabled&&(t.disabled=!0),this.readOnly&&(t.readOnly=!0),this.required&&(t.required=!0),this.value&&this.value===t.value?(t.checked=!0,this.#e(t),e=!0):t.checked=!1,t.addEventListener("change",this.radioChangeHandler),t.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const t=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(t.length>0&&!e){const i=t[t.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(e){this.#e(e.target)}#e(e){e.setAttribute("tabindex","0");for(const t of this.slottedRadioButtons)t!==e&&t.setAttribute("tabindex","-1")}checkFocusedRadio(e){e.readOnly||(e.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>r.html`
+		<template
+			@keydown="${(e,t)=>e.keydownHandler(t.event)}"
+			@focusin="${(e,t)=>e.focusInHandler(t.event)}"
+		>
+			<div class="base">
+				<fieldset
+					${p.delegateAria({role:"radiogroup",ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaOrientation:e=>e.orientation})}
+					aria-labelledby="label"
+					aria-describedby="${e=>e._feedbackDescribedBy}"
+					aria-invalid="${e=>e.errorText?"true":"false"}"
+					class="control positioning-region ${e=>e.orientation===g.Orientation.horizontal?"horizontal":"vertical"}"
+				>
+					${b.when(e=>e.label,r.html`<legend id="label">${e=>e.label}</legend>`)}
+					<slot
+						${u.slotted({property:"slottedRadioButtons",filter:u.elements(d.tagFor(c.Radio))})}
+						@slotchange="${e=>e.handleSlotChange()}"
+					></slot>
+				</fieldset>
+				${e=>e._getFeedbackTemplate(d)}
+			</div>
+		</template>
+	`,m=r.defineVividComponent("radio-group",a,R,[c.radioDefinition,f.feedbackMessageDefinition],{styles:v}),k=r.createRegisterFunction(m);k();