import { type Readable } from '@vielzeug/ripple';
import type { ComponentSize } from '../../types';
/** Visual variant for `ore-list`. */
export type ListVariant = 'bordered' | 'plain' | 'separated';
/** Context provided by `ore-list` to its `ore-list-item` children. */
export type ListContext = {
    /**
     * Closes every other item's swipe-revealed action panel. Called directly by an item the moment
     * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —
     * replaces listening for a bubbled `reveal` event and re-deriving "is this actually my direct
     * child" with a plain function call, the same shape as `select` below.
     */
    requestReveal: (item: HTMLElement) => void;
    /**
     * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called
     * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.
     * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so
     * changing it here is the only thing that has to happen.
     */
    select: (value: string | undefined) => void;
    selectable: Readable<boolean>;
    /**
     * Single source of truth for the current selection — `ore-list-item` never owns its own
     * "selected" state; it's always derived by comparing its own `value` against this one (the
     * same shape as `ore-radio-group`'s `RadioGroupContext.value`).
     */
    value: Readable<string | undefined>;
};
/** Injection key for the list context. */
export declare const LIST_CTX: import("@vielzeug/ore").InjectionKey<ListContext>;
/** Events emitted by the list component */
export type OreListEvents = {
    /** Emitted when the selected value changes (only when `selectable` is set). */
    change: {
        value: null | string;
    };
};
/** List component properties */
export type OreListProps = {
    /** Disable the entire list — blocks pointer interaction and removes items from tab order */
    disabled?: boolean;
    /**
     * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item
     * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move
     * focus between items. Omit for a plain, non-interactive display list.
     */
    selectable?: boolean;
    /** Size applied to all items (propagated via inherited CSS custom properties) */
    size?: ComponentSize;
    /**
     * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for
     * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for
     * two-way control, or read it back from `change`.
     */
    value?: string;
    /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */
    variant?: ListVariant;
};
/**
 * A vertical list container for `ore-list-item` children — plain display list by default, or a
 * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal
 * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/
 * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).
 *
 * @element ore-list
 * @element ore-list-item - Child element for each row
 *
 * @attr {boolean} disabled - Disable the entire list
 * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation
 * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'
 * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection
 * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'
 *
 * @fires change - Emitted when the selected value changes. detail: { value: string | null }
 *
 * @slot - `ore-list-item` elements
 *
 * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants
 *
 * @example
 * ```html
 * <ore-list variant="bordered">
 *   <ore-list-item>Inbox</ore-list-item>
 *   <ore-list-item>Drafts</ore-list-item>
 * </ore-list>
 * <ore-list selectable value="inbox">
 *   <ore-list-item value="inbox">Inbox</ore-list-item>
 *   <ore-list-item value="drafts">Drafts</ore-list-item>
 * </ore-list>
 * ```
 */
export declare const LIST_TAG: "ore-list";
//# sourceMappingURL=list.d.ts.map