@vonage/vivid 3.49.0 → 3.50.0

package/shared/definition19.cjs

@@ -2,9 +2,9 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition60.cjs');
+const definition$1 = require('./definition61.cjs');
 const definition$2 = require('./definition53.cjs');
-const definition$3 = require('./definition58.cjs');
+const definition$3 = require('./definition59.cjs');
 const definition$4 = require('./definition21.cjs');
 const presentationDate = require('./presentationDate.cjs');
 require('./affix.cjs');

package/shared/definition19.js

@@ -1,8 +1,8 @@
 import { a as attr, o as observable, v as volatile, r as registerFactory } from './index.js';
 import { a as buttonRegistries } from './definition11.js';
-import { p as popupRegistries } from './definition60.js';
+import { p as popupRegistries } from './definition61.js';
 import { a as textFieldRegistries } from './definition53.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { a as dividerRegistries } from './definition21.js';
 import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
 import './affix.js';

package/shared/definition20.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition$2 = require('./definition26.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition = require('./definition59.cjs');
+const definition = require('./definition60.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');

package/shared/definition20.js

@@ -1,7 +1,7 @@
 import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { E as Elevation, e as elevationRegistries } from './definition60.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';

package/shared/definition23.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const button = require('./button.cjs');

package/shared/definition23.js

@@ -1,6 +1,6 @@
 import { a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { B as Button$1 } from './button.js';

package/shared/definition24.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition$1 = require('./definition26.cjs');
-const definition$2 = require('./definition58.cjs');
+const definition$2 = require('./definition59.cjs');
 const definition = require('./definition11.cjs');
 const enums = require('./enums.cjs');
 require('./affix.cjs');

package/shared/definition24.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { C as Connotation } from './enums.js';
 import './affix.js';

package/shared/definition25.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition59.cjs');
+const definition = require('./definition60.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";

package/shared/definition25.js

@@ -1,5 +1,5 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { E as Elevation, e as elevationRegistries } from './definition60.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";

package/shared/definition28.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const startEnd = require('./start-end.cjs');

package/shared/definition28.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { S as StartEnd } from './start-end.js';

package/shared/definition29.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition60.cjs');
+const definition = require('./definition61.cjs');
 const definition$1 = require('./definition28.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');

package/shared/definition29.js

@@ -1,5 +1,5 @@
 import { h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition60.js';
+import { P as Popup, p as popupRegistries } from './definition61.js';
 import { b as Menu, a as menuItemRegistries } from './definition28.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';

package/shared/definition30.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const icon = require('./icon.cjs');

package/shared/definition30.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { I as Icon } from './icon.js';

package/shared/definition31.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const textAnchor = require('./text-anchor.cjs');
 const applyMixins = require('./apply-mixins.cjs');

package/shared/definition31.js

@@ -1,6 +1,6 @@
 import { h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { A as AffixIcon } from './affix.js';
 import { T as TextAnchor } from './text-anchor.js';
 import { a as applyMixins } from './apply-mixins.js';

package/shared/definition35.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 const startEnd = require('./start-end.cjs');

package/shared/definition35.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { S as StartEnd } from './start-end.js';

package/shared/definition4.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition59.cjs');
+const definition = require('./definition60.cjs');
 const definition$1 = require('./definition26.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');

package/shared/definition4.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { E as Elevation, e as elevationRegistries } from './definition60.js';
 import { a as iconRegistries } from './definition26.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';

package/shared/definition40.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition58.cjs');
+const definition = require('./definition59.cjs');
 const radio = require('./radio.cjs');
-const focus = require('./focus2.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;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;background-color:var(--_appearance-color-outline);border-radius:inherit;content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}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}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;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;background-color:var(--_appearance-color-outline);border-radius:inherit;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;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:inherit;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}\n";
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
   "base",
@@ -16,8 +15,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.
   ["readonly", Boolean(readOnly)],
   ["disabled", Boolean(disabled)]
 );
-const RadioTemplate = (context) => {
-  const focusTemplate = focus.focusTemplateFactory(context);
+const RadioTemplate = () => {
   return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
 	<div class="${getClasses}"
 		role="radio"
@@ -29,7 +27,6 @@ const RadioTemplate = (context) => {
 		@click="${(x, c) => x.clickHandler(c.event)}"
 	>
 		<div class="control">
-			${() => focusTemplate}
 		</div>
 		${when.when((x) => x.label, index.html`<label class="label">${(x) => x.label}</label>`)}
 	</div>

package/shared/definition40.js

@@ -1,11 +1,10 @@
 import { h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { R as Radio } from './radio.js';
-import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;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;background-color:var(--_appearance-color-outline);border-radius:inherit;content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}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}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;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;background-color:var(--_appearance-color-outline);border-radius:inherit;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;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:inherit;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}\n";
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   "base",
@@ -14,8 +13,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   ["readonly", Boolean(readOnly)],
   ["disabled", Boolean(disabled)]
 );
-const RadioTemplate = (context) => {
-  const focusTemplate = focusTemplateFactory(context);
+const RadioTemplate = () => {
   return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
 	<div class="${getClasses}"
 		role="radio"
@@ -27,7 +25,6 @@ const RadioTemplate = (context) => {
 		@click="${(x, c) => x.clickHandler(c.event)}"
 	>
 		<div class="control">
-			${() => focusTemplate}
 		</div>
 		${when((x) => x.label, html`<label class="label">${(x) => x.label}</label>`)}
 	</div>

package/shared/definition41.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$2 = require('./definition58.cjs');
-const definition = require('./definition60.cjs');
+const definition$2 = require('./definition59.cjs');
+const definition = require('./definition61.cjs');
 const definition$3 = require('./definition26.cjs');
 const definition$1 = require('./definition35.cjs');
 const affix = require('./affix.cjs');

package/shared/definition41.js

@@ -1,6 +1,6 @@
 import { D as DOM, O as Observable, _ as __decorate, a as attr, v as volatile, o as observable, h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition58.js';
-import { P as Popup, p as popupRegistries } from './definition60.js';
+import { f as focusRegistries } from './definition59.js';
+import { P as Popup, p as popupRegistries } from './definition61.js';
 import { a as iconRegistries } from './definition26.js';
 import { L as ListboxOption, a as listboxOptionRegistries } from './definition35.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';

package/shared/definition42.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition15.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const definition$2 = require('./definition40.cjs');
 const focus = require('./focus2.cjs');
 const enums = require('./enums.cjs');

package/shared/definition42.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { C as Checkbox, a as checkboxRegistries } from './definition15.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { a as radioRegistries } from './definition40.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { C as Connotation } from './enums.js';

package/shared/definition44.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition58.cjs');
+const definition = require('./definition59.cjs');
 const direction = require('./direction.cjs');
 const numbers = require('./numbers.cjs');
 const formAssociated = require('./form-associated.cjs');

package/shared/definition44.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { l as limit$1 } from './numbers.js';
 import { F as FormAssociated } from './form-associated.js';

package/shared/definition45.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');

package/shared/definition45.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';

package/shared/definition46.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
 const when = require('./when.cjs');

package/shared/definition46.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
 import { a as keySpace, k as keyEnter } from './key-codes.js';
 import { w as when } from './when.js';

package/shared/definition48.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const focus = require('./focus2.cjs');

package/shared/definition48.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { f as focusTemplateFactory } from './focus2.js';

package/shared/definition5.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition44.cjs');
-const definition$2 = require('./definition58.cjs');
+const definition$2 = require('./definition59.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');

package/shared/definition5.js

@@ -1,7 +1,7 @@
 import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { S as Slider, a as sliderRegistries } from './definition44.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';

package/shared/definition51.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const focus = require('./focus2.cjs');

package/shared/definition51.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { f as focusTemplateFactory } from './focus2.js';

package/shared/definition52.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 require('./affix.cjs');
 const index$1 = require('./index2.cjs');
 const Reflector = require('./Reflector.cjs');

package/shared/definition52.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import './affix.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
 import { R as Reflector } from './Reflector.js';

package/shared/definition53.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$1 = require('./definition58.cjs');
+const definition$1 = require('./definition59.cjs');
 const definition = require('./definition26.cjs');
 const affix = require('./affix.cjs');
 const index$1 = require('./index2.cjs');

package/shared/definition53.js

@@ -1,5 +1,5 @@
 import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition58.js';
+import { f as focusRegistries } from './definition59.js';
 import { a as iconRegistries } from './definition26.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';