tempest-react-sdk 0.27.0 → 0.28.0

package/dist/tempest-react-sdk.d.ts

@@ -1092,6 +1092,9 @@ export declare const CEPInput: ForwardRefExoticComponent<Omit<InputProps, "value
     onChange: (value: string) => void;
 } & RefAttributes<HTMLInputElement>>;
 
+/** A `var(--tempest-chart-…)` reference, so the value follows the active theme. */
+export declare type ChartColorToken = string;
+
 /**
  * Accessible checkbox. Supports a tri-state via `indeterminate` and pairs the
  * input with a label/description column for forms.
@@ -1213,6 +1216,50 @@ export declare const CNPJInput: ForwardRefExoticComponent<Omit<InputProps, "valu
     onChange: (value: string) => void;
 } & RefAttributes<HTMLInputElement>>;
 
+/**
+ * A read-only code sample: syntax colours, optional line numbers, copy button.
+ *
+ * The `<pre>` is always focusable. A code block is scrollable and holds nothing
+ * focusable inside, so without a tab stop a keyboard user can see there is more
+ * code past the edge and has no way to reach it. It is the one scroll container
+ * where the stop is unconditional rather than measured — a code sample is
+ * expected to be reachable, read and selected on its own.
+ *
+ * Colours come from an approximate scanner, not a parser — see {@link tokenize}.
+ *
+ * @example
+ * <CodeBlock code={snippet} language="ts" filename="src/main.ts" showLineNumbers />
+ * <CodeBlock code={log} language="bash" maxHeight={280} />
+ */
+export declare function CodeBlock({ code, language, filename, showLineNumbers, highlightLines, copyable, maxHeight, wrap, label, className, ...rest }: CodeBlockProps): JSX.Element;
+
+export declare interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The source to display. Leading and trailing blank lines are trimmed. */
+    code: string;
+    /** Grammar name or alias (`ts`, `bash`, `json`…). Unknown values render plain. */
+    language?: string;
+    /** Shown in the header, usually a file path. */
+    filename?: ReactNode;
+    /** Number the lines. Default `false`. */
+    showLineNumbers?: boolean;
+    /** 1-based line numbers to mark as the point of the snippet. */
+    highlightLines?: readonly number[];
+    /** Offer a copy button. Default `true`. */
+    copyable?: boolean;
+    /** Cap the height in px or any CSS length; the body scrolls past it. */
+    maxHeight?: number | string;
+    /** Wrap long lines instead of scrolling sideways. Default `false`. */
+    wrap?: boolean;
+    /**
+     * Accessible name for the code region. Defaults to naming the language, and
+     * to the filename when there is one.
+     */
+    label?: string;
+}
+
+/** Languages the tokenizer knows. Anything else renders as plain text. */
+export declare type CodeLanguage = "typescript" | "javascript" | "tsx" | "jsx" | "json" | "css" | "html" | "bash" | "python" | "sql" | "plain";
+
 /**
  * A single expand/collapse region — a lighter alternative to `Accordion` for
  * one toggleable block. The trigger is a `<button aria-expanded aria-controls>`
@@ -2602,6 +2649,40 @@ export declare interface DisclosureHandlers {
     toggle: () => void;
 }
 
+/** How many steps the diverging token scale has, midpoint included. */
+export declare const DIVERGING_STEP_COUNT = 9;
+
+/**
+ * Build a polarity scale over the diverging tokens.
+ *
+ * Each arm is scaled against its **own** distance from the centre, so an asymmetric
+ * domain (say −5…+80) still uses the full cool arm for its small negatives. Scaling
+ * both arms by the wider one — the easy mistake — would collapse every negative
+ * into the step next to the midpoint and hide the sign entirely.
+ *
+ * @example
+ * const color = divergingScale({ min: -12, max: 40 });   // centre 0
+ * const budget = divergingScale({ min: 80, max: 130, center: 100 });
+ *
+ * @param options - The data domain and the neutral centre.
+ * @returns A function from value to a CSS colour reference.
+ */
+export declare function divergingScale(options: DivergingScaleOptions): (value: number) => ChartColorToken;
+
+export declare interface DivergingScaleOptions {
+    /** Lowest value in the data. */
+    min: number;
+    /** Highest value in the data. */
+    max: number;
+    /**
+     * The value that means "no deviation". Default `0`.
+     *
+     * It is a parameter because the interesting midpoint is often not zero — a
+     * budget variance diverges around the target, not around nothing.
+     */
+    center?: number;
+}
+
 /**
  * Horizontal or vertical visual separator. When `label` is provided in
  * horizontal mode the divider splits and centers the label between two lines.
@@ -2765,6 +2846,25 @@ export declare interface EmptyStateProps {
     className?: string;
 }
 
+/**
+ * Encode text into a QR matrix.
+ *
+ * The whole pipeline of ISO/IEC 18004: pick the densest mode the payload
+ * qualifies for, pick the smallest version that fits, build the bit stream, add
+ * Reed-Solomon correction, interleave the blocks, lay the modules out, then try
+ * all eight masks and keep the one the standard's penalty function likes best.
+ *
+ * @param text - The payload. Byte mode encodes it as UTF-8.
+ * @param options - Level and an optional version floor.
+ * @returns The finished matrix, without a quiet zone.
+ * @throws {QRCapacityError} When the payload does not fit at that level.
+ *
+ * @example
+ * const qr = encodeQR("https://tempest.dev", { level: "Q" });
+ * qr.modules[0][0]; // true — top-left of the finder pattern
+ */
+export declare function encodeQR(text: string, options?: QREncodeOptions): QRMatrix;
+
 /**
  * Class-based React error boundary with a render-prop or static fallback.
  * Auto-resets when any value in `resetKeys` changes.
@@ -4511,6 +4611,19 @@ export declare interface LongPressHandlers {
     onContextMenu: (event: MouseEvent_2) => void;
 }
 
+/**
+ * The matrix as an SVG path, one `M…h…v…h…z` rectangle per dark module.
+ *
+ * A path beats one `<rect>` per module: a version-10 symbol is 3 481 modules,
+ * and that many elements is a real cost to parse and to paint. Coordinates are
+ * whole numbers in module space, so the shape stays crisp at any size.
+ *
+ * @param matrix - An encoded matrix.
+ * @param margin - Quiet zone in modules. The standard asks for 4.
+ * @returns The `d` attribute, empty when there is nothing dark.
+ */
+export declare function matrixToPath(matrix: QRMatrix, margin?: number): string;
+
 /**
  * Memoize only the most recent call of `fn`, keyed by shallow-equal arguments.
  *
@@ -5348,6 +5461,16 @@ export declare interface OpenModalOptions {
     onClose?: () => void;
 }
 
+/**
+ * First sequential step that clears 2:1 against the chart surface.
+ *
+ * A sequential scale may let its near-zero end recede into the surface — on a
+ * heatmap that is exactly what "almost nothing" should look like. An **ordinal**
+ * scale may not: every step is a discrete mark someone has to see. Starting an
+ * ordinal ramp here is the difference.
+ */
+export declare const ORDINAL_START_STEP = 3;
+
 /** Options for {@link createOSRMBackend}. */
 export declare interface OSRMBackendOptions {
     /**
@@ -5852,6 +5975,103 @@ export declare interface PushPayload {
     data?: Record<string, unknown>;
 }
 
+/** Raised when a payload cannot be encoded at the requested level. */
+export declare class QRCapacityError extends Error {
+    readonly length: number;
+    readonly level: QRErrorCorrection;
+    constructor(length: number, level: QRErrorCorrection);
+}
+
+/**
+ * A QR symbol, encoded in the browser and drawn as SVG.
+ *
+ * No dependency and no network round trip: an image service would leak the
+ * payload — a payment link, a session token, an invite — to a third party, and
+ * the encoder is a few kilobytes.
+ *
+ * SVG rather than canvas so the symbol stays sharp at any size and prints at
+ * the printer's resolution instead of the screen's. Everything is one path
+ * (horizontal runs merged), because a version-10 symbol is 3 481 modules and
+ * that many elements costs real paint time.
+ *
+ * The colours are **black on white in both themes, on purpose** — they are the
+ * one part of the SDK that ignores the theme tokens. Scanners expect
+ * dark-on-light, and the ones that cope with an inverted symbol do it slowly and
+ * unreliably; a QR that looks integrated with a dark page and scans on the third
+ * try is worse than one that looks pasted on. Wiring the modules to
+ * `--tempest-text` would flip them light in dark mode and leave a light symbol
+ * on the white background, which scans as nothing at all. Override
+ * `color`/`background` only with a scanner in hand.
+ *
+ * @throws {QRCapacityError} When the payload is too long for a version-40
+ * symbol at the chosen level. That is a programming error rather than a state
+ * to render, so it surfaces instead of silently drawing nothing — wrap it in
+ * `ErrorBoundary` if the payload comes from user input.
+ *
+ * @example
+ * <QRCode value="https://tempest.dev" />
+ * <QRCode value={pixPayload} level="H" size={220} label="QR do Pix" />
+ */
+export declare function QRCode({ value, size, level, margin, color, background, label, className, style, ...rest }: QRCodeProps): JSX.Element;
+
+export declare interface QRCodeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The payload. Encoded as UTF-8 when it is not plain digits or upper-case text. */
+    value: string;
+    /** Rendered side in px, quiet zone included. Default `160`. */
+    size?: number;
+    /** Error correction level. Default `"M"`. */
+    level?: QRErrorCorrection;
+    /** Quiet zone in modules. The standard asks for 4; below that, scanners start to miss. */
+    margin?: number;
+    /** Module colour. Defaults to black — see the note on dark mode below. */
+    color?: string;
+    /** Background colour. Defaults to white. */
+    background?: string;
+    /**
+     * Accessible name. Defaults to naming the payload, because a screen reader
+     * user cannot scan the symbol: the content has to reach them as text.
+     */
+    label?: string;
+}
+
+export declare interface QREncodeOptions {
+    /** Error correction level. Default `"M"`. */
+    level?: QRErrorCorrection;
+    /**
+     * Force a minimum version. The encoder still grows past it when the payload
+     * does not fit — a version is a floor, never a cap that silently truncates.
+     */
+    minVersion?: number;
+}
+
+/**
+ * The fixed tables of ISO/IEC 18004, transcribed.
+ *
+ * They are data, not logic: the standard specifies them and there is nothing to
+ * derive. They live apart from {@link ./qr-encode} so the algorithm reads as
+ * algorithm and a typo in a table stays findable.
+ */
+/** Error correction level, by how much of the symbol it can lose and survive. */
+export declare type QRErrorCorrection = "L" | "M" | "Q" | "H";
+
+export declare interface QRMatrix {
+    /** Side length in modules, including no quiet zone. */
+    size: number;
+    /** Row-major modules; `true` is dark. */
+    modules: boolean[][];
+    /** Symbol version, 1 to 40. */
+    version: number;
+    /** Level the symbol was encoded at. */
+    level: QRErrorCorrection;
+    /** The mode chosen for the payload. */
+    mode: QRMode;
+    /** Which of the eight masks scored best. */
+    mask: number;
+}
+
+/** How the payload is packed into bits. */
+export declare type QRMode = "numeric" | "alphanumeric" | "byte";
+
 /**
  * Wrapper around `QueryClientProvider` that bootstraps a `QueryClient` with
  * sane SDK defaults (5-minute stale time, 30-minute gc time, 1 retry).
@@ -6226,6 +6446,14 @@ export declare interface ResizableProps extends Omit<HTMLAttributes<HTMLDivEleme
 
 export declare type ResolvedTheme = "light" | "dark";
 
+/**
+ * Normalise a language name onto a known grammar.
+ *
+ * @param language - Whatever the caller passed, e.g. `"ts"` or `"Shell"`.
+ * @returns The grammar to use; `"plain"` when there is no match.
+ */
+export declare function resolveLanguage(language: string | undefined): CodeLanguage;
+
 declare type Resolver<T> = (values: unknown, context: unknown, options: {
     criteriaMode?: "firstError" | "all";
 }) => Promise<ResolverOutput<T>>;
