@ahrowe/ui 0.32.0 → 0.33.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.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';
@@ -70,6 +71,9 @@ export interface ComponentDefaults {
     KlipyPicker?: {
         labels?: KlipyPickerLabels;
     };
+    SearchInput?: {
+        labels?: SearchInputLabels;
+    };
     VirtualList?: {
         labels?: VirtualListLabels;
     };

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';
 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/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/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/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;

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

@@ -1,13 +1,18 @@
-import { HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export interface Progress {
     amount: number;
     label?: string;
     color?: string;
     class?: string;
 }
+export type ProgressBarSlots = 'root' | 'fill' | 'label';
 export interface ProgressBarProps extends HtmlProps {
     className?: string | undefined;
     total?: number;
     progress?: number | Progress | Progress[];
     style?: React.CSSProperties | undefined;
+    /** Classes for the inner elements. See `ProgressBarSlots`. */
+    classNames?: SlotClassNames<ProgressBarSlots>;
+    /** Inline styles for the inner elements. See `ProgressBarSlots`. */
+    styles?: SlotStyles<ProgressBarSlots>;
 }

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

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SearchInputProps } from './searchInput.types';
-export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, ...rest }: SearchInputProps): ReactElement;
+export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, style, classNames, styles: slotStyles, labels, ...rest }: SearchInputProps): ReactElement;

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

@@ -1,4 +1,10 @@
-import { HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export type SearchInputSlots = 'root' | 'input' | 'resultCount';
+/** Text SearchInput renders of its own, for translating it. */
+export interface SearchInputLabels {
+    /** The result count, given the number (default `12 results`). */
+    results?: (count: number) => string;
+}
 export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     value: string;
     onChange: (value: string) => void;
@@ -10,4 +16,10 @@ export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     showAmount?: boolean;
     className?: string;
     width?: number | string;
+    /** Classes for the inner elements. See `SearchInputSlots`. */
+    classNames?: SlotClassNames<SearchInputSlots>;
+    /** Inline styles for the inner elements. See `SearchInputSlots`. */
+    styles?: SlotStyles<SearchInputSlots>;
+    /** Overrides the text SearchInput renders of its own. Merged per key. */
+    labels?: SearchInputLabels;
 }

package/docs/Card.md

@@ -82,3 +82,5 @@ All sub-components are optional — use only what you need. Stacked sub-componen
 Card is spaced by its font: the padding, the header's gap and thumbnail, the gap between title and subtitle, and the action row all scale with the theme's text size. The title is `1.125em` — 18px at a 16px base — rather than a fixed size, so it stays proportional to the body text beneath it.
 
 `CardMedia` bleeds to the card's edges with a negative margin that has to stay equal to the padding, so change the two together.
+
+**Slots:** `root` `content`

package/docs/Chip.md

@@ -68,3 +68,5 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 | `inline` | `boolean` | Inline layout (default wraps) |
 
 **Labels:** `remove` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ChipLabels`.
+
+**Slots:** `root` `inner` `thumbnail` `text` `removeIcon`

package/docs/ColorPicker.md

@@ -52,3 +52,5 @@ The inline swatch tracks the theme's text size, since it sits beside a label: `-
 The picker panel deliberately does not. It is a floating control surface with its own fixed layout — a saturation area, sliders and a hex field — and it holds together at a large base font rather than needing to grow with it.
 
 **Labels:** `pickFromScreen` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `ColorPickerLabels`.
+
+**Slots:** `root` `swatch` `panel` `gradient` `hueSlider` `alphaSlider` `hexInput` `eyeDropper`

package/docs/DatePicker.md

@@ -80,3 +80,7 @@ const dateValidator = new FormValidator<Date | null>(null);
 | `showClearButton` | `boolean` | Show a clear/reset button |
 | `startDate` | `Date` | Range highlight start |
 | `endDate` | `Date` | Range highlight end |
+
+**Slots:** `root` `input` `header` `monthDropdown` `yearDropdown` `calendar` `clearButton`
+
+The root also takes the full native attribute set (`id`, `data-*`, `aria-*`, `title`, event handlers). `onChange` and `onSelect` report a `Date`, so the native handlers of those names are not available.

package/docs/Drawer.md

