alinea 2.0.0-preview.11 → 2.0.0-preview.13

package/dist/components/Page.js

@@ -10,15 +10,15 @@ import { Heading } from "./Heading.js";
 
 // src/components/Page.module.css
 var Page_default = {
-  "Page": "alinea-Page",
   "PageContent-container": "alinea-PageContent-container",
   "PageContentContainer": "alinea-PageContent-container",
-  "PageHeader": "alinea-PageHeader",
-  "PageActions": "alinea-PageActions",
   "PageBack": "alinea-PageBack",
+  "Page": "alinea-Page",
   "PageTitle": "alinea-PageTitle",
-  "PageFooter": "alinea-PageFooter",
-  "PageContent": "alinea-PageContent"
+  "PageActions": "alinea-PageActions",
+  "PageHeader": "alinea-PageHeader",
+  "PageContent": "alinea-PageContent",
+  "PageFooter": "alinea-PageFooter"
 };
 
 // src/components/Page.tsx

package/dist/components/Popover.js

@@ -5,11 +5,11 @@ import {
   $f2ff30fde7b014be$export$2e1e1122cf0cba88,
   $f2ff30fde7b014be$export$3ddf2d174ce01153,
   $f2ff30fde7b014be$export$d2f961adcb0afbe
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
 import {
   $e260d131964da0f9$export$872b660ac5a1ff98
-} from "../chunks/chunk-RE523BQ7.js";
+} from "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {

package/dist/components/PreviewFrame.js

