@graphty/compact-mantine 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -49,6 +49,7 @@ import { VariantColorsResolver } from '@mantine/core';
  * @param props.actions - Controls that act, hidden until the row is hovered or focused, and always drawn where the pointer cannot hover
  * @param props.residentActions - Controls that report a state, which are never hidden
  * @param props.actionsVisible - Forces the hidden controls shown or hidden instead of letting hover and focus decide
+ * @param props.disabled - Whether the row cannot act, which draws its reading at the disabled ink and announces it as unavailable
  * @param props.onClick - Called when the row's own reading is activated, with the event and the activation source
  * @param props.onFocus - Called when focus enters the row or moves between its controls
  * @param props.onBlur - Called when focus leaves a control in the row
@@ -139,6 +140,18 @@ export declare interface ActionRowProps {
      * scan a column for.
      */
     residentActions?: default_2.ReactNode;
+    /**
+     * Whether this row cannot act, and says so by being drawn dimmer.
+     *
+     * It is the row half of the "not built yet" group form: where three or more
+     * contiguous rows share that status the tag rises once to the group header and the
+     * rows below are "dimmed and disabled instead of tagged individually". The reading
+     * then takes the disabled ink -- a different token from the ordinary muted one --
+     * and the row is announced as unavailable, so nothing about the state depends on
+     * telling two greys apart.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Forces `actions` to be drawn, or forces them hidden, instead of letting
      * the row decide from hover and focus.
@@ -423,9 +436,11 @@ export declare const COMPACT_SIZING: {
  * @param props.defaultOpacity - The opacity shown while the reader has set none of their own
  * @param props.onColorChange - Called with the new colour, 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 colour, whichever of them moved
  * @param props.label - The field's name, drawn above the control and used to name the group
  * @param props.showOpacity - Whether to offer an opacity box beside the colour
  * @param props.disabled - Whether the control cannot be used at all
+ * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
  * @param props.onFocus - Called when the hex box or the opacity box takes focus
  * @param props.onBlur - Called when the hex box or the opacity box loses focus
  * @returns The joined colour control, and its reset button when something has been set
@@ -443,7 +458,7 @@ export declare const COMPACT_SIZING: {
  * </PopoutManager>
  * ```
  */
-export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, label, showOpacity, disabled, onFocus, onBlur, }: CompactColorInputProps): default_2.JSX.Element;
+export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, onChange, label, showOpacity, disabled, disabledReason, onFocus, onBlur, }: CompactColorInputProps): default_2.JSX.Element;
 
 /**
  * Props for the CompactColorInput component.
@@ -486,6 +501,46 @@ export declare interface CompactColorInputProps {
      * The percentage comes first; the event that caused the change is second.
      */
     onOpacityChange?: ChangeHandler<number | undefined>;