@@ -6420,6 +6648,17 @@ export declare interface SafeAreaProps extends HTMLAttributes<HTMLDivElement> {
 /** The ten steps of a Tempest tint scale, lightest to darkest. */
 export declare type ScaleStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
+/**
+ * Every step of a token scale, in order — for rendering a legend.
+ *
+ * A continuous scale needs a legend showing the ramp with its end labels; without
+ * one the reader has no way to turn a colour back into a number.
+ *
+ * @param kind - Which scale.
+ * @returns The token references, lightest/coolest first.
+ */
+export declare function scaleSteps(kind: "sequential" | "diverging"): ChartColorToken[];
+
 /**
  * An agenda: events placed on a time grid across consecutive days.
  *
@@ -6494,6 +6733,12 @@ export declare interface SchedulerProps extends Omit<HTMLAttributes<HTMLDivEleme
  * thin custom scrollbar (WebKit) while staying fully functional in browsers
  * without scrollbar styling. Forwards `className`, `style` and the ref to the
  * underlying `<div>`.
+ *
+ * While the content overflows, the container becomes a named, focusable group.
+ * A scroll area whose children are plain text holds nothing focusable, so
+ * without that a keyboard user can see the scrollbar and has no way to move it.
+ * The tab stop disappears again once the content fits, so an area that does not
+ * scroll never adds one. Callers may still override `tabIndex` or `role`.
  */
 export declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>>;
 
@@ -6504,8 +6749,17 @@ export declare interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement>
     maxHeight?: number | string;
     /** Which axis scrolls. Default `"vertical"`. */
     orientation?: ScrollAreaOrientation;
+    /**
+     * Accessible name used while the content actually overflows, when the area
+     * takes a tab stop of its own. Defaults to a generic one; name it when the
+     * page holds several scroll areas.
+     */
+    scrollLabel?: string;
 }
 
