@vonage/vivid 5.21.0 → 5.23.0

package/lib/switch/switch.d.ts

@@ -448,17 +448,17 @@ declare const Switch_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         disconnectedCallback: (() => void) & (() => void) & (() => void);

package/lib/table/table-body.template.d.ts

@@ -1,3 +1,2 @@
-import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { TableBody } from './table-body';
-export declare const TableBodyTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<TableBody, any>;
+export declare const TableBodyTemplate: () => import('@microsoft/fast-element').ViewTemplate<TableBody, any>;

package/lib/table/table-cell.template.d.ts

@@ -1,3 +1,2 @@
-import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { TableCell } from './table-cell';
-export declare const TableCellTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<TableCell, any>;
+export declare const TableCellTemplate: () => import('@microsoft/fast-element').ViewTemplate<TableCell, any>;

package/lib/table/table-head.template.d.ts

@@ -1,3 +1,2 @@
-import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { TableHead } from './table-head';
-export declare const TableHeadTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<TableHead, any>;
+export declare const TableHeadTemplate: () => import('@microsoft/fast-element').ViewTemplate<TableHead, any>;

package/lib/table/table-row.template.d.ts

@@ -1,3 +1,2 @@
-import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { TableRow } from './table-row';
-export declare const TableRowTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<TableRow, any>;
+export declare const TableRowTemplate: () => import('@microsoft/fast-element').ViewTemplate<TableRow, any>;

package/lib/table/table.template.d.ts

@@ -1,3 +1,2 @@
-import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { Table } from './table';
-export declare const TableTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<Table, any>;
+export declare const TableTemplate: () => import('@microsoft/fast-element').ViewTemplate<Table, any>;

package/lib/text-area/text-area.d.ts