+    /**
+     * Called once per gesture with BOTH halves of the colour, whichever of them
+     * moved.
+     *
+     * Reach for this one, alone, whenever you drive the control from your own
+     * state. `onColorChange` and `onOpacityChange` are kept for call sites that
+     * already use them, but they cannot carry a gesture that moves both halves
+     * at once.
+     *
+     * THE DEFECT THIS REPAIRS, reproduced at runtime rather than reasoned
+     * about: dragging in the picker used to call `onColorChange` and then
+     * `onOpacityChange` back to back inside one React batch. A controlled
+     * consumer builds its next state out of the props it is holding -- the only
+     * snapshot it has -- and both callbacks run against the SAME pre-gesture
+     * snapshot, so the second one writes a state rebuilt from a colour the
+     * first one had already replaced. A test in this package
+     * (tests/components/CompactColorInput.test.tsx, "the two separate callbacks
+     * cannot carry one gesture") drives a picker swatch and watches the second
+     * write arrive as `{opacity: 50}` with the new colour gone. The application
+     * had already forked this whole component to escape it.
+     *
+     * Both halves are always passed, so a consumer never has to remember which
+     * one moved -- the same shape `GradientEditor` already uses for its stops
+     * and its direction. `undefined` keeps its meaning from the props: the
+     * reader has chosen nothing for that half and the default is showing.
+     *
+     * Supplying this ALONGSIDE `onColorChange` or `onOpacityChange` makes every
+     * gesture write twice. Pick one route.
+     * @example
+     * ```tsx
+     * <CompactColorInput
+     *     label="Fill"
+     *     color={style.color}
+     *     opacity={style.opacity}
+     *     defaultColor="#5B8FF9"
+     *     onChange={(color, opacity) => { setStyle({...style, color, opacity}); }}
+     * />
+     * ```
+     */
+    onChange?: (color: string | undefined, opacity: number | undefined, event?: default_2.SyntheticEvent) => void;
     /**
      * The field's name, drawn above the control and used to name the group the
      * three controls sit in.
@@ -509,6 +564,22 @@ export declare interface CompactColorInputProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the control is off, shown only while `disabled`
+     * is true.
+     *
+     * It is appended to the control's own name after a full stop and drawn as
+     * the tooltip -- "Glow colour. Glow is not drawn yet" -- and it also joins
+     * the accessible description of the swatch, the hex box and the opacity
+     * box, so the reason reaches a pointer user and a screen reader user alike.
+     * With no `label` to append to, the sentence stands on its own.
+     *
+     * THE DEFECT THIS REPAIRS: a disabled colour control used to be dimmed and
+     * silent, so a reader who could not open the picker had no route at all to
+     * learning why -- spec:6641 asks for the one reason to travel with the
+     * disabled ink, and until now this component had nowhere to put it.
+     */
+    disabledReason?: string;
     /** Called when the hex box or the opacity box takes focus. Forwarded unchanged. */
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /**
@@ -889,8 +960,8 @@ export declare const compactThemeOverride: {
     } | undefined;
     radius?: {
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
@@ -899,40 +970,40 @@ export declare const compactThemeOverride: {
     spacing?: {
         [x: number]: string | undefined;
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     fontSizes?: {
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     lineHeights?: {
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     breakpoints?: {
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     shadows?: {
         [x: string & {}]: string | undefined;
-        xs?: string | undefined;
         sm?: string | undefined;
+        xs?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
@@ -1274,6 +1345,7 @@ export declare interface ControlGroupProps {
  * section is correct in either direction with nothing to configure.
  * @param props - Component props
  * @param props.label - The section's name, drawn in its header
+ * @param props.technicalName - The technical half of the 6.3 pair, drawn in the secondary ink inside the same label
  * @param props.opened - Whether the section is expanded, when you drive it from your own state
  * @param props.defaultOpened - Whether the section starts expanded when it keeps its own state, defaulting to true
  * @param props.onOpenChange - Called when the section expands or collapses, with the new state first and the event second
@@ -1312,6 +1384,16 @@ export declare function ControlSection(props: ControlSectionProps): default_2.JS
 export declare interface ControlSectionProps extends DisclosureProps {
     /** The section's name, drawn in its header. One to three words, sentence case. */
     label: string;
