@graphty/compact-mantine 0.9.32 → 0.9.34

package/dist/index.d.cts

@@ -18,6 +18,8 @@ import { MenuProps } from '@mantine/core';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { NotificationProps } from '@mantine/core';
+import { PointerEvent as PointerEvent_2 } from 'react';
+import { RangeSliderProps } from '@mantine/core';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
@@ -28,9 +30,11 @@ import { ScrollAreaCssVariables } from '@mantine/core';
 import { ScrollAreaProps as ScrollAreaProps_2 } from '@mantine/core';
 import { ScrollAreaStylesNames } from '@mantine/core';
 import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
+import { SliderProps } from '@mantine/core';
 import { SyntheticEvent } from 'react';
 import { TextInputProps } from '@mantine/core';
 import { TooltipProps } from '@mantine/core';
+import { TouchEvent as TouchEvent_2 } from 'react';
 import { UnstyledButtonProps } from '@mantine/core';
 import { VariantColorsResolver } from '@mantine/core';
 
@@ -468,6 +472,7 @@ export declare type ColorPickerPaintType = "solid" | "gradient";
  * @param props.onChangeEnd - called once per finished edit: a settled drag, a step, a commit or a pick
  * @param props.withAlpha - offer opacity
  * @param props.swatches - the swatch set
+ * @param props.closeOnEnter - Enter in the value box closes the enclosing pop-out
  * @param props.defaultFormat - the value row's first format
  * @param props.gradient - gradient content for the paint-type bar
  * @param props.paintType - the selected paint type
@@ -481,7 +486,7 @@ export declare type ColorPickerPaintType = "solid" | "gradient";
  * </Popout.Panel>
  * ```
  */
-export declare function ColorPickerPanel({ value, onChange, onChangeEnd, withAlpha, swatches, defaultFormat, gradient, paintType, onPaintTypeChange, labels: labelOverrides, }: ColorPickerPanelProps): default_2.JSX.Element;
+export declare function ColorPickerPanel({ value, onChange, onChangeEnd, withAlpha, swatches, closeOnEnter, defaultFormat, gradient, paintType, onPaintTypeChange, labels: labelOverrides, }: ColorPickerPanelProps): default_2.JSX.Element;
 
 /** Every string ColorPickerPanel draws or announces, in English by default. */
 export declare interface ColorPickerPanelLabels {
@@ -505,6 +510,23 @@ export declare interface ColorPickerPanelLabels {
     gradient: string;
     /** Name of the swatch list. */
     swatches: string;
+    /** A color as a reader says it ("dark green"), for the swatches' names and tooltips. */
+    colorWord: (color: string) => string;
+    /**
+     * A swatch's name and tooltip: its color word and hex, and whether it is the color the field
+     * held when the picker opened (the color before this edit).
+     */
+    swatch: (word: string, hex: string, start: boolean) => string;
+    /**
+     * Drawn under the value row, and spoken, after Enter on text that reads as no color in the
+     * format: what the box takes instead. The text stays in the box, marked, to be corrected.
+     */
+    refused: (typed: string, format: ColorPickerFormat) => string;
+    /**
+     * Drawn and spoken when the reader leaves the value box holding text that reads as no color:
+     * the box went back to `kept`, the value it shows for the color in force.
+     */
+    refusedKept: (typed: string, kept: string, format: ColorPickerFormat) => string;
 }
 
 /** Props for ColorPickerPanel. */
@@ -526,8 +548,20 @@ export declare interface ColorPickerPanelProps {
      * @default true
      */
     withAlpha?: boolean;
-    /** The swatch set under the divider, as hex or hexa strings. Each is named by its string. */
+    /**
+     * The swatch set under the divider, as hex or hexa strings. Each is named by its color word
+     * and hex. The color the picker opened on is always one of them (first, when the set lacks
+     * it), marked as the color before this edit, so going back to it is one click. While the
+     * picker is open, a swatch the set drops keeps its place and one it gains joins the end, so a
+     * picked swatch never moves away from under the pointer.
+     */
     swatches?: readonly string[];
+    /**
+     * Enter in the value box applies the color and closes the pop-out the picker sits in, which
+     * gives focus back to what opened it.
+     * @default false
+     */
+    closeOnEnter?: boolean;
     /**
      * The format the value row starts in.
      * @default "hex"
@@ -563,6 +597,16 @@ export declare interface ColorStop {
     color: string;
 }
 
+/**
+ * A color as a reader says it, in English: the CSS keyword, in words, when the color is exactly
+ * one ("purple" for 800080, "dark green" for 006400), else its hue band with "dark" or "light"
+ * ("orange", "dark indigo", "light gray"). For spoken names and tooltips beside a hex code, never
+ * in place of one.
+ * @param color - a hex color, 3 to 8 digits, with or without `#`
+ * @returns the color's word, or "" when the text is not a hex color
+ */
+export declare function colorWord(color: string): string;
+
 declare const COLUMNS: readonly ["left", "center", "right"];
 
 /**
@@ -573,7 +617,8 @@ declare const COLUMNS: readonly ["left", "center", "right"];
  * Keyboard: typing edits the value and commits on Enter, Tab or blur; Control+ArrowDown (or
  * Alt+ArrowDown) opens the list with the current value highlighted; ArrowUp / ArrowDown move,
  * Home / End jump, Enter picks, Escape closes without a change and leaves focus in the field.
- * With the list closed, ArrowUp / ArrowDown step a numeric value.
+ * With the list closed, ArrowUp / ArrowDown step a numeric value. A numeric field with no options
+ * is a spin button to assistive tech (its value and bounds are read out), not a combobox.
  * @example
  * ```tsx
  * <ComboInput
@@ -636,8 +681,19 @@ export declare interface ComboInputProps {
     width?: number | string;
     /** The field cannot be used. */
     disabled?: boolean;
-    /** Text shown in an empty field. */
+    /** Text shown in an empty field, in Figma's placeholder color. */
     placeholder?: string;
+    /**
+     * The selection disagrees: the empty field reads "Mixed" in the value's ink, as Figma draws
+     * it, and typing a value replaces it.
+     */
+    mixed?: boolean;
+    /**
+     * The field's surface: `"filled"`, Figma's gray number field, or `"outlined"`, the panel's
+     * background inside a 1px edge, as the select and the style fields draw it.
+     * @default "filled"
+     */
+    variant?: "filled" | "outlined";
     /** The chevron button's accessible name. @default "Open list" */
     openLabel?: string;
     /** Extra class on the field's outer element. */
@@ -697,18 +753,23 @@ export declare const compactBrandColors: MantineColorsTuple;
  * (Shift for 10) and scrubs by dragging its "%".
  *
  * As in the other controls of this family, `undefined` means "the reader has chosen nothing
- * here": the control shows the default in italics and offers no reset until something of the
+ * here": the control shows the default as its value and offers no reset until something of the
  * reader's own is set, and pressing the reset reports `undefined` again. Color and opacity are
  * tracked separately, so either can be the reader's while the other is still the default.
  * Typed opacity is read in the reader's own locale.
  * @param props - Component props
  * @param props.color - The color, when you drive the control from your own state
  * @param props.defaultColor - The color shown while the reader has chosen none of their own
+ * @param props.emptyText - Words shown in the hex box in place of `defaultColor` while nothing is chosen
+ * @param props.emptySwatch - Whether no color is in force while none is chosen, so the swatch is drawn empty
+ * @param props.mixed - Whether the things the field stands for disagree, shown as "Mixed" while nothing is chosen
  * @param props.opacity - The opacity as a percentage, when you drive the control from your own state
  * @param props.defaultOpacity - The opacity shown while the reader has set none of their own
  * @param props.onColorChange - Called with the new color, or with `undefined` when the control is reset
  * @param props.onOpacityChange - Called with the new opacity, or with `undefined` when the control is reset
  * @param props.onChange - Called once per gesture with both halves of the color, whichever of them moved
+ * @param props.onChangeEnd - Called once when a gesture settles, with both halves of the color
+ * @param props.swatches - The swatch set the picker offers
  * @param props.label - The field's name, drawn above the control and used to name the group
  * @param props.showOpacity - Whether to offer the opacity box
  * @param props.disabled - Whether the control cannot be used at all
@@ -717,8 +778,10 @@ export declare const compactBrandColors: MantineColorsTuple;
  * @param props.onBlur - Called when the hex box or the opacity box loses focus
  * @param props.width - The field's width
  * @param props.showReset - Whether to offer the reset button
+ * @param props."aria-label" - The field's name when nothing draws it, which names its controls
+ * @param props.variant - The whole paint field, or the swatch alone as a chip
+ * @param props.valueText - The color's spoken words: in the chip form in place of its state and hex, in the field form beside them
  * @param props.hideLabel - Whether the label only names the controls and is not drawn
- * @param props.swatches - The swatches the picker offers in place of the built-in set
  * @returns The paint field, and its reset button when something has been set
  * @example
  * ```tsx
@@ -729,7 +792,7 @@ export declare const compactBrandColors: MantineColorsTuple;
  * </PopoutManager>
  * ```
  */
-export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, onChange, label, showOpacity, disabled, disabledReason, onFocus, onBlur, width, showReset, hideLabel, swatches, }: CompactColorInputProps): default_2.JSX.Element;
+export declare function CompactColorInput({ color, defaultColor, emptyText, emptySwatch, mixed, opacity, defaultOpacity, onColorChange, onOpacityChange, onChange, onChangeEnd, swatches, label, showOpacity, disabled, disabledReason, onFocus, onBlur, width, showReset, "aria-label": ariaLabel, variant, valueText, hideLabel, }: Readonly<CompactColorInputProps>): default_2.JSX.Element;
 
 /**
  * Props for the CompactColorInput component.
@@ -742,8 +805,34 @@ export declare interface CompactColorInputProps {
      * chosen none and the control is showing `defaultColor`.
      */
     color?: string | undefined;
-    /** The color shown, in italics, while the reader has chosen none of their own. */
+    /** The color shown while the reader has chosen none of their own. */
     defaultColor: string;
+    /**
+     * Words shown in the hex box in place of `defaultColor` while the reader has chosen nothing,
+     * for a color whose default is another color rather than a value of its own -- "Line color"
+     * for an arrowhead that takes its edge's color. The hex box is then empty, with these words
+     * as its placeholder; the chit still shows `defaultColor`. As `StyleNumberInput`'s `emptyText`.
+     * In the chip form, which has no hex box, the chip is drawn empty instead -- no color is shown
+     * as if it were chosen -- and its name says "not set" with these words; pressing it opens the
+     * picker at `defaultColor`.
+     */
+    emptyText?: string;
+    /**
+     * Whether no color is in force while the reader has chosen none: the field form then draws its
+     * swatch empty (an outline), as the chip form does with `emptyText`, so a swatch never shows a
+     * color that nothing draws -- a label background whose default is none. `defaultColor` is then
+     * only where the picker opens. Default false: the swatch shows `defaultColor`.
+     */
+    emptySwatch?: boolean;
+    /**
+     * Whether the things this field stands for disagree: several selected rows, or elements the
+     * layers beneath paint in different colors. While the reader has chosen nothing, the field
+     * draws the word "Mixed" (`labels.mixed`) and no swatch, since no one color is in force.
+     * Typing a color writes one color, as in any field. In the chip form, the chip draws a dash in
+     * place of a color and its name says "Mixed"; pressing it opens the picker.
+     * @default false
+     */
+    mixed?: boolean;
     /**
      * The opacity as a percentage from 0 to 100, when you drive the control
      * from your own state. `undefined` means the reader has set none and the
@@ -751,8 +840,7 @@ export declare interface CompactColorInputProps {
      */
     opacity?: number | undefined;
     /**
-     * The opacity shown, in italics, while the reader has set none of their
-     * own.
+     * The opacity shown while the reader has set none of their own.
      * @default 100
      */
     defaultOpacity?: number;