+/** Which axis to watch for overflow. */
+export declare type ScrollOverflowAxis = "horizontal" | "vertical" | "both";
+
 /**
  * Search input with magnifier icon and a clear button. Controlled component:
  * pass `value` and `onChange`.
@@ -6563,6 +6817,19 @@ export declare interface SegmentedControlProps<TValue extends string = string> e
  */
 export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
 
+/**
+ * Pick the densest mode the payload qualifies for.
+ *
+ * Numeric packs 3 digits into 10 bits and alphanumeric 2 characters into 11, so
+ * a phone number or an upper-case code encodes far smaller than the same string
+ * as bytes — often a whole version smaller, which is a visibly coarser symbol
+ * and therefore easier to scan.
+ *
+ * @param text - The payload.
+ * @returns The narrowest mode that can represent it.
+ */
+export declare function selectMode(text: string): QRMode;
+
 export declare interface SelectOption {
     value: string | number;
     label: string;
@@ -6599,6 +6866,39 @@ export declare interface SentryLike {
     flush?: (timeout?: number) => Promise<boolean>;
 }
 
+/** How many steps the sequential token scale has. */
+export declare const SEQUENTIAL_STEP_COUNT = 7;
+
+/**
+ * Build a magnitude scale over the sequential tokens.
+ *
+ * Returns `var(--tempest-chart-sequential-N)` rather than a hex string, so a
+ * heatmap painted once follows the theme — including dark mode, whose steps are
+ * chosen for the dark surface rather than flipped.
+ *
+ * @example
+ * const color = sequentialScale({ min: 0, max: 250 });
+ * <rect fill={color(value)} />
+ *
+ * @param options - The data domain, and whether every step must stay visible.
+ * @returns A function from value to a CSS colour reference.
+ */
+export declare function sequentialScale(options: SequentialScaleOptions): (value: number) => ChartColorToken;
+
+export declare interface SequentialScaleOptions {
+    /** Lowest value in the data. */
+    min: number;
+    /** Highest value in the data. */
+    max: number;
+    /**
+     * Keep every step visible against the surface, for discrete ordered marks.
+     *
+     * Off by default: a heatmap *wants* its near-zero cells to recede. Turn it on
+     * for tiers, funnel stages or anything where each step is its own mark.
+     */
+    ordinal?: boolean;
+}
+
 /**
  * Wrap the Web Share API with a uniform result object. Falls through to
  * `unsupported: true` when the browser lacks `navigator.share`, leaving the
@@ -6906,6 +7206,58 @@ export declare interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
     axis?: SpacerAxis;
 }
 
+/**
+ * A tiny inline chart: shape only, no axes, no legend.
+ *
+ * Sized to sit in a table cell or beside a number, which is why it is plain SVG on
+ * the root entry rather than a recharts wrapper — a sparkline in a data table should
+ * not oblige an app to install a charting library.
+ *
+ * It carries `role="img"` and a spoken description of the series (direction, ends,
+ * extremes). Without that it is an unlabelled image: a sparkline has no axis or
+ * legend to fall back on, so a screen reader would reach it and read nothing. Pair it
+ * with the number it annotates — the shape is context, never the only way to read the
+ * value.
+ *
+ * @example
+ * <Sparkline data={last30Days} />
+ * <Sparkline data={revenue} variant="area" width={120} height={32} />
+ *
+ * // Same axis across a column, so the rows are comparable
+ * <Sparkline data={row.series} min={0} max={columnMax} />
+ */
+export declare function Sparkline({ data, width, height, variant, color, showEnd, min, max, valueFormatter, label, className, ...rest }: SparklineProps): JSX.Element;
+
+export declare interface SparklineProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** The series, in order. Non-finite entries are skipped. */
+    data: readonly number[];
+    /** Drawing width in px. Default `88`. */
+    width?: number;
+    /** Drawing height in px. Default `24`. */
+    height?: number;
+    /** Which mark to draw. Default `"line"`. */
+    variant?: SparklineVariant;
+    /** Any CSS colour. Defaults to the first chart series token. */
+    color?: string;
+    /** Draw a dot on the last point. Default `true` for line and area. */
+    showEnd?: boolean;
+    /** Force the low end of the value axis — use it to compare several sparklines. */
+    min?: number;
+    /** Force the high end. */
+    max?: number;
+    /** Render a value; used in the accessible description. */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Accessible name. Defaults to a sentence describing the series.
+     *
+     * Pass one when the surrounding text already says what is plotted — the default
+     * still appends the shape, so a caller never ends up with an unlabelled image.
+     */
+    label?: string;
+}
+
+export declare type SparklineVariant = "line" | "area" | "bar";
+
 /**
  * Loading spinner with preset sizes (xs..xl). Provide `label` for screen
  * readers, `caption` for a visible message, and `overlay` to center it inside a
@@ -7214,7 +7566,7 @@ export declare interface TabItem {
  * - `stackOnMobile` re-renders each row as a label/value card on mobile,
  *   avoiding horizontal scroll for dense data.
  */