+    /**
+     * The technical name for the same thing, WITHOUT its parentheses -- `"Layout"`
+     * beside `"Arrangement"`, `"Node and edge table"` beside `"Data table"`.
+     *
+     * One drawing only: plain name, space, technical name in parentheses in the
+     * secondary ink, inside this one label. It joins the header's tooltip and the
+     * group's accessible name as well, so the pair is never something only a pointer
+     * can reach.
+     */
+    technicalName?: string;
     /**
      * Whether the section holds settings the reader changed from their
      * defaults. A 6px accent dot follows the name, announced to a screen reader
@@ -2680,6 +2762,7 @@ export declare interface IconGroupOption {
  * @param props.labelledBy - The `id` of the element that already names the group
  * @param props.name - The name shared by the group's radio inputs
  * @param props.disabled - Whether the whole group cannot be used
+ * @param props.disabledReason - One sentence saying why the group is off, drawn only while it is off
  * @param props.hybrid - Draw the word beside the drawing on the selected option only
  * @param props.width - How wide the track is drawn, or `"fill"` to take the rest of the row
  * @param props.trailing - The row's 24px trailing slot
@@ -2757,6 +2840,23 @@ export declare interface IconGroupRowProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the whole group is off, shown only while
+     * `disabled` is true.
+     *
+     * It is appended to the group's own name after a full stop and drawn as the
+     * row's tooltip -- "Node shape. Load data first" -- and it joins the
+     * group's accessible description, so the reason reaches a pointer user and
+     * a screen reader user alike. With no `label` to append to, the sentence
+     * stands on its own.
+     *
+     * It says nothing about one option: a single unavailable choice is
+     * `disabled` on that option, and its own word still names it. THE DEFECT
+     * THIS REPAIRS: a whole group drawn dimmed with no explanation reads as a
+     * broken control, which is what spec:6641 forbids -- and until now this row
+     * had nowhere to put the one reason.
+     */
+    disabledReason?: string;
     /**
      * Draw the word beside the drawing on the selected option only.
      *
@@ -3789,6 +3889,15 @@ export declare interface PopoutContextValue {
      * everything opened from it.
      */
     parentId: string | null;