@@ -1,8 +1,8 @@
 import {
   $db7105decd081705$export$4c260019440d418f
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-RE523BQ7.js";
+import "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -23,15 +23,15 @@ import { Button } from "./Button.js";
 var PreviewFrame_default = {
   "PreviewToolbar-open": "alinea-PreviewToolbar-open",
   "PreviewToolbarOpen": "alinea-PreviewToolbar-open",
-  "PreviewToolbar-navigation": "alinea-PreviewToolbar-navigation",
-  "PreviewToolbarNavigation": "alinea-PreviewToolbar-navigation",
-  "PreviewToolbar": "alinea-PreviewToolbar",
   "PreviewFrame-iframe": "alinea-PreviewFrame-iframe",
   "PreviewFrameIframe": "alinea-PreviewFrame-iframe",
   "PreviewFrame-loading": "alinea-PreviewFrame-loading",
   "PreviewFrameLoading": "alinea-PreviewFrame-loading",
   "PreviewFrame-unavailable": "alinea-PreviewFrame-unavailable",
   "PreviewFrameUnavailable": "alinea-PreviewFrame-unavailable",
+  "PreviewToolbar": "alinea-PreviewToolbar",
+  "PreviewToolbar-navigation": "alinea-PreviewToolbar-navigation",
+  "PreviewToolbarNavigation": "alinea-PreviewToolbar-navigation",
   "PreviewFrame": "alinea-PreviewFrame"
 };
 

package/dist/components/RadioGroup.js

@@ -2,9 +2,9 @@ import {
   $efe09c6d1c304b50$export$9afb8bc826b033ea,
   $fe21c36db05242bb$export$a98f0dcb43a68a25,
   $fe21c36db05242bb$export$d7b12c4107be0d61
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-RE523BQ7.js";
+import "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -18,18 +18,18 @@ import { Field, FieldDescription } from "./Field.js";
 
 // src/components/RadioGroup.module.css
 var RadioGroup_default = {
-  "RadioGroupItem-indicator": "alinea-RadioGroupItem-indicator",
-  "RadioGroupItemIndicator": "alinea-RadioGroupItem-indicator",
   "RadioGroup-items": "alinea-RadioGroup-items",
   "RadioGroupItems": "alinea-RadioGroup-items",
+  "RadioGroupItem-content": "alinea-RadioGroupItem-content",
+  "RadioGroupItemContent": "alinea-RadioGroupItem-content",
   "is-focusVisible": "alinea-is-focusVisible",
   "isFocusVisible": "alinea-is-focusVisible",
   "RadioGroupItem-label": "alinea-RadioGroupItem-label",
   "RadioGroupItemLabel": "alinea-RadioGroupItem-label",
   "RadioGroup": "alinea-RadioGroup",
   "RadioGroupItem": "alinea-RadioGroupItem",
-  "RadioGroupItem-content": "alinea-RadioGroupItem-content",
-  "RadioGroupItemContent": "alinea-RadioGroupItem-content"
+  "RadioGroupItem-indicator": "alinea-RadioGroupItem-indicator",
+  "RadioGroupItemIndicator": "alinea-RadioGroupItem-indicator"
 };
 
 // src/components/RadioGroup.tsx

package/dist/components/Resizable.js

@@ -1082,12 +1082,12 @@ import {
 
 // src/components/Resizable.module.css
 var Resizable_default = {
-  "ResizablePanelGroup-handle": "alinea-ResizablePanelGroup-handle",
-  "ResizablePanelGroupHandle": "alinea-ResizablePanelGroup-handle",
-  "ResizablePanelGroup": "alinea-ResizablePanelGroup",
-  "ResizablePanel": "alinea-ResizablePanel",
   "ResizablePanelGroup-view": "alinea-ResizablePanelGroup-view",
-  "ResizablePanelGroupView": "alinea-ResizablePanelGroup-view"
+  "ResizablePanelGroupView": "alinea-ResizablePanelGroup-view",
+  "ResizablePanel": "alinea-ResizablePanel",
+  "ResizablePanelGroup": "alinea-ResizablePanelGroup",
+  "ResizablePanelGroup-handle": "alinea-ResizablePanelGroup-handle",
+  "ResizablePanelGroupHandle": "alinea-ResizablePanelGroup-handle"
 };
 
 // src/components/Resizable.tsx

package/dist/components/SearchField.d.ts

@@ -11,6 +11,11 @@ export interface SearchFieldProps extends FieldSharedProps, StyleProps, AriaProp
     placeholder?: string;
     /** Shows a spinner while results are being loaded */
     loading?: boolean;
+    /**
+     * `inline` drops the box so the field reads as the top row of the results
+     * it searches, like a command palette. The row draws its own border.
+     */
+    variant?: 'default' | 'inline';
     name?: string;
     autoFocus?: boolean;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -36,4 +41,4 @@ export interface SearchFieldProps extends FieldSharedProps, StyleProps, AriaProp
  * A text input for search queries with a clear button. The `icon` is shown
  * inside the input, in front of the query.
  */
-export declare function SearchField({ label, description, error, required, disabled, readOnly, icon, shared, onValueChange, placeholder, loading, onBlur, onFocus, onKeyDown, role, 'aria-controls': ariaControls, 'aria-activedescendant': ariaActiveDescendant, 'aria-expanded': ariaExpanded, 'aria-haspopup': ariaHasPopup, 'aria-autocomplete': ariaAutocomplete, className, ...props }: SearchFieldProps): import("react").JSX.Element;
+export declare function SearchField({ label, description, error, required, disabled, readOnly, icon, shared, onValueChange, placeholder, loading, variant, onBlur, onFocus, onKeyDown, role, 'aria-controls': ariaControls, 'aria-activedescendant': ariaActiveDescendant, 'aria-expanded': ariaExpanded, 'aria-haspopup': ariaHasPopup, 'aria-autocomplete': ariaAutocomplete, className, ...props }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/SearchField.js

@@ -2,9 +2,9 @@ import {
   $29a5029ff43c9612$export$b94867ecbd698f21,
   $41fb335299a4a39e$export$f5b8910cec6cf069,
   $7705c033048f6da7$export$353f5b6fc5456de1
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-RE523BQ7.js";
+import "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -21,12 +21,12 @@ import { Icon } from "./Icon.js";
 var SearchField_default = {
   "SearchFieldClear-icon": "alinea-SearchFieldClear-icon",
   "SearchFieldClearIcon": "alinea-SearchFieldClear-icon",
-  "SearchField": "alinea-SearchField",
-  "SearchFieldInput": "alinea-SearchFieldInput",
   "SearchFieldGroup": "alinea-SearchFieldGroup",
+  "SearchFieldClear": "alinea-SearchFieldClear",
   "SearchFieldIcon": "alinea-SearchFieldIcon",
   "SearchFieldSpinner": "alinea-SearchFieldSpinner",
-  "SearchFieldClear": "alinea-SearchFieldClear"
+  "SearchFieldInput": "alinea-SearchFieldInput",
+  "SearchField": "alinea-SearchField"
 };
 
 // src/components/SearchField.tsx
@@ -45,6 +45,7 @@ function SearchField({
   onValueChange,
   placeholder,
   loading,
+  variant = "default",
   onBlur,
   onFocus,
   onKeyDown,
@@ -62,6 +63,7 @@ function SearchField({
     {
       "data-slot": "search-field",
       ...props,
+      "data-variant": variant,
       onChange: onValueChange,
       isRequired: required,
       isDisabled: disabled,

package/dist/components/Select.js

@@ -7,9 +7,9 @@ import {
   $c8bb816105474884$export$ef445b55be0601bd,
   $c8bb816105474884$export$ef9b1a59e592288f,
   $e28ab3efe3e87743$export$1ff3c3f08ae963c0
-} from "../chunks/chunk-JOF663EG.js";
+} from "../chunks/chunk-QHHMKJUO.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-RE523BQ7.js";
+import "../chunks/chunk-HOETF6HN.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -31,24 +31,24 @@ import { PopoverSurface } from "./internal/PopoverSurface.js";
 
 // src/components/Select.module.css
 var Select_default = {
-  "SelectTrigger-button": "alinea-SelectTrigger-button",
-  "SelectTriggerButton": "alinea-SelectTrigger-button",
-  "SelectContent-list": "alinea-SelectContent-list",
-  "SelectContentList": "alinea-SelectContent-list",
-  "SelectTrigger-placeholder": "alinea-SelectTrigger-placeholder",
-  "SelectTriggerPlaceholder": "alinea-SelectTrigger-placeholder",
   "SelectSeparator": "alinea-SelectSeparator",
-  "SelectGroup-label": "alinea-SelectGroup-label",
-  "SelectGroupLabel": "alinea-SelectGroup-label",
-  "SelectTrigger": "alinea-SelectTrigger",
   "SelectGroup": "alinea-SelectGroup",
-  "SelectTrigger-value": "alinea-SelectTrigger-value",
-  "SelectTriggerValue": "alinea-SelectTrigger-value",
   "SelectTrigger-clear": "alinea-SelectTrigger-clear",
   "SelectTriggerClear": "alinea-SelectTrigger-clear",
+  "SelectTrigger": "alinea-SelectTrigger",
+  "SelectTrigger-value": "alinea-SelectTrigger-value",
+  "SelectTriggerValue": "alinea-SelectTrigger-value",
+  "SelectContent-list": "alinea-SelectContent-list",
+  "SelectContentList": "alinea-SelectContent-list",
+  "SelectTrigger-button": "alinea-SelectTrigger-button",
+  "SelectTriggerButton": "alinea-SelectTrigger-button",
   "Select": "alinea-Select",
   "SelectTrigger-arrow": "alinea-SelectTrigger-arrow",
-  "SelectTriggerArrow": "alinea-SelectTrigger-arrow"
+  "SelectTriggerArrow": "alinea-SelectTrigger-arrow",
+  "SelectGroup-label": "alinea-SelectGroup-label",
+  "SelectGroupLabel": "alinea-SelectGroup-label",
+  "SelectTrigger-placeholder": "alinea-SelectTrigger-placeholder",
+  "SelectTriggerPlaceholder": "alinea-SelectTrigger-placeholder"
 };
 
 // src/components/Select.tsx

package/dist/components/Sheet.d.ts

@@ -0,0 +1,50 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import type { AriaProps, DataProps, StyleProps } from './types.js';
+export interface SheetContentProps extends StyleProps, AriaProps, DataProps {
+    /** Called on Escape while focus is inside the sheet, and by `SheetClose` */
+    onClose?: () => void;
+    /** Accessible label of the back button in the header, defaults to "Back" */
+    backLabel?: string;
+    children: ReactNode;
+}
+/**
+ * A non-modal panel that fills its positioned container. Mount it to open
+ * the sheet: focus moves to its first field, and returns to the previously
+ * focused element when it unmounts. Labelled by its `SheetTitle` unless
+ * given an `aria-label`.
+ */
+export declare function SheetContent({ onClose, backLabel, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }: SheetContentProps): import("react").JSX.Element;
+export interface SheetPartProps extends StyleProps, AriaProps, DataProps {
+    children?: ReactNode;
+}
+export interface SheetHeaderProps extends SheetPartProps {
+}
+/**
+ * Top bar of the sheet, eg. a badge, the title, a key hint and SheetClose.
+ * Starts with a back button when the sheet has an `onClose`.
+ */
+export declare function SheetHeader({ className, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+export interface SheetTitleProps extends SheetPartProps {
+}
+export declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react").JSX.Element;
+export interface SheetBodyProps extends SheetPartProps {
+}
+/** Scrolling content of the sheet, holds SheetSection elements */
+export declare function SheetBody({ className, ...props }: SheetBodyProps): import("react").JSX.Element;
+export interface SheetSectionProps extends SheetPartProps {
+    title?: ReactNode;
+}
+export declare function SheetSection({ title, className, children, ...props }: SheetSectionProps): import("react").JSX.Element;
+export interface SheetFooterProps extends SheetPartProps {
+}
+/**
+ * Bottom bar of the sheet, holds small ghost buttons. Destructive buttons
+ * are pushed to the end.
+ */
+export declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react").JSX.Element;
+export interface SheetCloseProps extends StyleProps, DataProps {
+    'aria-label': string;
+    /** Defaults to the `onClose` of the surrounding SheetContent */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function SheetClose({ onClick, ...props }: SheetCloseProps): import("react").JSX.Element;

package/dist/components/Sheet.js

@@ -0,0 +1,202 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/Sheet.tsx
+import {
+  createContext,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+import { IcRoundArrowBack, IcRoundClose } from "alinea/dashboard/icons";
+import { Button } from "./Button.js";
+
+// src/components/Sheet.module.css
+var Sheet_default = {
+  "SheetBody": "alinea-SheetBody",
+  "SheetTitle": "alinea-SheetTitle",
+  "SheetSection-title": "alinea-SheetSection-title",
+  "SheetSectionTitle": "alinea-SheetSection-title",
+  "SheetFooter": "alinea-SheetFooter",
+  "SheetContent": "alinea-SheetContent",
+  "SheetHeader": "alinea-SheetHeader",
+  "SheetSection": "alinea-SheetSection",
+  "SheetHeader-back": "alinea-SheetHeader-back",
+  "SheetHeaderBack": "alinea-SheetHeader-back"
+};
+
+// src/components/Sheet.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(Sheet_default);
+var fields = 'input:not([type="hidden"]), textarea, select, [contenteditable="true"]';
+var focusables = 'button, [href], input, textarea, select, [contenteditable="true"], [tabindex]';
+var SheetContext = createContext(null);
+function focusable(element) {
+  return element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest('[aria-hidden="true"], [inert]');
+}
+function first(root, selector) {
+  return Array.from(root.querySelectorAll(selector)).find(
+    focusable
+  );
+}
+function SheetContent({
+  onClose,
+  backLabel = "Back",
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const ref = useRef(null);
+  const titleId = useId();
+  const context = useMemo(
+    () => ({ titleId, backLabel, onClose }),
+    [titleId, backLabel, onClose]
+  );
+  useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const previous = document.activeElement;
+    const body = root.querySelector('[data-slot="sheet-body"]') ?? root;
+    const target = first(body, fields) ?? first(body, focusables) ?? root;
+    target.focus();
+    return () => {
+      const active = document.activeElement;
+      const lost = !active || active === document.body || root.contains(active);
+      if (lost && previous instanceof HTMLElement && previous.isConnected)
+        previous.focus();
+    };
+  }, []);
+  function onKeyDown(event) {
+    if (event.key !== "Escape" || event.defaultPrevented || !onClose) return;
+    event.preventDefault();
+    onClose();
+  }
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-content",
+      role: "dialog",
+      tabIndex: -1,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby ?? (ariaLabel ? void 0 : titleId),
+      ...props,
+      ref,
+      className: styles.SheetContent(dist_default.merge({ className })),
+      onKeyDown,
+      children
+    }
+  ) });
+}
+function SheetHeader({ className, children, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      ...props,
+      className: styles.SheetHeader(dist_default.merge({ className })),
+      children: [
+        context?.onClose && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-slot": "sheet-back",
+            variant: "ghost",
+            size: "icon-sm",
+            icon: IcRoundArrowBack,
+            "aria-label": context.backLabel,
+            className: styles.SheetHeader.back(),
+            onClick: context.onClose
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      "data-slot": "sheet-title",
+      id: context?.titleId,
+      ...props,
+      className: styles.SheetTitle(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      ...props,
+      className: styles.SheetBody(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetSection({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "sheet-section",
+      ...props,
+      className: styles.SheetSection(dist_default.merge({ className })),
+      children: [
+        title && /* @__PURE__ */ jsx(
+          "h3",
+          {
+            "data-slot": "sheet-section-title",
+            className: styles.SheetSection.title(),
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      ...props,
+      className: styles.SheetFooter(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetClose({ onClick, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "sheet-close",
+      ...props,
+      variant: "ghost",
+      size: "icon-sm",
+      icon: IcRoundClose,
+      onClick: onClick ?? (() => context?.onClose?.())
+    }
+  );
+}
+export {
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetSection,
+  SheetTitle
+};

package/dist/components/Sidebar.js

@@ -9,13 +9,13 @@ import { createContext, useContext, useId } from "react";
 // src/components/Sidebar.module.css
 var Sidebar_default = {
   "SidebarContent": "alinea-SidebarContent",
-  "Sidebar": "alinea-Sidebar",
+  "SidebarFooter": "alinea-SidebarFooter",
+  "SidebarInset": "alinea-SidebarInset",
+  "SidebarHeader": "alinea-SidebarHeader",
   "SidebarGroupAction": "alinea-SidebarGroupAction",
   "SidebarGroup": "alinea-SidebarGroup",
-  "SidebarInset": "alinea-SidebarInset",
-  "SidebarFooter": "alinea-SidebarFooter",
   "SidebarGroupLabel": "alinea-SidebarGroupLabel",
-  "SidebarHeader": "alinea-SidebarHeader"
+  "Sidebar": "alinea-Sidebar"
 };
 
 // src/components/Sidebar.tsx

package/dist/components/SortableList.d.ts

@@ -1,46 +1,56 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
 import { type ButtonProps } from './Button.js';
-import { type SurfaceProps } from './Surface.js';
-import type { DragMoveEvent, IconType, Key } from './types.js';
-export interface SortableListProps extends SurfaceProps {
+import type { DragMoveEvent, Key } from './types.js';
+export interface SortableListProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Enables reordering: items with an `id` can be dragged by their
-     * `SortableListHandle`, with a pointer or with the keyboard (Enter on the
-     * handle, Tab to an item, Enter to drop). Called with the key of the dragged
-     * item and the item it was dropped before or after.
-     * Items only drop within the list they were dragged from.
+     * Enables reordering: items with an `id` follow the pointer when their
+     * `SortableListItemHeader` is dragged, the other items move aside as it
+     * passes them. With focus in the header, Alt+ArrowUp and Alt+ArrowDown
+     * move an item. Called with the key of the moved item and the item it was
+     * dropped before or after. Update the order synchronously: the dropped item
+     * glides into the place it renders in right after this returns.
      */
     onReorder?: (event: DragMoveEvent) => void;
-    /** Mime type the dragged items carry, defaults to `alinea/sortable-list-item` */
-    dragType?: string;
 }
-export declare function SortableList({ className, role, onReorder, dragType, ...props }: SortableListProps): import("react").JSX.Element;
+export declare function SortableList({ className, role, onReorder, ...props }: SortableListProps): import("react").JSX.Element;
 export interface SortableListItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'id'> {
     /**
      * Identifies the item within its list. Items with an id can be dragged when
      * the list has `onReorder`. The id is not rendered as a DOM id.
      */
     id?: Key;
-    /** Rendered under the pointer while dragging, eg. a `SortableListDragPreview` */
-    dragPreview?: ReactNode;
+    /** Highlights the item, eg. while its settings are open next to the list */
+    current?: boolean;
 }
-export declare function SortableListItem({ id, dragPreview, ...props }: SortableListItemProps): import("react").JSX.Element;
+export declare function SortableListItem({ id, className, current, ...props }: SortableListItemProps): import("react").JSX.Element;
 export interface SortableListItemHeaderProps extends ComponentPropsWithoutRef<'div'> {
 }
-/** Top bar of an item, holds its handle, title and actions */
-export declare function SortableListItemHeader({ className, ...props }: SortableListItemHeaderProps): import("react").JSX.Element;
-export interface SortableListHandleProps extends ComponentPropsWithoutRef<'span'> {
-}
 /**
- * Drags its `SortableListItem` when the list has `onReorder`. Focusable in
- * that case: press Enter to start a keyboard drag. Place it in the
- * `SortableListItemHeader`, it shows while the header is hovered or focused.
+ * Top bar of an item, holds its title and actions. Drags the item when the
+ * list has `onReorder`, a press that does not move still clicks.
  */
-export declare function SortableListHandle({ className, ...props }: SortableListHandleProps): import("react").JSX.Element;
+export declare function SortableListItemHeader({ className, onPointerDownCapture, onKeyDown, onDragStart, ...props }: SortableListItemHeaderProps): import("react").JSX.Element;
 export interface SortableListItemTitleProps extends ComponentPropsWithoutRef<'div'> {
 }
 /** Row of the toggle, badges and description of an item, fills the header */
 export declare function SortableListItemTitle({ className, ...props }: SortableListItemTitleProps): import("react").JSX.Element;
+export interface SortableListItemTriggerProps extends Omit<ButtonProps, 'variant' | 'size' | 'icon' | 'asChild'> {
+    /** Ends the button with a "…", defaults to true */
+    more?: boolean;
+}
+/**
+ * The badges and description of an item as one button that ends in a "…",
+ * eg. to open the settings of the item. Fills the title up to the actions.
+ */
+export declare function SortableListItemTrigger({ className, more, children, ...props }: SortableListItemTriggerProps): import("react").JSX.Element;
+export interface SortableListItemInsertProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+}
+/**
+ * Inserts an item before the one it is placed in: a line with an add button
+ * that shows when the pointer is on the border above the item. Place it first
+ * in the `SortableListItem`.
+ */
+export declare function SortableListItemInsert({ className, ...props }: SortableListItemInsertProps): import("react").JSX.Element;
 export interface SortableListItemDescriptionProps extends ComponentPropsWithoutRef<'span'> {
 }
 /** Muted, truncated text next to the badges of an item, eg. its label */
@@ -49,7 +59,7 @@ export interface SortableListItemActionsProps extends ComponentPropsWithoutRef<'
 }
 export declare function SortableListItemActions({ className, ...props }: SortableListItemActionsProps): import("react").JSX.Element;
 export interface SortableListItemToggleProps extends Omit<ButtonProps, 'variant' | 'children' | 'size'> {
-    /** Whether the item content is shown, rotates the fold icon */
+    /** Whether the item content is shown, picks the unfold icon */
     expanded: boolean;
 }
 /** Folds the content of an item */
@@ -68,12 +78,6 @@ export interface SortableListItemSettingsProps extends ComponentPropsWithoutRef<
 }
 /** A group of settings or actions in the popover of an item */
 export declare function SortableListItemSettings({ variant, className, ...props }: SortableListItemSettingsProps): import("react").JSX.Element;
-export interface SortableListDragPreviewProps extends ComponentPropsWithoutRef<'div'> {
-    icon?: IconType;
-    label: ReactNode;
-}
-/** Card shown under the pointer while dragging an item */
-export declare function SortableListDragPreview({ className, icon, label, ...props }: SortableListDragPreviewProps): import("react").JSX.Element;
 export interface SortableListAddProps extends ComponentPropsWithoutRef<'div'> {
 }
 /** Last row of the list holding the buttons that add items */