@vonage/vivid 4.27.0 → 4.29.0

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

@@ -1,7 +1,7 @@
-import type { Connotation } from '../enums';
-import { MediaSkipBy } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
+import type { Connotation } from '../enums';
+import { MediaSkipBy } from '../enums';
 export type AudioPlayerConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
 export type AudioPlayerMediaSkipBy = ExtractFromEnum<MediaSkipBy, MediaSkipBy.Zero | MediaSkipBy.Five | MediaSkipBy.Ten | MediaSkipBy.Thirty>;
 export declare const SKIP_DIRECTIONS: {
@@ -357,9 +357,9 @@ export declare class AudioPlayer extends AudioPlayer_base {
     skipBackwardButtonAriaLabel: string | null;
     connotation?: AudioPlayerConnotation;
     src?: string;
+    srcChanged(): void;
     get playbackRate(): number;
     set playbackRate(value: number);
-    srcChanged(): void;
     disabled: boolean;
     notime: boolean;
     skipBy?: AudioPlayerMediaSkipBy;
@@ -370,6 +370,7 @@ export declare class AudioPlayer extends AudioPlayer_base {
     set duration(_: number);
     get currentTime(): number;
     set currentTime(value: number);
+    durationFallback: boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/lib/data-grid/data-grid.d.ts

@@ -36,12 +36,14 @@ export declare class DataGrid extends VividElement {
     headerCellItemTemplate?: ViewTemplate;
     focusRowIndex: number;
     focusColumnIndex: number;
+    fixedColumns?: number;
     rowElementTag: string;
     private rowsRepeatBehavior;
     private rowsPlaceholder;
     private generatedHeader;
     private isUpdatingFocus;
     private pendingFocusUpdate;
+    private resizeObserver?;
     private observer;
     private rowindexUpdateQueued;
     private columnDefinitionsStale;

package/lib/data-grid/locale.d.ts

@@ -1,5 +1,6 @@
 export interface DataGridLocale {
     cell: {
         selected: string;
+        button: string;
     };
 }

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

@@ -76,7 +76,7 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _updatePresentationValue: (() => void) & (() => void);
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _onTextFieldChange: (() => void) & (() => void);
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
@@ -811,16 +811,19 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     _updateValueDueToUserInteraction(newValue: string): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -852,7 +855,6 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;

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

@@ -25,10 +25,12 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _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);
     _updatePresentationValue: (() => void) & (() => void);
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange: (() => void) & (() => void);
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
     _onClearClick: (() => void) & (() => void);
     readOnly: boolean;
@@ -58,7 +60,6 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;
@@ -865,7 +866,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _updatePresentationValue: (() => void) & (() => void);
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _onTextFieldChange: (() => void) & (() => void);
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
@@ -1600,16 +1601,19 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     _updateValueDueToUserInteraction(newValue: string): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -1641,7 +1645,6 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;

package/lib/divider/definition.d.ts

@@ -1,3 +1,4 @@
 import { Divider } from './divider';
+export type { DividerAppearance } from './divider';
 export declare const registerDivider: (prefix?: string) => void;
 export { Divider as VwcDividerElement };

package/lib/divider/divider.d.ts

@@ -1,5 +1,8 @@
 import { Orientation } from '@microsoft/fast-web-utilities';
+import { Appearance } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import type { ExtractFromEnum } from '../../shared/utils/enums';
+export type DividerAppearance = ExtractFromEnum<Appearance, Appearance.Ghost | Appearance.Subtle>;
 export declare const DividerRole: {
     readonly separator: "separator";
     readonly presentation: "presentation";
@@ -7,7 +10,7 @@ export declare const DividerRole: {
 type DividerRole = typeof DividerRole[keyof typeof DividerRole];
 declare const Divider_base: {
     new (...args: any[]): {
-        _vividAriaBehaviour: "delegate";
+        _vividAriaBehaviour: "host";
         connectedCallback(): void;
         specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
@@ -345,5 +348,6 @@ declare const Divider_base: {
 export declare class Divider extends Divider_base {
     role: DividerRole;
     orientation: Orientation;
+    appearance?: DividerAppearance;
 }
 export {};

package/lib/option/option.d.ts

@@ -683,21 +683,18 @@ export declare class ListboxOption extends ListboxOption_base {
     protected defaultSelectedChanged(): void;
     disabled: boolean;
     protected disabledChanged(): void;
-    selectedAttribute: boolean;
-    protected selectedAttributeChanged(): void;
+    get selectedAttribute(): boolean;
+    set selectedAttribute(value: boolean);
     selected: boolean;
     protected selectedChanged(): void;
-    dirtyValue: boolean;
-    protected initialValue: string;
-    initialValueChanged(): void;
+    value: string;
+    protected valueChanged(): void;
     _label?: string;
     get label(): string;
     set label(value: string);
     _text?: string;
     set text(value: string);
     get text(): string;
-    set value(next: string);
-    get value(): string;
     get form(): HTMLFormElement | null;
     matchedText?: string;
     get _hasMatchedText(): boolean;

package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts

@@ -1,3 +1,4 @@
 import { Schema } from 'prosemirror-model';
-declare const extendedSchema: Schema<keyof import("orderedmap").default<import("prosemirror-model").NodeSpec>, "s" | "u" | "tt" | "textSize">;
+export declare const dynamicSchema: (prefix?: string) => Schema<"imageError", "s" | "u" | "tt" | "textSize">;
+declare const extendedSchema: Schema<"imageError", "s" | "u" | "tt" | "textSize">;
 export default extendedSchema;

package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts

@@ -4,7 +4,7 @@ export declare const placeholderPluginKey: PluginKey<any>;
 export declare const createPlaceholderPlugin: (placeholder?: string) => Plugin<any>;
 export declare class ProseMirrorFacade {
     #private;
-    init(element: HTMLElement): void;
+    init(element: HTMLElement, vwcPrefix?: string): void;
     updatePlaceholder(placeholderText?: string): void;
     replaceContent(content: string): void;
     selection(position?: RichTextEditorSelection): RichTextEditorSelection;
@@ -14,5 +14,5 @@ export declare class ProseMirrorFacade {
     getSelectionStyles(): SelectionStyles;
     setTextSize(size?: RICH_TEXT_EDITOR_MENUBAR_TEXT_SIZES): void;
     getValue(): string;
-    addInlineImage({ file, position, alt, }: RichTextEditorInlineImageProps): Promise<void>;
+    addInlineImage({ file, position, alt, error, }: RichTextEditorInlineImageProps): Promise<void>;
 }

package/lib/rich-text-editor/image-placeholder/definition.d.ts

@@ -0,0 +1,2 @@
+export declare const imagePlaceholderDefinition: import("../../../shared/design-system/defineVividComponent").VividComponentDefinition;
+export declare const registerImagePlaceholder: (prefix?: string) => void;

package/lib/rich-text-editor/image-placeholder/image-placeholder.d.ts

@@ -0,0 +1,7 @@
+import { VividElement } from '../../../shared/foundation/vivid-element/vivid-element';
+export declare class ImagePlaceholder extends VividElement {
+    fileName?: string;
+    size?: string;
+    errorMessage?: string;
+    icon?: string;
+}

package/lib/rich-text-editor/image-placeholder/image-placeholder.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { VividElementDefinitionContext } from '../../../shared/design-system/defineVividComponent';
+import { ImagePlaceholder } from './image-placeholder.js';
+export declare const ImagePlaceholderTemplate: (context: VividElementDefinitionContext) => ViewTemplate<ImagePlaceholder>;

package/lib/rich-text-editor/menubar/consts.d.ts

@@ -1,6 +1,6 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { VividElementDefinitionContext } from '../../../shared/design-system/defineVividComponent';
-import type { MenuBar } from './menubar.js';
+import type { Menubar } from './menubar.js';
 export declare const TEXT_DECORATION_ITEMS: {
     text: string;
     icon: string;
@@ -12,7 +12,7 @@ export declare const TEXT_SIZES: {
 }[];
 export declare const MENU_BAR_ITEMS: {
     [key: string]: {
-        registerStateProperty?: (menuBar: MenuBar) => void;
+        registerStateProperty?: (menubar: Menubar) => void;
         render: (context: VividElementDefinitionContext) => ViewTemplate<any, any>;
     };
 };

package/lib/rich-text-editor/menubar/definition.d.ts

@@ -1,2 +1,2 @@
-export declare const menuBarDefinition: import("../../../shared/design-system/defineVividComponent").VividComponentDefinition;
-export declare const registerMenuBar: (prefix?: string) => void;
+export declare const menubarDefinition: import("../../../shared/design-system/defineVividComponent").VividComponentDefinition;
+export declare const registerMenubar: (prefix?: string) => void;

package/lib/rich-text-editor/menubar/menubar.d.ts

@@ -1,5 +1,5 @@
 import { VividElement } from '../../../shared/foundation/vivid-element/vivid-element';
-declare const MenuBar_base: {
+declare const Menubar_base: {
     new (...args: any[]): {
         readonly locale: import("../../../shared/localization/Locale").Locale;
         connectedCallback(): void;
@@ -337,7 +337,7 @@ declare const MenuBar_base: {
         }): void;
     };
 } & typeof VividElement;
-export declare class MenuBar extends MenuBar_base {
+export declare class Menubar extends Menubar_base {
     #private;
     menuItems?: string;
     connectedCallback(): void;

package/lib/rich-text-editor/menubar/menubar.template.d.ts

@@ -1,4 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { VividElementDefinitionContext } from '../../../shared/design-system/defineVividComponent';
-import { MenuBar } from './menubar.js';
-export declare const MenuBarTemplate: (context: VividElementDefinitionContext) => ViewTemplate<MenuBar>;
+import { Menubar } from './menubar.js';
+export declare const MenubarTemplate: (context: VividElementDefinitionContext) => ViewTemplate<Menubar>;

package/lib/rich-text-editor/rich-text-editor.d.ts

@@ -13,6 +13,7 @@ export interface RichTextEditorInlineImageProps {
     file: File;
     position?: number;
     alt?: string;
+    error?: string;
 }
 export declare const RichTextEditorTextBlocks: {
     readonly title: "h2";

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

@@ -27,10 +27,12 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _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);
     _updatePresentationValue: (() => void) & (() => void);
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange: (() => void) & (() => void);
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
     _onClearClick: (() => void) & (() => void);
     readOnly: boolean;
@@ -60,7 +62,6 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;
@@ -794,10 +795,12 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -829,7 +832,6 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;

package/locales/de-DE.cjs

@@ -437,7 +437,8 @@ const deDE = {
   },
   dataGrid: {
     cell: {
-      selected: "Ausgewählt"
+      selected: "Ausgewählt",
+      button: "(Schaltfläche)"
     }
   },
   pagination: {

package/locales/de-DE.js

@@ -435,7 +435,8 @@ const deDE = {
   },
   dataGrid: {
     cell: {
-      selected: "Ausgewählt"
+      selected: "Ausgewählt",
+      button: "(Schaltfläche)"
     }
   },
   pagination: {

package/locales/en-GB.cjs

@@ -269,7 +269,8 @@ const enGB = {
   },
   dataGrid: {
     cell: {
-      selected: "Selected"
+      selected: "Selected",
+      button: "(button)"
     }
   },
   pagination: {

package/locales/en-GB.js

@@ -267,7 +267,8 @@ const enGB = {
   },
   dataGrid: {
     cell: {
-      selected: "Selected"
+      selected: "Selected",
+      button: "(button)"
     }
   },
   pagination: {

package/locales/en-US.cjs

@@ -437,7 +437,8 @@ const enUS = {
   },
   dataGrid: {
     cell: {
-      selected: "Selected"
+      selected: "Selected",
+      button: "(button)"
     }
   },
   pagination: {

package/locales/en-US.js

@@ -435,7 +435,8 @@ const enUS = {
   },
   dataGrid: {
     cell: {
-      selected: "Selected"
+      selected: "Selected",
+      button: "(button)"
     }
   },
   pagination: {

package/locales/ja-JP.cjs

@@ -436,7 +436,8 @@ const jaJP = {
   },
   dataGrid: {
     cell: {
-      selected: "選択済み"
+      selected: "選択済み",
+      button: "（ボタン）"
     }
   },
   pagination: {

package/locales/ja-JP.js

@@ -434,7 +434,8 @@ const jaJP = {
   },
   dataGrid: {
     cell: {
-      selected: "選択済み"
+      selected: "選択済み",
+      button: "（ボタン）"
     }
   },
   pagination: {

package/locales/zh-CN.cjs

@@ -438,7 +438,8 @@ const zhCN = {
   },
   dataGrid: {
     cell: {
-      selected: "已选择"
+      selected: "已选择",
+      button: "（按钮）"
     }
   },
   pagination: {

package/locales/zh-CN.js

@@ -436,7 +436,8 @@ const zhCN = {
   },
   dataGrid: {
     cell: {
-      selected: "已选择"
+      selected: "已选择",
+      button: "（按钮）"
     }
   },
   pagination: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "4.27.0",
+  "version": "4.29.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",
@@ -48,6 +48,7 @@
     "stylelint": "stylelint 'src/**/*.{css,scss}'",
     "stylelint:fix": "stylelint 'src/**/*.{css,scss}' --fix",
     "test": "vitest run",
+    "test:watch": "vitest --watch",
     "test:coverage": "vitest run --coverage",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",

package/shared/calendar-picker.template.cjs

@@ -8,7 +8,7 @@ const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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}.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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{--focus-stroke-gap-color: transparent;display:flex;align-items:center;padding-block:8px}.segment .header:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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}.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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 /**
  * @name toDate
@@ -5687,11 +5687,10 @@ const CalendarPicker = (Base) => {
       super._onPickerButtonClick();
       if (this._popupOpen) {
         vividElement.DOM.processUpdates();
-        const tabbableDate = this._tabbableDate;
-        if (tabbableDate)
-          this.shadowRoot.querySelector(
-            `[data-date="${tabbableDate}"]`
-          ).focus();
+        const headerElement = this._dialogEl.querySelector(
+          ".header"
+        );
+        headerElement?.focus();
       }
     }
     // --- Calendar header ---
@@ -6058,7 +6057,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(definition.Button);
-  return vividElement.html` <div class="header">
+  return vividElement.html`<div class="header" tabindex="-1">
 		${when.when(
     (x) => x.prevYearButton,
     vividElement.html`
@@ -6221,7 +6220,7 @@ function renderCalendarGrid(context) {
 											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
           x.date
         )}"
-											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
 											data-date="${(x) => x.date}"
 											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
 											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
@@ -6304,7 +6303,7 @@ function renderMonthPickerGrid(context) {
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._tabbableMonth
-      ) ? 2 : -1}"
+      ) ? 1 : -1}"
 										aria-label="${(x) => x.monthName}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(

package/shared/calendar-picker.template.js

@@ -6,7 +6,7 @@ import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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}.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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{--focus-stroke-gap-color: transparent;display:flex;align-items:center;padding-block:8px}.segment .header:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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}.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}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 /**
  * @name toDate
@@ -5685,11 +5685,10 @@ const CalendarPicker = (Base) => {
       super._onPickerButtonClick();
       if (this._popupOpen) {
         DOM.processUpdates();
-        const tabbableDate = this._tabbableDate;
-        if (tabbableDate)
-          this.shadowRoot.querySelector(
-            `[data-date="${tabbableDate}"]`
-          ).focus();
+        const headerElement = this._dialogEl.querySelector(
+          ".header"
+        );
+        headerElement?.focus();
       }
     }
     // --- Calendar header ---
@@ -6056,7 +6055,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(Button);
-  return html` <div class="header">
+  return html`<div class="header" tabindex="-1">
 		${when(
     (x) => x.prevYearButton,
     html`
@@ -6219,7 +6218,7 @@ function renderCalendarGrid(context) {
 											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
           x.date
         )}"
-											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
 											data-date="${(x) => x.date}"
 											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
 											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
@@ -6302,7 +6301,7 @@ function renderMonthPickerGrid(context) {
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._tabbableMonth
-      ) ? 2 : -1}"
+      ) ? 1 : -1}"
 										aria-label="${(x) => x.monthName}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(