@@ -62,3 +62,5 @@ function Example() {
 - It's an **inline** element with `height: 100%` and a `width` transition — place it in a flex/grid layout next to your main content; it doesn't overlay.
 - When `openedWidth` is omitted, the open width tracks the content's `scrollWidth` via a `ResizeObserver`, so it grows/shrinks with dynamic content.
 - For a full-screen overlay dialog instead, use `Modal`; for a collapsing scroll header, see `Overscroll`.
+
+**Slots:** `root` `content` `inner`

package/docs/Dropdown.md

@@ -65,3 +65,5 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 The list is rendered through a portal and tracks the trigger across scroll, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists). It flips to open upward automatically when there's no room below, and shifts horizontally to stay within the viewport when the trigger sits near the left or right edge of the screen. It hides (without closing) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view. It also re-measures when its own content changes size while open, so a list that shrinks (e.g. filtered down to fewer entries) stays anchored to the trigger instead of hanging above it.
 
 **Bottom sheet:** `presentation={Presentation.Sheet}` drops the anchoring entirely and pins the list to the bottom of the screen instead, full width up to 560px, behind a backdrop, scrolling internally past 70% of the viewport height and lifting itself above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Tapping the backdrop closes the list without also pressing whatever sits behind it. It is the same list with the same keyboard handling, so selection, highlighting and infinite scroll are unchanged. `Presentation.Auto` does that only when the pointer is coarse *and* the screen is under 768px wide. The default is `Presentation.Default`. A whole app can opt in with `<ConfigProvider defaultProps={{ Dropdown: { presentation: Presentation.Auto } }}>`, or for every sheet-capable component at once with `<ConfigProvider presentation={Presentation.Auto}>` — see [ConfigProvider.md](ConfigProvider.md).
+
+**Slots:** `root` `label` `field` `control` `icon` `placeholder` `list` `option`

package/docs/EmptyState.md

@@ -30,3 +30,5 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons';
 | `className` | `string` | Root element class |
 
 **Labels:** `empty` — the text this component renders of its own. Pass `labels` to override it, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `EmptyStateLabels`.
+
+**Slots:** `root` `icon` `text`

package/docs/Fab.md

@@ -57,3 +57,5 @@ import { faPlus, faPen, faCamera } from '@fortawesome/free-solid-svg-icons';
 ```
 
 `--fab-icon-size` is independent of `--fab-size`, so enlarging the button does not enlarge the glyph; set both. It applies to the speed-dial entries as well as the main button.
+
+**Slots:** `root` `backdrop` `button` `icon` `menu` `menuEntry` `menuEntryLabel`

package/docs/NumberInput.md

@@ -126,3 +126,7 @@ const qty = new FormValidator<number | undefined>(undefined, [inRange(10, 100)])
 **Mobile keyboard layout:** shows the numeric on-screen keyboard automatically (`inputMode="numeric"` when `decimalScale={0}`, `"decimal"` otherwise, so a decimal separator key is available whenever fractional values are allowed). Pass `inputMode` directly to override.
 
 **Labels:** `increase` `decrease` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `NumberInputLabels`.
+
+**Slots:** `root` `input` `arrows` `increaseButton` `decreaseButton`
+
+With `arrowsLayout='split'` the root is the group around the two buttons and the field; otherwise it is the field itself.

package/docs/ProgressBar.md

@@ -58,3 +58,5 @@ const theme: Theme = {
 // Or one-off via style
 <ProgressBar progress={60} style={{ '--progress-bar-track-color': '#2a2a2a' } as React.CSSProperties} />
 ```
+
+**Slots:** `root` `fill` `label`

package/docs/SearchInput.md

@@ -55,3 +55,7 @@ import { SearchInput } from '@ahrowe/ui';
 | `showAmount` | `boolean` | Show the result count line (default `true`) |
 | `width` | `number \| string` | Fixed width for the wrapper |
 | `className` | `string` | Root wrapper class |
+
+**Slots:** `root` `input` `resultCount`
+
+**Labels:** `results(count)` — the line under the field (default `12 results`). Pass `labels` to override it, on the component or app-wide through `ConfigProvider`. Type: `SearchInputLabels`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "components",