@ahrowe/ui 0.22.0 → 0.24.0

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

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';
 export declare enum ButtonStyleType {
     Primary = "primary",
     Default = "default",
@@ -10,7 +10,9 @@ export declare enum ButtonSize {
     Default = "default",
     Small = "small",
     Medium = "medium",
-    Large = "large"
+    Large = "large",
+    /** Square, padding-free button for a lone icon. Give it its own width/height. */
+    Icon = "icon"
 }
 export declare enum ButtonType {
     Button = "button",
@@ -18,7 +20,11 @@ export declare enum ButtonType {
     Submit = "submit"
 }
 export type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';
-export interface ButtonProps extends HtmlProps {
+/**
+ * `DataProps` supplies the `data-*` index signature, which `ButtonHTMLAttributes` doesn't cover.
+ * `type` and `onClick` below deliberately narrow their inherited counterparts.
+ */
+export interface ButtonProps extends DataProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     style?: CSSProperties;
     type?: ButtonType;

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

@@ -7,7 +7,7 @@ export declare enum CardStyleType {
     Outlined = "outlined",
     Filled = "filled"
 }
-export interface CardProps extends HtmlProps {
+export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     className?: string | undefined;
     children?: ReactNode;
     styleType?: CardStyleType;

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type CarouselSlots = 'root' | 'track' | 'slide' | 'prevButton' | 'nextButton' | 'dots' | 'dot';
-export interface CarouselProps extends HtmlProps {
+export interface CarouselProps extends Omit<HtmlProps, 'onChange'> {
     children?: ReactNode;
     currentIndex?: number;
     defaultIndex?: number;
@@ -13,6 +13,8 @@ export interface CarouselProps extends HtmlProps {
     showArrows?: boolean;
     showDots?: boolean;
     swipeable?: boolean;
+    lazyRender?: boolean;
+    adaptiveHeight?: boolean;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<CarouselSlots>;

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

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type CheckboxSlots = 'icon' | 'checkmark' | 'label';
-export interface CheckboxProps extends HtmlProps {
+export interface CheckboxProps extends Omit<HtmlProps, 'onToggle'> {
     label?: string;
     selected?: boolean;
     onToggle?: (isToggled: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;

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

@@ -12,6 +12,8 @@ export interface ChipProps extends HtmlProps {
     thumbnail?: React.ReactNode;
     styleType?: ChipStyleType;
     showRemoveIcon?: boolean;
+    /** Accessible name for the remove button. Default `'Remove'`. */
+    removeLabel?: string;
     onClick?: () => void;
     onRemove?: () => void;
 }

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

@@ -1,5 +1,5 @@
 import { HtmlProps } from '../types/slots.types';
-export interface ColorPickerProps extends HtmlProps {
+export interface ColorPickerProps extends Omit<HtmlProps, 'onChange'> {
     className?: string;
     value?: string;
     onChange?: (hex: string) => void;

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { InputProps } from '../input/input.types';
 import { TextareaProps } from '../textarea/textarea.types';
-import { NumberInputProps } from '../numberInput/numberInput';
+import { NumberInputProps } from '../numberInput/numberInput.types';
 import { DropdownProps } from '../dropdown/dropdown.types';
 import { InputDropdownProps } from '../inputDropdown/inputDropdown.types';
 import { CheckboxProps } from '../checkbox/checkbox.types';

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

@@ -48,7 +48,7 @@ export interface DropZoneRenderState {
     disabled: boolean;
 }
 export type DropZoneSlots = 'root' | 'content' | 'fileList' | 'fileItem' | 'input';
-export interface DropZoneProps extends HtmlProps {
+export interface DropZoneProps extends Omit<HtmlProps, 'children'> {
     /** Static content, or a render function that receives the live drop state. */
     children?: React.ReactNode | ((state: DropZoneRenderState) => React.ReactNode);
     /**

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

@@ -6,7 +6,7 @@ export interface DropdownItem {
     label: ReactNode;
     disabled?: boolean;
 }
-export interface DropdownProps extends HtmlProps {
+export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
     formValidator?: FormValidator | null;
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
     onMouseLeave?: ((event: React.MouseEvent) => void) | null;

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

@@ -24,7 +24,7 @@ export interface ErrorBoundaryLabels {
     /** Toast shown if the copy fails (only visible if `ToastProvider` is mounted). */
     copyErrorToast?: string;
 }
-export interface ErrorBoundaryProps extends HtmlProps {
+export interface ErrorBoundaryProps extends Omit<HtmlProps, 'title' | 'onError'> {
     children?: ReactNode;
     /** Heading shown above the error message. Default: "Something went wrong". */
     title?: ReactNode;

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

@@ -6,7 +6,7 @@ export declare enum Align {
     Center = "center"
 }
 export type FloatingMenuSlots = 'root' | 'trigger' | 'menu' | 'menuContainer';
-export interface FloatingMenuProps extends HtmlProps {
+export interface FloatingMenuProps extends Omit<HtmlProps, 'content'> {
     align?: Align;
     children?: ReactNode;
     content?: ReactNode;

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

@@ -0,0 +1,10 @@
+/**
+ * `true` when the primary pointing device is coarse (touch), kept current so a device that
+ * switches input modes re-renders.
+ *
+ * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,
+ * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`
+ * initialiser makes the client's first render disagree with the server's HTML.
+ */
+export declare function useCoarsePointer(): boolean;
+export default useCoarsePointer;

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

@@ -9,7 +9,7 @@ export interface IconPickerItem {
     icon?: IconDefinition;
     customIcon?: React.ReactNode;
 }
-export interface IconPickerProps extends HtmlProps {
+export interface IconPickerProps extends Omit<HtmlProps, 'onChange'> {
     data?: IconPickerItem[];
     selectedId?: string | null;
     label?: string;

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { FormValidator } from '../../services/formValidation';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';
 export declare enum InputType {
     Edit = "edit",
     Phone = "phone",
@@ -17,7 +17,7 @@ export declare enum InputIconPosition {
 }
 export type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';
 type OverriddenInputAttributes = 'onChange' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'onClick' | 'type' | 'value' | 'min' | 'max' | 'autoComplete';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, HtmlProps {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, DataProps {
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
     onMouseLeave?: ((event: React.MouseEvent) => void) | null;
     onFocus?: ((event: React.FocusEvent) => void) | null;

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

@@ -6,7 +6,7 @@ export interface InputDropdownItem {
     label?: string;
     value: string;
 }
-export interface InputDropdownProps extends HtmlProps {
+export interface InputDropdownProps extends Omit<HtmlProps, 'onSelect'> {
     label?: string;
     value?: string;
     formValidator?: FormValidator | null;

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { HtmlProps } from '../types/baseProps.types';
-interface Properties extends HtmlProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
+import { DataProps } from '../types/baseProps.types';
+interface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
     tabIndex?: number | null;
 }
 declare const InteractableDiv: React.ForwardRefExoticComponent<Properties & React.RefAttributes<HTMLDivElement>>;

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

@@ -25,7 +25,7 @@ export interface KanbanColumnDef {
     hasMore?: boolean;
 }
 export type KanbanBoardSlots = 'dragOverlay';
-export interface KanbanBoardProps<T = unknown> extends HtmlProps {
+export interface KanbanBoardProps<T = unknown> extends Omit<HtmlProps, 'onChange'> {
     /** Ordered list of column definitions. Each column owns its itemIds. */
     columns: KanbanColumnDef[];
     /** Flat map of all items keyed by their id. */

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

@@ -1,2 +1,3 @@
 import { default as NumberInput } from './numberInput';
+export type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';
 export default NumberInput;

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

@@ -1,34 +1,5 @@
-import { ReactElement, default as React } from 'react';
-import { NumericFormatProps } from 'react-number-format';
-import { FormValidator } from '../../services/formValidation';
-export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown'> {
-    value?: number | string;
-    onChange?: (value: number | undefined) => void;
-    formValidator?: FormValidator | null;
-    label?: string;
-    error?: string;
-    className?: string;
-    allowNegative?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string | boolean;
-    prefix?: string;
-    suffix?: string;
-    decimalScale?: number;
-    /**
-     * Whether to pad the value to exactly `decimalScale` decimals. Default `true`
-     * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make
-     * `decimalScale` an upper limit only — the user may type fewer decimals and they
-     * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond
-     * `decimalScale` is still truncated.
-     */
-    fixedDecimalScale?: boolean;
-    placeholder?: string;
-    sign?: '+' | '-';
-    showArrows?: boolean;
-    step?: number;
-    readOnly?: boolean;
-    isRequired?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
+import { ReactElement } from 'react';
+import { NumberInputProps } from './numberInput.types';
+export type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';
 declare function NumberInput(props: NumberInputProps): ReactElement;
 export default NumberInput;

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { NumericFormatProps } from 'react-number-format';
+import { FormValidator } from '../../services/formValidation';
+/**
+ * How the stepper buttons are laid out.
+ *
+ * - `stacked` — chevrons stacked inside the field's right edge. Compact; suits a mouse.
+ * - `split` — square `−` / `+` buttons flanking the field, each as tall and wide as the field.
+ *   Far apart with the field between them, so a mis-tap can't step the value the wrong way.
+ * - `auto` — `split` on a coarse (touch) pointer, `stacked` otherwise.
+ */
+export type NumberInputArrowsLayout = 'auto' | 'stacked' | 'split';
+export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown' | 'min' | 'max'> {
+    value?: number | string;
+    onChange?: (value: number | undefined) => void;
+    formValidator?: FormValidator | null;
+    label?: string;
+    error?: string;
+    className?: string;
+    allowNegative?: boolean;
+    decimalSeparator?: string;
+    thousandSeparator?: string | boolean;
+    prefix?: string;
+    suffix?: string;
+    decimalScale?: number;
+    /**
+     * Whether to pad the value to exactly `decimalScale` decimals. Default `true`
+     * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make
+     * `decimalScale` an upper limit only — the user may type fewer decimals and they
+     * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond
+     * `decimalScale` is still truncated.
+     */
+    fixedDecimalScale?: boolean;
+    placeholder?: string;
+    sign?: '+' | '-';
+    showArrows?: boolean;
+    step?: number;
+    /**
+     * Lower bound. Constrains the steppers and the ArrowDown key, disables the decrease button
+     * once reached, and clamps a typed value on blur and on Enter — the two moments it stops
+     * being mid-edit. Typing is never blocked; see {@link NumberInputProps.max}.
+     */
+    min?: number;
+    /**
+     * Upper bound. Behaves exactly like {@link NumberInputProps.min} in the other direction.
+     *
+     * Neither bound rejects a keystroke as it is typed — an edit passes through out-of-range
+     * states on its way somewhere valid — and an empty field is never clamped. Use a
+     * `formValidator` if out-of-range input must be *rejected* rather than corrected.
+     */
+    max?: number;
+    /** Stepper layout. Default `'auto'`. */
+    arrowsLayout?: NumberInputArrowsLayout;
+    /** Accessible name for the increase button. Default `'Increase'`. */
+    increaseLabel?: string;
+    /** Accessible name for the decrease button. Default `'Decrease'`. */
+    decreaseLabel?: string;
+    readOnly?: boolean;
+    isRequired?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}

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

@@ -0,0 +1,17 @@
+export interface UseStepRepeatResult {
+    /** Fires one step immediately, then starts the hold-to-repeat timer. */
+    start: (direction: 1 | -1, multiplier: number) => void;
+    /** Cancels a running repeat. Safe to call when nothing is running. */
+    stop: () => void;
+}
+/**
+ * Hold-to-repeat for the stepper buttons: one step on press, then an accelerating repeat.
+ *
+ * The release is watched on `window` rather than by capturing the pointer, which would retarget
+ * the following click past the node Button's ripple listens on. Capture would have guaranteed a
+ * `pointerup`, so the extra listeners cover the ways a press can end without one.
+ *
+ * `onStep` returns whether anything changed; `false` ends the repeat, so a hold at a bound stops.
+ */
+export declare function useStepRepeat(onStep: (delta: number) => boolean): UseStepRepeatResult;
+export default useStepRepeat;

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

@@ -5,7 +5,7 @@ export interface Option {
     key: string;
 }
 export type OptionPickerSlots = 'root' | 'chip' | 'option';
-export interface OptionPickerProps extends HtmlProps {
+export interface OptionPickerProps extends Omit<HtmlProps, 'onChange'> {
     className?: string;
     style?: React.CSSProperties;
     classNames?: SlotClassNames<OptionPickerSlots>;

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

@@ -8,7 +8,7 @@ export declare enum OtpInputCharset {
     /** Letters and digits. */
     Alphanumeric = "alphanumeric"
 }
-export interface OtpInputProps extends HtmlProps {
+export interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {
     /** Number of character boxes. Default 6. */
     length?: number;
     /** Current code as a plain string, e.g. "123456". */

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

@@ -20,7 +20,7 @@ export declare enum PopoverTrigger {
     Focus = "focus"
 }
 export type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow';
-export interface PopoverProps extends HtmlProps {
+export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     /** The trigger element. */
     children?: ReactNode;
     /** The popover body. */

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

@@ -16,7 +16,7 @@ export interface RadioOption {
     disabled?: boolean;
 }
 export type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';
-export interface RadioGroupProps extends HtmlProps {
+export interface RadioGroupProps extends Omit<HtmlProps, 'onChange'> {
     /** The selectable options. */
     options: RadioOption[];
     /** Controlled selected value. Omit for uncontrolled. */

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

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type RatingSlots = 'root' | 'item' | 'iconEmpty' | 'iconFilled';
-export interface RatingProps extends HtmlProps {
+export interface RatingProps extends Omit<HtmlProps, 'onChange'> {
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;

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

@@ -1,5 +1,5 @@
 import { HtmlProps } from '../types/slots.types';
-export interface SearchInputProps extends HtmlProps {
+export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     value: string;
     onChange: (value: string) => void;
     onDebounce?: (value: string) => void;

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

@@ -9,7 +9,7 @@ export declare enum SectionHeaderSize {
 }
 export type SectionHeaderAction = IconAction;
 export type SectionHeaderSlots = 'root' | 'identity' | 'leading' | 'titles' | 'title' | 'subtitle' | 'trailing' | 'left' | 'center' | 'actions';
-export interface SectionHeaderProps extends HtmlProps {
+export interface SectionHeaderProps extends Omit<HtmlProps, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;
     icon?: IconContent;

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

@@ -7,7 +7,7 @@ export interface SliderMark {
     label?: ReactNode;
 }
 export type SliderSlots = 'root' | 'track' | 'range' | 'thumb' | 'mark' | 'markLabel' | 'value';
-export interface SliderProps extends HtmlProps {
+export interface SliderProps extends Omit<HtmlProps, 'onChange'> {
     /** Controlled value. Omit for uncontrolled. */
     value?: number;
     /** Initial value when uncontrolled (default `min`). */

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

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type SwitchSlots = 'track' | 'thumb' | 'label';
-export interface SwitchProps extends HtmlProps {
+export interface SwitchProps extends Omit<HtmlProps, 'onToggle'> {
     label?: string;
     selected?: boolean;
     onToggle?: (isToggled: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;

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

@@ -9,7 +9,7 @@ export interface TabHeaderTab {
     subtitle?: string;
     disabled?: boolean;
 }
-export interface TabHeaderProps extends HtmlProps {
+export interface TabHeaderProps extends Omit<HtmlProps, 'onChange'> {
     tabs: TabHeaderTab[];
     currentTab: string;
     onChange: (id: string) => void;

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type TimeInputSlots = 'root' | 'clock' | 'clockHeader' | 'headerSegment' | 'meridiem' | 'clockFace' | 'clockHand' | 'clockNumber' | 'footer';
-export interface TimeInputProps extends HtmlProps {
+export interface TimeInputProps extends Omit<HtmlProps, 'onChange' | 'onSelect'> {
     /** Current time as a "HH:MM" (24-hour) string. */
     value?: string | null;
     /** Alias for `value`, to mirror DatePicker. */

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

@@ -1,8 +1,23 @@
 import { default as React } from 'react';
-/** HTML pass-through props accepted on the root element of every component. */
-export type HtmlProps = React.AriaAttributes & {
-    id?: string;
-    role?: React.AriaRole;
-} & {
+/**
+ * TypeScript allows hyphenated attributes on *intrinsic* elements only, so a component's props
+ * interface has to declare these itself — no React attribute type provides them.
+ */
+type DataAttributes = {
     [K in `data-${string}`]?: string;
 };
+/**
+ * HTML pass-through props accepted on the root element of every component: the full native
+ * attribute set for that element, plus `data-*`.
+ *
+ * Pass the root's element type for correctly-typed event handlers (`HtmlProps<HTMLDivElement>`);
+ * the default is the loose `HTMLElement`. Where the root is not a plain container, extend the
+ * matching React type instead and add `DataProps` for the `data-*` half — `Button` does this
+ * with `React.ButtonHTMLAttributes<HTMLButtonElement>`.
+ *
+ * A component prop that collides with a native one of the same name must `Omit` the native one.
+ */
+export type HtmlProps<E extends HTMLElement = HTMLElement> = React.HTMLAttributes<E> & DataAttributes;
+/** The `data-*` half of {@link HtmlProps}, for components that source attributes elsewhere. */
+export type DataProps = DataAttributes;
+export {};

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

@@ -1,4 +1,4 @@
 import { CSSProperties } from 'react';
 export type SlotClassNames<Keys extends string> = Partial<Record<Keys, string>>;
 export type SlotStyles<Keys extends string> = Partial<Record<Keys, CSSProperties>>;
-export type { HtmlProps } from './baseProps.types';
+export type { HtmlProps, DataProps } from './baseProps.types';

package/docs/Button.md

@@ -29,6 +29,18 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 // Small
 <Button size={ButtonSize.Small}>Cancel</Button>
 
+// Icon-only — padding-free and square; give it the box size you want
+<Button size={ButtonSize.Icon} icon={faPlus} aria-label="Add" style={{ width: 44, height: 44 }} />
+
+// Press-and-hold: act on press rather than release
+<Button
+  icon={faPlus}
+  aria-label="Increase"
+  onPointerDown={startRepeat}
+  onPointerUp={stopRepeat}
+  onPointerCancel={stopRepeat}
+/>
+
 // Submit button in a form
 <Button type={ButtonType.Submit} styleType={ButtonStyleType.Primary}>Submit</Button>
 ```
@@ -36,7 +48,7 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 **Enums:**
 
 - `ButtonStyleType`: `Primary` | `Default` | `Delete`
-- `ButtonSize`: `Default` | `Small` | `Medium` | `Large`
+- `ButtonSize`: `Default` | `Small` | `Medium` | `Large` | `Icon`
 - `ButtonType`: `Button` | `Reset` | `Submit`
 
 **Key props:**
@@ -44,13 +56,19 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 | Prop | Type | Description |
 |------|------|-------------|
 | `styleType` | `ButtonStyleType` | Visual variant |
-| `size` | `ButtonSize` | Size variant |
+| `size` | `ButtonSize` | Size variant. `Icon` strips all padding, inherits the surrounding text size, and centres a lone icon — set the width/height yourself |
 | `type` | `ButtonType` | HTML button type |
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element, shown before label |
 | `isLoading` | `boolean` | Replaces content with a spinner |
 | `disabled` | `boolean` | |
 | `onClick` | `(e: MouseEvent) => void \| Promise<void>` | |
 
+`ButtonProps` extends `React.ButtonHTMLAttributes<HTMLButtonElement>`, so every native `<button>`
+attribute is accepted and forwarded — pointer handlers (`onPointerDown` and friends, for
+press-and-hold controls that act on press rather than release), `onContextMenu`, `tabIndex`,
+`name`, `value`, `form`, `autoFocus`, and the rest. `type` and `onClick` are narrowed: `type`
+takes the `ButtonType` enum, and `onClick` may return a promise.
+
 **Theming (default style):** the `Default` style is transparent text-coloured by default. Override it theme-wide (or per button via `style`) without touching `Primary`/`Delete`:
 
 - `--button-default-background` — fill (default transparent)
@@ -73,3 +91,6 @@ const theme: Theme = {
 ```
 
 **Slots:** `background` `content` `loadingContainer` `label`
+
+**Sizing in a flex row:** a Button never shrinks below its own content (`min-width: min-content`),
+so an icon is never cut off by a flexible sibling. A multi-word label still wraps above that floor.

package/docs/Carousel.md

@@ -37,6 +37,19 @@ const [index, setIndex] = useState(0);
   <div>Slide 2</div>
 </Carousel>
 
+// Grow and shrink with the active slide instead of sizing every slide to the tallest one
+<Carousel adaptiveHeight>
+  <div>Short slide</div>
+  <div>A much taller slide with a lot more content in it</div>
+</Carousel>
+
+// Only render the visible slides (plus the immediate neighbours) — for heavy slide content
+<Carousel lazyRender>
+  <HeavyChart />
+  <HeavyChart />
+  <HeavyChart />
+</Carousel>
+
 // No swipe/drag, arrows only
 <Carousel swipeable={false} showDots={false}>
   <div>Slide 1</div>
@@ -63,6 +76,12 @@ Pass slides as direct children (an array or a set of sibling elements), not thro
 | `showArrows` | `boolean` | Show the prev/next buttons (default `true`); hidden automatically with one slide or none |
 | `showDots` | `boolean` | Show the position dots (default `true`); hidden automatically with one slide or none |
 | `swipeable` | `boolean` | Allow dragging/swiping the track (default `true`) |
+| `adaptiveHeight` | `boolean` | Size the carousel to the active slide's height, animated over the same duration as the slide transition, instead of to the tallest slide (default `false`) |
+| `lazyRender` | `boolean` | Only mount the current slide and its immediate neighbours; off-screen slides render as empty placeholders and unmount once they move out of range (default `false`) |
+
+**Height:** by default the track stretches every slide to the height of the tallest one, so the carousel keeps one fixed height. Set `adaptiveHeight` to have it follow the active slide's own height instead; the height animates over the same 0.4s as the slide transition, so a taller incoming slide is clipped until the two finish together. During a drag the height only follows once the new slide commits on release, so a drag between slides of very different heights clips for as long as the drag lasts.
+
+**Lazy rendering:** `lazyRender` unmounts a slide's content once it is more than one position away from the current one. Slides a multi-step jump travels past stay mounted for the duration of the transition, and pruning happens when the track's transform transition ends, so a consumer that disables the track transition in CSS keeps slides mounted rather than unmounting them. Unmounted slides lose their internal state (scroll position, uncontrolled inputs, media playback), which is why the flag is opt-in. Combine it with `adaptiveHeight` when slides differ in height, so the carousel sizes to the active slide rather than to whichever slides happen to be mounted.
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Carousel: { autoPlay: true } }}`. See [ConfigProvider.md](ConfigProvider.md).
 

package/docs/Chip.md

@@ -56,6 +56,7 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 | `text` | `string` | Chip label |
 | `styleType` | `ChipStyleType` | Colour variant (default `Default`) |
 | `thumbnail` | `string` | Avatar image URL |
+| `removeLabel` | `string` | Accessible name for the remove button. Default: `'Remove'` |
 | `showRemoveIcon` | `boolean` | Show × icon |
 | `onRemove` | `() => void` | Remove button handler |
 | `onClick` | `() => void` | Makes chip clickable |