@vonage/vivid 3.37.0 → 3.38.0

package/data-grid/index.js

@@ -1,5 +1,5 @@
 import { r as registerDataGrid } from '../shared/definition16.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/index.js';
 import '../shared/icon.js';
 import '../shared/_has.js';

package/date-picker/index.js

@@ -1,15 +1,15 @@
 import { r as registerDatePicker } from '../shared/definition17.js';
 import '../shared/index.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/definition10.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -21,14 +21,16 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition56.js';
-import '../shared/definition50.js';
+import '../shared/definition57.js';
+import '../shared/definition51.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/text-field2.js';
 import '../shared/text-field.js';
-import '../shared/definition19.js';
+import '../shared/definition20.js';
 import '../shared/aria.js';
+import '../shared/presentationDate.js';
 import '../shared/repeat.js';
+import '../shared/localized.js';
 
 registerDatePicker();

package/date-range-picker/index.js

@@ -0,0 +1,36 @@
+import { r as registerDateRangePicker } from '../shared/definition18.js';
+import '../shared/index.js';
+import '../shared/definition10.js';
+import '../shared/definition25.js';
+import '../shared/icon.js';
+import '../shared/_has.js';
+import '../shared/class-names.js';
+import '../shared/when.js';
+import '../shared/definition56.js';
+import '../shared/focus.js';
+import '../shared/definition36.js';
+import '../shared/base-progress.js';
+import '../shared/affix.js';
+import '../shared/slotted.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/definition58.js';
+import '../shared/definition57.js';
+import '../shared/definition51.js';
+import '../shared/index2.js';
+import '../locales/en-US.js';
+import '../shared/text-field2.js';
+import '../shared/text-field.js';
+import '../shared/definition20.js';
+import '../shared/aria.js';
+import '../shared/presentationDate.js';
+import '../shared/repeat.js';
+import '../shared/localized.js';
+
+registerDateRangePicker();

package/dialog/index.js

@@ -1,14 +1,14 @@
-import { r as registerDialog } from '../shared/definition18.js';
+import { r as registerDialog } from '../shared/definition19.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition10.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -20,6 +20,6 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition56.js';
+import '../shared/definition57.js';
 
 registerDialog();

package/divider/index.js

@@ -1,4 +1,4 @@
-import { r as registerDivider } from '../shared/definition19.js';
+import { r as registerDivider } from '../shared/definition20.js';
 import '../shared/index.js';
 import '../shared/aria.js';
 import '../shared/class-names.js';

package/elevation/index.js

@@ -1,4 +1,4 @@
-import { r as registerElevation } from '../shared/definition56.js';
+import { r as registerElevation } from '../shared/definition57.js';
 import '../shared/index.js';
 import '../shared/class-names.js';
 

package/empty-state/index.js

@@ -1,6 +1,6 @@
-import { r as registerEmptyState } from '../shared/definition20.js';
+import { r as registerEmptyState } from '../shared/definition21.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';

package/fab/index.js

@@ -1,11 +1,11 @@
-import { r as registerFab } from '../shared/definition21.js';
+import { r as registerFab } from '../shared/definition22.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';

package/file-picker/index.js

@@ -1,14 +1,14 @@
-import { r as registerFilePicker } from '../shared/definition22.js';
+import { r as registerFilePicker } from '../shared/definition23.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/definition10.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -22,5 +22,6 @@ import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
+import '../shared/localized.js';
 
 registerFilePicker();

package/focus/index.js

@@ -1,4 +1,4 @@
-import { r as registerFocus } from '../shared/definition55.js';
+import { r as registerFocus } from '../shared/definition56.js';
 import '../shared/index.js';
 import '../shared/focus.js';
 

package/header/index.js

@@ -1,6 +1,6 @@
-import { r as registerHeader } from '../shared/definition23.js';
+import { r as registerHeader } from '../shared/definition24.js';
 import '../shared/index.js';
-import '../shared/definition56.js';
+import '../shared/definition57.js';
 import '../shared/class-names.js';
 
 registerHeader();

package/icon/index.js

