@ahrowe/ui 0.32.0 → 0.34.0

package/dist/types/common/card/card.types.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
 import { ButtonStyleType } from '../button/button.types';
-import { HtmlProps } from '../types/slots.types';
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
 import { IconAction } from '../types/actions.types';
 export declare enum CardStyleType {
     Elevated = "elevated",
     Outlined = "outlined",
     Filled = "filled"
 }
+export type CardSlots = 'root' | 'content';
 export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     className?: string | undefined;
     children?: ReactNode;
@@ -17,6 +18,10 @@ export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     style?: React.CSSProperties;
     autoGap?: boolean;
     clip?: boolean;
+    /** Classes for the inner elements. See `CardSlots`. */
+    classNames?: SlotClassNames<CardSlots>;
+    /** Inline styles for the inner elements. See `CardSlots`. */
+    styles?: SlotStyles<CardSlots>;
 }
 export type CardHeaderAction = IconAction;
 export interface CardHeaderProps {

package/dist/types/common/chip/chip.types.d.ts

@@ -1,4 +1,4 @@
-import { HtmlProps } from '../types/slots.types';
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
 export declare enum ChipStyleType {
     Default = "default",
     Primary = "primary",
@@ -11,6 +11,7 @@ export interface ChipLabels {
     /** The remove button, read out by screen readers (default `Remove`). */
     remove?: string;
 }
+export type ChipSlots = 'root' | 'inner' | 'thumbnail' | 'text' | 'removeIcon';
 export interface ChipProps extends HtmlProps {
     className?: string;
     text?: string;
@@ -22,6 +23,10 @@ export interface ChipProps extends HtmlProps {
     onRemove?: () => void;
     /** Overrides the text Chip renders of its own. Merged per key. */
     labels?: ChipLabels;
+    /** Classes for the inner elements. See `ChipSlots`. */
+    classNames?: SlotClassNames<ChipSlots>;
+    /** Inline styles for the inner elements. See `ChipSlots`. */
+    styles?: SlotStyles<ChipSlots>;
 }
 export interface ChipContainerProps extends HtmlProps {
     className?: string;

package/dist/types/common/colorPicker/colorPicker.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ColorPickerProps } from './colorPicker.types';
-declare function ColorPicker({ className, value, onChange, showInput, showAlpha, inline, labels, ...rest }: ColorPickerProps): ReactElement;
+declare function ColorPicker({ className, value, onChange, showInput, showAlpha, inline, labels, style, classNames, styles: slotStyles, ...rest }: ColorPickerProps): ReactElement;
 export default ColorPicker;

package/dist/types/common/colorPicker/colorPicker.types.d.ts

@@ -1,4 +1,5 @@
-import { HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export type ColorPickerSlots = 'root' | 'swatch' | 'panel' | 'gradient' | 'hueSlider' | 'alphaSlider' | 'hexInput' | 'eyeDropper';
 /** Text ColorPicker renders of its own, for translating it. */
 export interface ColorPickerLabels {
     /** The eyedropper button, read out by screen readers. */
@@ -13,4 +14,8 @@ export interface ColorPickerProps extends Omit<HtmlProps, 'onChange'> {
     inline?: boolean;
     /** Overrides the text ColorPicker renders of its own. Merged per key. */
     labels?: ColorPickerLabels;
+    /** Classes for the inner elements. See `ColorPickerSlots`. */
+    classNames?: SlotClassNames<ColorPickerSlots>;
+    /** Inline styles for the inner elements. See `ColorPickerSlots`. */
+    styles?: SlotStyles<ColorPickerSlots>;
 }

package/dist/types/common/configProvider/configProvider.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentDefaults, ConfigProviderProps } from './configProvider.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export declare const ConfigContext: React.Context<ComponentDefaults | null>;
 /**
  * One setting for every component that can present as a bottom sheet, kept separate from

package/dist/types/common/configProvider/configProvider.types.d.ts

@@ -11,6 +11,7 @@ import { DatePickerProps } from '../datePicker/datePicker.types';
 import { ColorPickerLabels } from '../colorPicker/colorPicker.types';
 import { EmptyStateLabels } from '../emptyState/emptyState.types';
 import { KlipyPickerLabels } from '../klipyPicker/klipyPicker.types';
+import { SearchInputLabels } from '../searchInput/searchInput.types';
 import { VirtualListLabels } from '../virtualList/virtualList.types';
 import { ButtonProps } from '../button/button.types';
 import { ActionButtonsProps } from '../actionButtons/actionButtons.types';
@@ -38,9 +39,9 @@ import { PaginationProps } from '../pagination/pagination.types';
 import { TreeProps } from '../tree/tree.types';
 import { RoomDrawerProps } from '../roomDrawer/roomDrawer.types';
 import { RoomViewerProps } from '../roomViewer/roomViewer.types';
-import { FloatingMenuProps, Presentation } from '../floatingMenu/floatingMenu.types';
 import { PopoverProps } from '../popover/popover.types';
 import { ModalProps } from '../modal/modal.types';
+import { Presentation } from '../configProvider/presentation.types';
 /**
  * Global default props keyed by component name.
  *
@@ -70,6 +71,9 @@ export interface ComponentDefaults {
     KlipyPicker?: {
         labels?: KlipyPickerLabels;
     };
+    SearchInput?: {
+        labels?: SearchInputLabels;
+    };
     VirtualList?: {
         labels?: VirtualListLabels;
     };
@@ -108,7 +112,6 @@ export interface ComponentDefaults {
     Tree?: Partial<TreeProps>;
     RoomDrawer?: Partial<RoomDrawerProps>;
     RoomViewer?: Partial<RoomViewerProps>;
-    FloatingMenu?: Partial<FloatingMenuProps>;
     Popover?: Partial<PopoverProps>;
     Modal?: Partial<ModalProps>;
 }
@@ -118,7 +121,7 @@ export interface ConfigProviderProps {
     defaultProps?: ComponentDefaults;
     /**
      * How every sheet-capable component presents by default: anchored to its trigger, always a
-     * bottom sheet, or a sheet only on a small touch screen. One switch for `FloatingMenu`,
+     * bottom sheet, or a sheet only on a small touch screen. One switch for `Popover`,
      * `Dropdown`, `Popover` and `Modal` at once (and so for everything built on them). A
      * component-keyed entry in `defaultProps` overrides it, and an explicit prop overrides both.
      */

package/dist/types/common/configProvider/index.d.ts

@@ -3,3 +3,4 @@ export { useComponentDefaults } from './useComponentDefaults';
 export { useLabels } from './useLabels';
 export { usePresentationDefault } from './usePresentationDefault';
 export type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';
+export { Presentation } from './presentation.types';

package/dist/types/common/configProvider/presentation.types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * How a surface is presented on screen. Lives here rather than with any one of
+ * the components that read it: `Modal`, `Popover`, `Dropdown` and `MultiSelect`
+ * all take it, and `ConfigProvider` owns the app-wide switch that sets it for
+ * every one of them at once.
+ */
+export declare enum Presentation {
+    /** Wherever the component normally puts it: anchored to its trigger, or centred for a Modal. */
+    Default = "default",
+    /** Pinned to the bottom of the screen, full width up to a maximum. */
+    Sheet = "sheet",
+    /** A sheet on touch devices with a small screen, anchored everywhere else. */
+    Auto = "auto"
+}

package/dist/types/common/configProvider/usePresentationDefault.d.ts

@@ -1,4 +1,4 @@
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 /**
  * The nearest `ConfigProvider`'s app-wide `presentation`, or `undefined` when none is set.
  *

package/dist/types/common/confirmModal/confirmModal.types.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { HtmlProps } from '../types/slots.types';
 import { ActionButtonsProps } from '../actionButtons';
 /** Text ConfirmModal renders of its own, for translating it. */
 export interface ConfirmModalLabels {
@@ -7,9 +8,10 @@ export interface ConfirmModalLabels {
     /** The dismissing button (default `Cancel`). */
     cancel?: string;
 }
-export interface ConfirmModalProps {
+export interface ConfirmModalProps extends Omit<HtmlProps<HTMLDivElement>, 'onClose' | 'content' | 'title'> {
     children?: ReactNode;
     className?: string;
+    style?: CSSProperties;
     onClose?: (didSubmit: boolean) => void;
     onConfirm?: () => void | Promise<void>;
     title?: string;

package/dist/types/common/datePicker/components/datePickerMonth/datePickerMonth.d.ts

@@ -1,2 +1,2 @@
 import { DatePickerMonthProps } from './datePickerMonth.types';
-export default function DatePickerMonth({ className, month, year, onSelect, selectionStart, selectionEnd, minDate, maxDate, onNavigateMonth, }: DatePickerMonthProps): import("react").JSX.Element;
+export default function DatePickerMonth({ style, className, month, year, onSelect, selectionStart, selectionEnd, minDate, maxDate, onNavigateMonth, }: DatePickerMonthProps): import("react").JSX.Element;

package/dist/types/common/datePicker/components/datePickerMonth/datePickerMonth.types.d.ts

@@ -1,6 +1,9 @@
+import { CSSProperties } from 'react';
 export interface DatePickerMonthProps {
     /** Class on the root element. */
     className?: string;
+    /** Inline style on the root element, forwarded from DatePicker's `calendar` slot. */
+    style?: CSSProperties;
     /** Month to display, 1 to 12. */
     month?: number;
     /** Year to display. */

package/dist/types/common/datePicker/datePicker.types.d.ts

@@ -1,8 +1,17 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { FormValidator } from '../../services/formValidation';
-export interface DatePickerProps {
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
+export type DatePickerSlots = 'root' | 'input' | 'header' | 'monthDropdown' | 'yearDropdown' | 'calendar' | 'clearButton';
+/**
+ * `onChange` and `onSelect` report a date rather than a DOM event, so the native
+ * handlers of those names are dropped instead of being widened to accept both.
+ */
+export interface DatePickerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange' | 'onSelect'> {
     /** Class on the root element. */
     className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<DatePickerSlots>;
+    styles?: SlotStyles<DatePickerSlots>;
     /** Selected date, controlled. Ignored while a `formValidator` owns the value. */
     selected?: Date;
     /** Floating label on the input. */

package/dist/types/common/drawer/drawer.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { DrawerProps } from './drawer.types';
-declare function Drawer({ className, isOpen, closedWidth, openedWidth, children }: DrawerProps): ReactElement;
+declare function Drawer({ className, isOpen, closedWidth, openedWidth, children, style, classNames, styles: slotStyles, ...rest }: DrawerProps): ReactElement;
 export default Drawer;

package/dist/types/common/drawer/drawer.types.d.ts

@@ -1,5 +1,11 @@
-export interface DrawerProps {
+import { CSSProperties } from 'react';
+import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
+export type DrawerSlots = 'root' | 'content' | 'inner';
+export interface DrawerProps extends HtmlProps<HTMLDivElement> {
     className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<DrawerSlots>;
+    styles?: SlotStyles<DrawerSlots>;
     isOpen?: boolean;
     /** Width of the container when closed. Defaults to 0. Any CSS length value, e.g. '48px'. */
     closedWidth?: string;

package/dist/types/common/dropdown/dropdown.types.d.ts

@@ -1,12 +1,13 @@
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 import { ReactNode, Ref } from 'react';
 import { FormValidator } from '../../services/formValidation';
-import { HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export interface DropdownItem {
     key: string | number;
     label: ReactNode;
     disabled?: boolean;
 }
+export type DropdownSlots = 'root' | 'label' | 'field' | 'control' | 'icon' | 'placeholder' | 'list' | 'option';
 export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
     formValidator?: FormValidator | null;
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
@@ -33,15 +34,14 @@ export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'o
     /** Where the list opens: anchored to the input (`Default`), pinned to the bottom of the
      * screen, or the latter only on a small touch screen. */
     presentation?: Presentation;
-    inputClassName?: string;
-    dropDownIconClassName?: string;
-    dropDownClassName?: string;
-    labelClassName?: string;
-    dropDownInputClassName?: string;
     useMatLabelStyle?: boolean;
     alwaysFloatLabel?: boolean;
     placeholder?: string;
     plainStyle?: boolean;
     scrollToSelected?: boolean;
     reactRef?: Ref<HTMLButtonElement>;
+    /** Classes for the inner elements. See `DropdownSlots`. */
+    classNames?: SlotClassNames<DropdownSlots>;
+    /** Inline styles for the inner elements. See `DropdownSlots`. */
+    styles?: SlotStyles<DropdownSlots>;
 }

package/dist/types/common/emptyState/emptyState.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { EmptyStateProps } from './emptyState.types';
-export default function EmptyState({ className, icon, children, labels, ...rest }: EmptyStateProps): ReactElement;
+export default function EmptyState({ className, icon, children, labels, style, classNames, styles: slotStyles, ...rest }: EmptyStateProps): ReactElement;

package/dist/types/common/emptyState/emptyState.types.d.ts

@@ -1,6 +1,7 @@
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 import { ReactNode } from 'react';
 import { IconContent } from '../types/icon.types';
-import { HtmlProps } from '../types/slots.types';
+export type EmptyStateSlots = 'root' | 'icon' | 'text';
 /** Text EmptyState renders of its own, for translating it. */
 export interface EmptyStateLabels {
     /** Shown when no `children` are given. */
@@ -12,4 +13,8 @@ export interface EmptyStateProps extends HtmlProps {
     children?: ReactNode;
     /** Overrides the text EmptyState renders of its own. Merged per key. */
     labels?: EmptyStateLabels;
+    /** Classes for the inner elements. See `EmptyStateSlots`. */
+    classNames?: SlotClassNames<EmptyStateSlots>;
+    /** Inline styles for the inner elements. See `EmptyStateSlots`. */
+    styles?: SlotStyles<EmptyStateSlots>;
 }

package/dist/types/common/fab/components/fabBase/fabBase.d.ts

@@ -1,3 +1,3 @@
 import { FabBaseProps } from './fabBase.types';
-declare function FabBase({ children, size, className, styleType, onClick, }: FabBaseProps): import("react").JSX.Element;
+declare function FabBase({ style, children, size, className, styleType, onClick, }: FabBaseProps): import("react").JSX.Element;
 export default FabBase;

package/dist/types/common/fab/components/fabBase/fabBase.types.d.ts

@@ -1,10 +1,12 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { ButtonStyleType } from '../../../button/button.types';
 export type FabBaseSize = 'default' | 'mini';
 export interface FabBaseProps {
     children?: ReactNode;
     size?: FabBaseSize;
     className?: string;
+    /** Forwarded from Fab's `button` slot. */
+    style?: CSSProperties;
     styleType?: ButtonStyleType;
     onClick?: () => void;
 }

package/dist/types/common/fab/fab.d.ts

@@ -1,3 +1,3 @@
 import { FabProps } from './fab.types';
-declare function Fab({ children, size, menuEntries, onMenuEntryClicked, onClick, closeMenuOnEntryClicked, ...rest }: FabProps): import("react").JSX.Element;
+declare function Fab({ children, size, menuEntries, onMenuEntryClicked, onClick, closeMenuOnEntryClicked, className, style, classNames, styles: slotStyles, ...rest }: FabProps): import("react").JSX.Element;
 export default Fab;

package/dist/types/common/fab/fab.types.d.ts

@@ -1,12 +1,13 @@
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 import { ReactNode } from 'react';
 import { IconContent } from '../types/icon.types';
-import { HtmlProps } from '../types/slots.types';
 export type FabSize = 'default' | 'mini';
 export interface FabMenuEntry {
     id: string;
     icon: IconContent;
     label?: string;
 }
+export type FabSlots = 'root' | 'backdrop' | 'button' | 'icon' | 'menu' | 'menuEntry' | 'menuEntryLabel';
 export interface FabProps extends HtmlProps {
     children?: ReactNode;
     size?: FabSize;
@@ -14,4 +15,8 @@ export interface FabProps extends HtmlProps {
     onMenuEntryClicked?: (id: string) => void;
     onClick?: () => void;
     closeMenuOnEntryClicked?: boolean;
+    /** Classes for the inner elements. See `FabSlots`. */
+    classNames?: SlotClassNames<FabSlots>;
+    /** Inline styles for the inner elements. See `FabSlots`. */
+    styles?: SlotStyles<FabSlots>;
 }

package/dist/types/common/hooks/useAnchorTracking.d.ts

@@ -31,7 +31,7 @@ export interface UseAnchorTrackingArgs {
  * positioning on every scroll, viewport resize and tracked size change until it closes.
  *
  * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);
- * `useFloatingPosition` and `usePopoverPosition` are both built on this.
+ * `usePopoverPosition` is built on this.
  *
  * Position is deliberately written straight to the DOM by the caller rather than through React
  * state: going through setState -> re-render -> commit adds a round-trip that lags behind the

package/dist/types/common/hooks/useFocusBoundary.d.ts

@@ -9,9 +9,9 @@ export interface UseFocusBoundaryArgs {
 }
 /**
  * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't
- * reach it in visual document order on its own. Shared by FloatingMenu and Popover, which both
- * need to hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue
- * focus naturally past the trigger when Tab exits the bottom.
+ * reach it in visual document order on its own. Used by Popover and by Menu, which both need to
+ * hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue focus
+ * naturally past the trigger when Tab exits the bottom.
  */
 export declare function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs): {
     firstTriggerFocusable: () => HTMLElement | null;

package/dist/types/common/hooks/useSheet.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export interface Sheet {
     /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */
     isSheet: boolean;

package/dist/types/common/infiniteBlock/infiniteBlock.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { InfiniteBlockProps } from './infiniteBlock.types';
-declare function InfiniteBlock({ children, onScroll, className, isDataLoading, setHighlightedIndex, }: InfiniteBlockProps): React.JSX.Element;
+declare function InfiniteBlock({ children, onScroll, className, style, isDataLoading, setHighlightedIndex, }: InfiniteBlockProps): React.JSX.Element;
 export default InfiniteBlock;

package/dist/types/common/infiniteBlock/infiniteBlock.types.d.ts

@@ -4,6 +4,8 @@ export interface InfiniteBlockProps {
     /** Called when the user scrolls to the bottom; must return a Promise that resolves when the new data has loaded. */
     onScroll: () => Promise<void>;
     className?: string;
+    /** Inline style on the scroll container. */
+    style?: React.CSSProperties;
     /** Replaces children with a full-block spinner (initial load). */
     isDataLoading?: boolean;
     /** Called with the newly highlighted child index after keyboard navigation. */

package/dist/types/common/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './menu';
+export * from './menu.types';

package/dist/types/common/menu/menu.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { MenuProps } from './menu.types';
+/**
+ * A menu of actions on a trigger of your choosing.
+ *
+ * `Popover` does the anchoring, portalling and outside-click work but takes
+ * arbitrary `content`, which leaves every consumer to write their own `ul`/`li`
+ * and, in practice, to leave out the roles and the arrow keys. This is that list,
+ * done once: `role="menu"`, a roving focus that skips disabled entries, Escape
+ * back to the trigger, and separators and headings that stay out of the keyboard
+ * order.
+ */
+declare function Menu({ items, children, onAction, isOpen: controlledOpen, onOpenChange, placement, align, presentation, className, style, classNames, styles: slotStyles, ...rest }: MenuProps): ReactElement;
+export default Menu;

package/dist/types/common/menu/menu.types.d.ts

@@ -0,0 +1,55 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { IconContent } from '../types/icon.types';
+import { PopoverAlign, PopoverPlacement } from '../popover/popover.types';
+import { Presentation } from '../configProvider/presentation.types';
+/** One thing the menu can do. */
+export interface MenuAction {
+    /** Stable id, also what `onAction` reports. */
+    id: string;
+    label: ReactNode;
+    icon?: IconContent;
+    /**
+     * Keyboard hint on the trailing edge, e.g. `⌘K`. Display only: binding the
+     * shortcut is yours, since only you know what else is listening.
+     */
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    /** Renders in the destructive colour. For deleting, discarding, revoking. */
+    danger?: boolean;
+    onClick?: () => void;
+}
+/** A line between groups of actions. */
+export interface MenuSeparator {
+    separator: true;
+}
+/** A label over the actions that follow it. */
+export interface MenuHeading {
+    heading: ReactNode;
+}
+export type MenuEntry = MenuAction | MenuSeparator | MenuHeading;
+export declare function isMenuSeparator(entry: MenuEntry): entry is MenuSeparator;
+export declare function isMenuHeading(entry: MenuEntry): entry is MenuHeading;
+export declare function isMenuAction(entry: MenuEntry): entry is MenuAction;
+export type MenuSlots = 'root' | 'trigger' | 'menu' | 'item' | 'itemIcon' | 'itemLabel' | 'itemShortcut' | 'separator' | 'heading';
+export interface MenuProps extends Omit<HtmlProps, 'onSelect'> {
+    /** What the menu offers, in the order it is read. */
+    items: MenuEntry[];
+    /** The element that opens the menu. */
+    children?: ReactNode;
+    /** Called with the id of the action that was picked, after its own `onClick`. */
+    onAction?: (id: string) => void;
+    /** Controlled open state. Leave it out to let the menu manage its own. */
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Which side of the trigger the menu opens on (default `Bottom`). */
+    placement?: PopoverPlacement;
+    /** Which edge it lines up with on the cross axis (default `Start`). */
+    align?: PopoverAlign;
+    /** Anchored to the trigger, pinned to the bottom of the screen, or the latter only on touch. */
+    presentation?: Presentation;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<MenuSlots>;
+    styles?: SlotStyles<MenuSlots>;
+}

package/dist/types/common/modal/modal.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export type ModalSlots = 'container' | 'backdrop' | 'modal' | 'header' | 'title' | 'closeButton' | 'body';
 /** Text Modal renders of its own, for translating it. */
 export interface ModalLabels {

package/dist/types/common/multiSelect/multiSelect.types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export type MultiSelectValue = string | number;
 export interface MultiSelectItem {
     key: MultiSelectValue;

package/dist/types/common/numberInput/numberInput.types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { NumericFormatProps } from 'react-number-format';
 import { FormValidator } from '../../services/formValidation';
+import { SlotClassNames, SlotStyles } from '../types/slots.types';
 /**
  * How the stepper buttons are laid out.
  *
@@ -17,6 +18,7 @@ export interface NumberInputLabels {
     /** The step-down button, read out by screen readers (default `Decrease`). */
     decrease?: string;
 }
+export type NumberInputSlots = 'root' | 'input' | 'arrows' | 'increaseButton' | 'decreaseButton';
 export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown' | 'min' | 'max'> {
     value?: number | string;
     onChange?: (value: number | undefined) => void;
@@ -65,4 +67,8 @@ export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChang
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Overrides the text NumberInput renders of its own. Merged per key. */
     labels?: NumberInputLabels;
+    /** Classes for the inner elements. See `NumberInputSlots`. */
+    classNames?: SlotClassNames<NumberInputSlots>;
+    /** Inline styles for the inner elements. See `NumberInputSlots`. */
+    styles?: SlotStyles<NumberInputSlots>;
 }

package/dist/types/common/popover/popover.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 /** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */
 export declare enum PopoverPlacement {
     Top = "top",
@@ -36,8 +36,14 @@ export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     isOpen?: boolean;
     /** Initial open state when uncontrolled (default `false`). */
     defaultOpen?: boolean;
-    /** Fires whenever the popover wants to open or close. */
-    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Fires whenever the popover wants to open or close. `fromKeyboard` says
+     * whether a key caused it, which is what a menu needs in order to put the
+     * focus on an entry only when the pointer was not what opened it.
+     */
+    onOpenChange?: (isOpen: boolean, meta: {
+        fromKeyboard: boolean;
+    }) => void;
     /** Gap in px between trigger and panel (default `10`). */
     offset?: number;
     /** Render the arrow pointing at the trigger (default `true`). */
@@ -52,6 +58,31 @@ export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     closeDelay?: number;
     /** Prevent the popover from opening. */
     disabled?: boolean;
+    /**
+     * Move focus into the panel when it opens, and claim `role="dialog"` with it.
+     * `'keyboard'` (the default) does it only when the open came from the
+     * keyboard: the panel is portaled to the end of the document, so Tab never
+     * reaches it on its own, while a click leaves the focus where the pointer
+     * already put it. `true` always, `false` never.
+     */
+    focusOnOpen?: boolean | 'keyboard';
+    /**
+     * Whether clicking the trigger while the panel is open closes it (default
+     * `true`). A menu button should toggle; a text field that opens a picker
+     * should not, or clicking into it to place the caret would close the panel.
+     */
+    closeOnTriggerClick?: boolean;
+    /**
+     * `'trigger'` gives the panel at least the trigger's width, for a list that
+     * should line up with the field it belongs to. `'auto'` (the default) lets it
+     * size to its own content.
+     */
+    width?: 'auto' | 'trigger';
+    /**
+     * Cap the panel at a readable measure (default `true`). Off for a panel with
+     * its own width, a calendar or a media grid.
+     */
+    constrainWidth?: boolean;
     /** Where the panel opens: anchored to the trigger (`Default`), pinned to the bottom of the
      * screen, or the latter only on a small touch screen. Only a `Click` trigger presents as a
      * sheet. */

package/dist/types/common/popover/usePopoverPosition.d.ts

@@ -12,6 +12,25 @@ export interface UsePopoverPositionArgs {
     panelRef: RefObject<HTMLElement | null>;
     /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */
     arrowRef: RefObject<HTMLElement | null>;
+    /**
+     * Give the panel at least the trigger's width, for a list that lines up with
+     * the field it belongs to. A minimum rather than a fixed width: a menu on a
+     * narrow icon button still sizes to its own content.
+     */
+    matchTriggerWidth?: boolean;
+    /**
+     * When the panel does not fit on the side its alignment puts it, narrow it
+     * rather than sliding it away from the trigger. Sliding keeps the panel
+     * on-screen but detaches it: an end-aligned bubble stops ending where its
+     * trigger ends, and its arrow stops pointing at anything. Off by default, since
+     * a panel whose width is its content, a menu or a list, would rather overhang
+     * its trigger than wrap.
+     *
+     * Only down to `MIN_SHRINK_WIDTH`. Past that the panel is narrower than it is
+     * readable, and a trigger that close to the screen edge is better served by a
+     * panel that overhangs it.
+     */
+    shrinkToFit?: boolean;
 }
 /**
  * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with
@@ -22,4 +41,4 @@ export interface UsePopoverPositionArgs {
  * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and
  * re-running on scroll, viewport resize and panel size changes.
  */
-export declare function usePopoverPosition({ isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef, }: UsePopoverPositionArgs): void;
+export declare function usePopoverPosition({ isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef, matchTriggerWidth, shrinkToFit, }: UsePopoverPositionArgs): void;

package/dist/types/common/progressBar/progressBar.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
 import { ProgressBarProps } from './progressBar.types';
 export declare function getContrastColor(hexColor: string): string;
-declare function ProgressBar({ className, total, progress, style, ...rest }: ProgressBarProps): ReactElement;
+declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
 export default ProgressBar;