@vonage/vivid 3.49.0 → 3.50.1

package/shared/definition41.js

@@ -1,5 +1,4 @@
 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 { a as iconRegistries } from './definition26.js';
 import { L as ListboxOption, a as listboxOptionRegistries } from './definition35.js';
@@ -514,7 +513,7 @@ __decorate([
 applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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)}.control:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-select-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-select-success-fierce, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-select-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-select-alert-fierce, var(--vvd-color-alert-700))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
+const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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)}.control:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -594,8 +593,8 @@ const getStateClasses = ({
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
   ["has-meta", Boolean(metaSlottedContent?.length)],
-  ["error connotation-alert", Boolean(errorValidationMessage)],
-  ["success connotation-success", !!successText],
+  ["error", Boolean(errorValidationMessage)],
+  ["success", !!successText],
   ["has-meta", Boolean(metaSlottedContent?.length)]
 );
 function renderLabel() {
@@ -684,7 +683,7 @@ const selectDefinition = Select.compose({
   template: SelectTemplate,
   styles
 });
-const selectRegistries = [selectDefinition(), ...focusRegistries, ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
+const selectRegistries = [selectDefinition(), ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
 const registerSelect = registerFactory(selectRegistries);
 
 export { selectRegistries as a, registerSelect as r, selectDefinition as s };

package/shared/definition42.cjs

@@ -2,15 +2,13 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition15.cjs');
-const definition$1 = require('./definition58.cjs');
-const definition$2 = require('./definition40.cjs');
-const focus = require('./focus2.cjs');
+const definition$1 = require('./definition40.cjs');
 const enums = require('./enums.cjs');
 const radio$1 = require('./radio.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = "@supports selector(:focus-visible){.base:focus-visible{outline:none}}:host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent;--focus-inset: -1px;pointer-events:none}.base:not(:focus-visible)>.focus-indicator{display:none}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
+const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -91,7 +89,7 @@ function checkbox(context) {
 		<${checkboxTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox" 
+			class="control checkbox"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -104,7 +102,7 @@ function radio(context) {
 		<${radioTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
-			class="control radio" 
+			class="control radio"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -112,7 +110,6 @@ function radio(context) {
 	`;
 }
 const SelectableBoxTemplate = (context) => {
-  const focusTemplate = focus.focusTemplateFactory(context);
   return index.html`<template role="presentation">
 	<div
 		class="${getClasses}"
@@ -123,7 +120,6 @@ const SelectableBoxTemplate = (context) => {
 		@keydown="${(x, c) => x._handleKeydown(c.event)}"
 		@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
 	>
-		${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
 		${checkbox(context)}
 		${radio(context)}
 		<slot></slot>
@@ -142,8 +138,7 @@ const selectableBoxDefinition = SelectableBox.compose({
 const selectableBoxRegistries = [
   selectableBoxDefinition(),
   ...definition.checkboxRegistries,
-  ...definition$1.focusRegistries,
-  ...definition$2.radioRegistries
+  ...definition$1.radioRegistries
 ];
 const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
 

package/shared/definition42.js

@@ -1,14 +1,12 @@
 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 { a as radioRegistries } from './definition40.js';
-import { f as focusTemplateFactory } from './focus2.js';
 import { C as Connotation } from './enums.js';
 import { R as Radio } from './radio.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = "@supports selector(:focus-visible){.base:focus-visible{outline:none}}:host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent;--focus-inset: -1px;pointer-events:none}.base:not(:focus-visible)>.focus-indicator{display:none}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
+const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -89,7 +87,7 @@ function checkbox(context) {
 		<${checkboxTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox" 
+			class="control checkbox"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -102,7 +100,7 @@ function radio(context) {
 		<${radioTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
-			class="control radio" 
+			class="control radio"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -110,7 +108,6 @@ function radio(context) {
 	`;
 }
 const SelectableBoxTemplate = (context) => {
-  const focusTemplate = focusTemplateFactory(context);
   return html`<template role="presentation">
 	<div
 		class="${getClasses}"
@@ -121,7 +118,6 @@ const SelectableBoxTemplate = (context) => {
 		@keydown="${(x, c) => x._handleKeydown(c.event)}"
 		@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
 	>
-		${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
 		${checkbox(context)}
 		${radio(context)}
 		<slot></slot>
@@ -140,7 +136,6 @@ const selectableBoxDefinition = SelectableBox.compose({
 const selectableBoxRegistries = [
   selectableBoxDefinition(),
   ...checkboxRegistries,
-  ...focusRegistries,
   ...radioRegistries
 ];
 const registerSelectableBox = registerFactory(selectableBoxRegistries);

package/shared/definition44.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition58.cjs');
 const direction = require('./direction.cjs');
 const numbers = require('./numbers.cjs');
 const formAssociated = require('./form-associated.cjs');
@@ -598,7 +597,7 @@ const sliderDefinition = Slider.compose({
     delegatesFocus: true
   }
 });
-const sliderRegistries = [sliderDefinition(), ...definition.focusRegistries];
+const sliderRegistries = [sliderDefinition()];
 const registerSlider = index.registerFactory(sliderRegistries);
 
 exports.Slider = Slider;

package/shared/definition44.js

@@ -1,5 +1,4 @@
 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 { 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';
@@ -596,7 +595,7 @@ const sliderDefinition = Slider.compose({
     delegatesFocus: true
   }
 });
-const sliderRegistries = [sliderDefinition(), ...focusRegistries];
+const sliderRegistries = [sliderDefinition()];
 const registerSlider = registerFactory(sliderRegistries);
 
 export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };

package/shared/definition45.cjs

@@ -2,7 +2,6 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
 const affix = require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');
@@ -144,7 +143,7 @@ const splitButtonDefinition = SplitButton.compose({
     delegatesFocus: true
   }
 });
-const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries];
 const registerSplitButton = index.registerFactory(splitButtonRegistries);
 
 exports.registerSplitButton = registerSplitButton;

package/shared/definition45.js

@@ -1,6 +1,5 @@
 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 { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -142,7 +141,7 @@ const splitButtonDefinition = SplitButton.compose({
     delegatesFocus: true
   }
 });
-const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries, ...focusRegistries];
+const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
 const registerSplitButton = registerFactory(splitButtonRegistries);
 
 export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };

package/shared/definition46.cjs

@@ -2,7 +2,6 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
 const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
 const when = require('./when.cjs');
@@ -158,7 +157,7 @@ const switchDefinition = Switch.compose({
     delegatesFocus: true
   }
 });
-const switchRegistries = [switchDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const switchRegistries = [switchDefinition(), ...definition.iconRegistries];
 const registerSwitch = index.registerFactory(switchRegistries);
 
 exports.registerSwitch = registerSwitch;

package/shared/definition46.js

@@ -1,6 +1,5 @@
 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 { 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';
@@ -156,7 +155,7 @@ const switchDefinition = Switch.compose({
     delegatesFocus: true
   }
 });
-const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
+const switchRegistries = [switchDefinition(), ...iconRegistries];
 const registerSwitch = registerFactory(switchRegistries);
 
 export { switchRegistries as a, registerSwitch as r, switchDefinition as s };

package/shared/definition48.cjs

@@ -2,10 +2,8 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const focus = require('./focus2.cjs');
 const classNames = require('./class-names.cjs');
 
 /**
@@ -21,7 +19,7 @@ index.__decorate([
     index.attr({ mode: "boolean" })
 ], Tab$1.prototype, "disabled", void 0);
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}.focus-indicator{--focus-stroke-gap-color: transparent}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
+const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;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))}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -74,11 +72,9 @@ const getClasses = ({
 );
 function TabTemplate(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const focusTemplate = focus.focusTemplateFactory(context);
   return index.html`
 	<template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
 		<div class="${getClasses}" >
-      ${() => focusTemplate}
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
       ${(x) => x.label}
 		</div>
@@ -90,7 +86,7 @@ const tabDefinition = Tab.compose({
   template: TabTemplate,
   styles
 });
-const tabRegistries = [tabDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
 const registerTab = index.registerFactory(tabRegistries);
 
 exports.registerTab = registerTab;

package/shared/definition48.js

@@ -1,9 +1,7 @@
 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 { 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';
 import { c as classNames } from './class-names.js';
 
 /**
@@ -19,7 +17,7 @@ __decorate([
     attr({ mode: "boolean" })
 ], Tab$1.prototype, "disabled", void 0);
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}.focus-indicator{--focus-stroke-gap-color: transparent}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
+const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;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))}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -72,11 +70,9 @@ const getClasses = ({
 );
 function TabTemplate(context) {
   const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
   return html`
 	<template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
 		<div class="${getClasses}" >
-      ${() => focusTemplate}
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
       ${(x) => x.label}
 		</div>
@@ -88,7 +84,7 @@ const tabDefinition = Tab.compose({
   template: TabTemplate,
   styles
 });
-const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
+const tabRegistries = [tabDefinition(), ...iconRegistries];
 const registerTab = registerFactory(tabRegistries);
 
 export { tabRegistries as a, registerTab as r, tabDefinition as t };

package/shared/definition5.cjs

@@ -3,7 +3,6 @@
 const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition44.cjs');
-const definition$2 = require('./definition58.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');
@@ -191,7 +190,7 @@ const audioPlayerDefinition = AudioPlayer.compose({
   template: AudioPlayerTemplate,
   styles
 });
-const audioPlayerRegistries = [audioPlayerDefinition(), ...definition.buttonRegistries, ...definition$1.sliderRegistries, ...definition$2.focusRegistries];
+const audioPlayerRegistries = [audioPlayerDefinition(), ...definition.buttonRegistries, ...definition$1.sliderRegistries];
 const registerAudioPlayer = index.registerFactory(audioPlayerRegistries);
 
 exports.audioPlayerDefinition = audioPlayerDefinition;

package/shared/definition5.js

@@ -1,7 +1,6 @@
 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 './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -189,7 +188,7 @@ const audioPlayerDefinition = AudioPlayer.compose({
   template: AudioPlayerTemplate,
   styles
 });
-const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries, ...focusRegistries];
+const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries];
 const registerAudioPlayer = registerFactory(audioPlayerRegistries);
 
 export { audioPlayerDefinition as a, audioPlayerRegistries as b, registerAudioPlayer as r };

package/shared/definition51.cjs

@@ -2,10 +2,8 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const focus = require('./focus2.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -83,7 +81,7 @@ __decorateClass([
 ], Tag.prototype, "selected", 2);
 applyMixins.applyMixins(Tag, affix.AffixIcon);
 
-const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent}.base:not(:focus-visible) .focus-indicator{display:none}\n";
+const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}\n";
 
 const getClasses = ({
   connotation,
@@ -115,7 +113,6 @@ function renderDismissButton(iconTag) {
 const tagTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(icon.Icon);
-  const focusTemplate = focus.focusTemplateFactory(context);
   return index.html`
 	<span class="${getClasses}"
 	role="option"
@@ -131,7 +128,6 @@ const tagTemplate = (context) => {
     (x) => x.selectable && x.selected,
     index.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
   )}
-		${() => focusTemplate}
 	</span>`;
 };
 
@@ -143,7 +139,7 @@ const tagDefinition = Tag.compose({
     delegatesFocus: true
   }
 });
-const tagRegistries = [tagDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const tagRegistries = [tagDefinition(), ...definition.iconRegistries];
 const registerTag = index.registerFactory(tagRegistries);
 
 exports.registerTag = registerTag;

package/shared/definition51.js

@@ -1,9 +1,7 @@
 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 { 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';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -81,7 +79,7 @@ __decorateClass([
 ], Tag.prototype, "selected", 2);
 applyMixins(Tag, AffixIcon);
 
-const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent}.base:not(:focus-visible) .focus-indicator{display:none}\n";
+const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}\n";
 
 const getClasses = ({
   connotation,
@@ -113,7 +111,6 @@ function renderDismissButton(iconTag) {
 const tagTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const iconTag = context.tagFor(Icon);
-  const focusTemplate = focusTemplateFactory(context);
   return html`
 	<span class="${getClasses}"
 	role="option"
@@ -129,7 +126,6 @@ const tagTemplate = (context) => {
     (x) => x.selectable && x.selected,
     html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
   )}
-		${() => focusTemplate}
 	</span>`;
 };
 
@@ -141,7 +137,7 @@ const tagDefinition = Tag.compose({
     delegatesFocus: true
   }
 });
-const tagRegistries = [tagDefinition(), ...iconRegistries, ...focusRegistries];
+const tagRegistries = [tagDefinition(), ...iconRegistries];
 const registerTag = registerFactory(tagRegistries);
 
 export { registerTag as r, tagDefinition as t };

package/shared/definition52.cjs

@@ -2,7 +2,6 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition58.cjs');
 require('./affix.cjs');
 const index$1 = require('./index2.cjs');
 const Reflector = require('./Reflector.cjs');
@@ -190,7 +189,7 @@ index.__decorate([
 ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
 applyMixins.applyMixins(TextArea$1, textField.DelegatesARIATextbox);
 
-const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus{outline:2px solid var(--focus-stroke-color, currentColor);outline-offset:-2px}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
+const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -296,7 +295,7 @@ const textAreaDefinition = TextArea.compose({
     delegatesFocus: true
   }
 });
-const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries];
 const registerTextArea = index.registerFactory(textAreaRegistries);
 
 exports.registerTextArea = registerTextArea;