-export declare function Table<T>({ columns, data, rowKey, onRowClick, emptyMessage, className, stackOnMobile, }: TableProps<T>): JSX.Element;
+export declare function Table<T>({ columns, data, rowKey, onRowClick, emptyMessage, className, stackOnMobile, scrollLabel, }: TableProps<T>): JSX.Element;
 
 export declare type TableAlign = "left" | "right" | "center";
 
@@ -7247,6 +7599,12 @@ export declare interface TableProps<T> {
      * Better than horizontal scroll when each row has 3+ columns of dense data.
      */
     stackOnMobile?: boolean;
+    /**
+     * Accessible name for the scrollable region, used only while the table is
+     * actually wider than its box. A focus stop that announces nothing is worse
+     * than no focus stop, so name the table when the page holds several.
+     */
+    scrollLabel?: string;
 }
 
 /**
@@ -7738,6 +8096,50 @@ export declare type ToggleSize = "sm" | "md" | "lg";
 
 export declare type ToggleVariant = "default" | "outline";
 
+export declare interface Token {
+    kind: TokenKind;
+    value: string;
+}
+
+/**
+ * Split source into coloured tokens.
+ *
+ * This is a **scanner, not a parser**: it recognises comments, strings, numbers,
+ * keywords and punctuation by pattern, and knows nothing about scope, types or
+ * grammar. That is a deliberate ceiling. A real parser per language is a
+ * dependency the size of the rest of the SDK, and the payoff — being right about
+ * the corner cases in a documentation snippet — is small. Where it is unsure it
+ * emits `plain`, which renders as ordinary text rather than as something wrong.
+ *
+ * Unknown languages produce a single `plain` token, so an unhighlighted block is
+ * a normal outcome and never an error.
+ *
+ * @param code - The source.
+ * @param language - Grammar name or alias.
+ * @returns Tokens covering the input exactly, in order.
+ *
+ * @example
+ * tokenize("const x = 1;", "ts");
+ * // [{kind: "keyword", value: "const"}, {kind: "plain", value: " x "}, …]
+ */
+export declare function tokenize(code: string, language: string | undefined): Token[];
+
+/**
+ * The same tokens, split at newlines so each line can be rendered on its own.
+ *
+ * Line numbers and highlighted lines both need a per-line structure, and a token
+ * is free to span a line break — a block comment usually does. Splitting here
+ * keeps that out of the component.
+ *
+ * @param code - The source.
+ * @param language - Grammar name or alias.
+ * @returns One token array per line. Always at least one line.
+ */
+export declare function tokenizeLines(code: string, language: string | undefined): Token[][];
+
+/** What a token is painted as. */
+export declare type TokenKind = "plain" | "comment" | "string" | "number" | "keyword" | "literal" | "function" | "punctuation" | "tag" | "attribute" | "property";
+
 /**
  * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps
  * a single child element via `cloneElement`, so the trigger keeps its own ref
@@ -9348,6 +9750,41 @@ export { useRouteError }
  */
 export declare function useScrollLock(active: boolean): void;
 
