@vonage/vivid 4.4.0 → 4.5.0

package/index.cjs

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const enums = require('./shared/enums.cjs');
+const index = require('./shared/index.cjs');
+const localized = require('./shared/localized.cjs');
 const definition = require('./shared/definition.cjs');
 const definition$1 = require('./shared/definition2.cjs');
 const definition$2 = require('./shared/definition3.cjs');
@@ -63,12 +66,24 @@ const definition$V = require('./shared/definition58.cjs');
 const definition$W = require('./shared/definition59.cjs');
 const definition$X = require('./shared/definition60.cjs');
 const definition$Y = require('./shared/definition61.cjs');
-const enums = require('./shared/enums.cjs');
-const index$1 = require('./shared/index.cjs');
-const index = require('./shared/index2.cjs');
 
 
 
+exports.Appearance = enums.Appearance;
+exports.AriaLive = enums.AriaLive;
+exports.Connotation = enums.Connotation;
+exports.ConnotationDecorative = enums.ConnotationDecorative;
+exports.IconDecoration = enums.IconDecoration;
+exports.LayoutSize = enums.LayoutSize;
+exports.MediaSkipBy = enums.MediaSkipBy;
+exports.Position = enums.Position;
+exports.Role = enums.Role;
+exports.Shape = enums.Shape;
+exports.Size = enums.Size;
+exports.TabsGutters = enums.TabsGutters;
+exports.designSystem = index.designSystem;
+exports.registerFactory = index.registerFactory;
+exports.setLocale = localized.setLocale;
 exports.accordionItemDefinition = definition.accordionItemDefinition;
 exports.accordionItemRegistries = definition.accordionItemRegistries;
 exports.registerAccordionItem = definition.registerAccordionItem;
@@ -253,18 +268,3 @@ exports.treeViewRegistries = definition$X.treeViewRegistries;
 exports.registerVideoPlayer = definition$Y.registerVideoPlayer;
 exports.videoPlayerDefinition = definition$Y.videoPlayerDefinition;
 exports.videoPlayerRegistries = definition$Y.videoPlayerRegistries;
-exports.Appearance = enums.Appearance;
-exports.AriaLive = enums.AriaLive;
-exports.Connotation = enums.Connotation;
-exports.ConnotationDecorative = enums.ConnotationDecorative;
-exports.IconDecoration = enums.IconDecoration;
-exports.LayoutSize = enums.LayoutSize;
-exports.MediaSkipBy = enums.MediaSkipBy;
-exports.Position = enums.Position;
-exports.Role = enums.Role;
-exports.Shape = enums.Shape;
-exports.Size = enums.Size;
-exports.TabsGutters = enums.TabsGutters;
-exports.designSystem = index$1.designSystem;
-exports.registerFactory = index$1.registerFactory;
-exports.setLocale = index.setLocale;

package/index.js

@@ -1,3 +1,6 @@
+export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
+export { d as designSystem, r as registerFactory } from './shared/index.js';
+export { s as setLocale } from './shared/localized.js';
 export { a as accordionItemDefinition, b as accordionItemRegistries, r as registerAccordionItem } from './shared/definition.js';
 export { a as accordionDefinition, b as accordionRegistries, r as registerAccordion } from './shared/definition2.js';
 export { a as actionGroupDefinition, b as actionGroupRegistries, r as registerActionGroup } from './shared/definition3.js';
@@ -59,6 +62,3 @@ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries }
 export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition59.js';
 export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition60.js';
 export { r as registerVideoPlayer, v as videoPlayerDefinition, a as videoPlayerRegistries } from './shared/definition61.js';
-export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
-export { d as designSystem, r as registerFactory } from './shared/index.js';
-export { s as setLocale } from './shared/index2.js';

package/lib/fab/fab.d.ts

