ranui/dist/components/disclosure-row/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { EventManager } from '../../utils/builder';
import { RanElement } from '../../utils';
/**
 * `<r-disclosure-row>` — the one-line summary row a run of them reads as a list.
 *
 * `[16px leading] [title] [·] [summary, fills and truncates]`, on one 24px line, with the
 * whole row as the toggle. The shape is the point: a row that wraps stops being scannable,
 * and scannability is what makes twelve tool calls a list instead of a wall. The summary
 * truncates rather than wrapping for the same reason.
 *
 * The leading slot holds two things in one 16px box — whatever the caller puts there at
 * rest, and a chevron that fades in on hover. They share a grid cell, so the swap costs no
 * layout and the title never shifts under the pointer.
 *
 * ```html
 * <r-disclosure-row expandable heading="fetch_url" summary="https://example.com">
 *   <r-state-dot slot="leading" state="running"></r-state-dot>
 *   <pre>…the expanded body…</pre>
 * </r-disclosure-row>
 * ```
 *
 * Attributes: `open`, `expandable`, `heading`, `summary`, `tone` (`error` colours the
 * summary), `busy` (a shimmer sweep while the work is running), `sheet`. Fires {@link DISCLOSURE_TOGGLE} with `detail.open`.
 */
/**
 * Name of the event a row fires when it opens or closes.
 *
 * Not `toggle`: that is the native event `<details>` fires, and its `ToggleEvent` carries
 * `oldState`/`newState` rather than a `detail` — a listener typed against the platform's
 * name gets the platform's payload and finds nothing in it.
 */
export declare const DISCLOSURE_TOGGLE = "disclosuretoggle";
export declare class DisclosureRow extends RanElement {
    _events: EventManager;
    _shadowDom: ShadowRoot;
    _row: HTMLElement;
    _title: HTMLElement;
    _summary: HTMLElement;
    _sep: HTMLElement;
    static get observedAttributes(): string[];
    constructor();
    /** Whether the body is shown. */
    get open(): boolean;
    set open(value: boolean);
    /**
     * Whether the row has a body worth opening.
     *
     * A row with nothing inside is still a row — a completed call with no output reads the
     * same as one with output until you try to open it, and offering a toggle that reveals
     * an empty box is worse than offering none.
     */
    get expandable(): boolean;
    set expandable(value: boolean);
    /**
     * The fixed-width left half of the line.
     *
     * Not `title`: that is a native `HTMLElement` attribute, and the browser renders it as a
     * tooltip. A component using it for a heading makes every instance sprout a tooltip
     * repeating the text already on screen, and there is no way to switch that off once the
     * attribute is set.
     */
    get heading(): string;
    set heading(value: string);
    /** The truncating right half. Empty drops the separator with it. */
    get summary(): string;
    set summary(value: string);
    /**
     * Whether the work this row stands for is still running.
     *
     * Draws a shimmer sweep across the line. A spinner says something somewhere is happening;
     * a sweep over the row says this row is the one still working.
     */
    get busy(): boolean;
    set busy(value: boolean);
    /** `error` colours the summary; anything else is the ordinary tone. */
    get tone(): string;
    set tone(value: string);
    get sheet(): string;
    set sheet(value: string);
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
    handlerExternalCss: () => void;
    private _toggle;
    private _sync;
}
export default DisclosureRow;