prime-ui-kit 0.9.3 → 0.11.0

package/dist/components/modal/ModalDialog.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { ControlSize } from "../../internal/states";
+import { type DialogDiscardLabels } from "./DialogParts";
+export type ModalLabels = DialogDiscardLabels & {
+    /** `aria-label` of the header close button. */
+    close: string;
+};
+export type ModalRootProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Escape closes the dialog. Default `true`. */
+    closeOnEscape?: boolean;
+    /**
+     * A click on the scrim (or, on a narrow viewport, a swipe down) closes the dialog. Default
+     * `true`; turn it off for destructive confirms.
+     */
+    closeOnOutsideClick?: boolean;
+    /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
+    confirmOnEnter?: boolean;
+    /** Replaces the default Enter confirm (the `Modal.Confirm` click). */
+    onEnterConfirm?: (event: KeyboardEvent) => void;
+    labels?: Partial<ModalLabels>;
+    children?: React.ReactNode;
+};
+export declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalRoot {
+    var displayName: string;
+}
+export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog width: `xs` 360 · `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the
+     * dialog is always a full-width bottom sheet with a grab handle.
+     */
+    size?: ControlSize;
+    /** Portal target. Default `document.body`. */
+    container?: HTMLElement | null;
+    /** Class on the full-screen scrim. */
+    overlayClassName?: string;
+    /** The `role="dialog"` panel. */
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare function ModalContent({ container, children, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace ModalContent {
+    var displayName: string;
+}

package/dist/components/native-select/NativeSelect.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
-import { type FieldFrameProps } from "@/internal/FieldFrame";
-import type { ControlSize } from "@/internal/states";
+import { type FieldFrameProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
 export type NativeSelectLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
@@ -22,7 +22,7 @@ export type NativeSelectProps = FieldFrameProps & Omit<React.SelectHTMLAttribute
  * The system `<select>` in the field look: the OS picker opens on touch devices. Options are
  * plain `<option>` / `<optgroup>` elements.
  */
-export declare function NativeSelect({ size, label, required, optional, hint, error, invalid, focusRing, disabled, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function NativeSelect({ size, label, required, optional, hint, error, invalid, focusRing, disabled: disabledProp, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NativeSelect {
     var displayName: string;
 }

package/dist/components/notification/Notification.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ControlSize, type Tone } from "@/internal/states";
+import { type ControlSize, type Tone } from "../../internal/states";
 export type NotificationPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type NotificationLabels = {
     /** `aria-label` of the close button. */
@@ -45,6 +45,12 @@ export type NotificationOptions = NotificationContent & {
     persistent?: boolean;
     /** Shows the close button. Default `true`. */
     closable?: boolean;
+    /**
+     * The toast left: its timer ran out, the close button, a swipe, `dismiss()`, or a newer toast
+     * pushed it out of a full stack. Called once. The place to commit an action the toast offered to
+     * undo («Удалено» with «Отменить»).
+     */
+    onDismiss?: () => void;
 };
 export type NotificationRecord = NotificationOptions & {
     id: string;

package/dist/components/page-content/PageContent.d.ts

@@ -3,9 +3,14 @@ import * as React from "react";
 export type PageContentMaxWidth = "full" | "readable" | "wide";
 export type PageContentRootProps = React.HTMLAttributes<HTMLDivElement> & {
     maxWidth?: PageContentMaxWidth;
+    /**
+     * The page takes the height of the panel (`AppShell.Root fillViewport`): the body gets what the
+     * header leaves, for a full-height table, board, chat or `PageContent.Split`.
+     */
+    fill?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function PageContentRoot({ maxWidth, className, ...rest }: PageContentRootProps): import("react/jsx-runtime").JSX.Element;
+declare function PageContentRoot({ maxWidth, fill, className, ...rest }: PageContentRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageContentRoot {
     var displayName: string;
 }
@@ -53,6 +58,54 @@ declare function PageContentBody({ className, ...rest }: PageContentBodyProps):
 declare namespace PageContentBody {
     var displayName: string;
 }
+export type PageContentLabels = {
+    /** Name of `PageContent.BackButton` (back from the detail to the list on a narrow split). */
+    back: string;
+};
+export type PageContentSplitProps = DivProps & {
+    /**
+     * The detail is open (a record is chosen). On a narrow split it takes the place of the list;
+     * on a wide one both panes stay. Controlled.
+     */
+    open?: boolean;
+    /** Initial open state, uncontrolled. */
+    defaultOpen?: boolean;
+    /** `PageContent.BackButton` closes the detail: `false`. */
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<PageContentLabels>;
+};
+/**
+ * List + detail (mail, a messenger, a ticket queue): two panes side by side from 48rem of its own
+ * width, one at a time below it — the list, or the open detail with a back button. Takes the free
+ * height of a filling page; each pane gives its last child the free height.
+ */
+declare function PageContentSplit({ open: openProp, defaultOpen, onOpenChange, labels, className, children, ...rest }: PageContentSplitProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentSplit {
+    var displayName: string;
+}
+export type PageContentListProps = DivProps;
+/** The list pane: a fixed column on a wide split, the whole split while the detail is closed. */
+declare function PageContentList({ className, ref, onFocus, onAnimationEnd, ...rest }: PageContentListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentList {
+    var displayName: string;
+}
+export type PageContentDetailProps = DivProps;
+/** The detail pane: the rest of a wide split; on a narrow one it replaces the list while open. */
+declare function PageContentDetail({ className, ref, onAnimationEnd, ...rest }: PageContentDetailProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentDetail {
+    var displayName: string;
+}
+export type PageContentBackButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Back from the detail to the list: a soft neutral icon Button named by `labels.back`, shown only
+ * while the split shows one pane. Put it at the start of the detail's header.
+ */
+declare function PageContentBackButton({ className, onClick, ...rest }: PageContentBackButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentBackButton {
+    var displayName: string;
+}
 export declare const PageContent: {
     Root: typeof PageContentRoot;
     Section: typeof PageContentSection;
@@ -61,5 +114,9 @@ export declare const PageContent: {
     Title: typeof PageContentTitle;
     Description: typeof PageContentDescription;
     Body: typeof PageContentBody;
+    Split: typeof PageContentSplit;
+    List: typeof PageContentList;
+    Detail: typeof PageContentDetail;
+    BackButton: typeof PageContentBackButton;
 };
 export {};

package/dist/components/page-toolbar/PageToolbar.d.ts

@@ -4,28 +4,29 @@ type DivProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 export type PageToolbarRootProps = DivProps;
 /**
- * The panel at the top of a page: sections, tools, view options and the primary action. It lays
- * itself out from its own width — one row when wide, exactly two rows when narrow — so the slots
- * keep fixed places at any width. Parts may be left out; the JSX order is the Tab order.
+ * The panel at the top of a page: search and filter, sections, view options and the primary
+ * action, with the active filters right under the search. It lays itself out from its own width —
+ * one row when wide, stacked rows when narrow — so the slots keep fixed places at any width. Parts
+ * may be left out; the JSX order is the Tab order.
  */
 declare function PageToolbarRoot({ className, children, ref, ...rest }: PageToolbarRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageToolbarRoot {
     var displayName: string;
 }
 export type PageToolbarSectionsProps = DivProps;
-/** Sections of the page — a `fullWidth` SegmentedControl; top row, stretches when narrow. */
+/** Sections of the page — a `fullWidth` SegmentedControl; after the Tools when wide, a full row under the chips when narrow. */
 declare function PageToolbarSections({ className, ...rest }: PageToolbarSectionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageToolbarSections {
     var displayName: string;
 }
 export type PageToolbarToolsProps = DivProps;
-/** Filter button and search (`SmartFilter.Toolbar`): takes the free space of its row. */
+/** Search and filter button (`SmartFilter.Toolbar`): the first slot and the stretchy one, the Chips sit right under it. */
 declare function PageToolbarTools({ className, ...rest }: PageToolbarToolsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageToolbarTools {
     var displayName: string;
 }
 export type PageToolbarViewProps = DivProps;
-/** How the data is shown: period, table / cards, columns. Sized by content; alone in a row, its controls share the row. */
+/** How the data is shown: period, table / cards, columns. Sized by content when wide; its own full row when narrow, its controls sharing it. */
 declare function PageToolbarView({ className, ...rest }: PageToolbarViewProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageToolbarView {
     var displayName: string;
@@ -37,7 +38,7 @@ declare namespace PageToolbarActions {
     var displayName: string;
 }
 export type PageToolbarChipsProps = DivProps;
-/** Active filters (`SmartFilter.Chips`) in their own row under the panel; the row disappears when empty. */
+/** Active filters (`SmartFilter.Chips`) in their own row right under the search; the row disappears when empty. */
 declare function PageToolbarChips({ className, ...rest }: PageToolbarChipsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageToolbarChips {
     var displayName: string;

package/dist/components/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 /** System strings; `{page}` is replaced. */
 export type PaginationLabels = {
     /** `aria-label` of the `<nav>`. */

package/dist/components/popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PositionAlign, PositionSide } from "@/hooks/usePosition";
-import type { ControlSize } from "@/internal/states";
+import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
+import type { ControlSize } from "../../internal/states";
 export type PopoverRootProps = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -33,7 +33,8 @@ export type PopoverAnchorProps = {
  * An anchor that is not a trigger: positions the panel against an element (a whole toolbar) and keeps
  * presses on it from closing the panel, but adds no click handler and no ARIA. Open state is driven
  * by `Popover.Root open`, and focus stays where it is when it opens (a search field in the anchor
- * keeps typing). Use it instead of `Popover.Trigger`, not with it.
+ * keeps typing) unless `Popover.Content initialFocus` asks for it. Use it instead of
+ * `Popover.Trigger`, not with it.
  */
 declare function PopoverAnchor({ children }: PopoverAnchorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverAnchor {
@@ -60,6 +61,13 @@ export type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "ro
     matchTriggerWidth?: boolean;
     /** Tab cycles inside the panel (forms). Without it Tab past the edges leaves to the trigger and closes. */
     trapFocus?: boolean;
+    /**
+     * Focus moves into the panel when it opens (`[data-autofocus]`, else the first tab stop, else the
+     * panel). Default: on with `Popover.Trigger`, off with `Popover.Anchor` (a field driving the
+     * panel keeps typing). Turn it on for an anchored panel opened by a command — a Dropdown item
+     * («Переименовать…») — so focus lands in the panel, not back on the menu trigger.
+     */
+    initialFocus?: boolean;
     /**
      * No inner padding and no gap: rows reach the panel edges (lists with full-width dividers, filter
      * panels). The content lays out its own spacing and uses inset focus rings.
@@ -67,7 +75,7 @@ export type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "ro
     flush?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function PopoverContent({ side, align, size, matchTriggerWidth, trapFocus, flush, className, children, ...rest }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ side, align, size, matchTriggerWidth, trapFocus, initialFocus, flush, className, children, ...rest }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverContent {
     var displayName: string;
 }

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type ProgressModeProps, type ProgressSegmentsLabels } from "@/internal/progressSegments";
-import type { ControlSize } from "@/internal/states";
+import { type ProgressModeProps, type ProgressScale, type ProgressSegmentsLabels } from "../../internal/progressSegments";
+import type { ControlSize } from "../../internal/states";
 export type ProgressBarLabels = ProgressSegmentsLabels;
 export type ProgressBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /**
@@ -10,11 +10,19 @@ export type ProgressBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "child
     label?: string;
     /** Default `m`. */
     size?: ControlSize;
-    /** Shows the rounded filled percentage at the end of the label row. */
+    /** Shows the rounded filled percentage at the end of the label row (`bar` layout). */
     showValue?: boolean;
+    /**
+     * The data is on its way: a Skeleton in the bar's geometry (and of the legend or rows), which
+     * cross-fades into the data. The label stays; the root is `aria-busy`.
+     */
+    loading?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 } & ProgressBarModeProps;
-/** Value mode may draw its scale as steps; segments already are parts. */
+type SegmentsModeProps = Extract<ProgressModeProps, {
+    segments: unknown;
+}>;
+/** Value mode may draw its scale as steps; segments draw one bar or one bar per row. */
 type ProgressBarModeProps = (Extract<ProgressModeProps, {
     value: number;
 }> & {
@@ -23,14 +31,26 @@ type ProgressBarModeProps = (Extract<ProgressModeProps, {
      * (password strength, a step of onboarding). `value` rounds to a whole cell.
      */
     steps?: boolean;
-}) | (Extract<ProgressModeProps, {
-    segments: unknown;
-}> & {
+    layout?: never;
+    scale?: never;
+}) | (SegmentsModeProps & {
     steps?: never;
-});
+} & ({
+    /** `bar`: every part in one bar. Default. */
+    layout?: "bar";
+    scale?: never;
+} | {
+    /** `rows`: a ranking — one row per part, «label · value · share» over its own bar. */
+    layout: "rows";
+    /** What a full bar and 100% mean. Default `sum`. */
+    scale?: ProgressScale;
+    segmentGap?: never;
+    legend?: never;
+}));
 /**
- * A linear progress line: a single `value` (native `<progress>` for assistive tech) or
- * `segments` — parts of a whole in one bar (`role="group"` named by the distribution).
+ * A linear progress line: a single `value` (native `<progress>` for assistive tech), `segments` —
+ * parts of a whole in one bar (`role="group"` named by the distribution) with an optional legend,
+ * or `layout="rows"` — a ranking, one labelled bar per part (`<ol>`).
  */
 export declare function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/progress-circle/ProgressCircle.d.ts

@@ -1,19 +1,54 @@
 import * as React from "react";
-import { type ProgressModeProps, type ProgressSegmentsLabels } from "@/internal/progressSegments";
-import type { ControlSize } from "@/internal/states";
+import { type ProgressModeProps, type ProgressSegment, type ProgressSegmentsLabels } from "../../internal/progressSegments";
+import type { ControlSize, Tone } from "../../internal/states";
 export type ProgressCircleLabels = ProgressSegmentsLabels;
+type ValueModeProps = {
+    /**
+     * Current value, clamped to `0…max`; `null` — under way, the share unknown: a quarter arc that
+     * always turns, no `aria-valuenow`.
+     */
+    value: number | null;
+    /** Top of the scale. Default `100`. */
+    max?: number;
+    /**
+     * Fill color. Default `accent`. `inherit` — the arc in the host's text color over a 32% track of
+     * it, for a ring on a colored host or over media.
+     */
+    tone?: Tone | "inherit";
+    /** The ring turns at any share (a sync whose share grows). Default `false`; `null` always turns. */
+    spin?: boolean;
+    segments?: never;
+    segmentGap?: never;
+    labels?: never;
+    legend?: never;
+    formatValue?: never;
+};
+type SegmentsModeProps = Extract<ProgressModeProps, {
+    segments: ProgressSegment[];
+}> & {
+    spin?: never;
+};
 export type ProgressCircleProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Default `m`. */
     size?: ControlSize;
     /**
-     * Centered content (number, percent, icon). Not rendered on `xs` / `s`; a string or number
-     * child stays available as `aria-valuetext`.
+     * Centered content: a number, a percent or an `<Icon>`. A changed icon (another `name`) cross-
+     * fades into the new one. Not rendered on `xs`; text only from `m`. A string or number child
+     * stays available as `aria-valuetext`.
      */
     children?: React.ReactNode;
+    /**
+     * The data is on its way: a Skeleton ring of the same size (and legend rows), which cross-fades
+     * into the data. The root is `aria-busy`.
+     */
+    loading?: boolean;
     ref?: React.Ref<HTMLDivElement>;
-} & ProgressModeProps;
+} & (ValueModeProps | SegmentsModeProps);
 /**
- * A progress ring: a single `value` (`role="progressbar"`) or `segments` — parts of a whole
- * clockwise from the top (`role="group"` described by the distribution).
+ * A progress ring drawn from the kit ring (`internal/ring`, `data` weight): a single `value`
+ * (`role="progressbar"`; `null` — under way, share unknown) or `segments` — parts of a whole
+ * clockwise from the top (`role="group"` described by the distribution), with an optional legend
+ * beside the ring.
  */
 export declare function ProgressCircle(props: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/radio/Radio.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type ChoiceLabelProps } from "@/internal/ChoiceField";
-import { type FieldRootDomProps } from "@/internal/FieldFrame";
-import type { ControlSize } from "@/internal/states";
+import { type ChoiceLabelProps } from "../../internal/ChoiceField";
+import { type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
 export type RadioGroupLabels = {
     /** Muted marker after the group label when `optional`. */
     optional: string;
@@ -39,7 +39,7 @@ export type RadioGroupProps = Omit<FieldRootDomProps, "dir"> & {
  * The field: label · radiogroup · hint or error. `className`, `ref` and the rest go to the frame,
  * `id` and the `aria-label*` / `aria-describedby` names to the radiogroup.
  */
-declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled, label, required, optional, hint, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled: disabledProp, label, required, optional, hint, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }

package/dist/components/scroll-container/ScrollContainer.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
+import { type ScrollEdgeHandler } from "./useScrollEdges";
 export type ScrollContainerAxis = "vertical" | "horizontal" | "both";
+/**
+ * How an edge that hides content looks. `fade` — the content dissolves (a mask, any background);
+ * `shadow` — a soft shadow falls over it on the region's own fill (`--prime-color-layer-current`),
+ * for a region that is itself a surface; `none` — the edge is plain.
+ */
+export type ScrollContainerEdges = "fade" | "shadow" | "none";
 export type ScrollContainerProps = React.HTMLAttributes<HTMLElement> & {
     /** Root element. Default `div`; `AppShell.Main` renders `main`. */
     as?: "div" | "main" | "aside" | "section" | "nav" | "article";
@@ -7,14 +14,27 @@ export type ScrollContainerProps = React.HTMLAttributes<HTMLElement> & {
     axis?: ScrollContainerAxis;
     /** `overscroll-behavior`. Default `contain`: nested panels do not chain scroll into the page. */
     overscrollBehavior?: "auto" | "contain" | "none";
+    /** The edges where more content is hidden, along every scroll axis. Default `fade`. */
+    edges?: ScrollContainerEdges;
+    /** `thin` — the kit's quiet scrollbar (default); `hidden` — no scrollbar (keep `edges`). */
+    scrollbar?: "thin" | "hidden";
+    /** The person cannot scroll the region (wheel, touch, keys, autoscroll); it keeps its place. */
+    lock?: boolean;
+    /** Scrolling comes to rest on the start of a child (proximity snapping): strips of tiles. */
+    snap?: boolean;
     /**
-     * Fade the edges where more content is hidden (`data-overflow-start` / `data-overflow-end`):
-     * along the horizontal axis for `axis="horizontal"`, along the vertical one otherwise.
+     * `end` — a chat or a log: the region starts at the end and stays there while content arrives,
+     * as long as the person is at the end; scrolled away, what they look at stays put. Default `start`.
      */
-    fade?: boolean;
-    /** `thin` — the kit's quiet scrollbar (default); `hidden` — no scrollbar (pair it with `fade`). */
-    scrollbar?: "thin" | "hidden";
+    anchor?: "start" | "end";
+    /**
+     * The scroll position came near the start (older messages). A returned promise is pending until
+     * it settles: no new call meanwhile, `aria-busy`. Content added above keeps the view in place.
+     */
+    onReachStart?: ScrollEdgeHandler;
+    /** The scroll position came near the end (the next page of a feed); a promise works the same. */
+    onReachEnd?: ScrollEdgeHandler;
     ref?: React.Ref<HTMLElement>;
 };
-/** Scroll region with the kit's thin scrollbars; shrinks inside flex/grid parents. */
-export declare function ScrollContainer({ as: Component, axis, overscrollBehavior, fade, scrollbar, className, ref, ...rest }: ScrollContainerProps): import("react/jsx-runtime").JSX.Element;
+/** Scroll region with the kit's thin scrollbars and soft hidden edges; shrinks inside flex/grid. */
+export declare function ScrollContainer({ as: Component, axis, overscrollBehavior, edges, scrollbar, lock, snap, anchor, onReachStart, onReachEnd, className, ref, ...rest }: ScrollContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-container/useFitFlag.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+type Axis = "vertical" | "horizontal" | "both";
+/** `enabled: false` — the region stays a scroller whatever its content (a chat, a growing feed). */
+export declare function useFitFlag(ref: React.RefObject<HTMLElement | null>, axis: Axis, enabled?: boolean): void;
+export {};

package/dist/components/scroll-container/useScrollEdges.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type ScrollEdgeHandler = () => void | Promise<void>;
+/**
+ * What a ScrollContainer lets its content ask for (`useScrollRegion`): a chat list asks to go to
+ * the end after its own message, to bring a message into view, and follows whether the reader is
+ * at the end. The region scrolls only itself.
+ */
+export type ScrollRegion = {
+    /** The reader is at the end (`anchor="end"`, within 4 px). */
+    atEnd: () => boolean;
+    /** Follows `atEnd`; returns the unsubscribe. */
+    subscribe: (listener: () => void) => () => void;
+    /** Scrolls to the end; `smooth` glides there (instant under reduced motion). */
+    scrollToEnd: (behavior?: ScrollBehavior) => void;
+    /** Scrolls the region (only) so `element` stands in its middle. */
+    scrollToElement: (element: Element, behavior?: ScrollBehavior) => void;
+    /**
+     * Content is about to change size in place (a message opens its transcript or its reactions
+     * row): for `ms`, what the reader sees stays still — even at the end of `anchor="end"`, so the
+     * change grows past the edge instead of pushing everything up. Call it right before the change.
+     */
+    hold: (ms: number) => void;
+};
+export declare const ScrollRegionContext: React.Context<ScrollRegion | null>;
+/** The ScrollContainer around this component, or `null` outside one. */
+export declare function useScrollRegion(): ScrollRegion | null;
+type Options = {
+    anchor: "start" | "end";
+    horizontal: boolean;
+    onReachStart?: ScrollEdgeHandler;
+    onReachEnd?: ScrollEdgeHandler;
+};
+/**
+ * Scroll anchoring and edge events of a ScrollContainer.
+ *
+ * - `anchor="end"` (a chat, a log): starts at the end and stays there while content arrives or
+ *   grows, as long as the person is at the end — one scroll write per change, before paint. Once
+ *   they scroll away, the visible content stays put.
+ * - Visible position: content added, removed or resized above the view (older messages
+ *   prepended, rows a virtual list renders or measures) never moves what the person is looking
+ *   at. The kit corrects by the first element in view, in one pass before paint, and turns the
+ *   browser's own anchoring off (`overflow-anchor: none`), so every browser behaves the same and
+ *   no change is corrected twice.
+ * - `onReachStart` / `onReachEnd`: fire once when the scroll position comes within `EDGE_PX` of an
+ *   edge, again only after it leaves that zone or the content grows. A returned promise is pending
+ *   until it settles: no new call meanwhile, `busy` is true.
+ */
+export declare function useScrollEdges(ref: React.RefObject<HTMLElement | null>, { anchor, horizontal, onReachStart, onReachEnd }: Options): {
+    busy: boolean;
+    keepPosition: boolean;
+    region: ScrollRegion;
+};
+export {};

package/dist/components/scroll-container/useWheelToInline.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * A vertical wheel over a strip that scrolls only sideways (`axis="horizontal"`) scrolls the strip:
+ * a mouse has no other way to reach what is hidden to the side. The browser's own sideways wheel
+ * (a trackpad swipe, Shift + wheel) stays native, and so does a page scroll that passes over the
+ * strip (a wheel gesture that began outside it keeps scrolling the page) or a strip already at the
+ * edge in that direction (the wheel chains to the page). The steps glide to an accumulated target
+ * (instant under reduced motion), so fast wheeling loses no distance.
+ */
+export declare function useWheelToInline(ref: React.RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -1,19 +1,36 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor } from "@/internal/states";
-export type SegmentedControlRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize, PaletteColor } from "../../internal/states";
+export type SegmentedControlLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type SegmentedControlRootProps = Omit<FieldRootDomProps, "dir"> & Omit<FieldFrameProps, "focusRing"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     size?: ControlSize;
     /**
-     * Stretch to the container width. Single-line segments tend to equal widths but never get narrower
-     * than their label; when they do not fit, the row scrolls.
+     * Stretch to the container width. Single-line segments tend to equal widths but never get
+     * narrower than their label; when they do not fit, the row scrolls.
      */
     fullWidth?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
+    /** Invalid state: a danger ring on the track and `aria-invalid` on the radiogroup. */
+    invalid?: boolean;
+    /** Always render the support row so an appearing error does not shift the layout. */
+    reserveSupportRow?: boolean;
+    /** Id of the `role="radiogroup"` element; generated when omitted. */
+    id?: string;
+    labels?: Partial<SegmentedControlLabels>;
+    /** `SegmentedControl.Item` segments. */
+    children?: React.ReactNode;
 };
-declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled, size: sizeProp, fullWidth, children, className, onKeyDown, ...rest }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The field: label · radiogroup track · hint or error. `className`, `ref` and the rest go to the
+ * frame; `id`, `onKeyDown` and the `aria-label*` / `aria-describedby` names to the radiogroup.
+ */
+declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled: disabledProp, size: sizeProp, fullWidth, label, required, optional, hint, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlRoot {
     var displayName: string;
 }