@@ -2,7 +2,7 @@ import { Button as FoundationButton } from '@microsoft/fast-foundation';
 import type { Connotation, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 export type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent | Connotation.Announcement>;
-export type FABSize = Extract<Size, Size.Normal | Size.Expanded>;
+export type FABSize = Extract<Size, Size.Condensed | Size.Normal | Size.Expanded>;
 export declare class Fab extends FoundationButton {
     connotation?: FabConnotation;
     size?: FABSize;

package/lib/icon/icon.d.ts

@@ -1,6 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
-export type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Information>;
+export type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;
     size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;

package/lib/select/select.d.ts

@@ -8,6 +8,7 @@ export declare class Select extends FoundationSelect {
     shape?: SelectShape;
     fixedDropdown: boolean;
     placeholder: string | undefined;
+    labelChanged(): void;
     connectedCallback(): void;
     get displayValue(): string;
     setDefaultSelectedOption(): void;

package/lib/tabs/tabs.d.ts

@@ -15,4 +15,6 @@ export declare class Tabs extends FoundationTabs {
     tabsChanged(): void;
     tabpanelsChanged(): void;
     patchIndicatorStyleTransition(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/lib/video-player/video-player.d.ts

@@ -2,7 +2,6 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import { MediaSkipBy } from '../enums';
 import { Localized } from '../../shared/patterns';
 export declare const DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
-export declare function getPlaybackRatesArray(playbackRates: string): number[];
 export declare class VideoPlayer extends FoundationElement {
     #private;
     poster?: string;

package/listbox/index.cjs

@@ -40,7 +40,7 @@ const ListboxTemplate = () => {
 	`;
 };
 
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.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-firm);--_appearance-color-fill: transparent;--_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:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
+const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.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-firm);--_appearance-color-fill: transparent;--_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{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
 const listboxDefinition = listbox.Listbox.compose({
   baseName: "listbox",

package/listbox/index.js

@@ -38,7 +38,7 @@ const ListboxTemplate = () => {
 	`;
 };
 
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.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-firm);--_appearance-color-fill: transparent;--_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:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
+const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.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-firm);--_appearance-color-fill: transparent;--_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{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
 const listboxDefinition = Listbox.compose({
   baseName: "listbox",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.4.0",
+	"version": "4.5.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",
@@ -22,6 +22,11 @@
 		},
 		"./*.css": "./*.css"
 	},
+	"sideEffects": [
+		"./*/index.js",
+		"./*/index.cjs",
+		"*.css"
+	],
 	"customElements": "./custom-elements.json",
 	"homepage": "https://vivid.deno.dev",
 	"repository": {

package/shared/anchored.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, h as html, D as DOM } from './index.js';
+import { h as html, a as attr, o as observable, D as DOM } from './index.js';
 import { s as slotted } from './slotted.js';
 
 var __defProp = Object.defineProperty;

package/shared/calendar-event.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, n as nullableNumberConverter } from './index.js';
+import { F as FoundationElement, a as attr, n as nullableNumberConverter } from './index.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition.cjs

@@ -3,8 +3,8 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const startEnd = require('./start-end.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 
@@ -76,7 +76,7 @@ index.__decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
 
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button: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: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button: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: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition.js

@@ -1,8 +1,8 @@
 import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { S as StartEnd } from './start-end.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 
@@ -74,7 +74,7 @@ __decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins(AccordionItem$1, StartEnd);
 
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button: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: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button: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: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition11.cjs

@@ -101,7 +101,7 @@ __decorateClass([
 ], Button.prototype, "target");
 applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control: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: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{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){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control: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: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{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){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
 
 const chevronTemplateFactory = (context) => {
   const iconTag = context.tagFor(icon.Icon);

package/shared/definition11.js

@@ -99,7 +99,7 @@ __decorateClass([
 ], Button.prototype, "target");
 applyMixins(Button, AffixIconWithTrailing);
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control: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: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{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){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control: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: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{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){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
 
 const chevronTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);

package/shared/definition12.cjs

@@ -5,7 +5,7 @@ const calendarEvent = require('./calendar-event.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
+const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
 const getClasses = ({ connotation, appearance }) => classNames.classNames(
   "base",

package/shared/definition12.js

@@ -3,7 +3,7 @@ import { C as CalendarEvent } from './calendar-event.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
+const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
 const getClasses = ({ connotation, appearance }) => classNames(
   "base",

package/shared/definition13.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
 import { C as CalendarEvent } from './calendar-event.js';
 import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
 import { r as repeat } from './repeat.js';

package/shared/definition15.cjs

@@ -2,11 +2,10 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
-require('./affix.cjs');
-const index$1 = require('./index2.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
+const formElements = require('./form-elements.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
@@ -98,7 +97,7 @@ index.__decorate([
     index.observable
 ], Checkbox$1.prototype, "indeterminate", void 0);
 
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -178,13 +177,13 @@ __decorateClass([
   index.observable
 ], exports.Checkbox.prototype, "slottedContent", 2);
 exports.Checkbox = __decorateClass([
-  index$1.errorText,
-  index$1.formElements
+  formElements.errorText,
+  formElements.formElements
 ], exports.Checkbox);
 applyMixinsWithObservables.applyMixinsWithObservables(
   exports.Checkbox,
-  index$1.FormElementHelperText,
-  index$1.FormElementSuccessText
+  formElements.FormElementHelperText,
+  formElements.FormElementSuccessText
 );
 
 const getClasses = ({
@@ -236,7 +235,7 @@ const CheckboxTemplate = (context) => {
 				>${(x) => x.label}<slot ${slotted.slotted("slottedContent")}></slot
 			></label>`}
 		</div>
-		${index$1.getFeedbackTemplate(context)}
+		${formElements.getFeedbackTemplate(context)}
 	</template>`;
 };
 

package/shared/definition15.js

@@ -1,10 +1,9 @@
 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 './definition27.js';
-import './affix.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './index2.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
 import { a as keySpace$1 } from './key-codes.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
@@ -96,7 +95,7 @@ __decorate([
     observable
 ], Checkbox$1.prototype, "indeterminate", void 0);
 
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;