@@ -810,6 +898,25 @@ export declare interface CompactColorInputProps {
      * ```
      */
     onChange?: (color: string | undefined, opacity: number | undefined, event?: default_2.SyntheticEvent) => void;
+    /**
+     * Called once when a gesture settles, with both halves of the color, as
+     * `onChange` passes them.
+     *
+     * A drag in the picker calls `onChange` on every move and this once, on
+     * release; a typed hex, an opacity commit, a swatch pick and the reset
+     * each call both once. Write to an undo history or a slow store here, so
+     * a drag is one step.
+     *
+     * Called whichever of `onChange` or `onColorChange` / `onOpacityChange`
+     * you use.
+     */
+    onChangeEnd?: (color: string | undefined, opacity: number | undefined, event?: default_2.SyntheticEvent) => void;
+    /**
+     * The swatch set the picker offers under its divider, as hex or hexa
+     * strings -- the colors already used in the document, for instance.
+     * @default SWATCH_COLORS_HEXA
+     */
+    swatches?: readonly string[];
     /**
      * The field's name, drawn above the control and used to name the group the
      * three controls sit in.
@@ -818,6 +925,20 @@ export declare interface CompactColorInputProps {
      * such as one stop of a gradient.
      */
     label?: string;
+    /**
+     * The field's name when nothing draws it: the swatch, the hex box and the opacity box are
+     * named from it as they are from `label` ("Pick node color", "Node color"), and no label is
+     * drawn. For a field whose name is drawn by what surrounds it in another form, such as a
+     * properties row that draws "Color" above two fields. Ignored when `label` is given.
+     */
+    "aria-label"?: string;
+    /**
+     * Words a screen reader hears for the color in force ("teal"). In the chip form they replace
+     * its state and hex, for a row where the color is the value itself, such as a group's color in
+     * a palette, so the reader hears a name rather than "not set, #009E73". In the field form they
+     * join the hex box's name after its state ("Node color, set, teal"), beside the hex it holds.
+     */
+    valueText?: string;
     /**
      * Whether to offer an opacity box beside the color.
      * @default true
@@ -864,10 +985,20 @@ export declare interface CompactColorInputProps {
      */
     width?: number | string;
     /**
-     * Whether to offer the reset button once something is chosen.
+     * Whether to offer the reset button once something is chosen. Turn it off when the caller
+     * draws its own way back to "nothing chosen" beside the control, such as one Clear per row.
      * @default true
      */
     showReset?: boolean;
+    /**
+     * How the control is drawn. `"field"` is the whole paint field (swatch, hex and opacity).
+     * `"chip"` is the swatch alone, 24 px square, for a row that already names the color beside
+     * it (an effect, a category of a varied value): pressing it opens the picker. Its accessible
+     * name carries the field's name, its state and its color ("Group 3 color, set here,
+     * #E69F00"), and no label is drawn.
+     * @default "field"
+     */
+    variant?: "field" | "chip";
     /**
      * Whether to use `label` only to name the controls, without drawing it above them or
      * grouping them under it. For a field whose name is already drawn beside it, such as the
@@ -875,17 +1006,11 @@ export declare interface CompactColorInputProps {
      * @default false
      */
     hideLabel?: boolean;
-    /**
-     * The swatches the picker offers, as `#RRGGBB` or `#RRGGBBAA` strings, in place of the
-     * built-in set: the colors a document already uses, for example. An empty list offers none.
-     * @default the built-in swatch set
-     */
-    swatches?: readonly string[];
 }
 
 /**
  * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp, the
- * `brand` accent and the `graphty` accent.
+ * the `brand` accent and the `graphty` accent.
  */
 export declare const compactColors: {
     dark: MantineColorsTuple;
@@ -911,6 +1036,7 @@ export declare const compactColors: {
  * surface in the dark scheme matches the panels around it.
  *
  * - 0: text (#fff)
+ * - 2: Mantine's dimmed text (#8c8c8c); the AA option points dimmed text at its secondary ink
  * - 5: hover (#444)
  * - 6: default field (#383838)
  * - 7: body / panel (#2c2c2c)
@@ -1046,6 +1172,33 @@ export declare interface CompactMantineLabels {
      * @returns The button's accessible name
      */
     resetToDefault: (label: string) => string;
+    /**
+     * What a screen reader hears after a field's name while nothing is set on it, so the gray
+     * placeholder is not the only sign: "Node color, not set, #3388FF".
+     * @param beneath - What the field shows in its place (the value beneath), or "" for nothing
+     * @returns The words joined to the field's name
+     */
+    fieldNotSet: (beneath: string) => string;
+    /**
+     * What a screen reader hears after a field's name while a value is set on it: "Node color,
+     * set here".
+     */
+    fieldSet: string;
+    /**
+     * What a color field shows while nothing is set on it, said after `fieldNotSet`'s "not set"
+     * so the color is heard as what the drawing shows, not as a value: "Node color, not set,
+     * drawn #6366F1 indigo".
+     * @param hex - The color drawn, as `#RRGGBB`
+     * @param words - The color's name, when the field was given one
+     * @returns The words
+     */
+    colorDrawn?: (hex: string, words?: string) => string;
+    /**
+     * Tree: said in a live region after a row moves (Alt+Arrow, a drag, or a
+     * row menu's move). `parent` is the name of the folder it now sits in, or
+     * null at the top level; `position` and `count` are already formatted.
+     */
+    treeMoved: (name: string, parent: string | null, position: string, count: string) => string;
     /**
      * Accessible name of the swatch button that opens the color picker, when
      * the control has no label. With a label, `pickColor` names it instead.
@@ -1058,7 +1211,7 @@ export declare interface CompactMantineLabels {
     colorHexValue: string;
     /**
      * Accessible name of the swatch button that opens the color picker, saying
-     * what pressing it does: "Pick Fill color".
+     * what pressing it does: "Pick fill color", in sentence case.
      * @param label - The control's own label, as drawn above it
      * @returns The button's accessible name
      */
@@ -1071,6 +1224,40 @@ export declare interface CompactMantineLabels {
      * @returns The text box's accessible name
      */
     colorValue: (label: string) => string;
+    /**
+     * Title of the hex box while it holds words that name no color, after Enter: "blu is not a
+     * color".
+     * @param typed - What was typed
+     * @returns The words
+     */
+    notAColor: (typed: string) => string;
+    /**
+     * Message drawn under CompactColorInput, and read as the hex box's description, after Enter
+     * on words that name no color: what the box takes instead.
+     * @param typed - What was typed
+     * @returns The words
+     */
+    colorRefused: (typed: string) => string;
+    /**
+     * Message drawn under CompactColorInput, and announced, when the reader leaves the hex box
+     * holding words that name no color: the box went back to what it held.
+     * @param typed - What was typed
+     * @param kept - What the box holds again: a hex code, or the words shown when nothing is set
+     * @returns The words
+     */
+    colorRefusedKept: (typed: string, kept: string) => string;
+    /**
+     * Announced when Escape takes back what was typed in CompactColorInput's hex box: the edit is
+     * gone and the color it held stays.
+     * @param kept - What the box holds again: a hex code, or the words shown when nothing is set
+     * @returns The words
+     */
+    colorEditDiscarded: (kept: string) => string;
+    /**
+     * A color as a reader says it, for the picker's swatch names and tooltips beside the hex:
+     * "orange", "dark green". Replace it to name colors in another language.
+     */
+    colorWord: (color: string) => string;
     /**
      * Accessible name of the number box holding the color's opacity
      * percentage, when the control has a label: "Fill opacity".
@@ -1170,6 +1357,19 @@ export declare interface CompactMantineLabels {
      * @returns The name, such as "Options for Degree"
      */
     columnMenu?: (header: string) => string;
+    /**
+     * What a screen reader reads for a data table cell that holds no value. Optional, so a full
+     * set of labels written before it existed still type-checks; left out, the English default
+     * is used.
+     */
+    emptyCell?: string;
+    /**
+     * Read after a sorted column's header, so the focused header says how it sorts. Optional;
+     * left out, the English default is used.
+     * @param descending - Whether the column sorts largest first
+     * @returns The words, such as "sorted ascending"
+     */
+    sortedBy?: (descending: boolean) => string;
     /**
      * How a cell holding true is written, when its column supplies no drawing
      * of its own.
@@ -1220,6 +1420,21 @@ export declare interface CompactMantineLabels {
      * @returns The number spelled as an ordinal
      */
     ordinal: (value: string, rule: Intl.LDMLPluralRule) => string;
+    /**
+     * Shown at the foot of a select's open list, and spoken, when the letters
+     * typed ahead start no option's name; Enter then picks nothing.
+     * @param typed - The letters typed, as typed
+     * @returns The line, such as `No option starts with "cube"`
+     */
+    listNoMatch?: (typed: string) => string;
+    /** What a screen reader says before a node chip's count or name. Never drawn: the chip shows a circle. */
+    entityNode: string;
+    /** What a screen reader says before an edge chip's count or name. Never drawn: the chip shows a segment. */
+    entityEdge: string;
+    /** The text of `FileSource`'s button that opens the file picker, and the name of its upload icon button. */
+    fileChoose: string;
+    /** Placeholder and accessible name of `FileSource`'s web address field. */
+    fileUrl: string;
 }
 
 /**
@@ -1636,11 +1851,13 @@ export declare interface CompoundSegment {
 }
 
 /**
- * A dark menu opened at the pointer by a right-click (design/figma-spec.md 8.2):
+ * A menu opened at the pointer by a right-click (design/figma-spec.md 8.2):
  * its top-left corner 3px right of and 5px above the pointer, flipping and
- * shifting to stay on screen, with the first enabled row highlighted so Enter
- * acts on it at once. It also opens from the keyboard (Shift+F10, the
- * ContextMenu key) at the focused element. Escape, a click outside or choosing a
+ * shifting to stay on screen, with no row highlighted until a key or the
+ * pointer moves to one. On touch and pen, a press held still for half a second
+ * opens it at the finger. It also opens from the keyboard (Shift+F10, the
+ * ContextMenu key) at the focused element, with the first enabled row
+ * highlighted so Enter acts on it at once. Escape, a click outside or choosing a
  * row closes it and returns focus to where it was.
  * @param props - Component props
  * @param props.target - The element that opens the menu
@@ -1650,8 +1867,9 @@ export declare interface CompoundSegment {
  * @example
  * ```tsx
  * <ContextMenu target={<div className="canvas" tabIndex={0} />}>
- *     <Menu.Item rightSection="Ctrl+C">Copy</Menu.Item>
- *     <Menu.Item rightSection="Ctrl+V">Paste here</Menu.Item>
+ *     <Menu.Item aria-keyshortcuts="Control+C" rightSection={<MenuShortcut>Ctrl+C</MenuShortcut>}>
+ *         Copy
+ *     </Menu.Item>
  *     <Menu.Divider />
  *     <Menu.Item color="red">Delete</Menu.Item>
  * </ContextMenu>
@@ -1665,13 +1883,18 @@ export declare function ContextMenu({ target, children, onChange, ...menuProps }
  */
 export declare interface ContextMenuProps extends Omit<MenuProps, "children" | "opened" | "defaultOpened" | "position" | "offset" | "trigger"> {
     /**
-     * The element that opens the menu when it is right-clicked, or when it (or
-     * something inside it) has focus and Shift+F10 or the ContextMenu key is
-     * pressed. One element that accepts `onContextMenu` and `onKeyDown`.
+     * The element that opens the menu when it is right-clicked or touched and
+     * held, or when it (or something inside it) has focus and Shift+F10 or the
+     * ContextMenu key is pressed. A hold reaches the target's `onContextMenu`
+     * as a `contextmenu` event from the pressed element, like a right-click.
+     * One element that accepts `onContextMenu`, `onKeyDown` and the pointer handlers.
      */
     target: ReactElement<{
         onContextMenu?: (event: MouseEvent_2<HTMLElement>) => void;
         onKeyDown?: (event: KeyboardEvent_2<HTMLElement>) => void;
+        onPointerDown?: (event: PointerEvent_2<HTMLElement>) => void;
+        onClickCapture?: (event: MouseEvent_2<HTMLElement>) => void;
+        onTouchEnd?: (event: TouchEvent_2<HTMLElement>) => void;
     }>;
     /** The menu's rows: `Menu.Item`, `Menu.Label`, `Menu.Divider`, `Menu.Sub`, `MenuCheckItem`. */
     children: ReactNode;
@@ -1787,6 +2010,7 @@ export declare interface ControlGroupProps {
  * @param props.summary - One line saying what the section holds, shown after the name while it is collapsed
  * @param props.children - The rows the section holds
  * @param props.collapsible - Whether the section folds away behind a chevron, defaulting to true
+ * @param props.wrapLabel - Whether a long label wraps onto more lines instead of being cut, defaulting to false
  * @returns The section, its header and its rows
  * @example
  * ```tsx
@@ -1906,6 +2130,19 @@ export declare interface ControlSectionProps extends DisclosureProps {
      * @default true
      */
     collapsible?: boolean;
+    /**
+     * Whether a label too long for one line wraps onto more lines instead of being cut with an
+     * ellipsis. For a label that is a sentence the reader must read whole, such as a count:
+     * `"Medici and 11 connections within 2 hops"`. The header grows to hold it.
+     * @default false
+     */
+    wrapLabel?: boolean;
+    /**
+     * Makes the section's name a heading of this level, so a screen reader can move from
+     * section to section by heading ("Nodes", "Edges"). Pick the level that follows the
+     * headings around the panel. Without it the section is a named group and no heading.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 /**
@@ -1974,6 +2211,7 @@ export declare function createDefaultGradientStops(): ColorStop[];
  * @param props.onFocus - Called when the row's body takes focus
  * @param props.onBlur - Called when the row's body loses focus
  * @param props.trailing - The row's occasional control, in the 24px slot at its trailing edge
+ * @param props.description - What activating the row does, read after its name
  * @returns The data row
  * @example
  * ```tsx
@@ -1989,7 +2227,7 @@ export declare function createDefaultGradientStops(): ColorStop[];
  * ))}
  * ```
  */
-export declare function DataRow({ name, value, stat, icon, selected, onClick, onFocus, onBlur, trailing, }: DataRowProps): default_2.JSX.Element;
+export declare function DataRow({ name, value, stat, icon, selected, onClick, onFocus, onBlur, trailing, description, }: DataRowProps): default_2.JSX.Element;
 
 /**
  * The 32px caption above a run of data rows (11/16 at 550), optionally sortable.
@@ -2111,6 +2349,9 @@ export declare interface DataRowProps {
      * in the primary color at weight 500, because the reading is the half the
      * reader came for. The pair is exposed as one `role="group"` named by the
      * name, so a screen reader reads "Nodes, 1,000,000" as one unit (WCAG 1.3.1).
+     * A reading too long for the row beside its name wraps onto more lines and
+     * the row grows, and so does a name too long for its half, so a stat is
+     * never cut short.
      *
      * Leave it off for a list of the reader's own strings -- datasets, files,
      * nodes -- where the name is the thing being read.
@@ -2156,6 +2397,11 @@ export declare interface DataRowProps {
     onBlur?: default_2.FocusEventHandler<HTMLElement>;
     /** The row's occasional control, in the 24px slot at its trailing edge. Drawn only when there is something to put there. */
     trailing?: default_2.ReactNode;
+    /**
+     * What activating the row does, read after its name (`aria-description`): "Select this node
+     * and its neighbors". Pair it with a tooltip carrying the same words for the pointer.
+     */
+    description?: string;
 }
 
 /**
@@ -2283,6 +2529,11 @@ export declare interface DataTableColumn<TRow extends object> {
     cell?: (row: TRow) => default_2.ReactNode;
     /** How wide the column is drawn, in pixels. Defaults to the width of one field in a property panel. */
     width?: number;
+    /**
+     * With `columnSizing: "content"`, the narrowest the column is drawn, in pixels: room for what a
+     * header carries beyond its name (icons, a badge). Ignored when `width` is set.
+     */
+    minWidth?: number;
     /** How the column's contents line up. Defaults to `"start"`; use `"end"` for numbers. */
     align?: DataTableAlign;
     /** Whether the column's header sorts the table. Defaults to `true`. */
@@ -2308,10 +2559,22 @@ export declare interface DataTableColumn<TRow extends object> {
      */
     pinned?: "start";
     /**
-     * A small glyph drawn before the header's name, such as the column's data type. It is
-     * decoration: the header is still named by `header` alone.
+     * Whether this column's cells name their row (`role="rowheader"`): the key column, such as a
+     * node's id, so a screen reader reads each cell with its row as well as its column. Defaults
+     * to `false`.
+     */
+    rowHeader?: boolean;
+    /**
+     * A small glyph drawn before the header's name, such as the column's data type. Without
+     * `iconLabel` it is decoration: the header is named by `header` alone.
      */
     icon?: default_2.ReactNode;
+    /**
+     * What `icon` says, for a screen reader, such as "number, joined". Given, the glyph is read
+     * as an image with this name before the header's name; omitted, it is hidden from assistive
+     * technology.
+     */
+    iconLabel?: string;
     /**
      * A tooltip on the header, shown on hover and on keyboard focus and linked to the header
      * as its description: the column's profile, such as "77 values, 1 to 36".
@@ -2323,6 +2586,19 @@ export declare interface DataTableColumn<TRow extends object> {
      * the keyboard, Alt+ArrowDown, Shift+F10 or the context-menu key on the header opens it.
      */
     menu?: default_2.ReactNode;
+    /**
+     * Controls at the end of the header, before the menu caret and outside the sort button, so a
+     * click on them never sorts: a warning that opens its details on hover, a status badge. Keep
+     * them small (about 20px); they are always shown. They take no tab stop of their own: the
+     * grid has one, so whatever they offer must also be reachable from `menu`.
+     */
+    headerEnd?: default_2.ReactNode;
+    /**
+     * A cell's tone: `"warning"` draws its text in the warning color, as a header's warning is
+     * drawn, to mark a value that has a problem. Left out, or undefined for a row, the cell is
+     * drawn as usual.
+     */
+    cellTone?: (row: TRow) => "warning" | undefined;
 }
 
 /**
@@ -2375,7 +2651,7 @@ export declare interface DataTableHandle {
  * functions, so a translation can order the pieces the way its own language
  * needs, and numbers arrive already formatted for the active locale.
  */
-export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "columnMenu" | "dataTable" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "yes">;
+export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "columnMenu" | "dataTable" | "emptyCell" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "sortedBy" | "yes">;
 
 /**
  * Props for the DataTable component.
@@ -2429,6 +2705,13 @@ export declare interface DataTableProps<TRow extends object> {
      * rather than the thing when the data changes underneath it.
      */
     getRowId?: (row: TRow, index: number) => string;
+    /**
+     * A row's accessible name, read once when a screen reader moves onto the row, in place of
+     * every cell's text joined. Supply it when the cells hold controls whose own names repeat
+     * the row's subject ("Group 1 color", "Hide Group 1"), so a row reads each word once.
+     * Left out, the row is read from its cells.
+     */
+    rowLabel?: (row: TRow) => string;
     /**
      * The table's accessible name, such as "Nodes" or "Search results".
      *
@@ -2463,9 +2746,9 @@ export declare interface DataTableProps<TRow extends object> {
      * the thing virtualization exists to avoid.
      */
     height?: number | string;
-    /** How tall each row is drawn, in pixels. Defaults to 32, Figma's list row pitch (`PANEL_GRID.ROW_PITCH`). */
+    /** How tall each row is drawn, in pixels. Defaults to 40, Figma's spreadsheet row (32 is its list row pitch, `PANEL_GRID.ROW_PITCH`). */
     rowHeight?: number;
-    /** How tall the header row is drawn, in pixels. Defaults to 32, like a row. */
+    /** How tall the header row is drawn, in pixels. Defaults to 40, like a row. */
     headerHeight?: number;
     /**
      * How many rows to draw beyond the ones on screen, above and below.
@@ -2585,6 +2868,33 @@ export declare interface DataTableProps<TRow extends object> {
      * data at all, and a different one for a search that matched nothing.
      */
     empty?: default_2.ReactNode;
+    /**
+     * How much room a cell leaves around its contents.
+     *
+     * - `"default"` is Figma's variables table: the first column padded 16 px each side, the
+     *   rest 12 and 8, for a table that has the width of a panel or more.
+     * - `"compact"` pads every cell 4 px each side, for a short list in a popover or a narrow
+     *   panel, where the default padding would leave the columns no room for their contents.
+     */
+    density?: "default" | "compact";
+    /**
+     * How wide a column without a `width` of its own is drawn.
+     *
+     * - `"fixed"` (the default) draws it one property-panel field wide.
+     * - `"content"` draws it as wide as its header and the widest value among the rows the
+     *   table holds, between 48 and 320 pixels, so a short column is never cut while another
+     *   holds room to spare. A column only grows as wider rows arrive, so it does not jump while
+     *   the reader scrolls.
+     */
+    columnSizing?: "fixed" | "content";
+    /**
+     * How a number cell is written, when the application writes the same values elsewhere and
+     * they must read the same in both places (a score in a panel and in the table).
+     *
+     * Left out, numbers are formatted for the active locale with up to three fraction digits.
+     * The search looks in the same text, and a column sized to its content measures it.
+     */
+    formatNumber?: (value: number) => string;
 }
 
 /**
@@ -2680,6 +2990,45 @@ export declare interface DisclosureProps {
     onOpenChange?: OpenChangeHandler;
 }
 
+/**
+ * A name that ellipsizes when its row is too narrow. While it is cut short, a pointer resting on
+ * the row that holds it (the name, its count or value, anywhere but a control of its own) opens
+ * the themed tooltip with the whole string; a name drawn whole has none, so a tooltip never
+ * repeats what is already on the screen. The element's text stays the whole string, so the
+ * accessible name never loses what the drawing cut.
+ * @param props - Component props
+ * @param props.name - The whole string
+ * @param props.className - The class that draws and ellipsizes it
+ * @param props.id - An id, for a row that names itself by this string
+ * @param props.testId - A test id
+ * @param props.self - Anchors the tooltip to the text itself rather than to its row
+ * @param props.detail - The row's quiet text, which the tooltip carries after the name
+ * @returns The name
+ */
+export declare function EllipsizedName({ name, className, id, testId, self, detail, }: Readonly<EllipsizedNameProps>): default_2.JSX.Element;
+
+/** Props for EllipsizedName. */
+declare interface EllipsizedNameProps {
+    /** The whole string, drawn and, while it is cut short, the tooltip. */
+    name: default_2.ReactNode;
+    /** The class that draws it, and ellipsizes it. */
+    className: string;
+    /** An id, for a row that names itself by this string. */
+    id?: string;
+    /** A test id. */
+    testId?: string;
+    /**
+     * Anchors the tooltip to the text itself rather than to its row: for a second text in a row,
+     * such as a long value, whose tooltip must not take the row from the name's.
+     */
+    self?: boolean;
+    /**
+     * The row's quiet text, drawn by the row in an element marked `data-row-detail`. While the
+     * name or that text is cut short, the tooltip shows both, so a cut row is read whole.
+     */
+    detail?: default_2.ReactNode;
+}
+
 /**
  * Inject the stylesheet into `document.head` (once) and set `data-cm-contrast` on `<html>` to
  * `"high"` or `"figma"`. Does nothing without a DOM.
@@ -2691,6 +3040,47 @@ export declare interface DisclosureProps {
  */
 export declare function ensureCompactStyles(options?: CompactThemeOptions): void;
 
+/**
+ * A node or edge chip: the kind's fixed color and icon, then a count or a name. Every place that
+ * counts or names nodes or edges draws one, so a node always reads as the same blue circle and an
+ * edge as the same orange segment, in both color schemes (tokens `--cm-entity-node` and
+ * `--cm-entity-edge`, each at least 3:1 on the panel).
+ *
+ * The kind is spoken, not drawn: a screen reader hears "Node 60" or "Edge 120" (the `entityNode`
+ * and `entityEdge` labels), while the eye reads the icon.
+ * @param props - the kind, the content and an optional click handler
+ * @param props.kind - node or edge
+ * @param props.children - the count or the name
+ * @param props.onClick - makes the chip a button
+ * @param props.className - extra class
+ * @param props.style - extra style
+ * @returns the chip, a `span`, or a `button` with `onClick`
+ * @example
+ * ```tsx
+ * <EntityChip kind="node">60</EntityChip>
+ * <EntityChip kind="edge">TP53 - MDM2</EntityChip>
+ * <EntityChip kind="node" onClick={openFilters}>140 of 900</EntityChip>
+ * ```
+ */
+export declare function EntityChip({ kind, children, onClick, className, style, }: Readonly<EntityChipProps>): default_2.JSX.Element;
+
+/** Props for EntityChip. */
+export declare interface EntityChipProps {
+    /** Node or edge: decides the chip's color and icon, the same everywhere. */
+    kind: EntityKind;
+    /** The count or the name it shows ("60", "140 of 900", "TP53"). Format numbers first. */
+    children: default_2.ReactNode;
+    /** Makes the chip a button (a filter chip that opens its filters). */
+    onClick?: ActivationHandler;
+    /** Extra class on the chip. */
+    className?: string;
+    /** Extra style on the chip. */
+    style?: default_2.CSSProperties;
+}
+
+/** What an EntityChip counts or names. */
+export declare type EntityKind = "node" | "edge";
+
 /**
  * Every glyph name in the closed field register, in register order.
  */
@@ -2832,6 +3222,63 @@ export declare interface FieldRowProps extends Omit<default_2.ComponentPropsWith
     labelPosition?: "above" | "inline";
 }
 
+/** What `useFileDrop` reports. */
+export declare interface FileDropState {
+    /** Whether files are being dragged over the target now: draw the drop highlight while it is. */
+    over: boolean;
+}
+
+/**
+ * One way to get a file: a URL, a drop or the file picker, drawn to fit the space it has.
+ *
+ * Built from Mantine's TextInput, ActionIcon and Button at their compact sizes. The URL field is a
+ * native `type="url"` field, checked when Enter is pressed: a valid address goes to `onUrl`, and
+ * anything else marks the field invalid and calls nothing.
+ * @example
+ * ```tsx
+ * <FileSource accept=".csv,.json" onFiles={([file]) => open(file)} onUrl={(url) => fetchFrom(url)} />
+ * ```
+ * @param props - see FileSourceProps.
+ * @returns the file source.
+ */
+export declare function FileSource(props: Readonly<FileSourceProps>): default_2.JSX.Element;
+
+/** Props for FileSource. */
+export declare interface FileSourceProps {
+    /** How it is drawn. @default "auto" */
+    variant?: FileSourceVariant;
+    /** The files offered and taken, in the `accept` attribute's form (`.csv,.json`, `image/*`). */
+    accept?: string;
+    /** Whether more than one file may be chosen or dropped at once. @default false */
+    multiple?: boolean;
+    /** Whether to show the URL field (`row` and `drop`). @default true when `onUrl` is set */
+    url?: boolean;
+    /** Called with the chosen or dropped files (never empty). */
+    onFiles: (files: File[]) => void;
+    /** Called with the address typed into the URL field when Enter is pressed and it is a valid URL. */
+    onUrl?: (url: string) => void;
+    /**
+     * The text of the button that opens the picker, and the name of the row's upload button.
+     * Defaults to the `fileChoose` label ("Choose file").
+     */
+    label?: string;
+    /** The URL field's placeholder and accessible name. Defaults to the `fileUrl` label ("URL"). */
+    placeholder?: string;
+    /** Whether every control is off and drops are ignored. */
+    disabled?: boolean;
+    /** The address the URL field shows at first, and again whenever this value changes (the address in effect). */
+    defaultValue?: string;
+}
+
+/**
+ * How a `FileSource` is drawn:
+ * - `row`: a URL field with an upload button at its end; the row takes a drop.
+ * - `drop`: a dashed drop target with a "Choose file" button and, with `url`, a URL field.
+ * - `button`: one "Choose file" button.
+ * - `auto`: `row` while the space is narrower than 280px, else `drop`.
+ */
+export declare type FileSourceVariant = "row" | "drop" | "button" | "auto";
+
 /** One visible row. */
 export declare interface FlatTreeRow {
     node: TreeNodeData;
@@ -2845,6 +3292,15 @@ export declare interface FlatTreeRow {
     expanded: boolean;
 }
 
+/**
+ * Move focus to a field the reader did not press -- the first field of a card a click elsewhere
+ * opened -- and draw its focus ring there, as keyboard focus would. A select trigger rings on
+ * keyboard focus only, so focus put on one after a click would land with no ring, and the reader
+ * could not see where the next key goes. The next pointer press hides rings again as before.
+ * @param element - the field to focus.
+ */
+export declare function focusWithRing(element: HTMLElement): void;
+
 /**
  * Called repeatedly while a continuous gesture is in progress.
  *
@@ -2894,10 +3350,9 @@ export declare type GestureStartHandler = (event: default_2.PointerEvent) => voi
 /**
  * Works out whether an activation came from a pointer or from the keyboard.
  *
- * A keyboard activation is recognized three ways: the event is a keyboard event;
- * or it is a pointer event with no pointer type; or it is a mouse event with a
- * click count of zero, which is how a browser reports the click it synthesizes
- * from Enter or Space on a button.
+ * A keyboard activation is either a keyboard event, or a click with a click
+ * count of zero and no pointer type, which is how a browser reports the click it
+ * synthesizes from Enter or Space on a button.
  * @param event - The event that activated the control
  * @returns The activation source, ready to hand to an {@link ActivationHandlerWithMeta}
  */
@@ -3043,7 +3498,7 @@ export declare interface GradientEditorProps {
 /**
  * Figma's floating help button: a 32 x 32 circle on `--cm-bg` with the 200 elevation and no hover
  * change. Its tooltip shows and hides at once outside a Tooltip.Group; its focus ring (1px at -2px) fades in over 200ms.
- * It opens a dark menu of the caller's items, 4px above and end-aligned.
+ * It opens a menu of the caller's items, 4px above and end-aligned.
  * @param props - Component props
  * @param props.label - Accessible name and tooltip
  * @param props.children - The menu's items
@@ -3081,6 +3536,64 @@ export declare interface HistogramBin {
     count: number;
     /** Draws this bar in the accent color, for the bin the reader has selected or the one being explained. */
     highlighted?: boolean;
+    /**
+     * A CSS color to paint this bar, such as what a color mapping gives the values in it, so the
+     * chart is also a picture of the mapping. `highlighted` wins over it.
+     */
+    paint?: string;
+    /**
+     * Draws this bar lighter, for a bin outside the range the reader chose: it differs from a
+     * highlighted bar in lightness (3:1 or more), not in hue alone.
+     */
+    dimmed?: boolean;
+    /**
+     * A second, larger count drawn as a pale bar behind this one, such as the whole data's count
+     * behind what the other filters leave: the gap between them is what a filter took away.
+     */
+    ghost?: number;
+    /** Where this bin starts on the brush's scale. With a brush, bars are placed by it. */
+    from?: number;
+    /** Where this bin ends on the brush's scale. */
+    to?: number;
+}
+
+/**
+ * A range brush on a histogram's horizontal scale: two thumbs (Mantine's RangeSlider) and a body
+ * between them that moves both ends at once.
+ */
+export declare interface HistogramBrushProps {
+    /** The scale's start: the left edge of the plot. */
+    min: number;
+    /** The scale's end: the right edge of the plot. */
+    max: number;
+    /** How far a thumb, the body or an arrow key moves at a time. */
+    step: number;
+    /** The range, `[start, end]`. */
+    value: readonly [number, number];
+    /** Every move while a thumb or the body is dragged. */
+    onChange?: (value: [number, number]) => void;
+    /** The move a gesture ends on: a release, a key, a click on a bar outside the range. */
+    onChangeEnd?: (value: [number, number]) => void;
+    /** Each thumb's value in words, its `aria-valuetext`. */
+    valueText?: (value: number, thumb: 0 | 1) => string;
+    /** The whole range in words, the body's `aria-valuetext`. */
+    rangeText?: (value: readonly [number, number]) => string;
+    /** What a thumb shows while it is focused, hovered or dragged, such as the bar under it. */
+    thumbLabel?: (value: number, thumb: 0 | 1) => default_2.ReactNode;
+    /** The start thumb's accessible name. */
+    startLabel: string;
+    /** The end thumb's accessible name. */
+    endLabel: string;
+    /** The body's accessible name. */
+    bodyLabel: string;
+}
+
+/** A line drawn over a histogram's bars, one value per bin, such as a selection's own activity. */
+export declare interface HistogramOverlay {
+    /** The line's accessible name. */
+    label: string;
+    /** One value per bin, scaled over its own largest. */
+    values: number[];
 }
 
 /**
@@ -3109,6 +3622,8 @@ export declare interface HistogramBin {
  * @param props.busy - Whether the chart is still being worked out by something that finishes later
  * @param props.live - How urgently a screen reader announces the chart when it changes on its own
  * @param props.trailing - The 24px trailing slot: an advanced settings button, a reset control, or nothing
+ * @param props.brush - A range brush on the bars' scale
+ * @param props.overlay - A line over the bars, such as the selection's activity
  * @returns The histogram row
  * @example
  * ```tsx
@@ -3124,7 +3639,7 @@ export declare interface HistogramBin {
  * />
  * ```
  */
-export declare function HistogramRow({ bins, label, minLabel, maxLabel, busy, live, trailing, }: HistogramRowProps): default_2.JSX.Element;
+export declare function HistogramRow({ bins, label, minLabel, maxLabel, busy, live, trailing, brush, overlay, }: HistogramRowProps): default_2.JSX.Element;
 
 /**
  * Props for the HistogramRow component.
@@ -3177,10 +3692,18 @@ export declare interface HistogramRowProps {
     live?: LiveSetting;
     /** The 24px trailing slot: an advanced settings button, a reset control, or nothing. */
     trailing?: default_2.ReactNode;
+    /**
+     * A range brush on the bars' own scale: two thumbs under the plot and a body over it that
+     * moves both ends. A click on a bar outside the range moves the range there. With a brush,
+     * bins that give `from` and `to` are placed on its scale, so a thumb sits on its bin's edge.
+     */
+    brush?: HistogramBrushProps;
+    /** A line over the bars, such as the selection's activity, named for assistive technology. */
+    overlay?: HistogramOverlay;
 }
 
 /**
- * A circled "i" that reveals an explanation on hover, on focus or on tap.
+ * A circled "i" that reveals an explanation on hover, on Enter or Space, or on tap.
  *
  * Use it where an explanation would otherwise become a sentence of its own on a
  * dense panel: put it immediately after the name of the thing it explains. Give
@@ -3231,7 +3754,8 @@ export declare interface InfoCircleProps extends DisclosureProps {
  * name while it is renamed (design/figma-spec.md 10.3).
  *
  * It opens focused with the whole name selected. Enter commits and Escape cancels, and both
- * hand focus back to whatever held it before the field opened -- the row it came from. Leaving
+ * hand focus back to the row the field sits in (the nearest focusable element around it), or,
+ * outside one, to whatever held it before the field opened. Leaving
  * the field any other way (a click elsewhere, Tab) commits and lets focus go where it was sent.
  * @param props - Component props
  * @param props.value - The current name
@@ -3403,6 +3927,44 @@ export declare interface MenuCheckItemProps extends Omit<MenuItemProps, "leftSec
     radio?: boolean;
 }
 
+/**
+ * A menu row's second line, under its label: why a disabled row cannot run ("Only in 3D"), or
+ * what the row does. A row holding one grows from 24px to a 44px touch target and keeps both
+ * lines whole; the line itself is the menu's secondary ink.
+ * @param props - Component props
+ * @param props.children - The line's text
+ * @returns The line
+ * @example
+ * ```tsx
+ * <Menu.Item aria-disabled data-disabled>
+ *     Camera views
+ *     <MenuItemDescription>Only in 3D</MenuItemDescription>
+ * </Menu.Item>
+ * ```
+ */
+export declare function MenuItemDescription({ children }: Readonly<{
+    children: ReactNode;
+}>): JSX.Element;
+
+/**
+ * A menu row's shortcut, drawn at its right as Figma does ("F2", "Ctrl+D"). It is hidden from
+ * assistive technology, so the row's name stays its label ("Rename", not "Rename F2"); give the
+ * row `aria-keyshortcuts` with the same keys in ARIA's spelling ("Control+D", "Meta+D") so a
+ * screen reader still says them.
+ * @param props - Component props
+ * @param props.children - The keys as the reader reads them
+ * @returns The shortcut text
+ * @example
+ * ```tsx
+ * <Menu.Item aria-keyshortcuts="Control+D" rightSection={<MenuShortcut>Ctrl+D</MenuShortcut>}>
+ *     Duplicate
+ * </Menu.Item>
+ * ```
+ */
+export declare function MenuShortcut({ children }: Readonly<{
+    children: ReactNode;
+}>): JSX.Element;
+
 /**
  * One reading, with a bar for where it falls in its distribution and a chip for
  * its rank.
@@ -3429,7 +3991,7 @@ export declare interface MenuCheckItemProps extends Omit<MenuItemProps, "leftSec
  * @param props.live - How urgently a screen reader announces the row when it changes on its own
  * @param props.onClick - Called when the row is activated, with the event and whether it came from a pointer or the keyboard
  * @param props.onDoubleClick - Called on a double click
- * @param props.onContextMenu - Called on a right click or a long press
+ * @param props.onContextMenu - Called on a right click (a `contextmenu` event)
  * @param props.onFocus - Called when the row takes focus
  * @param props.onBlur - Called when the row loses focus
  * @returns The metric row
@@ -3510,7 +4072,7 @@ export declare interface MetricRowProps {
     onClick?: ActivationHandlerWithMeta;
     /** Called on a double click, for opening the metric rather than selecting it. */
     onDoubleClick?: default_2.MouseEventHandler<HTMLDivElement>;
-    /** Called on a right click or a long press, for a context menu of your own. */
+    /** Called on a right click (a `contextmenu` event), for a context menu of your own. Wrap the row in ContextMenu to open one on a touch-and-hold too. */
     onContextMenu?: default_2.MouseEventHandler<HTMLDivElement>;
     /** Called when the row takes focus. Forwarded untouched. */
     onFocus?: default_2.FocusEventHandler<HTMLDivElement>;
@@ -3637,7 +4199,8 @@ export declare type OpenChangeHandler = (opened: boolean, event?: default_2.Synt
  * A page list (design/figma-spec.md 10.2): Figma's own accessible model, a one-column grid with
  * one Tab stop. ArrowUp / ArrowDown / Home / End move focus without switching; Enter, Space or a
  * click switches; F2 or a double-click renames when `onRename` is given. A row can carry a second
- * line, a trailing value and a row menu (see PageListItem); ArrowRight moves into the menu. The
+ * line, a trailing value and a row menu (see PageListItem); ArrowRight moves into the menu, and
+ * the menu key or Shift+F10 opens it. The
  * menu's controls are taken out of the Tab order, so the list stays one Tab stop.
  * @param props - Component props
  * @param props.items - The items or pages
@@ -3688,7 +4251,7 @@ export declare interface PageListItem {
      * The row's own control -- usually a "More" button opening a Menu -- drawn after the row in
      * a cell of its own, so a click on it never switches to the page. Name the button after
      * the row ("More for Les Miserables"). ArrowRight on a row moves into it and ArrowLeft
-     * moves back.
+     * moves back; the menu key or Shift+F10 presses it.
      */
     menu?: default_2.ReactNode;
 }
@@ -3830,7 +4393,7 @@ export declare const PANEL_GRID: {
 export declare const PANEL_INK: {
     /** primary text: a field's value, a row's name (#000000e5 / #fff) */
     readonly VALUE: "var(--cm-text)";
-    /** secondary text: glyph labels, unit suffixes, legends (#00000080 / #ffffffb2) */
+    /** secondary text: glyph labels, unit suffixes, legends (#00000080 / #ffffffb2; #0000008c light in the AA mode) */
     readonly CHROME: "var(--cm-text-secondary)";
     /** reading prose (secondary text) */
     readonly PROSE: "var(--cm-text-secondary)";
@@ -3864,11 +4427,11 @@ export declare const PANEL_INK: {
     readonly ACCENT_GRAPHIC: "var(--cm-graphic-brand)";
     /** the white label on the danger, success and inverse fills, which no accent changes */
     readonly ON_SOLID: "var(--cm-text-onsolid)";
-    /** warning (#ffcd29 / #f3c11b) */
+    /** a warning fill, dot or glyph (#ffcd29 / #f3c11b); text uses WARNING_TEXT */
     readonly WARNING: "var(--cm-bg-warning)";
-    /** success (#14ae5c / #198f51) */
+    /** a success fill or dot (#14ae5c / #198f51); text and glyphs use SUCCESS_TEXT */
     readonly SUCCESS: "var(--cm-bg-success)";
-    /** danger (#f24822 / #e03e1a) */
+    /** a danger fill, dot or glyph (#f24822 / #e03e1a); text uses DANGER_TEXT */
     readonly DANGER: "var(--cm-bg-danger)";
     /** a row, tab or tool under the pointer (#f5f5f5 / #383838) */
     readonly HOVER: "var(--cm-bg-hover)";
@@ -3882,6 +4445,12 @@ export declare const PANEL_INK: {
     readonly SELECTED_HOVER: "var(--cm-bg-selected-hover)";
     /** the children of a selected item (#f2f9ff / #32394d) */
     readonly SELECTED_SECONDARY: "var(--cm-bg-selected-secondary)";
+    /** danger text: an error message, a destructive verb (#dc3412 / #fca397; #c4381c light in the AA mode). DANGER is a fill */
+    readonly DANGER_TEXT: "var(--cm-text-danger)";
+    /** warning text (#b86200 / #f7d15f; #a65900 light in the AA mode). WARNING is a fill */
+    readonly WARNING_TEXT: "var(--cm-text-warning)";
+    /** success text and glyphs: a passed check's tick (#009951 / #7cd797; #008043 light in the AA mode). SUCCESS is a fill */
+    readonly SUCCESS_TEXT: "var(--cm-text-success)";
     /** links and brand text (#007be5 / #7cc4f8) */
     readonly BRAND_TEXT: "var(--cm-text-brand)";
     /** tertiary glyphs (#0000004d / #ffffff66) */
@@ -3892,11 +4461,11 @@ export declare const PANEL_INK: {
     readonly TRANSLUCENT: "var(--cm-border-translucent)";
     /** a stronger translucent edge: checkbox, switch track (#00000033 / #ffffff33) */
     readonly TRANSLUCENT_STRONG: "var(--cm-border-translucent-strong)";
-    /** the dark menu surface, the same in both schemes (#1e1e1e) */
+    /** the menu surface: inside a menu it follows the page (#fff / #1e1e1e), elsewhere #1e1e1e */
     readonly MENU: "var(--cm-bg-menu)";
-    /** text on the menu (#fff) */
+    /** text on the menu: inside a menu #000000e5 / #fff, elsewhere #fff */
     readonly ON_MENU: "var(--cm-text-menu)";
-    /** secondary text on the menu: shortcuts (#ffffffb2) */
+    /** secondary text on the menu, shortcuts: inside a menu #00000080 / #ffffffb2 (#0000008c light in the AA mode), elsewhere #ffffffb2 */
     readonly ON_MENU_SECONDARY: "var(--cm-text-menu-secondary)";
     /** component (purple) text (#8638e5 / #d1a8ff) */
     readonly COMPONENT: "var(--cm-text-component)";
@@ -4025,6 +4594,13 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      * choices you present yourself, and use `onClick` to open your own panel.
      */
     data?: ComboboxData;
+    /**
+     * A small picture for each choice in `data`, keyed by the choice's value, drawn before its
+     * name in the open list. A 16 x 16 drawing in `currentColor` fits best. It is decoration:
+     * the choice is still named by its label. To show the chosen one in the closed field too,
+     * pass it as `glyph`.
+     */
+    optionGlyphs?: Readonly<Record<string, default_2.ReactNode>>;
     /**
      * A short unit shown after the value, in the secondary text color, at the
      * end of the same box -- "%", "px" per second, a count of links.
@@ -4224,6 +4800,31 @@ export declare function parseHexaColor(hexa: string): {
  */
 export declare function parseLocaleNumber(text: string, locale: string): number;
 
+/**
+ * Opens the browser's file picker. Call it from a click or key handler: browsers open a picker
+ * only in answer to the reader's own input.
+ * @param options - which files, and whether more than one.
+ * @param options.accept - the files offered, in the `accept` attribute's form.
+ * @param options.multiple - whether the reader may choose more than one.
+ * @returns the chosen files; empty when the reader cancels.
+ * @example
+ * ```ts
+ * const [file] = await pickFiles({ accept: ".csv,.json" });
+ * ```
+ */
+export declare function pickFiles({ accept, multiple }?: PickFilesOptions): Promise<File[]>;
+
+/** Options for `pickFiles` and `useFileDrop`: which files are wanted. */
+export declare interface PickFilesOptions {
+    /**
+     * The files offered, in the `accept` attribute's form: extensions (`.csv`), MIME types
+     * (`text/csv`) and wildcards (`image/*`), comma separated. Every file when unset.
+     */
+    accept?: string;
+    /** Whether the reader may choose more than one file. @default false */
+    multiple?: boolean;
+}
+
 export declare const Popout: typeof PopoutRoot & {
     Trigger: typeof PopoutTrigger;
     Panel: typeof PopoutPanel;
@@ -4614,6 +5215,8 @@ export declare interface PopoutManagerProps {
  * @param props.gap - Gap between the panel and the anchor in pixels; negative values overlap them
  * @param props.actions - Action buttons to display in the header
  * @param props.manageFocus - Whether opening the panel moves focus into it and closing returns it
+ * @param props.boundaryTop - The highest the panel's top may sit, in viewport pixels (below a header)
+ * @param props.contained - Keep the panel across the Popout.Anchor around it, not only the window
  * @param props.onDragStart - Called when the person starts dragging the panel
  * @param props.onDrag - Called on every movement of a drag, with the offset from where the panel opened
  * @param props.onDragEnd - Called when the drag finishes
@@ -4716,6 +5319,19 @@ export declare interface PopoutPanelProps {
      * @default true
      */
     manageFocus?: boolean;
+    /**
+     * The highest the panel's top may sit, in viewport pixels: pass the bottom of an app header
+     * the panel must never cover. The panel is then never taller than the window below it.
+     * @default 0
+     */
+    boundaryTop?: number;
+    /**
+     * Keep the panel across the `Popout.Anchor` around it (a side panel), not only across the
+     * window: a bubble opened from a row near the panel's edge then shifts back over the panel
+     * instead of running past it. Without an anchor around it, the window bounds it as before.
+     * @default false
+     */
+    contained?: boolean;
     /** Called when the person starts dragging the panel by its header. */
     onDragStart?: GestureStartHandler;
     /**
@@ -5067,7 +5683,10 @@ export declare interface QuickAction {
     section?: string;
     /** Extra words the default filter matches. */
     keywords?: readonly string[];
-    /** Shown, but cannot be run or highlighted. */
+    /**
+     * Shown, but cannot be run. The arrow keys still reach it, so its `description` (why it
+     * cannot be run) is read; it is never the first highlight.
+     */
     disabled?: boolean;
     /**
      * A second, dimmed line under the name: why a disabled action cannot be run ("Holds
@@ -5076,6 +5695,10 @@ export declare interface QuickAction {
      * headings).
      */
     description?: string;
+    /** `"component"` draws the name in the component tone (`--cm-text-component`, weight 600). */
+    tone?: "component";
+    /** The option's accessible name, when it is not `label` (a label set off by marks a reader should not hear). */
+    "aria-label"?: string;
 }
 
 /**
@@ -5095,14 +5718,19 @@ export declare interface QuickAction {
  * @param props.searchAction - A trailing action at the right end of the search field
  * @param props.listId - The id of the result list, for a header control to name in `aria-controls`
  * @param props.truncate - Cut a long name at the end or in the middle
+ * @param props.descriptions - Each description under the name or at the end of its line
+ * @param props.emptyText - What an empty list says before any search
+ * @param props.highlight - The action highlighted when the list opens
+ * @param props.activeOnOpen - Whether the first action or no row is active before a search
  * @param props.placeholder - Placeholder of the search field
  * @param props.width - Panel width
  * @param props.height - Panel height
  * @param props.className - Extra class on the panel
  * @param props.style - Extra style on the panel
+ * @param props.role - The panel's role: a dialog alone, a group inside a pop-out
  * @returns The palette
  */
-export declare function QuickActions({ actions, onRun, onClose, query, onQueryChange, filter, header, searchAction, listId: listIdProp, truncate, placeholder, width, height, className, style, ...others }: QuickActionsProps): default_2.JSX.Element;
+export declare function QuickActions({ actions, onRun, onClose, query, onQueryChange, filter, header, searchAction, listId: listIdProp, truncate, descriptions, emptyText, highlight, activeOnOpen, placeholder, width, height, className, style, role, ...others }: QuickActionsProps): default_2.JSX.Element;
 
 /**
  * Props for the QuickActions component.
@@ -5140,6 +5768,12 @@ export declare interface QuickActionsProps {
     listId?: string;
     /** Accessible name of the dialog. Defaults to the "Quick actions" label. */
     "aria-label"?: string;
+    /**
+     * The panel's role. `"dialog"` (the default) for a palette that stands alone; `"group"` for one
+     * placed inside a pop-out, which is already the dialog and names it by its title.
+     * @default "dialog"
+     */
+    role?: "dialog" | "group";
     /** Placeholder of the search field. Defaults to the "Search actions" label. */
     placeholder?: string;
     /**
@@ -5148,6 +5782,34 @@ export declare interface QuickActionsProps {
      * the end. A middle-cut name carries the full name as its tooltip.
      */
     truncate?: "end" | "middle";
+    /**
+     * Where each action's `description` goes: `"below"` (the default) on a dimmed second line
+     * under the name, `"end"` dimmed at the end of the name's line, so every row stays one line
+     * tall (a fact such as "1 to 36" beside a value's name).
+     * @default "below"
+     */
+    descriptions?: "below" | "end";
+    /**
+     * What the list says when there is nothing to list before any search: why it is empty and
+     * where to go instead. Defaults to the "No results" label, which a search with no match
+     * always says.
+     */
+    emptyText?: string;
+    /**
+     * The action highlighted when the list opens, before anything is searched: the value in force,
+     * so Enter keeps it and the arrows start from it. Defaults to the first action that can run.
+     * It is the one row read as "selected": the highlight that moves with the arrows is the active
+     * row (`aria-activedescendant`), never a choice already made.
+     */
+    highlight?: string;
+    /**
+     * Which row is active when the list opens with no `highlight`, and again whenever the search is
+     * emptied: `"first"` (the default) the first action that can run, as Figma's palette does;
+     * `"none"` no row, as a combobox opens, so Enter runs nothing until the reader types or arrows.
+     * Typing always makes the first action that can run active, never a disabled one.
+     * @default "first"
+     */
+    activeOnOpen?: "first" | "none";
     /** Panel width. Default 529 (Figma's, the toolbar's width). */
     width?: number;
     /** Panel height. Default 354. */
@@ -5186,6 +5848,190 @@ export declare interface RailButtonProps extends Omit<UnstyledButtonProps, "chil
     active?: boolean;
 }
 
+/**
+ * A mapping from a value to a look, edited on the value's own axis: the value's histogram with
+ * each bar painted what its values get, handles under the bars for the domain's ends (and a
+ * diverging ramp's midpoint), clamp brackets over the bars with each shaded tail counted, the cut
+ * lines of a stepped ramp, a scale select, a palette select with Reverse, a chit for elements with
+ * no value, and typed fields for the exact numbers.
+ *
+ * It computes nothing about the mapping: pass it the bins, paints, counts and steps of the thing
+ * that will paint (graphty-element's `styles.preview` with `span: "data"`, so the axis stays the
+ * data's extent while the domain moves inside it), and it reports the values the reader
+ * picks. A dragged or arrowed handle lands on an edge between two bins; Home and End reach the
+ * data's ends.
+ * @param props - Component props
+ * @param props.label - what the ramp maps
+ * @param props.bins - the value axis
+ * @param props.domain - the domain's two ends
+ * @param props.onDomainChange - called with a new domain
+ * @param props.midpoint - a diverging ramp's middle value
+ * @param props.onMidpointChange - called with a new midpoint
+ * @param props.clamp - the clamp and the counts beyond it
+ * @param props.onClampChange - called with a new clamp
+ * @param props.step - the smallest move of a handle, such as 1 for whole-number data
+ * @param props.steps - a stepped ramp's cut values
+ * @param props.describe - a handle's value in the reader's terms
+ * @param props.formatValue - formats a value
+ * @param props.scale - the scale set here
+ * @param props.defaultScale - the scale in force when none is set
+ * @param props.scales - the scales offered
+ * @param props.onScaleChange - called with a new scale
+ * @param props.palette - the palette set here
+ * @param props.defaultPalette - the palette in force when none is set
+ * @param props.palettes - the palettes offered
+ * @param props.onPaletteChange - called with a new palette
+ * @param props.unsetText - words an unset scale or palette select shows in place of its default
+ * @param props.reverse - whether the palette runs high to low
+ * @param props.onReverseChange - called with a new reverse
+ * @param props.noValue - elements with no value
+ * @param props.onNoValueChange - called to paint or skip them
+ * @param props.labels - replacement words
+ * @returns the ramp editor
+ * @example
+ * ```tsx
+ * <RampEditor
+ *     label="Node color by degree"
+ *     bins={preview.bins.map((bin) => ({ from: bin.from, to: bin.to, count: bin.count, paint: bin.paints, label: `${bin.from} to ${bin.to}: ${bin.count}` }))}
+ *     domain={domain}
+ *     onDomainChange={setDomain}
+ *     describe={(handle, value) => `${handle === "domainLow" ? "Lowest" : "Highest"} color at degree ${value}`}
+ * />
+ * ```
+ */
+export declare function RampEditor({ label, bins, domain, onDomainChange, midpoint, onMidpointChange, clamp, onClampChange, step, steps, describe, formatValue, scale, defaultScale, scales, onScaleChange, palette, defaultPalette, palettes, onPaletteChange, unsetText, reverse, onReverseChange, noValue, onNoValueChange, labels: overrides, }: Readonly<RampEditorProps>): default_2.JSX.Element;
+
+/** One bin of the value axis, lowest first; the bins are contiguous and drawn at equal width. */
+export declare interface RampEditorBin {
+    /** The lower edge, in the data's units. */
+    from: number;
+    /** The upper edge, in the data's units. */
+    to: number;
+    /** How many elements fall in it. */
+    count: number;
+    /** What the values in it are painted, as a CSS color; the bar is drawn in it. */
+    paint?: string;
+    /** The bin in words for its tooltip and the table of values, such as `"3 to 4: 12 nodes"`. */
+    label: string;
+}
+
+/** Which handle a value or a description belongs to. */
+export declare type RampEditorHandle = "domainLow" | "domainHigh" | "midpoint" | "clampLow" | "clampHigh";
+
+/** The words the editor draws or speaks; English by default. */
+export declare interface RampEditorLabels {
+    /** Each handle's accessible name. */
+    handles: Record<RampEditorHandle, string>;
+    /** The typed fields' names, drawn above them: where the ramp starts and ends, in the data's units. */
+    from: string;
+    to: string;
+    midpoint: string;
+    /** The scale select's name. */
+    scale: string;
+    /** The palette select's name. */
+    palette: string;
+    /** The reverse toggle's name. */
+    reverse: string;
+    /** A clamp tail's count, such as "14 outside". */
+    outside: (count: string) => string;
+    /** The no-value chit, such as "No value: 3". */
+    noValue: (count: string) => string;
+}
+
+/** A palette offered in the palette select, drawn as a strip of its colors. */
+export declare interface RampEditorPalette {
+    /** What is stored when it is picked. */
+    value: string;
+    /** Its name. */
+    label: string;
+    /** Its colors, lowest first, as CSS colors. */
+    stops: string[];
+}
+
+/** Props for the RampEditor component. */
+export declare interface RampEditorProps {
+    /** What the ramp maps, such as `"Node color by degree"`: the histogram's accessible name. */
+    label: string;
+    /** The value axis: the data's bins, lowest first, spanning the data's ends. */
+    bins: RampEditorBin[];
+    /** The domain's two ends, in the data's units. */
+    domain: [number, number];
+    /** Called with the new domain when a domain handle moves or a domain field is typed. */
+    onDomainChange?: (domain: [number, number]) => void;
+    /** A diverging ramp's middle value; absent, no midpoint handle is drawn. */
+    midpoint?: number;
+    /** Called when the midpoint handle moves or its field is typed. */
+    onMidpointChange?: (midpoint: number) => void;
+    /**
+     * The clamp: two values and how many elements lie beyond each. Absent, no brackets are drawn.
+     */
+    clamp?: {
+        low: number;
+        high: number;
+        below: number;
+        above: number;
+    };
+    /** Called when a clamp bracket moves. */
+    onClampChange?: (clamp: [number, number]) => void;
+    /**
+     * The smallest move of a handle, in the data's units: pass 1 for whole-number data (a count, a
+     * rank), so the arrows move 1, 2, 3 and a drag lands on whole numbers. Absent, the arrows move
+     * from one bin edge to the next. Page Up and Page Down move about a tenth of the data either way.
+     */
+    step?: number;
+    /** Where a stepped ramp changes step, in the data's units: drawn as cut lines on the bars. */
+    steps?: number[];
+    /**
+     * A handle's value in the reader's terms, its `aria-valuetext`: "Lowest color at degree 3,
+     * 12th percentile".
+     */
+    describe: (handle: RampEditorHandle, value: number) => string;
+    /** Formats a value for the axis ends and the typed fields. Defaults to the locale's numbers. */
+    formatValue?: (value: number) => string;
+    /**
+     * The scale set here, or undefined when none is (the select then shows `defaultScale` and
+     * offers no reset), and the scales offered (a glyph per scale draws its curve).
+     */
+    scale?: string;
+    /** The scale in force when none is set here. */
+    defaultScale?: string;
+    scales?: {
+        value: string;
+        label: string;
+        glyph?: default_2.ReactNode;
+    }[];
+    /** Called with a picked scale, or undefined when the reader resets it. */
+    onScaleChange?: (scale: string | undefined) => void;
+    /** The palette set here (undefined: none is, as for `scale`), and the palettes offered. */
+    palette?: string;
+    /** The palette in force when none is set here. */
+    defaultPalette?: string;
+    palettes?: RampEditorPalette[];
+    /** Called with a picked palette, or undefined when the reader resets it. */
+    onPaletteChange?: (palette: string | undefined) => void;
+    /**
+     * Words the scale and palette selects show while neither is set here. Given, an unset select
+     * is empty under these words instead of showing `defaultScale` or `defaultPalette` as if it
+     * were chosen, and it is offered even with no default.
+     */
+    unsetText?: string;
+    /** Whether the palette runs high to low. Omit `onReverseChange` to hide the toggle. */
+    reverse?: boolean;
+    onReverseChange?: (reverse: boolean) => void;
+    /**
+     * Elements with no value: how many, and what they are painted (a CSS color), or null when they
+     * are skipped. Absent, the chit is not drawn.
+     */
+    noValue?: {
+        count: number;
+        paint: string | null;
+    };
+    /** Called with true to paint elements with no value, false to skip them. */
+    onNoValueChange?: (paint: boolean) => void;
+    /** Replace any of the English words. */
+    labels?: Partial<RampEditorLabels>;
+}
+
 /**
  * A row that draws a range: two values with the mapping between them drawn
  * in-line, and no sentence anywhere.
@@ -5381,6 +6227,24 @@ export declare interface RampRowProps {
  */
 declare type RampScale = "sqrt" | "linear" | "log";
 
+/**
+ * Mantine's RangeSlider, with the `aria-valuetext` given through `thumbProps` on each thumb.
+ * @param props - Mantine's RangeSlider props
+ * @returns The range slider
+ * @example
+ * ```tsx
+ * <RangeSlider
+ *     min={0}
+ *     max={100}
+ *     thumbProps={(index) => ({ "aria-valuetext": index === 0 ? "Jan 5" : "Feb 3" })}
+ * />
+ * ```
+ */
+export declare const RangeSlider: default_2.ForwardRefExoticComponent<Omit<RangeSliderProps & default_2.RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => default_2.ReactNode;
+}, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
 /**
  * A small chip for a rank: `#6`, where a sentence used to say `Rank 6 of 318`.
  *
@@ -5543,7 +6407,8 @@ export declare interface ResizeHandleProps extends Omit<default_2.ComponentProps
 /**
  * A find result (design/figma-spec.md 10.4): 240 x 52 with a path line, 34 without, padding
  * 8 8 8 16, a 16px glyph, the name at 11/16 with the match at 600 and the path at 10/16 in the
- * secondary color. The current result is blue; hover is gray.
+ * secondary color. The current result is blue; hover is gray. A long name or path ends in "..."
+ * and shows whole in a tooltip on hover; with `lines={2}` each first wraps to a second line.
  *
  * It is an `option`: put the rows in an element with `role="listbox"` and drive them from the
  * search field with `aria-activedescendant` (give each row an `id`), so focus stays in the
@@ -5567,8 +6432,19 @@ export declare interface ResultRowProps extends Omit<default_2.HTMLAttributes<HT
     icon?: default_2.ReactNode;
     /** The current result (blue fill; `aria-selected`). */
     current?: boolean;
+    /**
+     * For a list the reader picks several results from, one at a time: whether this result is
+     * already picked. A picked row shows a check at its end and is `aria-selected` too; only the
+     * current row is filled blue.
+     */
+    picked?: boolean;
     /** `"component"`: both lines and the glyph in the component (purple) color. */
     tone?: "default" | "component";
+    /**
+     * How many lines the name and the path each take before they end in "...": 1 (the default)
+     * or 2, for results whose words are read whole rather than scanned, such as a sentence.
+     */
+    lines?: 1 | 2;
 }
 
 /** The rows and columns of the matrix, top to bottom and left to right. */
@@ -5600,8 +6476,8 @@ export declare interface ScrollAreaProps extends ScrollAreaProps_2 {
  * button once there is text, and a focus ring drawn flush with the field that lingers 100ms after
  * focus leaves.
  *
- * Escape clears the text; with nothing to clear it is left to bubble, so an enclosing popover
- * can close. `autoFocus` is off by default: Figma focuses its search fields when their panel
+ * Escape clears the text, in the field or on its clear button; with nothing to clear it is left
+ * to bubble, so an enclosing popover can close. `autoFocus` is off by default: Figma focuses its search fields when their panel
  * opens, and whether that is right is the caller's decision.
  * @example
  * ```tsx
@@ -5704,7 +6580,8 @@ declare function SecondaryToolbarRoot({ flush, children, className, onKeyDown, o
  * wrapper with only a description or an error leaves `aria-labelledby`
  * pointing at no element. Browsers skip a missing id and fall back to any
  * `aria-label`, so give the control one in that case.
- * @param props - Mantine's SegmentedControl props
+ * @param props - Mantine's SegmentedControl props, and its name
+ * @param props.label - The control's name, for a `FieldRow` caption and its accessible name
  * @returns The segmented control
  * @example
  * ```tsx
@@ -5713,7 +6590,13 @@ declare function SecondaryToolbarRoot({ flush, children, className, onKeyDown, o
  * </Input.Wrapper>
  * ```
  */
-export declare function SegmentedControl(props: default_2.ComponentProps<typeof SegmentedControl_2>): default_2.JSX.Element;
+export declare function SegmentedControl({ label, ...props }: default_2.ComponentProps<typeof SegmentedControl_2> & {
+    /**
+     * The control's name: its accessible name outside an `Input.Wrapper`, and the caption a
+     * `FieldRow` draws for it while labels are shown, as it does for a `PanelField`.
+     */
+    label?: string;
+}): default_2.JSX.Element;
 
 /** One shortcut: what it does and the keys that do it. */
 export declare interface ShortcutEntry {
@@ -5793,6 +6676,16 @@ export declare interface ShortcutSheetTab {
     caption?: default_2.ReactNode;
 }
 
+/**
+ * Mantine's Slider, with the `aria-valuetext` given through `thumbProps` on its thumb.
+ * @param props - Mantine's Slider props
+ * @returns The slider
+ */
+export declare const Slider: default_2.ForwardRefExoticComponent<Omit<SliderProps & default_2.RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => default_2.ReactNode;
+}, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
 /**
  * The same chart at half the height, for a series rather than a distribution.
  *
@@ -5920,6 +6813,29 @@ export declare interface SplitButtonProps extends BoxProps, ElementProps<"div",
     menuProps?: Omit<MenuProps, "children">;
 }
 
+/**
+ * The editor's status bar: a 24px row along the bottom of the window, with a start and an end
+ * slot, for state the reader reads but does not act on (saved, offline, counts).
+ *
+ * The bar is not a live region itself: a child whose changes should be announced carries its own
+ * `role="status"`, so only that child is read out when it changes.
+ * @example
+ * ```tsx
+ * <StatusBar left={<AutosaveChip />} right={<PrivacyChip />} />
+ * ```
+ * @param props - see StatusBarProps.
+ * @returns the status bar.
+ */
+export declare function StatusBar(props: Readonly<StatusBarProps>): default_2.JSX.Element;
+
+/** Props for StatusBar. Every other div attribute is passed to the bar. */
+export declare interface StatusBarProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What sits at the bar's start: status chips, counts. */
+    left?: default_2.ReactNode;
+    /** What sits at the bar's end. */
+    right?: default_2.ReactNode;
+}
+
 /**
  * Swatches with alpha channel for HEXA color pickers.
  * Includes both fully opaque (FF) and semi-transparent (80) variants.
@@ -5938,6 +6854,7 @@ export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#6
  * @param props.withCloseButton - Show the dismiss X
  * @param props.onClose - Called when the dismiss X is pressed
  * @param props.closeLabel - The dismiss button's accessible name
+ * @param props.alert - Whether the message is its own alert
  * @returns The toast
  */
 export declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLDivElement>>;
@@ -5988,6 +6905,12 @@ export declare interface ToastProps extends Omit<NotificationProps, "children" |
     onClose?: () => void;
     /** The dismiss button's accessible name. @default "Dismiss" */
     closeLabel?: string;
+    /**
+     * Whether the message is its own alert. Set it to false when the caller speaks the message
+     * itself, through a status line already on the page, so it is said once and politely.
+     * @default true
+     */
+    alert?: boolean;
 }
 
 /**
@@ -6052,8 +6975,14 @@ export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "va
     defaultChecked?: boolean;
     /** Called with the new state when the toggle flips. */
     onChange?: (checked: boolean) => void;
-    /** The accessible name, and the tooltip text. */
+    /** The accessible name, and the tooltip text unless `tooltip` gives other words. */
     label: string;
+    /**
+     * The tooltip's words when they differ from the accessible name: a row's eye can say "Turn
+     * this layer off" while its name keeps the row's own name, so a list of eyes stays tellable
+     * apart by a screen reader. @default label
+     */
+    tooltip?: string;
     /** The glyph. */
     icon: ReactNode;
     /** The glyph drawn while on, for a `swap` toggle (eye / eye closed). */
@@ -6469,6 +7398,13 @@ export declare interface ToolbarProps extends BoxProps, ElementProps<"div"> {
      * to position the toolbar yourself.
      */
     floating?: boolean;
+    /**
+     * Where Tab first lands in the toolbar: the selected tool ("pressed", the default, for a tool
+     * palette whose pressed button is the current tool) or the first item ("first", for a bar of
+     * commands and toggles, where a pressed toggle is not where the reader starts). After that,
+     * Tab returns to the item that last had focus.
+     */
+    startAt?: "pressed" | "first";
     /** Tool groups, tool buttons, dividers and a mode switch. */
     children?: default_2.ReactNode;
 }
@@ -6478,10 +7414,11 @@ export declare interface ToolbarProps extends BoxProps, ElementProps<"div"> {
  * 200 elevation, holding tool buttons, tool groups with flyouts, dividers and a
  * `SegmentedControl variant="toolbar"` mode switch.
  *
- * It is one Tab stop: focus lands on the selected tool, and ArrowLeft / ArrowRight / Home / End
- * move between tools, chevrons and the mode radios.
+ * It is one Tab stop: focus lands on the selected tool (or the first item, `startAt="first"`),
+ * and ArrowLeft / ArrowRight / Home / End move between tools, chevrons and the mode radios.
  * @param props - Component props
  * @param props.floating - Pin the toolbar to the bottom center of the window
+ * @param props.startAt - Where Tab first lands: the selected tool or the first item
  * @param props.children - Tool groups, tool buttons, dividers and a mode switch
  * @param props.className - Extra class on the root
  * @param props.onKeyDown - Called before the roving-focus key handling
@@ -6496,7 +7433,7 @@ export declare interface ToolbarProps extends BoxProps, ElementProps<"div"> {
  * </Toolbar>
  * ```
  */
-declare function ToolbarRoot({ floating, children, className, onKeyDown, onFocus, ...others }: ToolbarProps): default_2.JSX.Element;
+declare function ToolbarRoot({ floating, startAt, children, className, onKeyDown, onFocus, ...others }: ToolbarProps): default_2.JSX.Element;
 
 /**
  * A 32 x 32 toolbar tool (Figma's toolbelt button): transparent at rest, `--cm-bg-hover` under the
@@ -6541,7 +7478,7 @@ export declare interface ToolButtonProps extends Omit<UnstyledButtonProps, "chil
 
 /**
  * A tool and its flyout (Figma's tool group): the face is the LAST tool picked from the flyout,
- * and a 16 x 32 chevron 1px after it opens a dark menu 4px above, start-aligned to the chevron,
+ * and a 16 x 32 chevron 1px after it opens a menu 4px above, start-aligned to the chevron,
  * whose rows are radios with a check on the current face. Picking a row selects the tool, makes
  * it the face and closes the menu.
  * @param props - Component props
@@ -6657,18 +7594,22 @@ export declare interface TrailingSlotProps {
  * The tree renders; the caller owns the data. Selection and expansion are controlled or
  * uncontrolled; renaming and moving are reported through `onRename` and `onMove`.
  *
- * Keyboard (one Tab stop, roving focus): ArrowUp / ArrowDown move; ArrowRight opens a closed
+ * Keyboard (one Tab stop, roving focus; a row's own toggles are not Tab stops): ArrowUp / ArrowDown move; ArrowRight opens a closed
  * parent or moves to its first child; ArrowLeft closes an open parent or moves to the parent;
  * Home / End; type-ahead; Enter or Space selects (Shift extends, Control / Command toggles); `*`
  * opens every sibling; F2 renames; Alt+L closes everything; with `onMove`, Alt+ArrowUp /
- * Alt+ArrowDown move the focused item one place among its siblings. `onRowKeyDown` sees every
- * key first and can claim one with `preventDefault()`.
+ * Alt+ArrowDown move the focused item one place among its siblings or into the folder next to
+ * it, and Alt+ArrowLeft moves it out of its folder. `onRowKeyDown` sees every key first and can
+ * claim one with `preventDefault()`.
  * Row toggles (`actions`) are out of the Tab order: ArrowRight on a row without children, or
  * Alt+ArrowRight on any row, focuses the row's first toggle; there ArrowLeft / ArrowRight walk the
  * toggles, Enter / Space press one, ArrowLeft on the first or Escape returns to the row, and
  * ArrowUp / ArrowDown go to the row above or below.
- * Pointer: click selects (Shift range, Control / Command toggle); the caret opens one row;
- * double-click renames; drag a row to move it.
+ * Pointer: click selects (Shift range, Control / Command toggle); a right-click on a row that is
+ * not selected selects it alone before its menu opens; the caret opens one row;
+ * double-click renames; drag a row to move it (a mouse or pen after 4px of movement, a finger
+ * after holding the row half a second; a quicker swipe scrolls). Escape cancels a drag, and the
+ * list scrolls when a drag nears its edge.
  * @param props - Component props
  * @param props.items - The items or pages
  * @param props.label - The accessible name
@@ -6679,12 +7620,20 @@ export declare interface TrailingSlotProps {
  * @param props.defaultExpanded - Expanded ids to start with
  * @param props.onExpandedChange - Called with the expanded ids
  * @param props.multiselect - Allow several selected rows
+ * @param props.checkboxes - A checkbox per row, and plain clicks that add or take out a row
  * @param props.onRename - Called with a new name; turns renaming on
+ * @param props.renaming - The row being renamed (controlled)
+ * @param props.onRenamingChange - Called when a rename opens or closes
  * @param props.onMove - Called when a row is dropped somewhere new or moved from the keyboard
  * @param props.stickyRoots - Pin expanded top-level rows while scrolling
+ * @param props.revealSelected - Open the folders around a newly selected row and scroll it into view
+ * @param props.restingId - The row in the Tab order while none is focused or selected
  * @param props.height - The scrolling height when virtualized
  * @param props.renameLabel - The rename field's accessible name
  * @param props.onRowKeyDown - Called first for a key pressed on a focused row; preventDefault claims it
+ * @param props.canDrop - Where an item may land
+ * @param props.rowMenu - The row's context menu
+ * @param props.childBand - Band a selected parent's children (default true)
  * @returns The tree
  * @example
  * A row with a swatch, a count, a running line and its state in words, and a row shortcut.
@@ -6700,7 +7649,7 @@ export declare interface TrailingSlotProps {
  * />
  * ```
  */
-export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, onRowKeyDown, }: TreeProps): default_2.JSX.Element;
+export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, checkboxes, onRename, renaming: renamingProp, onRenamingChange, onMove, stickyRoots, height, renameLabel, onRowKeyDown, canDrop, rowMenu, childBand, revealSelected, restingId, }: TreeProps): default_2.JSX.Element;
 
 /**
  * One row of a layer tree, as Figma draws it (design/figma-spec.md 10.1): 32 tall, a 16px caret
@@ -6741,7 +7690,8 @@ export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTM
     strong?: boolean;
     /**
      * The trailing toggles, revealed on hover or focus. Inside a Tree they are out of the Tab
-     * order and reached with ArrowRight (see Tree).
+     * order and reached with ArrowRight (see Tree). A toggle marked `data-at-rest` is drawn on
+     * every row at rest too (a layers panel's eye).
      */
     actions?: default_2.ReactNode;
     /** 1-based position among its siblings, for assistive technology. */
@@ -6756,8 +7706,14 @@ export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTM
     progress?: number | "indeterminate";
     /** The row's state in words, read after its name. See TreeNodeData.description. */
     description?: string;
+    /** Draw the description as a second line. See TreeNodeData.descriptionVisible. */
+    descriptionVisible?: boolean;
     /** Drawn in place of the name, e.g. an InlineRename. */
     nameSlot?: default_2.ReactNode;
+    /** Draw a checkbox that shows `selected`, before the glyph (the Tree's `checkboxes` mode). */
+    checkbox?: boolean;
+    /** The checkbox reads "some": a row inside this one is selected while this one is not. */
+    partlySelected?: boolean;
     /** Called when the caret is clicked. */
     onExpandToggle?: (event: default_2.MouseEvent) => void;
 }
@@ -6805,7 +7761,7 @@ export declare interface TreeNodeData {
     /**
      * The row's trailing toggles (lock, eye): the caller's own controls. They stay hidden until
      * the row is hovered or focused; a control with `aria-pressed="true"`, `aria-checked="true"`
-     * or `data-pinned` stays visible. A click on passive text here (nothing focusable) counts as a
+     * or `data-pinned` or `data-at-rest` stays visible. A click on passive text here (nothing focusable) counts as a
      * click on the row. Their focusable controls are out of the Tab order: the keyboard reaches
      * them with ArrowRight on a row without children or Alt+ArrowRight on any row (see Tree).
      */
@@ -6818,6 +7774,9 @@ export declare interface TreeNodeData {
     /**
      * A count drawn before the toggles in the secondary ink, always visible (the toggles hide
      * until hover). It joins the row's accessible description, so it is heard as well as seen.
+     * Pass a row's quiet text here (a count, a fill, a filter's outcome): it stays whole until
+     * it would take more than half the row, and while the name or the count is cut short, the
+     * name's tooltip shows both.
      */
     count?: default_2.ReactNode;
     /**
@@ -6833,6 +7792,18 @@ export declare interface TreeNodeData {
      * too.
      */
     description?: string;
+    /**
+     * Draw `description` as a second line under the name, in the secondary ink, instead of only
+     * reading it; the row grows from 32 to 44. For a state the reader must see beside a long
+     * name (a filter step's "77 to 26 nodes", "off") where a count would cut the name. Default
+     * false.
+     */
+    descriptionVisible?: boolean;
+    /**
+     * Whether the item can be picked up and moved (a drag, Alt+ArrowUp / Alt+ArrowDown).
+     * Default true. Where an item may land is `Tree`'s `canDrop`.
+     */
+    movable?: boolean;
 }
 
 /**
@@ -6857,16 +7828,32 @@ export declare interface TreeProps {
     onExpandedChange?: (ids: string[]) => void;
     /** Allow several selected rows (Shift and Control/Command). Default true. */
     multiselect?: boolean;
+    /**
+     * Draw a checkbox on every row, and let a plain click, Enter or Space add a row to the
+     * selection or take it out, with no modifier key: the way to select several rows by touch.
+     * Needs `multiselect`.
+     */
+    checkboxes?: boolean;
     /**
      * Called with a new name. Giving it turns on renaming: F2 or a double-click opens an
      * InlineRename in place of the name.
      */
     onRename?: (id: string, name: string) => void;
     /**
-     * Called when a row is dropped somewhere new, or moved one place among its siblings with
-     * Alt+ArrowUp / Alt+ArrowDown. `index` counts the new parent's children with the moved item
-     * already removed. Giving it makes rows draggable and turns on the keyboard move; the tree
-     * never moves data itself, and focus stays on the moved item once the caller has moved it.
+     * The id of the row whose name is being edited (controlled), or null. Lets a caller open the
+     * rename from elsewhere -- a menu's Rename -- or refuse one for a row that cannot be renamed.
+     */
+    renaming?: string | null;
+    /** Called when a rename opens (F2, a double-click) or closes, with the row's id or null. */
+    onRenamingChange?: (id: string | null) => void;
+    /**
+     * Called when a row is dropped somewhere new, moved from the keyboard, or moved by a row
+     * menu's `moveTo`. Alt+ArrowUp / Alt+ArrowDown move the focused item one place among its
+     * siblings, or into the neighboring folder (its last child going up, its first going down);
+     * Alt+ArrowLeft moves it out of its folder to just after it. `index` counts the new parent's
+     * children with the moved item already removed. Giving it makes rows draggable and turns on
+     * the keyboard move; the tree never moves data itself, focus stays on the moved item once
+     * the caller has moved it, and a live region says where it went (`labels.treeMoved`).
      */
     onMove?: (move: TreeMove) => void;
     /** Keep an expanded top-level row pinned while its children scroll (not while virtualized). */
@@ -6882,6 +7869,50 @@ export declare interface TreeProps {
      * eye, Delete to delete the row.
      */
     onRowKeyDown?: (id: string, event: default_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Where an item may land. Called with each move a drag or Alt+Arrow would report; a `false`
+     * means no drop there (no drop line, no `onMove`). Pair it with `TreeNodeData.movable` for
+     * items that never move at all.
+     */
+    canDrop?: (move: TreeMove) => boolean;
+    /**
+     * The row's context menu: its `Menu.Item` rows (see ContextMenu), or null for a row with
+     * none. It opens on a right-click, Shift+F10 or the ContextMenu key, and a touch held still
+     * for half a second, always for the row it happened on. `actions.moveTo` moves the row, so a
+     * menu can offer "Move to folder".
+     */
+    rowMenu?: (node: TreeNodeData, actions: TreeRowActions) => default_2.ReactNode;
+    /**
+     * Draw a band behind a selected, expanded parent's children (Figma's look). Default true. Pass
+     * false when selecting a parent never selects its children, so the band would read as a
+     * selection: the parent then draws like any selected row and its children stay plain.
+     */
+    childBand?: boolean;
+    /**
+     * When the selection changes from outside the tree (the caller opened a row from elsewhere),
+     * open the folders around each selected row and scroll the first one into view, so the row
+     * shown is the row marked. A folder the reader closes afterwards stays closed. Default false.
+     */
+    revealSelected?: boolean;
+    /**
+     * The row in the Tab order while no row is focused or selected, so Tab into the tree lands
+     * there. Default: the first row.
+     */
+    restingId?: string;
+}
+
+/**
+ * What a row menu can ask the tree to do for its row (see `TreeProps.rowMenu`).
+ */
+export declare interface TreeRowActions {
+    /**
+     * Move the row into a folder (an item with a `children` array), or to the top level with
+     * `null`, at `index` among that folder's children (default 0, the first). The tree checks the
+     * move as it checks a drop (`movable`, `canDrop`, never into the row's own subtree), reports it
+     * through `onMove`, opens the folder, keeps focus on the row and announces where it went.
+     * Returns false, doing nothing, for a move it refuses.
+     */
+    moveTo: (parentId: string | null, index?: number) => boolean;
 }
 
 /**
@@ -6915,7 +7946,7 @@ export declare function UiGlyph({ name, size }: UiGlyphProps): default_2.JSX.Ele
  * Shared UI glyphs: the chevrons, the doors and the status marks the row types
  * draw outside a field's slot.
  */
-export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft" | "close" | "plus" | "minus" | "gear" | "warning" | "check" | "eye" | "refresh" | "copy" | "pin" | "keepOpen" | "info" | "reset" | "caretDown" | "caretRight" | "dash" | "eyeClosed" | "lock" | "unlock" | "search" | "settings" | "link" | "unlink" | "eyedropper" | "rotate" | "flipHorizontal" | "flipVertical" | "alignLeft" | "alignCenterH" | "alignRight" | "alignTop" | "alignCenterV" | "alignBottom" | "more" | "help" | "frame" | "rectangle" | "ellipse" | "text" | "component" | "group";
+export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft" | "close" | "plus" | "minus" | "gear" | "warning" | "check" | "eye" | "refresh" | "copy" | "pin" | "keepOpen" | "info" | "reset" | "caretDown" | "caretRight" | "dash" | "eyeClosed" | "lock" | "unlock" | "search" | "settings" | "link" | "unlink" | "eyedropper" | "rotate" | "flipHorizontal" | "flipVertical" | "alignLeft" | "alignCenterH" | "alignRight" | "alignTop" | "alignCenterV" | "alignBottom" | "more" | "help" | "frame" | "rectangle" | "ellipse" | "text" | "component" | "group" | "upload";
 
 /**
  * Props for the UiGlyph component.
@@ -6968,6 +7999,35 @@ export declare function useCollator(options?: Intl.CollatorOptions): Intl.Collat
  */
 export declare function useDirection(): Direction;
 
+/**
+ * Takes files dropped on an element, or anywhere in the window.
+ *
+ * A drop on a nested target is taken by the innermost one: the hook marks the drop handled
+ * (`preventDefault`) and every outer hook, including a `"window"` one, leaves a handled drop alone.
+ * A drop with no accepted file still stops the browser from opening the file in the tab.
+ * @param target - the element that takes the drop, or `"window"` for the whole page.
+ * @param onFiles - called with the accepted files of each drop (never empty).
+ * @param options - which files, and whether dropping is off.
+ * @returns whether files are being dragged over the target.
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * const { over } = useFileDrop(ref, (files) => open(files), { accept: ".csv" });
+ * <div ref={ref} data-over={over || undefined}>...</div>
+ * ```
+ */
+export declare function useFileDrop(target: RefObject<HTMLElement | null> | "window", onFiles: (files: File[]) => void, options?: UseFileDropOptions): FileDropState;
+
+/** Options for `useFileDrop`. */
+export declare interface UseFileDropOptions {
+    /** The files taken, in the `accept` attribute's form (`.csv,text/*`). Every file when unset. */
+    accept?: string;
+    /** Whether only the first accepted file of a drop is taken. @default false (every file) */
+    single?: boolean;
+    /** Whether dropping is off. The browser then handles a drop as it would without the hook. */
+    disabled?: boolean;
+}
+
 /**
  * Reads this library's strings.
  *
@@ -7081,7 +8141,8 @@ export declare function useToast(): ToastApi;
  *
  * In a number field the value becomes a 20px pill (`--cm-bg`, 1px `--cm-border`, radius 5) after
  * the field's 24px glyph slot; hovering the pill shows the variable's name and value, and
- * hovering the field shows a 16px Detach button at its end. With `swatch` it is the bound fill
+ * hovering the field shows a 16px Detach button at its end. The tooltip opens above the field, so
+ * a line under it (the values it reads, a message) stays in view. With `swatch` it is the bound fill
  * row: one 156 x 24 button with a 14px chit and the name, which gains a 24px Detach button on
  * hover. `kind="property"` draws the component-property chip.
  *
@@ -7103,6 +8164,11 @@ export declare interface VariablePillProps {
     name: string;
     /** The variable's resolved value, shown in the pill and in its tooltip ("4"). */
     value?: string;
+    /**
+     * The tooltip's words, when they are not the name and the value: a name set off by marks in
+     * the pill reads without them here. Lines break at "\n". @default the name, then the value
+     */
+    tooltip?: string;
     /**
      * Called by the Detach (broken link) button, which appears while the field is hovered or
      * focused. Without it there is no Detach button.
@@ -7115,17 +8181,30 @@ export declare interface VariablePillProps {
      * a 14px chit and the variable's name.
      */
     swatch?: string;
+    /**
+     * The swatch's width in pixels, so a bound color can show its colors at rest: a ramp as a
+     * strip, or several category colors side by side. @default 14, a square chit
+     */
+    swatchWidth?: number;
     /**
      * `"variable"` (default) or `"property"`: a layer property bound to a component property,
      * drawn as a chip on the component tint.
      */
     kind?: "variable" | "property";
-    /** A 24px leading slot for the bound number field: the field's glyph or letter. */
+    /**
+     * A 24px leading slot for the bound number field: the field's glyph or letter. Left out, the
+     * pill starts at the field's edge.
+     */
     glyph?: default_2.ReactNode;
     /** The field's width. @default 88 for a number field, 156 for a fill row */
     width?: number | string;
     /** The Detach button's accessible name. @default "Detach variable" */
     detachLabel?: string;
+    /**
+     * The pill's (or the fill row's) accessible name, when the field it sits in is not named by
+     * anything else: "Node size: Degree rank, 1 to 3". Left out, it is the variable and its value.
+     */
+    "aria-label"?: string;
     /**
      * Makes the rest of a bound number field editable, as in Figma: typing after the pill and
      * pressing Enter (or leaving the field) reports the text, and the caller replaces the binding
@@ -7135,6 +8214,13 @@ export declare interface VariablePillProps {
     onValueCommit?: ChangeHandler<string>;
     /** The accessible name of the input after the pill. @default "Value" */
     valueLabel?: string;
+    /**
+     * `"component"` draws the name in the component tone (`--cm-text-component`, weight 600), so
+     * a name that is not a variable's ("from each layer") stands apart. @default the field's ink
+     */
+    tone?: "component";
+    /** The id of an element that describes the pill (or the fill row) further. */
+    "aria-describedby"?: string;
     /** Extra class on the outer element. */
     className?: string;
     /** Extra style on the outer element. */