@@ -1,4 +1,4 @@
-import { r as registerIcon } from '../shared/definition24.js';
+import { r as registerIcon } from '../shared/definition25.js';
 import '../shared/index.js';
 import '../shared/icon.js';
 import '../shared/_has.js';

package/index.js

@@ -15,46 +15,47 @@ export { c as checkboxDefinition, a as checkboxRegistries, r as registerCheckbox
 export { c as combobox, a as comboboxRegistries, r as registerCombobox } from './shared/definition15.js';
 export { d as dataGrid, b as dataGridCell, c as dataGridElements, a as dataGridRow, r as registerDataGrid } from './shared/definition16.js';
 export { d as datePickerDefinition, a as datePickerRegistries, r as registerDatePicker } from './shared/definition17.js';
-export { d as dialogDefinition, a as dialogRegistries, r as registerDialog } from './shared/definition18.js';
-export { d as dividerDefinition, a as dividerRegistries, r as registerDivider } from './shared/definition19.js';
-export { e as emptyStateDefinition, a as emptyStateRegistries, r as registerEmptyState } from './shared/definition20.js';
-export { f as fabDefinition, a as fabRegistries, r as registerFab } from './shared/definition21.js';
-export { f as filePickerDefinition, a as filePickerRegistries, r as registerFilePicker } from './shared/definition22.js';
-export { h as headerDefinition, a as headerRegistries, r as registerHeader } from './shared/definition23.js';
-export { i as iconDefinition, a as iconRegistries, r as registerIcon } from './shared/definition24.js';
-export { l as layoutDefinition, a as layoutRegistries, r as registerLayout } from './shared/definition25.js';
-export { m as menuItemDefinition, a as menuItemRegistries, r as registerMenuItem } from './shared/definition26.js';
-export { m as menuDefinition, a as menuRegistries, r as registerMenu } from './shared/definition27.js';
-export { n as navDisclosureDefinition, a as navDisclosureRegistries, r as registerNavDisclosure } from './shared/definition28.js';
-export { n as navItemDefinition, a as navItemRegistries, r as registerNavItem } from './shared/definition29.js';
-export { n as navDefinition, a as navRegistries, r as registerNav } from './shared/definition30.js';
-export { n as noteDefinition, a as noteRegistries, r as registerNote } from './shared/definition31.js';
-export { n as numberFieldDefinition, a as numberFieldRegistries, r as registerNumberField } from './shared/definition32.js';
-export { l as listboxOptionDefinition, a as listboxOptionRegistries, r as registerOption } from './shared/definition33.js';
-export { p as paginationDefinition, a as paginationRegistries, r as registerPagination } from './shared/definition34.js';
-export { p as progressRingDefinition, a as progressRingRegistries, r as registerProgressRing } from './shared/definition35.js';
-export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition36.js';
-export { r as radioGroupDefinition, a as radioGroupRegistries, b as registerRadioGroup } from './shared/definition37.js';
-export { r as radioDefinition, a as radioRegistries, b as registerRadio } from './shared/definition38.js';
-export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition39.js';
-export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition40.js';
-export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition41.js';
-export { r as registerSplitButton, s as splitButtonDefinition, a as splitButtonRegistries } from './shared/definition42.js';
-export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition43.js';
-export { r as registerTabPanel, t as tabPanelDefinition, a as tabPanelRegistries } from './shared/definition44.js';
-export { r as registerTab, t as tabDefinition, a as tabRegistries } from './shared/definition45.js';
-export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition46.js';
-export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition47.js';
-export { r as registerTag, t as tagDefinition } from './shared/definition48.js';
-export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition49.js';
-export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition50.js';
-export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition51.js';
-export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition52.js';
-export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition53.js';
-export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition54.js';
+export { d as dateRangePickerDefinition, a as dateRangePickerRegistries, r as registerDateRangePicker } from './shared/definition18.js';
+export { d as dialogDefinition, a as dialogRegistries, r as registerDialog } from './shared/definition19.js';
+export { d as dividerDefinition, a as dividerRegistries, r as registerDivider } from './shared/definition20.js';
+export { e as emptyStateDefinition, a as emptyStateRegistries, r as registerEmptyState } from './shared/definition21.js';
+export { f as fabDefinition, a as fabRegistries, r as registerFab } from './shared/definition22.js';
+export { f as filePickerDefinition, a as filePickerRegistries, r as registerFilePicker } from './shared/definition23.js';
+export { h as headerDefinition, a as headerRegistries, r as registerHeader } from './shared/definition24.js';
+export { i as iconDefinition, a as iconRegistries, r as registerIcon } from './shared/definition25.js';
+export { l as layoutDefinition, a as layoutRegistries, r as registerLayout } from './shared/definition26.js';
+export { m as menuItemDefinition, a as menuItemRegistries, r as registerMenuItem } from './shared/definition27.js';
+export { m as menuDefinition, a as menuRegistries, r as registerMenu } from './shared/definition28.js';
+export { n as navDisclosureDefinition, a as navDisclosureRegistries, r as registerNavDisclosure } from './shared/definition29.js';
+export { n as navItemDefinition, a as navItemRegistries, r as registerNavItem } from './shared/definition30.js';
+export { n as navDefinition, a as navRegistries, r as registerNav } from './shared/definition31.js';
+export { n as noteDefinition, a as noteRegistries, r as registerNote } from './shared/definition32.js';
+export { n as numberFieldDefinition, a as numberFieldRegistries, r as registerNumberField } from './shared/definition33.js';
+export { l as listboxOptionDefinition, a as listboxOptionRegistries, r as registerOption } from './shared/definition34.js';
+export { p as paginationDefinition, a as paginationRegistries, r as registerPagination } from './shared/definition35.js';
+export { p as progressRingDefinition, a as progressRingRegistries, r as registerProgressRing } from './shared/definition36.js';
+export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition37.js';
+export { r as radioGroupDefinition, a as radioGroupRegistries, b as registerRadioGroup } from './shared/definition38.js';
+export { r as radioDefinition, a as radioRegistries, b as registerRadio } from './shared/definition39.js';
+export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition40.js';
+export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition41.js';
+export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition42.js';
+export { r as registerSplitButton, s as splitButtonDefinition, a as splitButtonRegistries } from './shared/definition43.js';
+export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition44.js';
+export { r as registerTabPanel, t as tabPanelDefinition, a as tabPanelRegistries } from './shared/definition45.js';
+export { r as registerTab, t as tabDefinition, a as tabRegistries } from './shared/definition46.js';
+export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition47.js';
+export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition48.js';
+export { r as registerTag, t as tagDefinition } from './shared/definition49.js';
+export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition50.js';
+export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition51.js';
+export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition52.js';
+export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition53.js';
+export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition54.js';
+export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition55.js';
 export { d as designSystem, r as registerFactory } from './shared/index.js';
 export { s as setLocale } from './shared/index2.js';
-import './shared/definition55.js';
+import './shared/definition56.js';
 import './shared/focus.js';
 import './shared/affix.js';
 import './shared/icon.js';
@@ -68,7 +69,7 @@ import './shared/when.js';
 import './shared/key-codes.js';
 import './shared/numbers.js';
 import './shared/class-names.js';
-import './shared/definition56.js';
+import './shared/definition57.js';
 import './shared/button.js';
 import './shared/form-associated.js';
 import './shared/aria-global.js';
@@ -77,12 +78,14 @@ import './shared/anchor.js';
 import './shared/text-anchor.template.js';
 import './shared/calendar-event.js';
 import './shared/repeat.js';
-import './shared/definition57.js';
+import './shared/definition58.js';
 import './shared/text-field.js';
 import './shared/listbox.js';
 import './shared/strings.js';
 import './shared/select.options.js';
 import './shared/children.js';
+import './shared/presentationDate.js';
+import './shared/localized.js';
 import './shared/aria.js';
 import './shared/direction.js';
 import './shared/dom.js';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { r as registerLayout } from '../shared/definition25.js';
+import { r as registerLayout } from '../shared/definition26.js';
 import '../shared/index.js';
 import '../shared/class-names.js';
 

package/lib/components.d.ts

@@ -15,6 +15,7 @@ export * from './checkbox/definition';
 export * from './combobox/definition';
 export * from './data-grid/definition';
 export * from './date-picker/definition';
+export * from './date-range-picker/definition';
 export * from './dialog/definition';
 export * from './divider/definition';
 export * from './empty-state/definition';

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

@@ -1,18 +1,8 @@
-import { type ErrorText, type FormElement, FormElementHelperText, Localized } from '../../shared/patterns';
-import { FormAssociatedDatePicker } from './date-picker.form-associated';
-export declare class DatePicker extends FormAssociatedDatePicker {
+import { type ErrorText, type FormElement } from '../../shared/patterns';
+import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
+export declare class DatePicker extends DatePickerBase {
     #private;
-    min: string;
-    max: string;
-    initialValue: string;
-    currentValue: string;
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    validate(): void;
-    _presentationValueChanged(): void;
 }
-export interface DatePicker extends Localized, ErrorText, FormElement, FormElementHelperText {
+export interface DatePicker extends ErrorText, FormElement {
 }

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

@@ -0,0 +1,16 @@
+import { type ErrorText, type FormElement } from '../../shared/patterns';
+import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
+export declare class DateRangePicker extends DatePickerBase {
+    #private;
+    initialStart: string;
+    initialEnd: string;
+    start: string;
+    end: string;
+    currentStart: string;
+    currentEnd: string;
+    setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
+    connectedCallback(): void;
+    formResetCallback(): void;
+}
+export interface DateRangePicker extends ErrorText, FormElement {
+}

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

@@ -0,0 +1,3 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const dateRangePickerDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const registerDateRangePicker: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

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

@@ -1,11 +1,10 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Size } from '../enums';
-import { FormElementHelperText } from '../../shared/patterns';
+import { type ErrorText, type FormElement, FormElementHelperText, Localized } from '../../shared/patterns';
+import { FormAssociatedFilePicker } from './file-picker.form-associated';
 export type FileUploaderSize = Extract<Size, Size.Normal | Size.Expanded>;
-export declare class FilePicker extends FoundationElement {
+export declare class FilePicker extends FormAssociatedFilePicker {
     #private;
     get files(): File[];
-    label?: string;
     maxFiles?: number;
     maxFilesChanged(_oldValue: number, newValue: number): void;
     maxFileSize: number;
@@ -13,10 +12,14 @@ export declare class FilePicker extends FoundationElement {
     accept?: string;
     acceptChanged(_oldValue: string, newValue: string): void;
     size?: FileUploaderSize;
+    nameChanged(previous: string, next: string): void;
     private buttonTag;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
+    validate(): void;
+    formResetCallback(): void;
 }
-export interface FilePicker extends FormElementHelperText {
+export interface FilePicker extends FormElementHelperText, Localized, ErrorText, FormElement, FormElementHelperText {
 }

package/lib/file-picker/file-picker.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _FilePicker extends FoundationElement {
+}
+interface _FilePicker extends FormAssociated {
+}
+declare const FormAssociatedFilePicker_base: typeof _FilePicker;
+export declare class FormAssociatedFilePicker extends FormAssociatedFilePicker_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/lib/file-picker/locale.d.ts

@@ -0,0 +1,6 @@
+export interface FilePickerLocale {
+    invalidFileTypeError: string;
+    maxFilesExceededError: string;
+    fileTooBigError: string;
+    removeFileLabel: string;
+}

package/lib/tag-group/tag-group.d.ts

@@ -1,3 +1,4 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class TagGroup extends FoundationElement {
+    ariaLabel: string | null;
 }

package/listbox/index.js

@@ -1,6 +1,6 @@
 import { h as html, r as registerFactory } from '../shared/index.js';
-import { f as focusRegistries } from '../shared/definition55.js';
-import { a as listboxOptionRegistries } from '../shared/definition33.js';
+import { f as focusRegistries } from '../shared/definition56.js';
+import { a as listboxOptionRegistries } from '../shared/definition34.js';
 import { L as ListboxElement, a as Listbox } from '../shared/listbox.js';
 import '../shared/affix.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
@@ -8,7 +8,7 @@ import '../shared/index2.js';
 import { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/focus.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/when.js';
@@ -61,7 +61,7 @@ const ListboxTemplate = (context) => {
 	`;
 };
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: inline-block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: var(--_listbox-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n  inline-size: 100%;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:not(.orientation-horizontal) {\n  flex-direction: column;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  --_listbox-border-radius: 6px;\n}\n\n.base.shape-pill {\n  --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n  border-radius: var(--_listbox-border-radius);\n  contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Fri, 13 Oct 2023 14:45:50 GMT\n */\n:host {\n  display: inline-block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: var(--_listbox-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n  inline-size: 100%;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:not(.orientation-horizontal) {\n  flex-direction: column;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  --_listbox-border-radius: 6px;\n}\n\n.base.shape-pill {\n  --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n  border-radius: var(--_listbox-border-radius);\n  contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  pointer-events: none;\n}";
 
 const listboxDefinition = Listbox.compose({
   baseName: "listbox",

package/locales/en-GB.js

@@ -11,7 +11,7 @@ const enGB = {
         "July",
         "August",
         "September",
-        "Oktober",
+        "October",
         "November",
         "December"
       ],
@@ -25,7 +25,7 @@ const enGB = {
         "Jul",
         "Aug",
         "Sep",
-        "Okt",
+        "Oct",
         "Nov",
         "Dec"
       ]
@@ -46,13 +46,37 @@ const enGB = {
     dateFormat: "dd/MM/yyyy",
     dateFormatPlaceholder: "DD/MM/YYYY",
     chooseDateLabel: "Choose date",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (date) => `Change date, ${date}`
+    ),
+    chooseDatesLabel: "Choose dates",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (range) => `Change dates, ${range}`
+    ),
     prevYearLabel: "Previous year",
     prevMonthLabel: "Previous month",
     nextMonthLabel: "Next month",
     nextYearLabel: "Next year",
     clearLabel: "Clear",
     okLabel: "OK",
-    invalidDateError: "Please enter a valid date."
+    invalidDateError: "Please enter a valid date.",
+    invalidDateRangeError: "Please enter a valid date range.",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (minDate) => `The start date must be ${minDate} or later.`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (maxDate) => `The end date must be ${maxDate} or earlier.`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "You can't select files of this type.",
+    maxFilesExceededError: "You can't select any more files.",
+    fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
+    removeFileLabel: "Remove file"
   }
 };
 

package/locales/en-US.js

@@ -11,7 +11,7 @@ const enUS = {
         "July",
         "August",
         "September",
-        "Oktober",
+        "October",
         "November",
         "December"
       ],
@@ -25,7 +25,7 @@ const enUS = {
         "Jul",
         "Aug",
         "Sep",
-        "Okt",
+        "Oct",
         "Nov",
         "Dec"
       ]
@@ -46,13 +46,37 @@ const enUS = {
     dateFormat: "MM/dd/yyyy",
     dateFormatPlaceholder: "MM/DD/YYYY",
     chooseDateLabel: "Choose date",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (date) => `Change date, ${date}`
+    ),
+    chooseDatesLabel: "Choose dates",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (range) => `Change dates, ${range}`
+    ),
     prevYearLabel: "Previous year",
     prevMonthLabel: "Previous month",
     nextMonthLabel: "Next month",
     nextYearLabel: "Next year",
     clearLabel: "Clear",
     okLabel: "OK",
-    invalidDateError: "Please enter a valid date."
+    invalidDateError: "Please enter a valid date.",
+    invalidDateRangeError: "Please enter a valid date range.",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (minDate) => `The start date must be ${minDate} or later.`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (maxDate) => `The end date must be ${maxDate} or earlier.`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "You can't select files of this type.",
+    maxFilesExceededError: "You can't select any more files.",
+    fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
+    removeFileLabel: "Remove file"
   }
 };