+    /**
+     * The region this pop-out was opened in, or null when it sits in no region.
+     *
+     * Root-level pop-outs compete for one open slot per region, so a pop-out
+     * opened in a panel and one opened in an inspector can both be open while
+     * two opened in the same panel cannot. It is the opener's region, not the
+     * panel's screen position.
+     */
+    region: string | null;
 }
 
 /**
@@ -3883,8 +3992,11 @@ export declare function PopoutManager({ children }: PopoutManagerProps): JSX.Ele
  * out of `Popout` never needs it.
  */
 export declare interface PopoutManagerContextValue {
-    /** Adds a pop-out to the layer, with the callback that closes it and the pop-out it was opened from. */
-    register: (id: string, closeCallback: () => void, parentId?: string | null) => void;
+    /**
+     * Adds a pop-out to the layer, with the callback that closes it, the pop-out
+     * it was opened from, and the region it was opened in.
+     */
+    register: (id: string, closeCallback: () => void, parentId?: string | null, region?: string | null) => void;
     /** Takes a pop-out out of the layer, when it leaves the page. */
     unregister: (id: string) => void;
     /** The stacking order a pop-out currently draws at. */
@@ -4102,6 +4214,56 @@ export declare interface PopoutProps extends DisclosureProps {
     children: ReactNode;
 }
 
+/**
+ * Which region the pop-outs beneath this point belong to.
+ *
+ * A shell is divided into regions -- a properties panel, an inspector, the
+ * surface between them, a dialog, a dock -- and a reader may hold one pop-out
+ * open in each, because two pop-outs describing two different objects are not
+ * competing for the same answer. What they may not do is stack up inside ONE
+ * region: opening a second there closes the first, because both describe the
+ * same object and the second is the reader changing their mind.
+ *
+ * Without a region, every pop-out opened straight from the page is a sibling of
+ * every other, so an inspector pop-out closes a panel pop-out that has nothing
+ * to do with it. That is the behaviour this component exists to divide up, and
+ * it is why the default -- no region at all -- keeps the older whole-page rule:
+ * an application that never mentions regions is unaffected.
+ *
+ * The region is the OPENER's, not the surface's screen position. Wrap the
+ * region's own markup, and a pop-out that slides out over neighbouring space
+ * still counts against the region whose control opened it.
+ *
+ * Nesting is unaffected either way. A pop-out opened from another pop-out is
+ * grouped by its parent, as it always was, and inherits this region only for
+ * the benefit of anything it opens in turn.
+ * @param props - Component props
+ * @param props.id - What to call this region
+ * @param props.children - The part of the tree whose pop-outs belong to it
+ * @returns The provider the pop-outs inside it read their region from
+ * @example
+ * ```tsx
+ * <PopoutManager>
+ *     <PopoutRegion id="panel">{panel}</PopoutRegion>
+ *     <PopoutRegion id="inspector">{inspector}</PopoutRegion>
+ * </PopoutManager>
+ * ```
+ */
+export declare function PopoutRegion({ id, children }: PopoutRegionProps): JSX.Element;
+
+/**
+ * Props for the PopoutRegion component.
+ */
+export declare interface PopoutRegionProps {
+    /**
+     * What to call this region. Any stable string; two regions are the same
+     * region when their ids are equal.
+     */
+    id: string;
+    /** The part of the tree whose pop-outs belong to this region. */
+    children: ReactNode;
+}
+
 /**
  * A floating panel that opens from a trigger and can be dragged, nested and
  * dismissed without leaving the page.
@@ -4688,6 +4850,7 @@ export declare interface SparklineRowProps {
  * @param props.suffix - A unit written after the number
  * @param props.hideControls - Whether to leave out the up and down steppers, which are left out by default
  * @param props.disabled - Whether the control cannot be used at all
+ * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
  * @param props.onFocus - Called when the control takes focus
  * @param props.onBlur - Called when the control loses focus, after the number has been committed
  * @returns The number box, and its reset button when a number has been entered
@@ -4706,7 +4869,7 @@ export declare interface SparklineRowProps {
  * />
  * ```
  */
-export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, hideControls, disabled, onFocus, onBlur, }: StyleNumberInputProps): default_2.JSX.Element;
+export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, hideControls, disabled, disabledReason, onFocus, onBlur, }: StyleNumberInputProps): default_2.JSX.Element;
 
 /**
  * Props for the StyleNumberInput component.
@@ -4760,6 +4923,22 @@ export declare interface StyleNumberInputProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the control is off, shown only while `disabled`
+     * is true.
+     *
+     * It is appended to the control's own name after a full stop and drawn as
+     * the tooltip -- "Width. Load data first" -- and it also joins the
+     * control's accessible description, so a screen reader reads the reason out
+     * instead of announcing an unexplained unavailable control.
+     *
+     * Write it as a whole sentence naming what would make the control usable
+     * again. THE DEFECT THIS REPAIRS: a disabled control here used to be dimmed
+     * and silent, so a reader who could not type into it had no route at all to
+     * learning why -- spec:6641 asks for the reason to travel with the ink, and
+     * until now this component had nowhere to put it.
+     */
+    disabledReason?: string;
     /** Called when the control takes focus. Forwarded unchanged. */
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /**
@@ -4791,6 +4970,7 @@ export declare interface StyleNumberInputProps {
  * @param props.options - The choices offered
  * @param props.onChange - Called with the new choice, or with `undefined` when the control is reset
  * @param props.disabled - Whether the control cannot be used at all
+ * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
  * @param props.onFocus - Called when the control takes focus
  * @param props.onBlur - Called when the control loses focus
  * @returns The dropdown, and its reset button when a choice has been made
@@ -4810,7 +4990,7 @@ export declare interface StyleNumberInputProps {
  * />
  * ```
  */