@@ -30,17 +30,17 @@ declare const TextArea_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -1343,7 +1343,7 @@ declare const TextArea_base: {
 } & {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -1366,17 +1366,17 @@ declare const TextArea_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -2254,17 +2254,17 @@ declare const TextArea_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -3132,17 +3132,17 @@ declare const TextArea_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         connectedCallback(): void;

package/lib/text-field/text-field.d.ts

@@ -35,17 +35,17 @@ declare const TextField_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -481,7 +481,7 @@ declare const TextField_base: {
 } & {
     new (...args: any[]): {
         _slottedHelperTextIds: string[];
-        _helperTextSlottedContentChanged(_: HTMLElement[], newContent: HTMLElement[]): void;
+        _helperTextSlottedContentChanged(_: HTMLElement[] | undefined, newContent: HTMLElement[]): void;
         get _feedbackDescribedBy(): string;
         _feedbackId: string;
         _getFeedbackTemplate(ctx: import('../../shared/design-system/defineVividComponent').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
@@ -1351,7 +1351,7 @@ declare const TextField_base: {
 } & {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -1374,17 +1374,17 @@ declare const TextField_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -2262,17 +2262,17 @@ declare const TextField_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -3566,17 +3566,17 @@ declare const TextField_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         connectedCallback(): void;

package/lib/time-picker/time-picker.d.ts

@@ -29,7 +29,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    valueChanged: ((previous: string | undefined, next: string) => void) & ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
     _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
@@ -87,13 +87,13 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -966,7 +966,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
         _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;
@@ -978,7 +978,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    valueChanged(previous: string, next: string): void;
+    valueChanged(previous: string | undefined, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
@@ -1039,13 +1039,13 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -1918,7 +1918,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
         _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;

package/nav-disclosure/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/affix.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/delegates-aria.cjs`);var s=`.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control: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: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.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.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:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}@supports (user-select:none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`,c=class extends i.t(o.t(e.t)){constructor(...e){super(...e),this.open=!1,this.current=!1,this.#e=()=>{this.open=this.details.open,this.$emit(`toggle`,void 0,{bubbles:!1})}}connectedCallback(){super.connectedCallback(),this.details.addEventListener(`toggle`,this.#e),this.details.open=this.open}disconnectedCallback(){super.disconnectedCallback(),this.details.removeEventListener(`toggle`,this.#e)}#e};n.t([e.m],c.prototype,`label`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],c.prototype,`open`,void 0),n.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`true`:null}),e.m({attribute:`current`,mode:`boolean`})],c.prototype,`current`,void 0);var l=({appearance:e,connotation:t,current:n,open:r})=>a.t(`control`,[`appearance-${e}`,!!e],[`connotation-${t}`,!!t],[`current-closed selected`,!!n&&!r]),u=e.u(`nav-disclosure`,c,n=>{let a=i.a(n),s=n.tagFor(r.r);return e.p`<details class="base" ${t.t(`details`)} ?open=${e=>e.open}>
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/affix.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/delegates-aria.cjs`);var s=`.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control: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: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.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.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:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}@supports (user-select:none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`,c=class extends i.t(o.t(e.t)){constructor(...e){super(...e),this.open=!1,this.current=!1,this.#e=()=>{this.open=this.details.open,this.$emit(`toggle`,void 0,{bubbles:!1})}}connectedCallback(){super.connectedCallback(),this.details.addEventListener(`toggle`,this.#e),this.details.open=this.open}disconnectedCallback(){super.disconnectedCallback(),this.details.removeEventListener(`toggle`,this.#e)}#e};n.t([e.m],c.prototype,`label`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],c.prototype,`open`,void 0),n.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`true`:null}),e.m({attribute:`current`,mode:`boolean`})],c.prototype,`current`,void 0);var l=({appearance:e,connotation:t,current:n,open:r})=>a.t(`control`,[`appearance-${e}`,!!e],[`connotation-${t}`,!!t],[`current-closed selected`,n&&!r]),u=e.u(`nav-disclosure`,c,n=>{let a=i.a(n),s=n.tagFor(r.r);return e.p`<details class="base" ${t.t(`details`)} ?open=${e=>e.open}>
 		<summary class="${l}"
 			${o.n({role:`button`,ariaExpanded:e=>e.open,ariaCurrent:e=>e.open?null:e.current||e.ariaCurrent?`true`:null,ariaControls:`disclosure-content`})}
 		>

package/nav-disclosure/index.js

@@ -30,7 +30,7 @@ s([t], _.prototype, "label", void 0), s([t], _.prototype, "appearance", void 0),
 })], _.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-disclosure/nav-disclosure.template.ts
-var v = ({ appearance: e, connotation: t, current: n, open: r }) => p("control", [`appearance-${e}`, !!e], [`connotation-${t}`, !!t], ["current-closed selected", !!n && !r]);
+var v = ({ appearance: e, connotation: t, current: n, open: r }) => p("control", [`appearance-${e}`, !!e], [`connotation-${t}`, !!t], ["current-closed selected", n && !r]);
 //#endregion
 //#region src/lib/nav-disclosure/index.ts
 e(a("nav-disclosure", _, (e) => {

package/nav-item/index.cjs

@@ -1,2 +1,2 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/affix.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/linkable.cjs`);var o=`.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control: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: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.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.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:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}`,s=class extends r.t(a.t(e.t)){constructor(...e){super(...e),this.current=!1}};t.t([e.m],s.prototype,`text`,void 0),t.t([e.m],s.prototype,`connotation`,void 0),t.t([e.m],s.prototype,`appearance`,void 0),t.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`page`:null}),e.m({attribute:`current`,mode:`boolean`})],s.prototype,`current`,void 0);var c=({text:e,connotation:t,appearance:n,current:r})=>i.t(`control`,[`icon-only`,!e],[`connotation-${t}`,!!t],[`appearance-${n}`,!!n],[`current selected`,!!r]),l=e.u(`nav-item`,s,t=>{let n=r.a(t);return e.p`${t=>t._renderLinkElement(e.p`${e=>n(e.icon,r.i.Slot)}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/affix.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/linkable.cjs`);var o=`.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.control.current{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current{background-color:var(--_connotation-color-primary)}}.control.current:focus-visible{outline:none;position:relative}.control.current:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-item-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-item-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-item-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-item-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-item-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-item-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control: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: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.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.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:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected: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:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.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:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control.icon-only{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));place-content:center;display:flex;position:relative}.control.icon-only slot[name=meta]{display:block;position:absolute;inset-block-start:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);inset-inline-end:calc((calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - 20px) / 2);transform:translate(50%,-50%)}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:not(.current){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:not(.current):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(:dir(rtl)) .icon-only slot[name=meta]{transform:translate(-50%,-50%)}slot[name=icon]{font-size:20px;line-height:1}`,s=class extends r.t(a.t(e.t)){constructor(...e){super(...e),this.current=!1}};t.t([e.m],s.prototype,`text`,void 0),t.t([e.m],s.prototype,`connotation`,void 0),t.t([e.m],s.prototype,`appearance`,void 0),t.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`page`:null}),e.m({attribute:`current`,mode:`boolean`})],s.prototype,`current`,void 0);var c=({text:e,connotation:t,appearance:n,current:r})=>i.t(`control`,[`icon-only`,!e],[`connotation-${t}`,!!t],[`appearance-${n}`,!!n],[`current selected`,r]),l=e.u(`nav-item`,s,t=>{let n=r.a(t);return e.p`${t=>t._renderLinkElement(e.p`${e=>n(e.icon,r.i.Slot)}
 				${e=>e.text} <slot name="meta"></slot>`,c)}`},[n.t],{styles:o,shadowOptions:{delegatesFocus:!0}});e.d(l)();

package/nav-item/index.js

@@ -20,7 +20,7 @@ o([t], m.prototype, "text", void 0), o([t], m.prototype, "connotation", void 0),
 })], m.prototype, "current", void 0);
 //#endregion
 //#region src/lib/nav-item/nav-item.template.ts
