@nxgt/material 3.88.1 → 3.90.0

package/dist/lib/components/ui/fields/number-field/number-control.d.ts

@@ -1,8 +1,8 @@
 import { NumberFieldProps } from './number-field.types.js';
 /**
  * A NumberField's row: the "Decrease" button, the text input, the "Increase"
- * button and the suffix. The field's label, its help and its ids are the
- * caller's.
+ * button; a suffix sits inside the input's box, as its end adornment. The
+ * field's label, its help and its ids are the caller's.
  */
 export declare function NumberControl({ error, disabled, value, defaultValue, onChange, onBlur, min, max, step, hideSteppers, suffix, stepperName, ...input }: Omit<NumberFieldProps, 'label' | 'helperText' | 'className'> & {
     /** The field's plain-text name, appended to the steppers' own ("Increase Quantity"). */

package/dist/lib/components/ui/fields/switch/partials/switch-row.d.ts

@@ -6,9 +6,11 @@ export type SwitchRowProps = {
     text: ReactNode;
     isChecked: boolean;
     error?: boolean;
+    /** `plain` draws the row without the field box: no border, no tint. */
+    variant?: 'box' | 'plain';
     className?: string;
     /** The switch itself. */
     children: ReactNode;
 };
-/** The bordered row: its text, tinted while checked, then the switch. */
-export declare function SwitchRow({ id, rowTextId, text, isChecked, error, className, children, }: SwitchRowProps): import("react").JSX.Element;
+/** The bordered row (or, `plain`, the unboxed one): its text, tinted while checked, then the switch. */
+export declare function SwitchRow({ id, rowTextId, text, isChecked, error, variant, className, children, }: SwitchRowProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/switch/switch.d.ts

@@ -5,8 +5,14 @@ export type SwitchProps = {
     error?: boolean;
     helperText?: ReactNode;
     placeholder?: ReactNode;
+    /**
+     * How a labelled switch is drawn: `box` (default) is the bordered, tinted
+     * row of an input; `plain` keeps the label beside the switch with no
+     * border and no tint. Without a `label` or `placeholder` it changes nothing.
+     */
+    variant?: 'box' | 'plain';
 } & SwitchControlProps;
-export declare function Switch({ error, helperText, label, placeholder, className, ...props }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ error, helperText, label, placeholder, variant, className, ...props }: SwitchProps): import("react").JSX.Element;
 /**
  * The labelled `Switch` under `@nxgt/material-vue`'s name, so code reads the
  * same in both libraries. Same component, same props. The names may align

package/dist/lib/components/ui/layout/app-shell/activity-content-aside-parts.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { ActivityContentAsideFrom, ActivityContentAsideSide } from './activity-content-aside.types.js';
+import { phoneClasses } from './activity-content-aside-toggle.js';
+/**
+ * Every breakpoint's classes are written out: Tailwind reads whole class
+ * names from the source. The layout is CSS only, so the server's HTML and a
+ * phone's first paint are already right.
+ */
+export declare const FROM: {
+    readonly lg: {
+        readonly grid: "lg:grid-cols-[var(--ac-main)_var(--ac-aside)]";
+        readonly gridStart: "lg:grid-cols-[var(--ac-aside)_var(--ac-main)]";
+        readonly aside: "lg:self-start lg:order-last";
+        readonly asideStart: "lg:self-start lg:order-first";
+        readonly sticky: "lg:sticky lg:top-(--ac-top) lg:max-h-(--ac-max) lg:overflow-y-auto";
+    };
+    readonly xl: {
+        readonly grid: "xl:grid-cols-[var(--ac-main)_var(--ac-aside)]";
+        readonly gridStart: "xl:grid-cols-[var(--ac-aside)_var(--ac-main)]";
+        readonly aside: "xl:self-start xl:order-last";
+        readonly asideStart: "xl:self-start xl:order-first";
+        readonly sticky: "xl:sticky xl:top-(--ac-top) xl:max-h-(--ac-max) xl:overflow-y-auto";
+    };
+    readonly '2xl': {
+        readonly grid: "2xl:grid-cols-[var(--ac-main)_var(--ac-aside)]";
+        readonly gridStart: "2xl:grid-cols-[var(--ac-aside)_var(--ac-main)]";
+        readonly aside: "2xl:self-start 2xl:order-last";
+        readonly asideStart: "2xl:self-start 2xl:order-first";
+        readonly sticky: "2xl:sticky 2xl:top-(--ac-top) 2xl:max-h-(--ac-max) 2xl:overflow-y-auto";
+    };
+};
+export declare const WIDTH: {
+    readonly full: "[--ac-main:minmax(0,1fr)]";
+    readonly form: "[--ac-main:minmax(0,48rem)]";
+    readonly reading: "[--ac-main:minmax(0,72ch)]";
+};
+export declare const ASIDE_WIDTH: {
+    readonly sm: "[--ac-aside:16rem]";
+    readonly md: "[--ac-aside:var(--nxgt-aside-width,20rem)]";
+    readonly lg: "[--ac-aside:24rem]";
+};
+/** Keyboard users reach a panel that scrolls inside itself. */
+export declare function useFocusableWhenScrolling(sticky: boolean): {
+    ref: import('react').RefObject<HTMLElement | null>;
+    tabIndex: number | undefined;
+};
+export type AsidePanelProps = {
+    sticky: boolean;
+    side: ActivityContentAsideSide;
+    from: ActivityContentAsideFrom;
+    hiddenClasses: ReturnType<typeof phoneClasses> | false;
+    label?: string;
+    labelledBy?: string;
+    className?: string;
+    children?: ReactNode;
+};
+/** The side panel: a `complementary` landmark, sticky and focusable when it scrolls. */
+export declare function AsidePanel({ sticky, side, from, hiddenClasses, label, labelledBy, className, children, }: AsidePanelProps): import("react").JSX.Element;
+/** The main column; a size container when a panel sits beside it. */
+export declare function AsideMain({ container, hiddenClasses, children, }: {
+    container: boolean;
+    hiddenClasses: ReturnType<typeof phoneClasses> | false;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Spans every track: as wide as the column and the panel together, first. */
+export declare function NoticeSlot({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/activity-content-aside-toggle.d.ts

@@ -0,0 +1,22 @@
+import { ActivityContentAsideFrom } from './activity-content-aside.types.js';
+/** Which pane a phone shows when the panel is behind a toggle. */
+export type AsideView = 'main' | 'aside';
+/**
+ * The classes that keep one pane out of a phone's way: hidden (not unmounted,
+ * so a form keeps what was typed) below the breakpoint, back from it.
+ */
+export declare function phoneClasses(from: ActivityContentAsideFrom, pane: AsideView, view: AsideView): string[] | undefined;
+export type AsidePhoneToggleProps = {
+    from: ActivityContentAsideFrom;
+    view: AsideView;
+    onViewChange: (view: AsideView) => void;
+    /** The button that shows the panel. */
+    label?: string;
+    /** The button that shows the content. */
+    mainLabel?: string;
+};
+/**
+ * Two buttons above the content that swap the content and the panel on a
+ * phone. Gone from the breakpoint, where both sit side by side.
+ */
+export declare function AsidePhoneToggle({ from, view, onViewChange, label, mainLabel, }: AsidePhoneToggleProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/activity-content-aside.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ActivityContentAsideFrom, ActivityContentAsideSide, ActivityContentAsideStack, ActivityContentAsideWidth, ActivityContentWidth } from './activity-content-aside.types.js';
+import { ActivityContentAsideFrom, ActivityContentAsidePhone, ActivityContentAsideSide, ActivityContentAsideStack, ActivityContentAsideWidth, ActivityContentWidth } from './activity-content-aside.types.js';
 export type ActivityContentBodyProps = {
     width: ActivityContentWidth;
     aside?: ReactNode;
@@ -11,6 +11,9 @@ export type ActivityContentBodyProps = {
     asideSticky?: boolean;
     asideStack?: ActivityContentAsideStack;
     asideClassName?: string;
+    asidePhone?: ActivityContentAsidePhone;
+    asidePreviewLabel?: string;
+    asideMainLabel?: string;
     /** A notice above the column and the panel, at the content's width. */
     notice?: ReactNode;
     children?: ReactNode;
@@ -21,4 +24,4 @@ export type ActivityContentBodyProps = {
  * main column is a size container, so a `ResponsiveGrid` in it follows its
  * width and not the window's.
  */
-export declare function ActivityContentBody({ width, aside, asideLabel, asideLabelledBy, asideSide, asideWidth, asideFrom, asideSticky, asideStack, asideClassName, notice, children, }: ActivityContentBodyProps): import("react").JSX.Element;
+export declare function ActivityContentBody({ width, aside, asideLabel, asideLabelledBy, asideSide, asideWidth, asideFrom, asideSticky, asideStack, asideClassName, asidePhone, asidePreviewLabel, asideMainLabel, notice, children, }: ActivityContentBodyProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/activity-content-aside.types.d.ts

@@ -12,6 +12,13 @@ export type ActivityContentAsideWidth = 'sm' | 'md' | 'lg' | (string & {});
 export type ActivityContentAsideFrom = 'lg' | 'xl' | '2xl';
 /** Where a stacked panel goes, relative to the content. */
 export type ActivityContentAsideStack = 'before' | 'after';
+/**
+ * What a phone does with the panel, below `asideFrom`: `'stack'` puts it
+ * after (or before) the content; `'toggle'` puts it behind a two-button
+ * switch above the content (the content stays mounted, hidden). A `'sheet'`
+ * mode is planned.
+ */
+export type ActivityContentAsidePhone = 'stack' | 'toggle';
 export type ActivityContentAsideProps = {
     /** The side panel's content. It is a `complementary` landmark: name it with `asideLabel` or `asideLabelledBy`. */
     aside?: ReactNode;
@@ -33,4 +40,10 @@ export type ActivityContentAsideProps = {
     asideStack?: ActivityContentAsideStack;
     /** Classes for the panel itself. */
     asideClassName?: string;
+    /** Below `asideFrom`: `'stack'` (the default) or `'toggle'` (see {@link ActivityContentAsidePhone}). */
+    asidePhone?: ActivityContentAsidePhone;
+    /** The toggle's button that shows the panel. "Preview" by default. */
+    asidePreviewLabel?: string;
+    /** The toggle's button that shows the content. "Content" by default. */
+    asideMainLabel?: string;
 };

package/dist/lib/components/ui/layout/app-shell/activity-content.d.ts

@@ -50,10 +50,11 @@ export type ActivityContentProps = {
  * 1280px, by default), sticky under the app bar, and stacked after the content
  * (or before, with `asideStack="before"`) on a narrower screen. It is a
  * `complementary` landmark named by `asideLabel` or `asideLabelledBy`. The
- * layout is CSS only.
+ * layout is CSS only. `asidePhone="toggle"` puts the panel behind a
+ * Content / Preview switch on a narrower screen instead of stacking it.
  *
  * When the app bar shows the page's title (a route's `handle.title`), `title`
  * is left out here: the bar's is the page's one `h1`. The subtitle and the
  * actions stay.
  */
-export declare function ActivityContent({ title, subtitle, header, actions, hideHeader, titleAs: Title, inset, width, children, className, aside, asideLabel, asideLabelledBy, asideSide, asideWidth, asideFrom, asideSticky, asideStack, asideClassName, notice, ...props }: ActivityContentProps): import("react").JSX.Element;
+export declare function ActivityContent({ title, subtitle, header, actions, hideHeader, titleAs: Title, inset, width, children, className, aside, asideLabel, asideLabelledBy, asideSide, asideWidth, asideFrom, asideSticky, asideStack, asideClassName, asidePhone, asidePreviewLabel, asideMainLabel, notice, ...props }: ActivityContentProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-shell.utils.d.ts

@@ -43,7 +43,9 @@ export declare function isMenuItemActive(pathname: string, url: string): boolean
  */
 export declare function findActiveMenuItem(pathname: string, items: MenuItem[]): MenuItem | undefined;
 /** Every entry and, after each, its children: the list the location is matched against. */
-export declare function flattenItems(items: MenuItem[]): MenuItem[];
+export declare function flattenItems(items: MenuItem[], sheet?: boolean): MenuItem[];
+/** An entry's children as a surface draws them: the phone's menu sheet drops those of a `childrenIn: 'sidebar'` entry. */
+export declare function menuChildren(item: MenuItem, sheet?: boolean): MenuItem[];
 /**
  * The top-level entry the location belongs to: the one whose own url or whose
  * descendant's url is the most specific match. A child living outside its

package/dist/lib/components/ui/layout/app-shell/app-sidebar-entries.d.ts

@@ -1,13 +1,16 @@
 import { AppShellLinkComponent, MenuItem } from './types.js';
 /**
- * The sidebar's entries: a link per item, an icon button for `display: 'icon'`.
+ * The sidebar's entries: a link per item, an icon button for `display: 'icon'`
+ * (except in the phone's menu sheet, which always shows the label too).
  * Expanded (the sidebar open, the phone's menu sheet), an entry's `children`
  * are nested under it, indented.
  */
-export declare function AppSidebarEntries({ items, activeUrl, linkComponent, expanded, }: {
+export declare function AppSidebarEntries({ items, activeUrl, linkComponent, expanded, sheet, }: {
     items: MenuItem[];
     /** The `url` of the one current entry, a child included. */
     activeUrl?: string;
     linkComponent: AppShellLinkComponent;
     expanded?: boolean;
+    /** The phone's menu sheet: a `childrenIn: 'sidebar'` entry lists no children. */
+    sheet?: boolean;
 }): import("react").JSX.Element[];

package/dist/lib/components/ui/layout/app-shell/app-sidebar-icon-item.d.ts

@@ -2,7 +2,8 @@ import { AppShellLinkComponent, MenuItem } from './types.js';
 /**
  * An entry with `display: 'icon'`: a round, icon-only link, drawn with
  * `IconButton` (the Button family's look) in the expanded sidebar and the
- * collapsed rail alike. The label is its tooltip and, visually hidden, its
+ * collapsed rail alike (not in the phone's menu sheet, which draws the label
+ * item). The label is its tooltip and, visually hidden, its
  * accessible name; the active one is tinted in primary and `aria-current`.
  * On a coarse pointer the button itself is 44px.
  */

package/dist/lib/components/ui/layout/app-shell/app-sidebar.d.ts

@@ -35,6 +35,8 @@ export type AppSidebarProps = {
      * expanded sidebar always starts at the top.
      */
     align?: 'start' | 'center';
+    /** Set by the header's menu sheet: an entry marked `childrenIn: 'sidebar'` shows no children. */
+    sheet?: boolean;
 } & SidebarProps;
 /**
  * The application sidebar: a navigation entry per {@link MenuItem}, with the
@@ -45,4 +47,4 @@ export type AppSidebarProps = {
  * {@link findActiveMenuItem} for why that cannot be decided one entry at a
  * time once a menu is mounted anywhere but `/`.
  */
-export declare function AppSidebar({ items, brand, logo, name, context, linkComponent: ownLink, align, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar({ items, brand, logo, name, context, linkComponent: ownLink, align, sheet, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/types.d.ts

@@ -25,11 +25,12 @@ export type MenuItem = {
     /**
      * How the entry is drawn. Unset: the icon and the label (a tile under the
      * icon on the collapsed rail). `'icon'`: a round, icon-only button (the
-     * Button family's `IconButton`) in the expanded sidebar, the collapsed rail
-     * and the phone's menu sheet, with the `label` as its tooltip and its
-     * accessible name, `aria-current` when active and a 44px target on a
-     * coarse pointer. Meant for a `footer` entry such as "Settings". It draws
-     * no `badge`: the option is ignored on an icon entry.
+     * Button family's `IconButton`) in the expanded sidebar and the collapsed
+     * rail, with the `label` as its tooltip and its accessible name,
+     * `aria-current` when active and a 44px target on a coarse pointer. The
+     * phone's menu sheet always shows the icon and the label, since a lone icon
+     * reads poorly there. Meant for a `footer` entry such as "Settings". It
+     * draws no `badge` as an icon button: the option is ignored there.
      */
     display?: 'icon';
     /**
@@ -57,6 +58,14 @@ export type MenuItem = {
      * presets list the top level only.
      */
     children?: MenuItem[];
+    /**
+     * `'sidebar'`: the `children` show in the expanded sidebar and the
+     * `navigation="top"` dropdown only. The phone's menu sheet lists the entry
+     * as a plain link to its `url`, with its badge, and no children, for a
+     * parent whose own page already lists them. Unset: the sheet nests them
+     * like the expanded sidebar. Ignored without `children`.
+     */
+    childrenIn?: 'sidebar';
     /** The section this entry belongs to, already translated: the drawer draws one section per group. */
     group?: string;
     /** Whether a bottom navigation bar shows this entry (the others go under "More"): the bar and the floating toolbar. */

package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts

@@ -1,8 +1,14 @@
 import { Tabs as TabsPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
+import { TabsScrollButtonsMode } from '../tabs-overflow-classes.js';
 /**
  * The row of tabs. When it is wider than its container it scrolls sideways;
  * while tabs are hidden on a side, that side fades and gets a scroll button,
- * and the selected (or focused) tab is scrolled into view.
+ * and the selected (or focused) tab is scrolled into view. With
+ * `scrollButtons="none"` the buttons are left out and the list stays a plain
+ * touch-scrollable row with a soft fade on each side that hides tabs.
  */
-export declare function TabsList({ className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react").JSX.Element;
+export declare function TabsList({ scrollButtons, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
+    /** `auto` (default): scroll buttons while tabs are hidden; `none`: no buttons. */
+    scrollButtons?: TabsScrollButtonsMode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/tabs/tabs-nav.d.ts

@@ -1,6 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { TabsNavLink } from './partials/tabs-nav-link.js';
 import { TabsLook } from './tabs-classes.js';
+import { TabsScrollButtonsMode } from './tabs-overflow-classes.js';
 export type { TabsNavLinkProps } from './partials/tabs-nav-link.js';
 export type TabsNavProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
     /** Names the navigation for assistive technology ("Account sections"). */
@@ -9,6 +10,8 @@ export type TabsNavProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
     value?: string;
     /** `underline` (the default) or `segmented`, as `Tabs`. */
     variant?: TabsLook;
+    /** `auto` (default): scroll buttons while links are hidden; `none`: no buttons, a plain scrollable row with a soft edge fade. */
+    scrollButtons?: TabsScrollButtonsMode;
     children?: ReactNode;
 };
 /**
@@ -18,5 +21,6 @@ export type TabsNavProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
  * current one marked `aria-current="page"`. Use `Tabs` when the panels are
  * on the page, `TabsNav` when each tab is a place to go.
  */
-declare function TabsNav({ value, variant, className, children, ref, ...props }: TabsNavProps): import("react").JSX.Element;
+declare function TabsNav({ value, variant, scrollButtons, className, children, ref, ...props }: TabsNavProps): import("react").JSX.Element;
+export type { TabsScrollButtonsMode } from './tabs-overflow-classes.js';
 export { TabsNav, TabsNavLink };

package/dist/lib/components/ui/primitives/tabs/tabs-overflow-classes.d.ts

@@ -7,3 +7,6 @@ export declare const TABS_SCROLL_OVERLAY = "pointer-events-none absolute z-20 ov
 export declare const TABS_SCROLL_BUTTON = "pointer-events-auto absolute top-1/2 inline-flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-colors hover:bg-muted pointer-coarse:h-full pointer-coarse:max-h-11 pointer-coarse:w-11 focus-visible:outline-2 focus-visible:outline-offset-[-3px] focus-visible:outline-primary dark:focus-visible:outline-track-fill [&_svg]:size-4";
 export declare const TABS_SCROLL_LEFT = "pointer-events-auto absolute top-1/2 inline-flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-colors hover:bg-muted pointer-coarse:h-full pointer-coarse:max-h-11 pointer-coarse:w-11 focus-visible:outline-2 focus-visible:outline-offset-[-3px] focus-visible:outline-primary dark:focus-visible:outline-track-fill [&_svg]:size-4 left-1";
 export declare const TABS_SCROLL_RIGHT = "pointer-events-auto absolute top-1/2 inline-flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-colors hover:bg-muted pointer-coarse:h-full pointer-coarse:max-h-11 pointer-coarse:w-11 focus-visible:outline-2 focus-visible:outline-offset-[-3px] focus-visible:outline-primary dark:focus-visible:outline-track-fill [&_svg]:size-4 right-1";
+export declare const TABS_OVERFLOW_FADE_ONLY = "[--tabs-cue:0px] data-[overflow-left]:[--tabs-inset-left:1.5rem] data-[overflow-right]:[--tabs-inset-right:1.5rem] data-[overflow-left]:[mask-image:linear-gradient(to_right,transparent,#000_var(--tabs-inset-left,0px),#000_calc(100%_-_var(--tabs-inset-right,0px)),transparent)] data-[overflow-right]:[mask-image:linear-gradient(to_right,transparent,#000_var(--tabs-inset-left,0px),#000_calc(100%_-_var(--tabs-inset-right,0px)),transparent)]";
+/** `auto` (the default) shows scroll buttons while tabs are hidden; `none` shows none. */
+export type TabsScrollButtonsMode = 'auto' | 'none';

package/dist/lib/components/ui/selection/sortable-list/index.d.ts

@@ -2,4 +2,4 @@ export { DragHandle as SortableHandle, insertIds, } from '../../collections/dnd/
 export type { SortableListProps } from './sortable-list.js';
 export { SortableList } from './sortable-list.js';
 export * from './sortable-list-form-field.js';
-export type { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListItem, SortableListRenderItem, } from './types.js';
+export type { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListItem, SortableListRenderItem, SortableListRowAction, } from './types.js';

package/dist/lib/components/ui/selection/sortable-list/sortable-list-context.d.ts

@@ -1,4 +1,4 @@
-import { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListRenderItem } from './types.js';
+import { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListItem, SortableListRenderItem, SortableListRowAction } from './types.js';
 import { SortableListModel } from './use-sortable-list.js';
 export type SortableListOptions = {
     uid: string;
@@ -12,6 +12,8 @@ export type SortableListOptions = {
     dragActivator: SortableListDragActivator;
     required?: boolean;
     renderItem?: SortableListRenderItem;
+    labelLines: 1 | 2;
+    rowActions?: (item: SortableListItem) => SortableListRowAction[] | undefined;
 };
 export type SortableListLabels = {
     drag: string;

package/dist/lib/components/ui/selection/sortable-list/sortable-list.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListItem, SortableListRenderItem } from './types.js';
+import { SortableListAppearance, SortableListDensity, SortableListDragActivator, SortableListItem, SortableListRenderItem, SortableListRowAction } from './types.js';
 export type SortableListProps = {
     items: SortableListItem[];
     value?: string[];
@@ -28,5 +28,9 @@ export type SortableListProps = {
     name?: string;
     className?: string;
     renderItem?: SortableListRenderItem;
+    /** Lines a row's label may take before an ellipsis: `1` (default) or `2`. The full text stays in the `title`. Ignored with `renderItem`. */
+    labelLines?: 1 | 2;
+    /** A "..." menu on each row, beside the remove button: the actions of that item (`RowMenu` items). Return nothing or `[]` for a row without one. Ignored with `renderItem`. */
+    rowActions?: (item: SortableListItem) => SortableListRowAction[] | undefined;
 };
-export declare function SortableList({ items, value, defaultValue, onValueChange, searchable, draggable, reorderable, removable, numbered, density, appearance, dragActivator, disabled, height, label, hideLabel, helperText, error, required, name, className, renderItem, }: SortableListProps): import("react").JSX.Element;
+export declare function SortableList({ items, value, defaultValue, onValueChange, searchable, draggable, reorderable, removable, numbered, density, appearance, dragActivator, disabled, height, label, hideLabel, helperText, error, required, name, className, renderItem, labelLines, rowActions, }: SortableListProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/sortable-list/types.d.ts

@@ -12,6 +12,7 @@ export type SortableListItem = {
     /** Stays where it is: no handle, not draggable, not movable by keyboard. */
     locked?: boolean;
 };
+export type { RowMenuItem as SortableListRowAction } from '../../collections/row-menu/row-menu.js';
 export type SortableListRenderItem = (item: SortableListItem, ctx: {
     dragging: boolean;
 }) => ReactNode;

package/dist/lib/components/ui/selection/sortable-list/use-sortable-list-labels.d.ts

@@ -0,0 +1,3 @@
+import { SortableListLabels } from './sortable-list-context.js';
+/** The list's translated button names. */
+export declare function useSortableListLabels(): SortableListLabels;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -1500,6 +1500,14 @@ export declare const en: {
         "country-field": {
             placeholder: string;
         };
+        "age-field": {
+            "unit-day": string;
+            "unit-week": string;
+            "unit-month": string;
+            "unit-year": string;
+            unit: string;
+            reading: string;
+        };
         "duration-field": {
             hours: string;
             minutes: string;
@@ -1536,6 +1544,9 @@ export declare const en: {
             navigation: string;
             badge: string;
             "badge-dot": string;
+            "aside-main": string;
+            "aside-preview": string;
+            "aside-toggle": string;
         };
         "top-app-bar": {
             account: string;

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -1490,6 +1490,14 @@ declare const _default: {
 	"country-field": {
 		"placeholder": "Country"
 	},
+	"age-field": {
+		"unit-day": "{count, plural, one {day} other {days}}",
+		"unit-week": "{count, plural, one {week} other {weeks}}",
+		"unit-month": "{count, plural, one {month} other {months}}",
+		"unit-year": "{count, plural, one {year} other {years}}",
+		"unit": "Age unit",
+		"reading": "{value} {unit}"
+	},
 	"duration-field": {
 		"hours": "h",
 		"minutes": "min",
@@ -1525,7 +1533,10 @@ declare const _default: {
 		"open-menu": "Open menu",
 		"navigation": "Navigation",
 		"badge": "{count} new",
-		"badge-dot": "new activity"
+		"badge-dot": "new activity",
+		"aside-main": "Content",
+		"aside-preview": "Preview",
+		"aside-toggle": "View"
 	},
 	"top-app-bar": {
 		"account": "Account menu",

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -1500,6 +1500,14 @@ export declare const fr: {
         "country-field": {
             placeholder: string;
         };
+        "age-field": {
+            "unit-day": string;
+            "unit-week": string;
+            "unit-month": string;
+            "unit-year": string;
+            unit: string;
+            reading: string;
+        };
         "duration-field": {
             hours: string;
             minutes: string;
@@ -1536,6 +1544,9 @@ export declare const fr: {
             navigation: string;
             badge: string;
             "badge-dot": string;
+            "aside-main": string;
+            "aside-preview": string;
+            "aside-toggle": string;
         };
         "top-app-bar": {
             account: string;

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -1490,6 +1490,14 @@ declare const _default: {
 	"country-field": {
 		"placeholder": "Pays"
 	},
+	"age-field": {
+		"unit-day": "{count, plural, one {jour} other {jours}}",
+		"unit-week": "{count, plural, one {semaine} other {semaines}}",
+		"unit-month": "{count, plural, one {mois} other {mois}}",
+		"unit-year": "{count, plural, one {an} other {ans}}",
+		"unit": "Unité d'âge",
+		"reading": "{value} {unit}"
+	},
 	"duration-field": {
 		"hours": "h",
 		"minutes": "min",
@@ -1525,7 +1533,10 @@ declare const _default: {
 		"open-menu": "Ouvrir le menu",
 		"navigation": "Navigation",
 		"badge": "{count, plural, one {# nouveauté} other {# nouveautés}}",
-		"badge-dot": "nouveauté"
+		"badge-dot": "nouveauté",
+		"aside-main": "Contenu",
+		"aside-preview": "Aperçu",
+		"aside-toggle": "Affichage"
 	},
 	"top-app-bar": {
 		"account": "Menu du compte",

package/dist/lib/i18n/resources/resources.d.ts

@@ -1498,6 +1498,14 @@ export declare const resources: {
             "country-field": {
                 placeholder: string;
             };
+            "age-field": {
+                "unit-day": string;
+                "unit-week": string;
+                "unit-month": string;
+                "unit-year": string;
+                unit: string;
+                reading: string;
+            };
             "duration-field": {
                 hours: string;
                 minutes: string;
@@ -1534,6 +1542,9 @@ export declare const resources: {
                 navigation: string;
                 badge: string;
                 "badge-dot": string;
+                "aside-main": string;
+                "aside-preview": string;
+                "aside-toggle": string;
             };
             "top-app-bar": {
                 account: string;
@@ -5036,6 +5047,14 @@ export declare const resources: {
             "country-field": {
                 placeholder: string;
             };
+            "age-field": {
+                "unit-day": string;
+                "unit-week": string;
+                "unit-month": string;
+                "unit-year": string;
+                unit: string;
+                reading: string;
+            };
             "duration-field": {
                 hours: string;
                 minutes: string;
@@ -5072,6 +5091,9 @@ export declare const resources: {
                 navigation: string;
                 badge: string;
                 "badge-dot": string;
+                "aside-main": string;
+                "aside-preview": string;
+                "aside-toggle": string;
             };
             "top-app-bar": {
                 account: string;