-export declare function StyleSelect({ label, value, defaultValue, options, onChange, disabled, onFocus, onBlur, }: StyleSelectProps): default_2.JSX.Element;
+export declare function StyleSelect({ label, value, defaultValue, options, onChange, disabled, disabledReason, onFocus, onBlur, }: StyleSelectProps): default_2.JSX.Element;
 
 /**
  * One choice in a {@link StyleSelect}.
@@ -4857,6 +5037,23 @@ export declare interface StyleSelectProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the control is off, shown only while `disabled`
+     * is true.
+     *
+     * It is appended to the control's own name after a full stop and drawn as
+     * the tooltip -- "Fill. Load data first" -- and it also joins the control's
+     * accessible description, so a screen reader reads the reason out instead
+     * of announcing an unexplained unavailable control.
+     *
+     * Write it as a whole sentence naming what would make the control usable
+     * again, not as a restatement that it is off. THE DEFECT THIS REPAIRS: a
+     * disabled control here used to be dimmed and silent, so a reader who could
+     * not press it had no route at all to learning why -- spec:6641 asks for
+     * the reason to travel with the ink, and until now this component had
+     * nowhere to put it.
+     */
+    disabledReason?: string;
     /** Called when the control takes focus. Forwarded unchanged. */
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /** Called when the control loses focus. Forwarded unchanged. */
@@ -4900,6 +5097,9 @@ export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#6
  * @param props.control - Which control to draw: a 16px checkbox, or a 28x16 switch for a live mode
  * @param props.trailing - What to put in the fixed 24px slot at the end of the row
  * @param props.disabled - Whether the toggle can be changed
+ * @param props.disabledReason - One sentence saying why the toggle is off, drawn only while it is off
+ * @param props.bound - Whether the boolean comes from a data attribute rather than being set by hand
+ * @param props.boundDescription - What a screen reader says about a bound row, defaulting to `fieldBound`
  * @param props.onFocus - Called when the control takes focus
  * @param props.onBlur - Called when the control loses focus
  * @returns The toggle row
@@ -4911,7 +5111,7 @@ export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#6
  * </ToggleRowGroup>
  * ```
  */
-export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, onFocus, onBlur, }: ToggleRowProps): default_2.JSX.Element;
+export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, }: ToggleRowProps): default_2.JSX.Element;
 
 /**
  * The column two or more toggle rows are packed into.
@@ -5040,6 +5240,48 @@ export declare interface ToggleRowProps {
      * unavailable rather than merely looking it.
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the toggle is off, shown only while `disabled` is
+     * true.
+     *
+     * It is appended to the row's own word after a full stop and becomes the
+     * row's tooltip -- "Legend. Nothing is encoded yet" -- and it joins the
+     * control's accessible description, so the reason reaches a pointer user
+     * and a screen reader user alike.
+     *
+     * THE DEFECT THIS REPAIRS, and it was the sharper half of the two: this row
+     * used to hardcode its tooltip as `wrapperProps = {title: label}`, so a
+     * call site could not append a reason even by hand. A disabled toggle was
+     * therefore dimmed and permanently unexplained, which is what spec:6641
+     * forbids. The caller supplies the sentence; the library never invents one,
+     * because only the call site knows what would turn the control back on.
+     */
+    disabledReason?: string;
+    /**
+     * Whether the boolean comes from a data attribute rather than being set by
+     * hand.
+     *
+     * The row draws a filled attribute glyph beside its word -- the same filled
+     * glyph `PanelField` uses to say the same thing -- so a panel can say "this
+     * follows the data" without spending a row on a fixed-or-by-attribute
+     * switch. A boolean channel can be bound just as a numeric one can, and
+     * until now `PanelField` was the only control in the library able to say
+     * so, which is why a bound boolean had to be drawn as a number field or not
+     * drawn at all.
+     * @default false
+     */
+    bound?: boolean;
+    /**
+     * What a screen reader says about a row whose value comes from a data
+     * attribute. Only used when `bound` is set.
+     *
+     * Defaults to the `fieldBound` string, so translating it once through
+     * `LabelsProvider` covers every bound control in the panel. Pass it here
+     * only to say something more specific about one row, and pass an empty
+     * string to say nothing -- byte for byte the contract `PanelField` already
+     * documents.
+     */
+    boundDescription?: string;
     /** Called when the control takes focus. */
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /** Called when the control loses focus. */
@@ -5074,6 +5316,9 @@ export declare interface ToggleRowProps {
  * @param props.defaultChecked - Whether the toggle starts on, when the component keeps its own state
  * @param props.onChange - Called with the new state first and the event that caused it second
  * @param props.disabled - Whether the toggle can be changed
+ * @param props.disabledReason - One sentence saying why the toggle is off, drawn only while it is off
+ * @param props.bound - Whether the boolean comes from a data attribute rather than being set by hand
+ * @param props.boundDescription - What a screen reader says about a bound toggle, defaulting to `fieldBound`
  * @param props.onFocus - Called when the checkbox takes focus
  * @param props.onBlur - Called when the checkbox loses focus
  * @param props.children - The controls shown only while the feature is on
@@ -5086,7 +5331,7 @@ export declare interface ToggleRowProps {
  * </ToggleWithContent>
  * ```
  */