-var h = ({ text: e, connotation: t, appearance: n, current: r }) => d("control", ["icon-only", !e], [`connotation-${t}`, !!t], [`appearance-${n}`, !!n], ["current selected", !!r]);
+var h = ({ text: e, connotation: t, appearance: n, current: r }) => d("control", ["icon-only", !e], [`connotation-${t}`, !!t], [`appearance-${n}`, !!n], ["current selected", r]);
 //#endregion
 //#region src/lib/nav-item/index.ts
 e(a("nav-item", m, (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.21.0",
+  "version": "5.23.0",
   "homepage": "https://vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -73,6 +73,8 @@
     "concurrently": "^9.2.1",
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^3.0.2",
+    "eslint": "^10.3.0",
+    "eslint-formatter-compact": "^9.0.1",
     "glob": "^13.0.6",
     "http-server": "^14.1.1",
     "playwright": "1.57.0",
@@ -87,18 +89,18 @@
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
     "@repo/cem-analyzer-plugins": "1.0.0",
-    "@repo/eslint-config": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/metadata-extractor": "1.0.0",
+    "@repo/eslint-config": "1.0.0",
     "@repo/shared": "1.0.0",
     "@repo/styles": "1.0.0",
-    "@repo/tokens": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
-    "@repo/tools": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
+    "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",
-    "@repo/vitest-config": "1.0.0",
     "@repo/vite-config": "1.0.0",
-    "@vonage/vivid-icons": "4.10.0"
+    "@repo/tokens": "1.0.0",
+    "@vonage/vivid-icons": "4.11.0",
+    "@repo/vitest-config": "1.0.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/pagination/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/ref.cjs`),o=require(`../bundled/when.cjs`),s=require(`../bundled/enums.cjs`),c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.vwc-pagination-button[size=normal]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{text-align:center;align-self:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0)return this.prevButton.focus();if(a>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[r+i].focus()})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit(`pagination-change`,{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(e=>{e.shadowRoot.querySelector(`button`).setAttribute(`part`,`button`)})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}};c.t([t.m],m.prototype,`size`,void 0),c.t([t.m],m.prototype,`shape`,void 0),c.t([t.A],m.prototype,`paginationButtons`,void 0),c.t([t.A],m.prototype,`prevButton`,void 0),c.t([t.A],m.prototype,`nextButton`,void 0),c.t([t.m({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.j],m.prototype,`pagesList`,null),c.t([t.m({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.m({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.p` ${o.t(e=>e!==`...`,t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/ref.cjs`),o=require(`../bundled/when.cjs`),s=require(`../bundled/enums.cjs`),c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.vwc-pagination-button[size=normal]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{text-align:center;align-self:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0){this.prevButton.focus();return}if(a>this.paginationButtons.length-1){this.nextButton.focus();return}this.paginationButtons&&this.paginationButtons[r+i].focus()})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit(`pagination-change`,{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(e=>{e.shadowRoot.querySelector(`button`).setAttribute(`part`,`button`)})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}};c.t([t.m],m.prototype,`size`,void 0),c.t([t.m],m.prototype,`shape`,void 0),c.t([t.A],m.prototype,`paginationButtons`,void 0),c.t([t.A],m.prototype,`prevButton`,void 0),c.t([t.A],m.prototype,`nextButton`,void 0),c.t([t.m({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.j],m.prototype,`pagesList`,null),c.t([t.m({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.m({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.p` ${o.t(e=>e!==`...`,t.p`
 		<${e} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${b}"

package/pagination/index.js

@@ -37,8 +37,15 @@ var y = ".control{justify-content:space-between;display:inline-flex}.control:not
 	constructor() {
 		super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
 			let { value: t, shiftKey: n } = e.detail, r = this.paginationButtons.findIndex((e) => Number(e.label) === t), i = n ? -1 : 1, a = r + i;
-			if (a < 0) return this.prevButton.focus();
-			if (a > this.paginationButtons.length - 1) return this.nextButton.focus();
+			if (a < 0) {
+				this.prevButton.focus();
+				return;
+			}
+			if (a > this.paginationButtons.length - 1) {
+				this.nextButton.focus();
+				return;
+			}
+			/* v8 ignore else -- @preserve */
 			this.paginationButtons && this.paginationButtons[r + i].focus();
 		});
 	}

package/popover/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/floating-ui.dom.cjs`);var f=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,p=class extends e.t(c.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#c=this.updatePosition()},this.#f=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#s()}arrowChanged(){this.#s()}openChanged(e,t){if(!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#s()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#s()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#i)}#r(e){e.removeAttribute(`aria-haspopup`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#i)}#i;get#a(){let e=[d.s(),d.a(),d.l(),d.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,d.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(d.c(t)),e}#o;#s(){this.#o?.(),this.open&&this.#e&&this._popoverEl&&(this.#o=d.r(this.#e,this._popoverEl,this.#l))}#c;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await d.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#a});this.open&&(this.#u(e),this.arrow&&this._arrowEl&&this.#d(e))}#u(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#d(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#f;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#f),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#s()))}disconnectedCallback(){super.disconnectedCallback(),this.#o?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#f)}show(){return this.open=!0,this.#c??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],p.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.A],p.prototype,`anchor`,void 0),a.t([t.A],p.prototype,`_slottedAnchor`,void 0);var m=({open:e,manual:t,layout:n})=>s.t(`control`,[`open`,!!e],[`manual`,!!t],[`condensed`,n===`condensed`]),h=t.u(`popover`,p,e=>{let a=e.tagFor(u.r),s=e.tagFor(l.i),d=e.tagFor(o.r);return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/floating-ui.dom.cjs`);var f=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,p=class extends e.t(c.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#c=this.updatePosition()},this.#f=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#s()}arrowChanged(){this.#s()}openChanged(e,t){if(!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#s()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#s()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#i)}#r(e){e.removeAttribute(`aria-haspopup`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#i)}#i;get#a(){let e=[d.s(),d.a(),d.l(),d.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,d.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(d.c(t)),e}#o;#s(){this.#o?.(),this.open&&this.#e&&this._popoverEl&&(this.#o=d.r(this.#e,this._popoverEl,this.#l))}#c;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await d.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#a});this.open&&(this.#u(e),this.arrow&&this._arrowEl&&this.#d(e))}#u(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#d(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#f;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#f),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#s()))}disconnectedCallback(){super.disconnectedCallback(),this.#o?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#f)}show(){return this.open=!0,this.#c??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],p.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.A],p.prototype,`anchor`,void 0),a.t([t.A],p.prototype,`_slottedAnchor`,void 0);var m=({open:e,manual:t,layout:n})=>s.t(`control`,[`open`,e],[`manual`,t],[`condensed`,n===`condensed`]),h=t.u(`popover`,p,e=>{let a=e.tagFor(u.r),s=e.tagFor(l.i),d=e.tagFor(o.r);return t.p`
 		<slot name="anchor" ${n.t(`_slottedAnchor`)}></slot>
 		<${a}>
 			<div class="base" 

package/popover/index.js

@@ -128,7 +128,7 @@ d([i({ mode: "fromView" })], A.prototype, "placement", void 0), d([i({ mode: "bo
 })], A.prototype, "offset", void 0), d([i({ mode: "boolean" })], A.prototype, "alternate", void 0), d([i({ attribute: "dismiss-button-aria-label" })], A.prototype, "dismissButtonAriaLabel", void 0), d([i({ mode: "boolean" })], A.prototype, "arrow", void 0), d([i({ mode: "boolean" })], A.prototype, "open", void 0), d([t], A.prototype, "anchor", void 0), d([t], A.prototype, "_slottedAnchor", void 0);
 //#endregion
 //#region src/lib/popover/popover.template.ts
-var j = ({ open: e, manual: t, layout: n }) => m("control", ["open", !!e], ["manual", !!t], ["condensed", n === "condensed"]);
+var j = ({ open: e, manual: t, layout: n }) => m("control", ["open", e], ["manual", t], ["condensed", n === "condensed"]);
 //#endregion
 //#region src/lib/popover/index.ts
 n(s("popover", A, (e) => {

package/progress/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/base-progress.cjs`);var o=`.base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}`,s=class extends i.t(a.t){constructor(...e){super(...e),this.reverse=!1}};n.t([e.m()],s.prototype,`shape`,void 0),n.t([e.m()],s.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],s.prototype,`reverse`,void 0);var c=({connotation:e,shape:t,reverse:n,paused:i})=>r.t(`base`,[`connotation-${e}`,!!e],[`shape-${t}`,!!t],[`reverse`,!!n],[`paused`,!!i]);function l(){return e.p` <span
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/base-progress.cjs`);var o=`.base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}`,s=class extends i.t(a.t){constructor(...e){super(...e),this.reverse=!1}};n.t([e.m()],s.prototype,`shape`,void 0),n.t([e.m()],s.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],s.prototype,`reverse`,void 0);var c=({connotation:e,shape:t,reverse:n,paused:i})=>r.t(`base`,[`connotation-${e}`,!!e],[`shape-${t}`,!!t],[`reverse`,n],[`paused`,i]);function l(){return e.p` <span
 		class="determinate"
 		style="width: ${e=>e.percentComplete}%"
 	></span>`}function u(){return e.p` <span class="indeterminate" name="indeterminate">

package/progress/index.js

@@ -13,7 +13,7 @@ var u = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.co
 a([t()], d.prototype, "shape", void 0), a([t()], d.prototype, "connotation", void 0), a([t({ mode: "boolean" })], d.prototype, "reverse", void 0);
 //#endregion
 //#region src/lib/progress/progress.template.ts
-var f = ({ connotation: e, shape: t, reverse: n, paused: r }) => o("base", [`connotation-${e}`, !!e], [`shape-${t}`, !!t], ["reverse", !!n], ["paused", !!r]);
+var f = ({ connotation: e, shape: t, reverse: n, paused: r }) => o("base", [`connotation-${e}`, !!e], [`shape-${t}`, !!t], ["reverse", n], ["paused", r]);
 function p() {
 	return n` <span
 		class="determinate"