@povio/ui 3.3.0-rc.4 → 3.3.1

package/README.md

@@ -4,11 +4,25 @@ UI Components that match Povio's Atlas Design System.
 
 ## Installation
 
-`pnpm add @povio/ui`
+`bun add @povio/ui`
 
 ## Versioning
 
-Major and minor version will correspond to the Atlas version (v2.1.0 corresponds Atlas 2.1) and patch versions are fixes/updates within that Atlas version.
+`^2.1` still corresponds to Atlas 2.1. All versions after that currently target Atlas 2.2 and follow semantic versioning — breaking changes bump the major version.
+
+## Publishing
+
+### Stable release
+
+Create a GitHub release with a tag matching `v*.*.*-ui`. This triggers the publish workflow and releases the package to NPM.
+
+Example: `v1.2.3-ui`
+
+### Release candidate
+
+Create and push a git tag matching `v*.*.*-rc.*-ui` (do not use a GitHub release for this). This publishes the package to NPM under the `next` dist-tag.
+
+Example: `v1.2.3-rc.1-ui`
 
 ## Requirements
 

package/dist/browser-tests/checkbox/CheckboxGroupHarness.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxGroupProps } from '../../src/components/inputs/Checkbox/CheckboxGroup';
+type HarnessMode = "controlled" | "form";
+interface CheckboxGroupHarnessProps extends Omit<CheckboxGroupProps, "formControl" | "value" | "onBlur" | "onChange"> {
+    formDisabled?: boolean;
+    initialValue?: string[] | null;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+export declare const CheckboxGroupHarness: ({ formDisabled, initialValue, mode, validationMessage, ...props }: CheckboxGroupHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/checkbox/CheckboxHarness.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxProps } from '../../src/components/inputs/Checkbox/Checkbox';
+type HarnessMode = "controlled" | "form";
+interface CheckboxHarnessProps extends Omit<CheckboxProps, "formControl" | "isSelected" | "onBlur" | "onChange"> {
+    formDisabled?: boolean;
+    initialValue?: boolean;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+export declare const CheckboxHarness: ({ formDisabled, initialValue, mode, validationMessage, ...props }: CheckboxHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/checkbox/checkbox-group.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/checkbox/checkbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/datetime-picker/DateTimeHarnesses.d.ts

@@ -0,0 +1,43 @@
+import { DatePickerProps, DateRangePickerProps, DateTimePickerProps, TimePickerProps } from '@povio/ui';
+type HarnessMode = "controlled" | "form";
+type RangeValue = NonNullable<DateRangePickerProps["value"]>;
+interface DatePickerHarnessProps extends Omit<DatePickerProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    externalSetValue?: string | null;
+    formDisabled?: boolean;
+    initialValue?: string | null;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+interface DateTimePickerHarnessProps extends Omit<DateTimePickerProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    externalSetValue?: string | null;
+    formDisabled?: boolean;
+    initialValue?: string | null;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+interface TimePickerHarnessProps extends Omit<TimePickerProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    initialValue?: string | null;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+interface DateRangePickerHarnessProps extends Omit<DateRangePickerProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    externalSetValue?: RangeValue | null;
+    formDisabled?: boolean;
+    initialValue?: RangeValue | null;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+export declare const DatePickerHarness: ({ externalSetValue, formDisabled, initialValue, mode, validationMessage, ...props }: DatePickerHarnessProps) => import("react/jsx-runtime").JSX.Element;
+interface DatePickerAutosaveHarnessProps extends Omit<DatePickerProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    initialValue?: string | null;
+}
+export declare const DatePickerAutosaveHarness: ({ initialValue, ...props }: DatePickerAutosaveHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimePickerHarness: ({ externalSetValue, formDisabled, initialValue, mode, validationMessage, ...props }: DateTimePickerHarnessProps) => import("react/jsx-runtime").JSX.Element;
+type FocusPicker = "date" | "date-range" | "date-time" | "time";
+export declare const DateInputFocusHarness: ({ picker }: {
+    picker: FocusPicker;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerHarness: ({ formDisabled, initialValue, mode, validationMessage, ...props }: TimePickerHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePickerHarness: ({ externalSetValue, formDisabled, initialValue, mode, validationMessage, ...props }: DateRangePickerHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/datetime-picker/assertions.d.ts

@@ -0,0 +1,9 @@
+import { Locator } from 'vitest/browser';
+export declare const expectDateTimeSegments: (segments: Locator, texts: Array<RegExp | string>) => Promise<void>;
+export declare const typeDateTimeSegments: (_page: unknown, segments: Locator, texts: string[]) => Promise<void>;
+/** react-aria puts aria-selected on the gridcell, not the day button. */
+export declare const expectCalendarDaySelected: (dayButton: Locator, isSelected: boolean) => Promise<void>;
+/** DateRangePicker paints selection via rangeSelection (this class), not aria-selected. */
+export declare const CALENDAR_DAY_VISUAL_SELECTED_CLASS = "bg-interactive-contained-primary-idle";
+export declare const expectCalendarDayVisuallySelected: (dayButton: Locator, isSelected: boolean) => Promise<void>;
+export declare const countVisuallySelectedCalendarDays: (root: Locator) => number;

package/dist/browser-tests/datetime-picker/date-input-focus.firefox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/datetime-picker/date-picker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/datetime-picker/date-range-picker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/datetime-picker/date-time-picker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/datetime-picker/time-picker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/file-upload/FileUploadHarness.d.ts

@@ -0,0 +1,4 @@
+import { FileUploadProps } from '../../src/components/inputs/File/FileUpload';
+type FileUploadHarnessProps = Partial<Omit<FileUploadProps, "fileRemove" | "fileUpload" | "onInvalidFileType">>;
+export declare const FileUploadHarness: (props: FileUploadHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/file-upload/file-upload.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/file-upload-container/FileUploadContainerHarness.d.ts

@@ -0,0 +1,4 @@
+import { FileUploadContainerProps } from '../../src/components/inputs/File/FileUploadContainer';
+type FileUploadContainerHarnessProps = Partial<Omit<FileUploadContainerProps, "fileUpload" | "children">>;
+export declare const FileUploadContainerHarness: (props: FileUploadContainerHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/file-upload-container/file-upload-container.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/input-upload/InputUploadHarness.d.ts

@@ -0,0 +1,9 @@
+import { InputUploadProps } from '../../src/components/inputs/File/InputUpload';
+type InputUploadHarnessProps = Partial<Omit<InputUploadProps, "formControl" | "onChange" | "value">> & {
+    initialValue?: File | File[] | null;
+};
+export declare const InputUploadHarness: ({ initialValue, ...props }: InputUploadHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputUploadFormHarness: ({ formDisabled }: {
+    formDisabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/input-upload/input-upload.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/modal/ModalHarness.d.ts

@@ -0,0 +1,5 @@
+import { ModalProps } from '@povio/ui';
+import { PropsWithChildren } from 'react';
+type ModalHarnessProps = PropsWithChildren<Omit<ModalProps, "isOpen" | "onClose">>;
+export declare const ModalHarness: ({ children, ...props }: ModalHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/modal/modal.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/number-input/NumberInputHarness.d.ts

@@ -0,0 +1,10 @@
+import { NumberInputProps } from '../../src/components/inputs/Input/NumberInput/NumberInput';
+type HarnessMode = "controlled" | "form";
+interface NumberInputHarnessProps extends Omit<NumberInputProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    mode?: HarnessMode;
+    initialValue?: number | null;
+    validationMessage?: string;
+}
+export declare const NumberInputHarness: ({ formDisabled, mode, initialValue, validationMessage, action, ...props }: NumberInputHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/number-input/number-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/number-range-input/NumberRangeInputHarness.d.ts

@@ -0,0 +1,10 @@
+import { NumberRangeInputProps, NumberRangeValue } from '../../src/components/inputs/Input/NumberRangeInput/NumberRangeInput';
+type HarnessMode = "controlled" | "form";
+interface NumberRangeInputHarnessProps extends Omit<NumberRangeInputProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    mode?: HarnessMode;
+    initialValue?: NumberRangeValue;
+    validationMessage?: string;
+}
+export declare const NumberRangeInputHarness: ({ formDisabled, mode, initialValue, validationMessage, ...props }: NumberRangeInputHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/number-range-input/number-range-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/password-input/PasswordInputHarness.d.ts

@@ -0,0 +1,6 @@
+import { PasswordInputProps } from '../../src/components/inputs/Input/PasswordInput/PasswordInput';
+interface PasswordInputHarnessProps extends Omit<PasswordInputProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    initialValue?: string;
+}
+export declare const PasswordInputHarness: ({ initialValue, ...props }: PasswordInputHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/password-input/password-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/radio-group/RadioGroupHarness.d.ts

@@ -0,0 +1,15 @@
+import { RadioGroupProps } from '../../src/components/inputs/RadioGroup/RadioGroup';
+type HarnessMode = "controlled" | "form";
+interface RadioGroupHarnessProps extends Omit<RadioGroupProps, "formControl" | "onBlur" | "onChange" | "options" | "value"> {
+    formDisabled?: boolean;
+    initialValue?: string;
+    mode?: HarnessMode;
+    options?: RadioGroupProps["options"];
+    validationMessage?: string;
+}
+export declare const RADIO_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+export declare const RadioGroupHarness: ({ formDisabled, initialValue, mode, validationMessage, options, ...props }: RadioGroupHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/radio-group/radio-group.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/selection/SelectionHarnesses.d.ts

@@ -0,0 +1,61 @@
+import { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { AutocompleteProps } from '../../src/components/inputs/Selection/Autocomplete/Autocomplete';
+import { SelectProps } from '../../src/components/inputs/Selection/Select/Select';
+import { SelectItem } from '../../src/components/inputs/Selection/shared/select.types';
+type HarnessMode = "controlled" | "form";
+type SelectionValue = string | string[] | null;
+export declare const selectionItems: SelectItem<string>[];
+type SelectHarnessProps = Omit<SelectProps<string>, "items" | "onBlur" | "onChange" | "value"> & {
+    formDisabled?: boolean;
+    initialValue?: SelectionValue;
+    items?: SelectItem<string>[];
+    mode?: HarnessMode;
+    validationMessage?: string;
+};
+export declare const SelectHarness: ({ formDisabled, initialValue, items, mode, renderStaticInput, selectionMode, validationMessage, ...props }: SelectHarnessProps) => import("react/jsx-runtime").JSX.Element;
+type AutocompleteHarnessProps = Omit<AutocompleteProps<string>, "items" | "onBlur" | "onChange" | "value"> & {
+    formDisabled?: boolean;
+    initialValue?: SelectionValue;
+    items?: SelectItem<string>[];
+    mode?: HarnessMode;
+    validationMessage?: string;
+};
+export declare const AutocompleteHarness: ({ formDisabled, initialValue, items, mode, renderStaticInput, selectionMode, validationMessage, ...props }: AutocompleteHarnessProps) => import("react/jsx-runtime").JSX.Element;
+type QueryFilter = {
+    ids?: string[];
+} & Record<string, unknown>;
+type QueryParams = {
+    search?: string;
+    limit?: number;
+    filter?: QueryFilter;
+};
+type QueryOptions = {
+    enabled?: boolean;
+};
+type QuerySelectionPage = {
+    items: SelectItem<string>[];
+    totalItems?: number;
+};
+type QuerySelectionResult = UseQueryResult<SelectItem<string>[]> | UseInfiniteQueryResult<InfiniteData<QuerySelectionPage>>;
+type QuerySelectionFn = (params?: QueryParams, options?: QueryOptions) => QuerySelectionResult;
+export declare const querySelectionItems: (params?: QueryParams, options?: QueryOptions) => UseQueryResult<SelectItem<string>[]>;
+export declare const querySelectionItemsWithFetchedInitialLabel: (_params?: QueryParams, options?: QueryOptions) => UseQueryResult<SelectItem<string>[]>;
+type QuerySelectionHarnessProps = Omit<SelectHarnessProps, "items" | "onInputChange" | "onSearchChange" | "onNewItemOption"> & {
+    component: "query-autocomplete" | "query-select";
+    isInitialQueryDisabled?: boolean;
+    query?: QuerySelectionFn;
+    queryMap?: (items: SelectItem<string>[] | QuerySelectionPage | QuerySelectionPage[]) => SelectItem<string>[];
+    showInfiniteFetchCount?: boolean;
+    useInfiniteQuery?: boolean;
+};
+export declare const QuerySelectionHarness: ({ component, formDisabled, initialValue, mode, query, queryMap, renderStaticInput, selectionMode, showInfiniteFetchCount, useInfiniteQuery, validationMessage, ...props }: QuerySelectionHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuerySelectionDeepInitialValueHarness: ({ component, resolveSelectedItemsWithIds, useConfigResolveSelectedItemsWithIds, wrapResolvedIdsInInfiniteData, }: {
+    component: "query-autocomplete" | "query-select";
+    resolveSelectedItemsWithIds?: boolean;
+    useConfigResolveSelectedItemsWithIds?: boolean;
+    wrapResolvedIdsInInfiniteData?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const QuerySelectionSearchDebounceHarness: ({ component, }: {
+    component: "query-autocomplete" | "query-select";
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/selection/autocomplete.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/selection/interactions.d.ts

@@ -0,0 +1,2 @@
+export declare const openSelection: (page: unknown, label: string, triggerScope?: unknown) => Promise<void>;
+export declare const searchSelection: (page: unknown, label: string, value: string, triggerScope?: unknown) => Promise<void>;

package/dist/browser-tests/selection/query-autocomplete.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/selection/query-select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/selection/select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/slider/SliderHarness.d.ts

@@ -0,0 +1,11 @@
+import { SliderProps } from '../../src/components/inputs/Slider/Slider';
+type HarnessMode = "controlled" | "form";
+type SliderHarnessValue = number | number[];
+interface SliderHarnessProps extends Omit<SliderProps<boolean>, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    initialValue?: SliderHarnessValue;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+export declare const SliderHarness: ({ formDisabled, initialValue, mode, validationMessage, ...props }: SliderHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/slider/slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/text-area/TextAreaHarness.d.ts

@@ -0,0 +1,10 @@
+import { TextAreaProps } from '../../src/components/inputs/Input/TextArea/TextArea';
+type HarnessMode = "controlled" | "form";
+interface TextAreaHarnessProps extends Omit<TextAreaProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    mode?: HarnessMode;
+    initialValue?: string;
+    validationMessage?: string;
+}
+export declare const TextAreaHarness: ({ formDisabled, mode, initialValue, validationMessage, ...props }: TextAreaHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/text-area/text-area.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/text-input/TextInputHarness.d.ts

@@ -0,0 +1,10 @@
+import { TextInputProps } from '../../src/components/inputs/Input/TextInput/TextInput';
+type HarnessMode = "controlled" | "form";
+interface TextInputHarnessProps extends Omit<TextInputProps, "formControl" | "onBlur" | "onChange" | "value"> {
+    formDisabled?: boolean;
+    mode?: HarnessMode;
+    initialValue?: string;
+    validationMessage?: string;
+}
+export declare const TextInputHarness: ({ formDisabled, mode, initialValue, validationMessage, action, ...props }: TextInputHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/text-input/text-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/toggle/ToggleHarness.d.ts

@@ -0,0 +1,10 @@
+import { ToggleProps } from '../../src/components/inputs/Toggle/Toggle';
+type HarnessMode = "controlled" | "form";
+interface ToggleHarnessProps extends Omit<ToggleProps, "formControl" | "isSelected" | "onBlur" | "onChange"> {
+    formDisabled?: boolean;
+    initialValue?: boolean;
+    mode?: HarnessMode;
+    validationMessage?: string;
+}
+export declare const ToggleHarness: ({ formDisabled, initialValue, mode, validationMessage, ...props }: ToggleHarnessProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/browser-tests/toggle/toggle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/browser-tests/utils/blur.d.ts

@@ -0,0 +1,22 @@
+import { BrowserPage, Locator } from 'vitest/browser';
+interface BlurPage {
+    getByTestId: BrowserPage["getByTestId"];
+}
+interface ExpectBlurCountToIncrementOptions {
+    action?: () => Promise<void>;
+    blurCount?: Locator;
+    blurWith?: () => Promise<void>;
+    page: BlurPage;
+    target?: Locator;
+}
+export declare const expectBlurCountToIncrement: ({ action, blurCount, blurWith, page, target, }: ExpectBlurCountToIncrementOptions) => Promise<void>;
+interface ExpectBlurValueOptions {
+    action?: () => Promise<void>;
+    blurValue?: Locator;
+    blurWith?: () => Promise<void>;
+    expectedValue: string;
+    page: BlurPage;
+    target?: Locator;
+}
+export declare const expectBlurValueAfterFocusLeaves: ({ action, blurValue, blurWith, expectedValue, page, target, }: ExpectBlurValueOptions) => Promise<void>;
+export {};

package/dist/browser-tests/utils/events.d.ts

@@ -0,0 +1,4 @@
+import { Locator } from 'vitest/browser';
+export declare const dispatchPointerEvent: (target: Locator, type: string, init?: PointerEventInit) => Promise<void>;
+export declare const getLocatorRect: (target: Locator) => DOMRect;
+export declare const focusLocator: (target: Locator) => Promise<void>;

package/dist/browser-tests/utils/input.d.ts

@@ -0,0 +1,10 @@
+import { Locator, BrowserPage } from 'vitest/browser';
+type InputScope = Pick<BrowserPage | Locator, "getByRole" | "getByTestId">;
+export declare const expectInputValueState: (input: Locator, expected: {
+    isEmpty: boolean;
+    value: string;
+}) => Promise<void>;
+export declare const clearInput: (scope: InputScope) => Promise<void>;
+export declare const expectHarnessValue: (scope: InputScope, value: string) => Promise<void>;
+export declare const expectClearControlNotRendered: (scope: InputScope) => Promise<void>;
+export {};

package/dist/components/buttons/Button/button.cva.d.ts

@@ -92,7 +92,7 @@ export declare const buttonIconSizeDefinition: {
 export type ButtonIconSizeConfig = NonNullable<typeof buttonIconSizeDefinition.config>;
 export declare const buttonTypography: (props: {
     readonly width?: "fill" | "hug" | null | undefined;
-    readonly size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
+    readonly size?: "none" | "s" | "xs" | "m" | "l" | null | undefined;
     readonly color?: "error" | "primary" | "dual" | "secondary" | "success" | "warning" | null | undefined;
     readonly variant?: "text" | "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
     readonly inverted?: boolean | null | undefined;

package/dist/components/buttons/Button/button.cva.js

@@ -88,7 +88,7 @@ var buttonDefinition = UIOverrides.defineConfig({
 					"pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
 					"disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
 					"focus-visible:outline-interactive-subtle-primary-focus",
-					"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+					"selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
 					"selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
 					"selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
 					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-primary-on-idle!"
@@ -133,9 +133,9 @@ var buttonDefinition = UIOverrides.defineConfig({
 					"pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
 					"disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
 					"focus-visible:outline-interactive-outlined-secondary-focus",
-					"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
-					"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
-					"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
+					"selected:border-interactive-outlined-secondary-toggled-idle selected:bg-interactive-outlined-secondary-toggled-idle selected:text-interactive-outlined-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-secondary-toggled-hover selected:hover:bg-interactive-outlined-secondary-toggled-hover selected:hover:text-interactive-outlined-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-secondary-toggled-disabled selected:disabled:bg-interactive-outlined-secondary-toggled-disabled selected:disabled:text-interactive-outlined-secondary-on-toggled-disabled"
 				]
 			},
 			{

package/dist/components/buttons/PillButton/pillButton.cva.js

@@ -63,7 +63,7 @@ var pillButtonDefinition = UIOverrides.defineConfig({
 					"pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
 					"disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
 					"focus-visible:outline-interactive-subtle-primary-focus",
-					"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+					"selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
 					"selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
 					"selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
 				]
@@ -91,9 +91,9 @@ var pillButtonDefinition = UIOverrides.defineConfig({
 					"pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
 					"disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
 					"focus-visible:outline-interactive-outlined-secondary-focus",
-					"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
-					"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
-					"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
+					"selected:border-interactive-outlined-secondary-toggled-idle selected:bg-interactive-outlined-secondary-toggled-idle selected:text-interactive-outlined-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-secondary-toggled-hover selected:hover:bg-interactive-outlined-secondary-toggled-hover selected:hover:text-interactive-outlined-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-secondary-toggled-disabled selected:disabled:bg-interactive-outlined-secondary-toggled-disabled selected:disabled:text-interactive-outlined-secondary-on-toggled-disabled"
 				]
 			},
 			{

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -164,6 +164,18 @@ var DatePickerBase = (props) => {
 		dialogState.setValue(null);
 		if (fireBlurOnChange) handleBlur(null);
 	};
+	const syncDialogFromControlledValue = () => {
+		dialogState.setValue(state.value);
+		if (state.value) {
+			calendarState.setFocusedDate(normalizeByGranularity(state.value));
+			return;
+		}
+		calendarState.setFocusedDate(today(effectiveTimeZone));
+	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		syncDialogFromControlledValue();
+	}, [state.isOpen]);
 	useEffect(() => {
 		if (!state.isOpen) return;
 		if (granularity !== "year") return;
@@ -180,11 +192,13 @@ var DatePickerBase = (props) => {
 		normalizeByGranularity,
 		effectiveTimeZone
 	]);
-	const onOpenChange = (isOpen) => {
+	const onOpenChange = (_isOpen) => {
+		state.toggle();
+		syncDialogFromControlledValue();
+	};
+	const onOpenDropdown = () => {
+		syncDialogFromControlledValue();
 		state.toggle();
-		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
-		if (!state.value) calendarState.setFocusedDate(today(effectiveTimeZone));
-		if (!isOpen) dialogState.setValue(state.value);
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
@@ -225,7 +239,7 @@ var DatePickerBase = (props) => {
 				todayIconButtonSize,
 				todayIconButtonComponent,
 				todayIconPlacement,
-				onOpenDropdown: () => state.toggle(),
+				onOpenDropdown,
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -18,7 +18,7 @@ import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -460,25 +460,33 @@ var DateRangePickerBase = (props) => {
 		setHoverDate(null);
 		if (fireBlurOnChange) handleBlur(null);
 	};
-	const onOpenChange = (isOpen) => {
-		state.toggle();
-		if (!isOpen) {
-			if (state.value) {
-				dialogState.setValue(state.value);
-				leftCalendarState.setValue(state.value);
-				rightCalendarState.setValue(state.value);
-				const startDate_3 = state.value.start || today(effectiveTimeZone);
-				const endDate_3 = state.value.end || today(effectiveTimeZone).add({ months: 1 });
-				leftCalendarState.setFocusedDate(startDate_3);
-				if (startDate_3.year === endDate_3.year && startDate_3.month === endDate_3.month) rightCalendarState.setFocusedDate(startDate_3.add({ months: 1 }));
-				else rightCalendarState.setFocusedDate(endDate_3);
-				setRangeSelection({
-					start: state.value.start,
-					end: state.value.end,
-					isSelecting: false
-				});
-			}
+	const syncSelectionFromControlledValue = () => {
+		const currentValue = state.value;
+		if (!(currentValue != null && currentValue.start != null && currentValue.end != null)) {
+			syncCalendarStates(null);
+			return;
 		}
+		syncCalendarStates(currentValue);
+		const startDate_3 = currentValue.start;
+		const endDate_3 = currentValue.end;
+		leftCalendarState.setFocusedDate(startDate_3);
+		if (startDate_3.year === endDate_3.year && startDate_3.month === endDate_3.month) {
+			rightCalendarState.setFocusedDate(startDate_3.add({ months: 1 }));
+			return;
+		}
+		rightCalendarState.setFocusedDate(endDate_3);
+	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		syncSelectionFromControlledValue();
+	}, [state.isOpen]);
+	const onOpenChange = (_isOpen) => {
+		state.toggle();
+		syncSelectionFromControlledValue();
+	};
+	const onOpenDropdown = () => {
+		syncSelectionFromControlledValue();
+		state.toggle();
 	};
 	const todayDate_0 = today(effectiveTimeZone);
 	const getThisWeekRange = () => {
@@ -659,7 +667,7 @@ var DateRangePickerBase = (props) => {
 				autoFixYear,
 				placeholder,
 				className: inputClassName,
-				onOpenDropdown: () => state.toggle(),
+				onOpenDropdown,
 				timeZone: effectiveTimeZone,
 				fireBlurOnChange,
 				onClear: onInputClear