-export declare function ToggleWithContent({ label, checked, defaultChecked, onChange, disabled, onFocus, onBlur, children, }: ToggleWithContentProps): default_2.JSX.Element;
+export declare function ToggleWithContent({ label, checked, defaultChecked, onChange, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, children, }: ToggleWithContentProps): default_2.JSX.Element;
 
 /**
  * Props for the ToggleWithContent component.
@@ -5129,6 +5374,47 @@ export declare interface ToggleWithContentProps {
      * revealed; disable them yourself if they should not be touched either.
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the toggle is off, shown only while `disabled` is
+     * true.
+     *
+     * It is appended to the toggle's own word after a full stop and becomes its
+     * tooltip -- "Glow. Glow is not drawn yet" -- and it joins the control's
+     * accessible description, so the reason reaches a pointer user and a screen
+     * reader user alike.
+     *
+     * THE DEFECT THIS REPAIRS: a feature that cannot be turned on yet used to
+     * be drawn as a dimmed checkbox with nothing to say for itself, which reads
+     * as a broken control rather than as an unfinished feature. spec:6641 asks
+     * for the one reason to travel with the disabled ink; until now this
+     * component had nowhere to put it. The caller supplies the sentence -- only
+     * the call site knows what would turn the feature back on.
+     */
+    disabledReason?: string;
+    /**
+     * Whether the boolean comes from a data attribute rather than being set by
+     * hand.
+     *
+     * The toggle draws a filled attribute glyph beside its word -- the same
+     * filled glyph `PanelField` uses to say the same thing -- so a panel can
+     * say "this follows the data" without spending a row on a
+     * fixed-or-by-attribute switch. A boolean channel can be bound just as a
+     * numeric one can, and until now `PanelField` was the only control in the
+     * library able to say so.
+     * @default false
+     */
+    bound?: boolean;
+    /**
+     * What a screen reader says about a toggle whose value comes from a data
+     * attribute. Only used when `bound` is set.
+     *
+     * Defaults to the `fieldBound` string, so translating it once through
+     * `LabelsProvider` covers every bound control in the panel. Pass it here
+     * only to say something more specific about one toggle, and pass an empty
+     * string to say nothing -- byte for byte the contract `PanelField` already
+     * documents.
+     */
+    boundDescription?: string;
     /** Called when the checkbox takes focus. */
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /** Called when the checkbox loses focus. */
@@ -5207,7 +5493,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" | "info" | "reset";
+export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft" | "close" | "plus" | "minus" | "gear" | "warning" | "check" | "eye" | "refresh" | "copy" | "pin" | "keepOpen" | "info" | "reset";
 
 /**
  * Props for the UiGlyph component.
@@ -5342,8 +5628,14 @@ export declare function useOrdinalFormatter(): (value: number) => string;
  */
 export declare function usePanelLabels(): boolean;
 
+/**
+ * The region the calling component sits in.
+ * @returns The region's id, or null when there is no enclosing region.
+ */
+export declare function usePopoutRegion(): string | null;
+
 /** The released version of this package. */
-export declare const VERSION = "0.6.0";
+export declare const VERSION = "0.7.0";
 
 export { }