ranui/dist/components/state-dot/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 { RanElement } from '../../utils';
/** Lifecycle a dot can stand for. */
export type StateDotState = 'idle' | 'running' | 'success' | 'warning' | 'error';
/**
 * `<r-state-dot>` — an 8px lifecycle indicator.
 *
 * A halo and a core in one element, both `currentColor`, so a state is one colour rule
 * rather than two tokens. `running` pulses the core: at this size a spinner is a smudge,
 * and the halo is what gives the pulse room to breathe into.
 *
 * **It is never the only carrier.** Colour alone does not say what happened — the row that
 * owns the dot states the outcome in words. This is the glance, not the report.
 *
 * ```html
 * <r-state-dot state="running"></r-state-dot>
 * ```
 *
 * Attributes: `state`, `label`, `sheet`.
 */
export declare class StateDot extends RanElement {
    _shadowDom: ShadowRoot;
    static get observedAttributes(): string[];
    constructor();
    /** Which lifecycle step to show. Unknown values render as `idle`. */
    get state(): StateDotState;
    set state(value: StateDotState);
    /**
     * Accessible name.
     *
     * A dot with no name is decoration, and is exposed as such: a screen reader announcing
     * "running" beside a row that already says so is noise. Set it only where the dot is the
     * sole statement of the state.
     */
    get label(): string;
    set label(value: string);
    get sheet(): string;
    set sheet(value: string);
    connectedCallback(): void;
    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
    handlerExternalCss: () => void;
    private _syncRole;
}
export default StateDot;