+/**
+ * Track whether an element's content currently overflows its box.
+ *
+ * The use this exists for is keyboard access. A scroll container holding no
+ * focusable content is unreachable by keyboard: the user can see there is more
+ * content past the edge and has no way to get to it, because focus never lands
+ * anywhere the arrow keys would scroll. Giving the container `tabIndex={0}`
+ * fixes it — but doing that unconditionally puts a tab stop on every such
+ * container on the page, including the ones whose content fits and have nothing
+ * to scroll. The stop is only wanted while the overflow is real, which is what
+ * this reports. (It is also what axe checks as `scrollable-region-focusable`.)
+ *
+ * Both the container and its content are observed: content can outgrow a box
+ * whose own dimensions never change, and a box can shrink around content that
+ * never changes. Watching one alone misses half the transitions.
+ *
+ * A one-pixel difference is ignored — that is layout rounding, not overflow.
+ *
+ * @param ref - The scroll container.
+ * @param axis - Which axis to measure. Defaults to `"both"`.
+ * @returns `true` while the content is larger than the box on that axis.
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * const scrollable = useScrollOverflow(ref, "horizontal");
+ *
+ * <div
+ *   ref={ref}
+ *   tabIndex={scrollable ? 0 : undefined}
+ *   role={scrollable ? "group" : undefined}
+ *   aria-label={scrollable ? "Tabela rolável" : undefined}
+ * >
+ */
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>, axis?: ScrollOverflowAxis): boolean;
+
 export { useSearchParams }
 
 /**
@@ -9766,7 +10203,7 @@ export declare interface ViaCEPResult {
  * For variable heights, use `react-window`/`@tanstack/react-virtual` — those
  * solve a more general problem at the cost of extra setup.
  */
-export declare function VirtualList<T>({ items, itemHeight, renderItem, height, overscan, getKey, className, style, }: VirtualListProps<T>): JSX.Element;
+export declare function VirtualList<T>({ items, itemHeight, renderItem, height, overscan, getKey, className, style, label, }: VirtualListProps<T>): JSX.Element;
 
 export declare interface VirtualListProps<T> {
     items: T[];
@@ -9782,6 +10219,12 @@ export declare interface VirtualListProps<T> {
     getKey?: (item: T, index: number) => string | number;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Accessible name for the list. Worth setting when the list scrolls: it
+     * then carries a tab stop of its own, and a focus stop that announces
+     * nothing is worse than no focus stop.
+     */
+    label?: string;
 }
 
 /**