@raylang/elements 0.0.0-stage → 0.4.0

package/ray-elements.d.ts

@@ -0,0 +1,2570 @@
+// Generated by ray-elements tools from src/core/core.d.ts and src/components/*/component.toml. Do not edit.
+
+// Types of the ray-elements core runtime and extension API (core.js, form.js,
+// floating.js, styles.js, position.js, focus.js, icons.js, host.js, raylang.js). Hand-written;
+// the component declarations are generated after them into ray-elements.d.ts.
+
+export declare const PREFIX: string;
+export declare const THEME_EVENT: "ray-theme-change";
+
+export type Theme = "light" | "dark" | "system";
+export interface ThemeDetail {
+  theme: Theme;
+  resolved: "light" | "dark";
+  primary: string | null;
+}
+
+// --- styles and registration -------------------------------------------------
+
+/** A constructable stylesheet from CSS text, shared by every user of the same text. */
+export declare function css(strings: TemplateStringsArray | string, ...values: unknown[]): CSSStyleSheet;
+/** The base sheet every component adopts first. */
+export declare const hostStyles: CSSStyleSheet;
+/** Registers a custom element unless the tag is already taken. */
+export declare function define(tag: string, cls: CustomElementConstructor): void;
+/** A document-unique id with the given stem. */
+export declare function uid(stem?: string): string;
+
+/**
+ * App-wide settings. `defaults` apply, per tag, to elements connected afterwards,
+ * for the properties their markup and code leave unset.
+ */
+export declare function configure(options?: { defaults?: Record<string, Record<string, unknown>> }): void;
+/** The defaults configure() set for a tag. */
+export declare function getDefaults(tag: string): Record<string, unknown>;
+
+// --- theme -------------------------------------------------------------------
+
+export declare function getTheme(el?: Element): Theme;
+export declare function resolvedTheme(el?: Element): "light" | "dark";
+export declare function setTheme(theme: Theme, options?: { el?: Element; persist?: boolean }): void;
+export declare function getPrimary(el?: Element): string | null;
+export declare function setPrimary(color: string | null, options?: { el?: Element; persist?: boolean }): void;
+export declare function onThemeChange(cb: (detail: ThemeDetail) => void): () => void;
+/**
+ * Makes any CSS color the primary (data-primary="custom"): ten OKLCH shades,
+ * white or black text by contrast; warns below WCAG AA.
+ */
+export declare function definePrimary(
+  color: string,
+  options?: { el?: Element; persist?: boolean },
+): { shades: string[]; filled: string; contrast: "white" | "black"; ratio: number; aa: boolean };
+/** The color last given to definePrimary() for an element, as "#rrggbb" (null if none). */
+export declare function getCustomPrimary(el?: Element): string | null;
+
+// --- icons -------------------------------------------------------------------
+
+/** Replaces or adds icons (SVG markup or an SVGElement); repaints every component. */
+export declare function setIcons(icons: Record<string, string | SVGElement>): void;
+/** The SVG markup of a registered icon ("" if unknown). */
+export declare function getIcon(name: string): string;
+/** The registered icon names. */
+export declare function iconNames(): string[];
+
+// --- base classes ------------------------------------------------------------
+
+export interface PropertyOptions {
+  type?: StringConstructor | NumberConstructor | BooleanConstructor;
+  reflect?: boolean;
+  attribute?: string | false;
+  default?: unknown;
+}
+
+/**
+ * Base class of ray-elements components. Members whose name starts with `_` or `#`
+ * are internal: do not use them, and do not name your own members with `_`.
+ */
+export declare class RayElement extends HTMLElement {
+  static properties: Record<string, PropertyOptions>;
+  static styles: CSSStyleSheet[];
+  static template: string;
+  static delegatesFocus: boolean;
+  /** Adds stylesheets to this component and its subclasses, live instances included. */
+  static extendStyles(...sheets: CSSStyleSheet[]): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(attr: string, old: string | null, value: string | null): void;
+  /** Schedules update() for the next microtask. */
+  requestUpdate(): void;
+  /** Protected: called after property changes with their previous values. */
+  protected update(changed: Map<string, unknown>): void;
+  /** Protected: sets a declared property without reflecting it (state changed by the user). */
+  commitProperty(name: string, value: unknown): boolean;
+  /** Protected: whether a declared property has its own value (not the default). */
+  hasValue(name: string): boolean;
+  /** Protected: fills [data-ray-icon] placeholders from the icon registry. */
+  paintIcons(root?: ParentNode): void;
+  /** Dispatches a bubbling, composed CustomEvent; false if a listener canceled it. */
+  emit<T = unknown>(type: string, detail?: T, options?: { cancelable?: boolean }): boolean;
+  /** querySelector inside the shadow root. */
+  $<E extends Element = HTMLElement>(selector: string): E | null;
+}
+
+/** A form-associated ray-elements element (ElementInternals). */
+export declare class FormControl extends RayElement {
+  static formAssociated: true;
+  readonly internals: ElementInternals;
+  readonly form: HTMLFormElement | null;
+  readonly validity: ValidityState;
+  readonly validationMessage: string;
+  readonly willValidate: boolean;
+  /** Disabled by its own attribute or by a disabled <fieldset>. */
+  readonly effectivelyDisabled: boolean;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  /** Protected: re-dispatches a non-composed event (e.g. change) from the host. */
+  forward(event: Event): void;
+  formDisabledCallback(disabled: boolean): void;
+}
+
+/**
+ * A FormControl around one native control (#control in the shadow root),
+ * with label, description, error, required and their ARIA.
+ */
+export declare class FieldControl extends FormControl {
+  /** Spread into `static properties`: name, label, description, error, required, disabled, size, radius, variant. */
+  static fieldProperties: Record<string, PropertyOptions>;
+  /** The native control in the shadow root. */
+  readonly control: HTMLInputElement & HTMLTextAreaElement & HTMLSelectElement;
+  name: string | undefined;
+  label: string | undefined;
+  description: string | undefined;
+  error: string | undefined;
+  required: boolean | undefined;
+  disabled: boolean | undefined;
+  size: string;
+  radius: string | undefined;
+  variant: string;
+  descriptionPosition: string;
+  /** Protected hook: attach listeners once, on first connection. */
+  wire?(): void;
+  /** Protected: label, description, error, ARIA and validity (call from update). */
+  syncField(): void;
+  /** Protected: mirrors the native control's validity into the form. */
+  syncValidity(): void;
+}
+/** The field wrapper markup around `control` (an element with id="control" class="control"). */
+export declare function fieldTemplate(control: string, options?: { sections?: boolean }): string;
+export declare const fieldStyles: CSSStyleSheet;
+export declare const boxStyles: CSSStyleSheet;
+
+/** Base of trigger + floating panel components (Popover API, anchored placement). */
+export declare class Floating extends RayElement {
+  /** popover attribute of the panel: "manual" (default; light dismiss and exit animation done by Floating) or "auto" (the browser's, no exit animation). */
+  static popoverMode: "auto" | "manual";
+  /** Close on Escape and outside presses (default true; tooltips: false). */
+  static lightDismiss: boolean;
+  /** aria-haspopup of the trigger (null: none). */
+  static haspopup: string | null;
+  /** Selector of the slot holding the trigger. */
+  static triggerSlot: string;
+  open: boolean | undefined;
+  placement: string;
+  offset: number;
+  /** The [popover] panel in the shadow root (set on connection). */
+  panel: HTMLElement;
+  readonly trigger: Element | null;
+  /** Whether focus was inside the panel when it started closing. */
+  focusWasInside: boolean | undefined;
+  show(): void;
+  hide(): void;
+  toggle(): void;
+  /** Places the panel again (scroll and resize already do it). */
+  reposition(): void;
+  /** Protected hooks. */
+  wireTrigger(trigger: Element): void;
+  anchorRect(): { left: number; top: number; right: number; bottom: number; width: number; height: number };
+  placeOptions(): PlaceOptions;
+  popupKind(): string | null;
+  toggled(open: boolean): void;
+  /** Keyframes the panel leaves with (default: fade + scale 0.97). */
+  exitKeyframes(): Keyframe[];
+  /** Whether the same pointer gesture just light-dismissed the panel. */
+  justClosed(): boolean;
+}
+export declare const floatingStyles: CSSStyleSheet;
+
+// --- shared styles -----------------------------------------------------------
+
+export declare const COLORS: string[];
+export declare const VARIANT_TOKENS: string[];
+/** Points an element's --_<variant> properties at a palette color, any CSS color, or the primary. */
+export declare function applyColor(el: HTMLElement, color: string | undefined): void;
+/** A spacing value as CSS: xs…xl as its --ray-space token, a bare number as px, else a CSS length; null when empty. */
+export declare function spaceValue(value: string | number | undefined): string | null;
+/** :host size scale: --_h, --_fs, --_px, --_gap by [size]. */
+export declare const sizeStyles: CSSStyleSheet;
+/** :host radius: --_r by [radius]. */
+export declare const radiusStyles: CSSStyleSheet;
+/** [data-variant] backgrounds/colors from the --_<variant> properties. */
+export declare const variantStyles: CSSStyleSheet;
+/** The backdrop of modal overlays: --ray-overlay and --ray-overlay-blur on dialog::backdrop. */
+export declare const overlayStyles: CSSStyleSheet;
+// --- motion and light dismiss ------------------------------------------------
+
+/** A duration token in ms ("fast" | "base" | "slow"). */
+export declare function duration(el: Element, name?: "fast" | "base" | "slow"): number;
+/** False with reduced motion, a zero duration token or a hidden page. */
+export declare function motionAllowed(el: Element, name?: "fast" | "base" | "slow"): boolean;
+/** Plays keyframes (fill: forwards); resolves at once when motion is not allowed. Call cancel() after hiding. */
+export declare function play(el: Element, keyframes: Keyframe[], options?: { speed?: "fast" | "base" | "slow"; ease?: "standard" | "in" | "out"; pseudoElement?: string }): { finished: Promise<void>; cancel(): void };
+/** Waits for several play() results. */
+export declare function playAll(list: Array<{ finished: Promise<void>; cancel(): void }>): { finished: Promise<void>; cancel(): void };
+/** Fades and folds an element to zero height. */
+export declare function collapseOut(el: Element, options?: { speed?: "fast" | "base" | "slow" }): { finished: Promise<void>; cancel(): void };
+/** The default exit of floating panels. */
+export declare const POP_OUT: Keyframe[];
+/** Registers an open manual panel for Escape / outside-press dismissal; returns the unregister function. */
+export declare function dismissable(entry: { panel: Element; owner: Element; trigger?: Element | null; close: (reason: "outside" | "escape" | "replaced") => void }): () => void;
+
+/** Sets --ray-overlay-blur on an element: a number (px), a CSS length or "none"; empty removes it. */
+export declare function applyOverlayBlur(el: HTMLElement, value: string | number | null | undefined): void;
+/** A ring spinner: <span class="loader">. */
+export declare const loaderStyles: CSSStyleSheet;
+/** .sr-only: hidden but announced. */
+export declare const srOnlyStyles: CSSStyleSheet;
+
+// --- positioning and focus ---------------------------------------------------
+
+export interface PlaceOptions {
+  placement?: string;
+  offset?: number;
+  padding?: number;
+  flip?: boolean;
+  matchWidth?: boolean;
+}
+export declare function place(
+  anchor: { left: number; top: number; right: number; bottom: number; width: number; height: number },
+  floating: HTMLElement,
+  options?: PlaceOptions,
+): string;
+export declare function pointRect(x: number, y: number): DOMRectReadOnly;
+export declare function autoUpdate(anchor: Element | object, floating: HTMLElement, update: () => void): () => void;
+/** Tabbable elements under root, through shadow roots and slots. */
+export declare function tabbables(root: Element | ShadowRoot, options?: { lightOnly?: boolean }): HTMLElement[];
+/** Focuses the first [autofocus] or tabbable element; whether something got focus. */
+export declare function focusFirst(root: Element | ShadowRoot, options?: { lightOnly?: boolean }): boolean;
+
+// --- charts (core/charts.js) -----------------------------------------------------
+
+/** Number of series colors (--ray-chart-1 … --ray-chart-8). */
+export declare const CHART_SERIES: number;
+/** The chart tokens resolved to concrete colors for the theme of an element. */
+export interface ChartTheme {
+  scheme: "light" | "dark";
+  /** Series colors, in order (#rrggbb). */
+  series: string[];
+  background: string;
+  grid: string;
+  axis: string;
+  text: string;
+  tooltip: { background: string; text: string; border: string };
+  font: { family: string; size: number };
+}
+export declare function chartTheme(el?: Element): ChartTheme;
+/** Calls cb with the new chart theme whenever the theme changes; returns a stop function. */
+export declare function onChartThemeChange(cb: (theme: ChartTheme) => void, el?: Element): () => void;
+/** A color with an alpha, as rgba(): withAlpha("#1c7ed6", 0.2). */
+export declare function withAlpha(color: string, alpha: number): string;
+
+// --- scrolling ---------------------------------------------------------------
+
+/** The scroller of an element: `target`, else the content of its ray-app-shell or ray-scroll-area, else the window. */
+export declare function scrollerOf(el: Element, target?: Element | string | null): Element | Window;
+/** Calls cb with the scroll position and direction ("down" | "up") once per frame; returns a stop function. */
+export declare function watchScroll(scroller: Element | Window, cb: (state: { y: number; direction: "up" | "down" }) => void, options?: { tolerance?: number }): () => void;
+
+// --- native host (core/host.js, core/raylang.js) -----------------------------
+
+/** A file a native host chose: a path on disk, with the File fields components read. */
+export declare class HostFile {
+  constructor(init: { path: string; name?: string; size?: number; type?: string; lastModified?: number });
+  readonly path: string;
+  readonly name: string;
+  readonly size: number;
+  readonly type: string;
+  readonly lastModified: number;
+}
+export interface FileFilter {
+  name: string;
+  extensions: string[];
+}
+/** What the program around the page can do natively; components use it when it is there. */
+export interface Host {
+  name: string;
+  can(op: "pick_files" | "pick_path" | "confirm" | "menu_items" | "run_menu" | "popup_menu" | "window_colors" | "set_edited" | (string & {})): boolean;
+  pickFiles?(options?: { title?: string; multiple?: boolean; directory?: string; filters?: FileFilter[] }): Promise<HostFile[]>;
+  pickPath?(options?: { mode?: "open" | "folder" | "save"; title?: string; directory?: string; suggested?: string; filters?: FileFilter[] }): Promise<string | null>;
+  menuItems?(): Promise<HostMenuItem[]>;
+  runMenu?(tag: string): Promise<true>;
+  popupMenu?(items: { title?: string; enabled?: boolean; checked?: boolean; separator?: boolean }[]): Promise<number | null>;
+  setEdited?(edited: boolean): Promise<true>;
+  setWindowColors?(colors: { background?: string; titlebar?: string }): Promise<true>;
+  /** Set when the page runs under a transparent title bar (px). */
+  titlebar?: { height: number; inset: number } | null;
+  confirm?(options?: { title?: string; message?: string; confirmLabel?: string; cancelLabel?: string; style?: "" | "info" | "warning" | "error" }): Promise<boolean>;
+}
+/** An item of the app's native menu bar, as a host lists it. */
+export interface HostMenuItem {
+  menu: string;
+  tag: string;
+  title: string;
+  /** A chord such as "cmd+shift+s" (cmd: ⌘ on macOS, Ctrl elsewhere); "" for none. */
+  shortcut: string;
+  enabled: boolean;
+  checked: boolean;
+}
+export declare function setHost(host: Host | null): void;
+export declare function getHost(): Host | null;
+export declare function hostCan(op: string): boolean;
+/** Calls cb whenever the host changes; returns the unsubscribe function. */
+export declare function onHostChange(cb: (host: Host | null) => void): () => void;
+/** The title bar the page runs under ({ height, inset } px), or null. */
+export declare function titlebar(): { height: number; inset: number } | null;
+/** Makes el drag the window under a host's title bar (data-ray-drag); returns the undo function. */
+export declare function dragRegion(el: Element): () => void;
+export interface EditTracker {
+  readonly dirty: boolean;
+  /** Takes the current values as saved. */
+  clean(): void;
+  check(): void;
+  stop(): void;
+}
+/** Follows whether a form has unsaved changes; with a host, the window shows it. */
+export declare function trackEdits(form: HTMLFormElement, options?: { onChange?: (dirty: boolean) => void }): EditTracker;
+/** The MIME type of a file name, from its extension ("" when unknown). */
+export declare function typeOfName(name: string): string;
+/** The file dialog filters of an accept list ([] = any file); `name` defaults to the extensions. */
+export declare function acceptFilters(accept: string | null | undefined, name?: string): FileFilter[];
+/** The extensions of a MIME type or pattern ("image/*"). */
+export declare function extensionsOfType(type: string): string[];
+
+/** The version of the ray-elements bridge protocol the page speaks. */
+export declare const PROTOCOL: number;
+export interface RaylangHost extends Host {
+  name: "raylang";
+  platform: string;
+  version: string;
+}
+/**
+ * In a std/ui window whose program calls elements/bridge's handle(), installs the
+ * raylang host; null in a browser or when the program does not answer in `timeout` ms.
+ */
+export declare function enableRaylang(options?: { timeout?: number; ray?: unknown; windowColors?: boolean }): Promise<RaylangHost | null>;
+
+// --- Button (button)
+/** <ray-button> A button, or a link styled as one with href. Submits or resets its form with type. */
+export declare class RayButton extends RayElement {
+  /** Visual style. raised: a physical key on a darker edge that sinks when pressed (mouse, touch or keyboard). */
+  variant: "filled" | "light" | "outline" | "subtle" | "default" | "transparent" | "gradient" | "raised";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient: string | undefined;
+  /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
+  color: string | undefined;
+  /** Height, padding and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** submit/reset act on the enclosing form. */
+  type: "button" | "submit" | "reset";
+  /** Not interactive (also when inside a disabled fieldset). */
+  disabled: boolean | undefined;
+  /** Shows a spinner over the content and blocks clicks. */
+  loading: boolean | undefined;
+  /** Takes the whole width of its container. */
+  fullWidth: boolean | undefined;
+  /** Renders a link instead of a button. */
+  href: string | undefined;
+  /** Link target, with href. */
+  target: string | undefined;
+  /** With type=submit: submitted as name=value. */
+  name: string | undefined;
+  /** With type=submit: the submitted value. */
+  value: string | undefined;
+  /** The form a submit/reset button acts on. */
+  readonly form: HTMLFormElement | null;
+}
+
+// --- Button group (button-group)
+/** <ray-button-group> role=group; give it a label. The corners come from the --ray-group-radius-* custom properties, which your own components can read too. */
+export declare class RayButtonGroup extends RayElement {
+  /** Direction of the group. */
+  orientation: "horizontal" | "vertical";
+  /** Fills its container; the children share the width. */
+  fullWidth: boolean | undefined;
+  /** Accessible name (aria-label). */
+  label: string | undefined;
+}
+
+// --- Icon button (icon-button)
+/** <ray-icon-button> Same properties as ray-button; variant defaults to subtle. */
+export declare class RayIconButton extends RayButton {
+  /** Accessible name and tooltip (required: the button has no text). */
+  label: string | undefined;
+  /** Visual style. */
+  variant: "filled" | "light" | "outline" | "subtle" | "default" | "transparent" | "gradient" | "raised";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient: string | undefined;
+  /** A palette color or any CSS color. */
+  color: string | undefined;
+  /** Width and height. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** Shows a spinner instead of the icon. */
+  loading: boolean | undefined;
+}
+
+// --- Toggle (toggle)
+/** <ray-toggle> Click, Enter or Space flips pressed and fires change. In a form it is submitted like a checkbox: value (default "on") under name while pressed; reset restores the initial pressed attribute. */
+export declare class RayToggle extends RayButton {
+  /** On. */
+  pressed: boolean | undefined;
+  /** Look of "on": subtle (tint), outline (colored border + tint), light (muted → tint), filled (surface → solid color), raised (a key that latches down, lit). ray-button's default, transparent and gradient are left out: no distinct on state, or only a color change. */
+  variant: "subtle" | "outline" | "light" | "filled" | "raised";
+  /** Square, for an icon alone (give it a label). */
+  square: boolean | undefined;
+  /** Accessible name and tooltip, for icon-only toggles. */
+  label: string | undefined;
+}
+
+// --- Toggle group (toggle-group)
+/** <ray-toggle-group> Each toggle's value (else its text) is its key. variant, color, size, radius and square reach the toggles that do not set their own. One tab stop (the selected toggle); arrows, Home and End move; Space/Enter flips. */
+export declare class RayToggleGroup extends RayButtonGroup {
+  /** single: choosing one turns the others off; multiple: each toggle is independent. */
+  type: "single" | "multiple";
+  /** The selected key (single) or keys (multiple: an array, or a comma-separated attribute). */
+  value: string | string[] | undefined;
+  /** Form field name: the value (multiple: one entry per key). */
+  name: string | undefined;
+  /** Needs a value; with single the selected toggle cannot be turned off. */
+  required: boolean | undefined;
+  /** Disables every toggle. */
+  disabled: boolean | undefined;
+  /** Toggles apart, each with its own corners (default: joined). */
+  spaced: boolean | undefined;
+  /** Variant of the toggles. */
+  variant: "subtle" | "outline" | "light" | "filled" | "raised" | undefined;
+  /** Color of the toggles' on state. */
+  color: string | undefined;
+  /** Size of the toggles. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** Corner radius of the toggles. */
+  radius: string | undefined;
+  /** Square toggles, for icons. */
+  square: boolean | undefined;
+  /** The selected keys as a list, in any mode. */
+  values: string[];
+  /** The toggles of this group. */
+  readonly toggles: RayToggle[];
+}
+
+// --- Checkbox (checkbox)
+/** <ray-checkbox> A checkbox with label, description and error. Submits value when checked. */
+export declare class RayCheckbox extends FieldControl {
+  /** Current state. The checked attribute is the initial state (restored on reset). */
+  checked: boolean | undefined;
+  /** Mixed state; cleared on the next user change. */
+  indeterminate: boolean | undefined;
+  /** Submitted value when checked. */
+  value: string;
+  /** Form field name. */
+  name: string | undefined;
+  /** Label text (or put the label in the content). */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** Error text. */
+  error: string | undefined;
+  /** Must be checked to submit. */
+  required: boolean | undefined;
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+  /** Checked look: filled box, or colored border and mark. */
+  variant: "filled" | "outline";
+  /** A palette color or any CSS color for the checked state. */
+  color: string | undefined;
+  /** Box and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Side of the label. */
+  labelPosition: "right" | "left";
+}
+
+// --- Checkbox group (checkbox-group)
+/** <ray-checkbox-group> The group is the form control: one entry per checked value under name (like checkboxes sharing a name); the checkboxes inside lose their own name. It stops their change events and fires its own. role="group" named by its label. */
+export declare class RayCheckboxGroup extends FormControl {
+  /** The checked values. The value attribute: "a,b". */
+  value: string[] | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Group label (also its accessible name). */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** Error text. */
+  error: string | undefined;
+  /** At least one must be checked. */
+  required: boolean | undefined;
+  /** Disables every checkbox. */
+  disabled: boolean | undefined;
+  /** At most this many: the others are disabled once reached; the label shows the count. */
+  max: number | undefined;
+  /** Layout of the checkboxes. */
+  orientation: "vertical" | "horizontal";
+  /** Size of the checkboxes that set none. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** Color of the checkboxes that set none. */
+  color: string | undefined;
+  /** The description before the checkboxes or after them. */
+  descriptionPosition: "above" | "below";
+  /** The checkboxes of this group. */
+  readonly checkboxes: HTMLElement[];
+}
+
+// --- Color picker (color-picker)
+/** How a color value is written. */
+export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla";
+/** sRGB channels and alpha, all 0…1. */
+export type Rgba = { r: number; g: number; b: number; a: number };
+/** A color string (hex with 3/4/6/8 digits, rgb(a), hsl(a), or any CSS color) as channels and alpha, or null. */
+export declare function parseColorValue(input: string | null | undefined): Rgba | null;
+/** Channels and alpha as a string in a format (default hex). */
+export declare function formatColor(color: Rgba, format?: ColorFormat): string;
+/** <ray-color-picker> Keyboard: arrows move the area's thumb (saturation, brightness) or a slider's; Shift for 10× steps; Home/End on the sliders. The alpha slider shows when format has alpha. */
+export declare class RayColorPicker extends FormControl {
+  /** The color, written in format. Any color is accepted and rewritten in format. The value attribute is the initial value (restored on form reset). */
+  value: string | undefined;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. Formats ending in a show the opacity slider. */
+  format: ColorFormat;
+  /** Preset colors below the picker: an array, or a comma-separated list in the attribute (commas inside rgb()/hsl() are kept). */
+  swatches: string | string[] | undefined;
+  /** Swatches in each row. */
+  swatchesPerRow: number;
+  /** Only the swatches: no area nor sliders. */
+  swatchesOnly: boolean | undefined;
+  /** Width of the picker and size of its thumbs. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Takes the width of its container. */
+  fullWidth: boolean | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** Accessible name of the whole picker. */
+  label: string | undefined;
+  /** The current color as channels and alpha (0…1). */
+  readonly rgba: Rgba;
+}
+/** <ray-color-input> Type any CSS color (it becomes the value as soon as it is valid; invalid text goes back to the value on blur), or open the picker with a click or ArrowDown. The eyedropper shows only where the browser has the EyeDropper API. */
+export declare class RayColorInput extends FieldControl {
+  /** The color, written in format. The value attribute is the initial value (restored on form reset). */
+  value: string | undefined;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. */
+  format: ColorFormat;
+  /** Preset colors in the dropdown (an array, or a comma-separated list). */
+  swatches: string | string[] | undefined;
+  /** Swatches in each row. */
+  swatchesPerRow: number;
+  /** Shown while empty. */
+  placeholder: string | undefined;
+  /** Hides the eyedropper button. */
+  hideEyedropper: boolean | undefined;
+  /** The dropdown is shown. */
+  open: boolean | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Label above the field. */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** Error message; marks the field invalid. */
+  error: string | undefined;
+  /** Must have a color. */
+  required: boolean | undefined;
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** Field height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius: xs…xl or a CSS length. */
+  radius: string | undefined;
+  /** Visual style of the field. */
+  variant: "default" | "filled" | "unstyled";
+  /** Where the description goes. */
+  descriptionPosition: "above" | "below";
+  /** The ray-color-picker in the dropdown. */
+  readonly picker: RayColorPicker;
+  /** Opens or closes the dropdown. */
+  toggle(force?: boolean): void;
+  addEventListener<K extends keyof RayColorInputEventMap>(type: K, listener: (this: RayColorInput, ev: RayColorInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayColorInputEventMap>(type: K, listener: (this: RayColorInput, ev: RayColorInputEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayColorInputEventMap extends HTMLElementEventMap {
+  /** The dropdown opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** The dropdown closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Combobox (combobox)
+/** <ray-combobox> The WAI-ARIA combobox pattern (a text field with a listbox popup; the active option is aria-activedescendant). Arrows move, Enter picks, Escape closes (then clears with clearable), Backspace in an empty field removes the last chip. The form gets one entry per value. */
+export declare class RayCombobox extends FieldControl {
+  /** The chosen value; an array with multiple. The value attribute: "a,b" with multiple. */
+  value: string | string[] | undefined;
+  /** Options instead of child <option>/<optgroup> elements. */
+  data: Array<string | { value: string; label?: string; disabled?: boolean; group?: string }> | undefined;
+  /** Several values, shown as chips. */
+  multiple: boolean | undefined;
+  /** Shown while empty. */
+  placeholder: string | undefined;
+  /** What was typed can be added when no option matches it ("+ Create …"); fires ray-create. */
+  creatable: boolean | undefined;
+  /** A button that clears the value. */
+  clearable: boolean | undefined;
+  /** With multiple: at most this many. */
+  maxValues: number | undefined;
+  /** At most this many options shown (large lists: keep typing). */
+  limit: number | undefined;
+  /** Shown when nothing matches. */
+  nothingFound: string;
+  /** The dropdown is shown. */
+  open: boolean | undefined;
+  /** The value as an array (with or without multiple). */
+  readonly values: string[];
+  /** Opens or closes the dropdown. */
+  toggle(force?: boolean): void;
+  addEventListener<K extends keyof RayComboboxEventMap>(type: K, listener: (this: RayCombobox, ev: RayComboboxEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayComboboxEventMap>(type: K, listener: (this: RayCombobox, ev: RayComboboxEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayComboboxEventMap extends HTMLElementEventMap {
+  /** A new value was created from the typed text. */
+  "ray-create": CustomEvent<{ value: string }>;
+  /** The dropdown opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** The dropdown closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Date picker (date-picker)
+/** <ray-date-picker> Values are ISO dates ("2026-10-06"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. */
+export declare class RayDatePicker extends FieldControl {
+  /** The chosen date, ISO "YYYY-MM-DD" ("" for none). The value attribute is the initial value (restored on form reset). */
+  value: string | undefined;
+  /** Earliest selectable date (ISO). Earlier days are disabled; an earlier value is invalid (rangeUnderflow). */
+  min: string | undefined;
+  /** Latest selectable date (ISO). */
+  max: string | undefined;
+  /** Shown while no date is chosen. */
+  placeholder: string;
+  /** How the date is displayed (Intl dateStyle). */
+  format: "short" | "medium" | "long" | "full";
+  /** Locale for names and formats. Default: the nearest lang attribute, else the browser's. */
+  locale: string | undefined;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay: number | undefined;
+  /** Shows a button that clears the date. */
+  clearable: boolean | undefined;
+  /** The calendar dropdown is shown. */
+  open: boolean | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label (also the accessible name). */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text. */
+  error: string | undefined;
+  /** Required for form submission. */
+  required: boolean | undefined;
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Box style. */
+  variant: "default" | "filled" | "unstyled";
+  /** Opens or closes the calendar. */
+  toggle(force?: boolean): void;
+  /** The chosen date as displayed ("" when none). */
+  readonly displayValue: string;
+  addEventListener<K extends keyof RayDatePickerEventMap>(type: K, listener: (this: RayDatePicker, ev: RayDatePickerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayDatePickerEventMap>(type: K, listener: (this: RayDatePicker, ev: RayDatePickerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayDatePickerEventMap extends HTMLElementEventMap {
+  /** The calendar opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** The calendar closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+/** <ray-calendar> WAI-ARIA grid: arrows move by day and week, Home/End to the week's ends, PageUp/PageDown by month (with Shift, by year), Enter/Space select. */
+export declare class RayCalendar extends RayElement {
+  /** The selected date, ISO "YYYY-MM-DD". */
+  value: string | undefined;
+  /** Earliest selectable date (ISO). */
+  min: string | undefined;
+  /** Latest selectable date (ISO). */
+  max: string | undefined;
+  /** Locale for month and weekday names. Default: the nearest lang attribute, else the browser's. */
+  locale: string | undefined;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay: number | undefined;
+  /** Day cell size and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Focuses the day the keyboard is on (the selected day, else today). */
+  focusDay(): void;
+  /** The day the keyboard is on (ISO). */
+  readonly focusedDate: string;
+}
+
+// --- File upload (file-upload)
+/** The files a change added and removed. */
+export type FileUploadChange = { added: (File | HostFile)[]; removed: (File | HostFile)[] };
+/** A refused file and why. */
+export type FileRejection = { file: File; reason: "type" | "size" | "count"; message: string };
+/** Bytes from a number or a size like "10 MB" (NaN if neither). */
+export declare function parseSize(value: string | number | null | undefined): number;
+/** Whether a file passes an accept list. */
+export declare function matchesAccept(file: { name: string; type: string }, accept: string | null | undefined): boolean;
+/** A short human list of an accept value ("PNG, JPG or PDF"). */
+export declare function describeAccept(accept: string | null | undefined): string;
+/** <ray-file-upload> A drag that can only be refused turns the zone red before the drop; refused files fire ray-reject and are explained under the zone. Without multiple a new file replaces the current one. Uploading is the app's: attachmentFor(file) gives the row whose progress/status/error to set. */
+export declare class RayFileUpload extends FormControl {
+  /** Form field name: every file is submitted under it. */
+  name: string | undefined;
+  /** Label above the zone. */
+  label: string | undefined;
+  /** Help text under the label. */
+  description: string | undefined;
+  /** Error text (replaces the explanation of refused files). */
+  error: string | undefined;
+  /** The form needs at least one file. */
+  required: boolean | undefined;
+  /** No picking, dropping or removing. */
+  disabled: boolean | undefined;
+  /** Accepted types, as in <input type=file>: ".pdf,.png", "image/*", "application/json". */
+  accept: string | undefined;
+  /** Several files (else one, replaced by the next). */
+  multiple: boolean | undefined;
+  /** Largest file: bytes or a size like "10 MB", "512 KB". */
+  maxSize: string | number | undefined;
+  /** With multiple: the most files kept. */
+  maxFiles: number | undefined;
+  /** Small text in the zone. Default: from accept, max-size and max-files ("PNG or PDF · up to 10 MB each · max. 5 files"). */
+  hint: string | undefined;
+  /** Title of the zone, before "or browse". */
+  dropLabel: string;
+  /** The link-styled word (the button text in compact). */
+  browseLabel: string;
+  /** Title while files are dragged over it. */
+  activeLabel: string;
+  /** Title on touch screens (no hover), where dragging files is rare. */
+  tapLabel: string;
+  /** default: a tall centered zone; compact: one row with a Browse button. */
+  variant: "default" | "compact";
+  /** How chosen files show: full-width rows, thumbnail cards, or not at all (render your own on change). */
+  list: "rows" | "cards" | "none";
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window), browsing opens the system dialog and gives paths (see `paths`); drop and paste still give Files. */
+  native: boolean | undefined;
+  /** Accent of hover, drag and the browse link (default: primary). */
+  color: string | undefined;
+  /** The chosen files (assign to replace them, without events). */
+  files: (File | HostFile)[];
+  /** The paths of the files chosen with the native dialog (`native`), in order; they are also what the form submits for them. */
+  readonly paths: string[];
+  /** What the last change event changed: the files added and removed. null before the first one, and after assigning files. */
+  readonly lastChange: FileUploadChange | null;
+  /** Opens the system file picker. */
+  open(): void;
+  /** Adds files as if dropped (checks them, fires the events). */
+  addFiles(files: Iterable<File>): { accepted: File[]; rejected: FileRejection[] };
+  /** Removes a file (fires change). */
+  removeFile(file: File): boolean;
+  /** Removes every file (fires change). */
+  clear(): void;
+  /** The row of a file, to show its upload progress, status or error. */
+  attachmentFor(file: File): RayAttachment | null;
+  addEventListener<K extends keyof RayFileUploadEventMap>(type: K, listener: (this: RayFileUpload, ev: RayFileUploadEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayFileUploadEventMap>(type: K, listener: (this: RayFileUpload, ev: RayFileUploadEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayFileUploadEventMap extends HTMLElementEventMap {
+  /** Some files were refused (type, size or count). */
+  "ray-reject": CustomEvent<{ rejected: FileRejection[] }>;
+  /** The native dialog failed (with `native`). */
+  "ray-error": CustomEvent<{ error: Error }>;
+}
+
+// --- Input (input)
+/** <ray-input> Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input. */
+export declare class RayInput extends FieldControl {
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value: string | undefined;
+  /** Input type. */
+  type: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label (also the accessible name). */
+  label: string | undefined;
+  /** Help text under the label. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text; marks the field invalid (display only — does not block submit). */
+  error: string | undefined;
+  /** Placeholder text. */
+  placeholder: string | undefined;
+  /** Required for form submission; shows an asterisk. */
+  required: boolean | undefined;
+  /** Not editable nor submitted. */
+  disabled: boolean | undefined;
+  /** Not editable, still submitted. */
+  readonly: boolean | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Box style. */
+  variant: "default" | "filled" | "unstyled";
+  /** Selects the text. */
+  select(): void;
+}
+
+// --- Number input (number-input)
+/** The number in a text with separators, prefix or suffix (NaN if none). */
+export declare function parseNumber(text: string, options?: { decimal?: string; thousands?: string }): number;
+/** A number as text with fixed decimals and separators. */
+export declare function formatNumber(n: number, options?: { decimals?: number; thousands?: string; decimal?: string }): string;
+/** <ray-number-input> Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow). */
+export declare class RayNumberInput extends FieldControl {
+  /** The number (undefined when empty). */
+  value: number | undefined;
+  /** Minimum. */
+  min: number | undefined;
+  /** Maximum. */
+  max: number | undefined;
+  /** What + and − add. */
+  step: number;
+  /** Fixed decimals (2: 3 shows as 3.00). */
+  decimals: number | undefined;
+  /** Shown before the number ("$"). */
+  prefix: string | null;
+  /** Shown after the number (" kg", "%"). */
+  suffix: string | undefined;
+  /** Groups thousands in the shown text (",", ".", " "). */
+  thousandsSeparator: string | undefined;
+  /** The decimal mark shown and typed ("," in many locales). */
+  decimalSeparator: string;
+  /** When out-of-range input is clamped: on blur, while typing, or never (then it is invalid). */
+  clamp: "blur" | "strict" | "none";
+  /** No + and − buttons (the keys still step). */
+  hideControls: boolean | undefined;
+  /** Shown while empty. */
+  placeholder: string | undefined;
+  /** Not editable, still submitted. */
+  readonly: boolean | undefined;
+  /** Adds steps (negative: subtracts), clamped; fires input and change. */
+  stepBy(steps: number): void;
+}
+
+// --- Password input (password-input)
+/** <ray-password-input> autocomplete defaults to current-password: use new-password on sign-up and change forms. The toggle keeps the focus and the caret in the field. */
+export declare class RayPasswordInput extends RayInput {
+  /** The password is shown as text. */
+  visible: boolean | undefined;
+  /** Accessible name of the toggle while hidden. */
+  showLabel: string;
+  /** Accessible name of the toggle while shown. */
+  hideLabel: string;
+  addEventListener<K extends keyof RayPasswordInputEventMap>(type: K, listener: (this: RayPasswordInput, ev: RayPasswordInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayPasswordInputEventMap>(type: K, listener: (this: RayPasswordInput, ev: RayPasswordInputEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayPasswordInputEventMap extends HTMLElementEventMap {
+  /** The user showed or hid the password. */
+  "ray-visibility-change": CustomEvent<{ visible: boolean }>;
+}
+
+// --- Path input (path-input)
+/** The folder part of a path ("" when it has none), with / or \ separators. */
+export declare function dirName(path: string): string;
+/** The last part of a path. */
+export declare function baseName(path: string): string;
+/** <ray-path-input> Browse… shows only with a native host that offers pick_path (see core/host.js); the dialog starts in the folder of the current path. The path can always be typed or pasted. */
+export declare class RayPathInput extends RayInput {
+  /** What the dialog chooses: an existing file, a folder, or a file to save (the current name is suggested). */
+  mode: "open" | "folder" | "save";
+  /** File types the dialog offers, as in <input type=file>: ".json,.toml", "image/*" (ignored for folders). */
+  accept: string | undefined;
+  /** Text of the button. */
+  browseLabel: string;
+  /** Title of the system dialog (default: the label). */
+  dialogTitle: string | undefined;
+  /** Whether Browse… is available (a native host offers pick_path). */
+  readonly canBrowse: boolean;
+  /** Opens the system dialog; resolves to the chosen path (also set as value, with input and change), or null. */
+  browse(): Promise<string | null>;
+  addEventListener<K extends keyof RayPathInputEventMap>(type: K, listener: (this: RayPathInput, ev: RayPathInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayPathInputEventMap>(type: K, listener: (this: RayPathInput, ev: RayPathInputEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayPathInputEventMap extends HTMLElementEventMap {
+  /** The system dialog failed. */
+  "ray-error": CustomEvent<{ error: Error }>;
+}
+
+// --- Radio group (radio)
+/** <ray-radio-group> Arrow keys move the selection, Tab enters and leaves the group. */
+export declare class RayRadioGroup extends FormControl {
+  /** Value of the checked radio. Initial: the value attribute, or a radio with the checked attribute. */
+  value: string | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Group label (also its accessible name). */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text. */
+  error: string | undefined;
+  /** A choice is needed to submit. */
+  required: boolean | undefined;
+  /** Disables every radio. */
+  disabled: boolean | undefined;
+  /** Layout of the radios. */
+  orientation: "vertical" | "horizontal";
+  /** Size of every radio. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Checked color of every radio. */
+  color: string | undefined;
+  /** Checked look of every radio: filled circle, or colored ring and dot. */
+  variant: "filled" | "outline";
+  /** The radios of the group. */
+  readonly radios: RayRadio[];
+}
+/** <ray-radio> One choice among options: ray-radio elements inside a ray-radio-group, which is the form control. */
+export declare class RayRadio extends RayElement {
+  /** Value given to the group when chosen. */
+  value: string | undefined;
+  /** Label text (or the content). */
+  label: string | undefined;
+  /** Help text under the label. */
+  description: string | undefined;
+  /** Cannot be chosen. */
+  disabled: boolean | undefined;
+  /** Overrides the group color. */
+  color: string | undefined;
+  /** Overrides the group size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** Overrides the group variant. */
+  variant: "filled" | "outline" | undefined;
+  /** Whether this radio is the group's value. */
+  readonly checked: boolean;
+}
+
+// --- Search (search)
+/** <ray-search> Escape clears it (when it has text); Enter fires ray-search at once. JS: clear(), focus(). */
+export declare class RaySearch extends FieldControl {
+  /** Current text. */
+  value: string | undefined;
+  /** Placeholder text. */
+  placeholder: string;
+  /** Keyboard shortcut that focuses it ("mod+k", "/"; mod = ⌘ on macOS, Ctrl elsewhere). Shown as a hint while empty. */
+  shortcut: string | undefined;
+  /** Milliseconds of quiet typing before ray-search fires (0: on every keystroke). */
+  debounce: number;
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label (also the accessible name). Without it, use aria-label. */
+  label: string | undefined;
+  /** Not editable nor submitted. */
+  disabled: boolean | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Box style. */
+  variant: "default" | "filled" | "unstyled";
+  /** Empties the box (fires input and ray-search). */
+  clear(): void;
+  addEventListener<K extends keyof RaySearchEventMap>(type: K, listener: (this: RaySearch, ev: RaySearchEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RaySearchEventMap>(type: K, listener: (this: RaySearch, ev: RaySearchEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RaySearchEventMap extends HTMLElementEventMap {
+  /** After `debounce` ms without typing, on Enter, and when cleared. */
+  "ray-search": CustomEvent<{ value: string }>;
+}
+
+// --- Segmented control (segmented-control)
+/** <ray-segmented-control> One choice among a few, as a segmented row with a sliding indicator. Options from child <option> elements or data. Form-associated. */
+export declare class RaySegmentedControl extends FormControl {
+  /** Selected value (default: the first enabled option). */
+  value: string | undefined;
+  /** Options as strings or { value, label, disabled }. */
+  data: Array<string | { value: string; label?: string; disabled?: boolean }> | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Indicator color (default: a raised neutral segment). */
+  color: string | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Takes the whole width. */
+  fullWidth: boolean | undefined;
+  /** Direction. */
+  orientation: "horizontal" | "vertical";
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+  /** The options, from data or the child options. */
+  readonly items: Array<{ value: string; label: string; disabled: boolean }>;
+}
+
+// --- Select (select)
+/** <ray-select> A select with its own dropdown (keyboard, typeahead, groups); options from child <option> elements or the data property. Form-associated. */
+export declare class RaySelect extends FieldControl {
+  /** Selected value. */
+  value: string | undefined;
+  /** Options as strings or { value, label, disabled } (instead of child options). */
+  data: Array<string | { value: string; label?: string; disabled?: boolean }> | undefined;
+  /** Shown while nothing is selected (with required, blocks submit). */
+  placeholder: string | undefined;
+  /** The dropdown is shown. */
+  open: boolean | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label. */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text. */
+  error: string | undefined;
+  /** Required for form submission. */
+  required: boolean | undefined;
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant: "default" | "filled" | "unstyled";
+  /** The options of the model select. */
+  readonly options: HTMLOptionsCollection;
+  /** Opens or closes the dropdown. */
+  toggle(force?: boolean): void;
+  addEventListener<K extends keyof RaySelectEventMap>(type: K, listener: (this: RaySelect, ev: RaySelectEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RaySelectEventMap>(type: K, listener: (this: RaySelect, ev: RaySelectEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RaySelectEventMap extends HTMLElementEventMap {
+  /** The dropdown opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** The dropdown closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Slider (slider)
+/** <ray-slider> A native range input (keyboard, touch and screen readers as usual) with label, value display and marks. Form-associated. */
+export declare class RaySlider extends FieldControl {
+  /** Current value. The value attribute is the initial one (restored on reset). */
+  value: number | undefined;
+  /** Minimum. */
+  min: number;
+  /** Maximum. */
+  max: number;
+  /** Step. */
+  step: number;
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label. */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text. */
+  error: string | undefined;
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+  /** Track and thumb color. */
+  color: string | undefined;
+  /** Track and thumb size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Shows the value next to the label. */
+  showValue: boolean | undefined;
+  /** Appended to the shown value and its spoken text (%, px, ms…). */
+  unit: string | undefined;
+  /** Labeled ticks under the track. */
+  marks: Array<number | { value: number; label?: string }> | undefined;
+}
+
+// --- Switch (switch)
+/** <ray-switch> Same properties and events as ray-checkbox (indeterminate does not apply). */
+export declare class RaySwitch extends RayCheckbox {
+  /** Current state. The checked attribute is the initial state. */
+  checked: boolean | undefined;
+  /** Submitted value when on. */
+  value: string;
+  /** Form field name. */
+  name: string | undefined;
+  /** Label text (or the content). */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** Error text. */
+  error: string | undefined;
+  /** Side of the label. */
+  labelPosition: "right" | "left";
+  /** Track color when on. */
+  color: string | undefined;
+  /** Track size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive nor submitted. */
+  disabled: boolean | undefined;
+}
+
+// --- Textarea (textarea)
+/** <ray-textarea> Also forwards placeholder, autocomplete, minlength, maxlength, spellcheck and wrap. Initial value: the value attribute or the element's text. */
+export declare class RayTextarea extends FieldControl {
+  /** Current value. */
+  value: string | undefined;
+  /** Visible rows (minimum when autosize). */
+  rows: number;
+  /** Grows with the content. */
+  autosize: boolean | undefined;
+  /** With autosize: stop growing and scroll after this many rows. */
+  maxRows: number | undefined;
+  /** Form field name. */
+  name: string | undefined;
+  /** Visible label. */
+  label: string | undefined;
+  /** Help text. */
+  description: string | undefined;
+  /** The description before the control (help first) or after it, with the error (fields in a row stay aligned). */
+  descriptionPosition: "above" | "below";
+  /** Error text. */
+  error: string | undefined;
+  /** Required for form submission. */
+  required: boolean | undefined;
+  /** Not editable nor submitted. */
+  disabled: boolean | undefined;
+  /** Not editable, still submitted. */
+  readonly: boolean | undefined;
+  /** Font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant: "default" | "filled" | "unstyled";
+}
+
+// --- Bottom nav (bottom-nav)
+/** <ray-bottom-nav> With href items it marks the link to this page (aria-current="page"); without, it is a control (value, change). Clear of the home indicator (safe-area inset). In a ray-app-shell, put it in the bottom slot. */
+export declare class RayBottomNav extends RayElement {
+  /** The current destination (an item's value, else its href, else its label). */
+  value: string | undefined;
+  /** Accessible name of the navigation. */
+  label: string;
+  /** Which labels show (the others stay for assistive technology). */
+  labels: "always" | "active" | "never";
+  /** How the current destination is marked besides its color. */
+  indicator: "pill" | "line" | "none";
+  /** A palette color or any CSS color for the current item and the action (default: primary). */
+  color: string | undefined;
+  /** default: a bar across the bottom; floating: a rounded bar off the edges. */
+  variant: "default" | "floating";
+  /** Slides away while the content scrolls down, back on the way up. */
+  hideOnScroll: boolean | undefined;
+  /** Pinned to the bottom of the window (outside a shell). */
+  fixed: boolean | undefined;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget: string | undefined;
+  /** The items, in order. */
+  readonly items: RayBottomNavItem[];
+  addEventListener<K extends keyof RayBottomNavEventMap>(type: K, listener: (this: RayBottomNav, ev: RayBottomNavEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayBottomNavEventMap>(type: K, listener: (this: RayBottomNav, ev: RayBottomNavEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayBottomNavEventMap extends HTMLElementEventMap {
+  /** An action item was pressed. */
+  "ray-select": CustomEvent<{ value: string }>;
+}
+/** <ray-bottom-nav-item> A link with href, else a button. The badge is read with the label ("Messages, 3"). */
+export declare class RayBottomNavItem extends RayElement {
+  /** Its value (default: its href, else its label). */
+  value: string | undefined;
+  /** The label. */
+  label: string | undefined;
+  /** An icon of the registry (or put one in the icon slot). */
+  icon: string | undefined;
+  /** Makes it a link. */
+  href: string | undefined;
+  /** A count or a short text on the icon. */
+  badge: string | undefined;
+  /** A dot on the icon (something new). */
+  dot: boolean | undefined;
+  /** Set by the bar: the current destination. */
+  active: boolean | undefined;
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** A raised round button ("New"): it fires ray-select on the bar, it is not a destination. */
+  action: boolean | undefined;
+}
+
+// --- Breadcrumbs (breadcrumbs)
+/** <ray-breadcrumbs> A <nav aria-label="Breadcrumb"> around a list. The last crumb is the current page (aria-current="page") unless one says current. */
+export declare class RayBreadcrumbs extends RayElement {
+  /** Text between crumbs ("/", "›", "·") or "chevron" (an icon). */
+  separator: string;
+  /** Longer paths show the first crumb, "…" (a button that expands them) and the last max-items − 1. */
+  maxItems: number | undefined;
+  /** Accessible name of the nav. */
+  label: string;
+  /** Font size. */
+  size: "xs" | "sm" | "md" | "lg";
+  /** The crumbs, in order. */
+  readonly items: RayBreadcrumb[];
+  /** Shows every crumb of a collapsed path. */
+  expand(): void;
+}
+/** <ray-breadcrumb> A link with href (text without, or when current). */
+export declare class RayBreadcrumb extends RayElement {
+  /** Where it leads. */
+  href: string | undefined;
+  /** This crumb is the current page (default: the last). */
+  current: boolean | undefined;
+}
+
+// --- Nav link (nav-link)
+/** <ray-nav-link> A link with href (aria-current=page when active), or a button that toggles its nested links. */
+export declare class RayNavLink extends RayElement {
+  /** Text. */
+  label: string | undefined;
+  /** Second line. */
+  description: string | undefined;
+  /** Makes it a link (ignored when it has nested links). */
+  href: string | undefined;
+  /** The current page or section. */
+  active: boolean | undefined;
+  /** Nested links are shown. */
+  opened: boolean | undefined;
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** Style of the active state. */
+  variant: "light" | "filled" | "subtle";
+  /** Active color. */
+  color: string | undefined;
+  /** Only the icon (left section), centered; the label becomes its accessible name and tooltip. A collapsed ray-sidebar sets it. */
+  iconOnly: boolean | undefined;
+  /** The nested nav links. */
+  readonly links: RayNavLink[];
+  addEventListener<K extends keyof RayNavLinkEventMap>(type: K, listener: (this: RayNavLink, ev: RayNavLinkEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayNavLinkEventMap>(type: K, listener: (this: RayNavLink, ev: RayNavLinkEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayNavLinkEventMap extends HTMLElementEventMap {
+  /** Nested links were shown or hidden. */
+  "ray-toggle": CustomEvent<{ opened: boolean }>;
+}
+
+// --- Pagination (pagination)
+/** The items a pagination shows for a page (numbers and "dots"). */
+export declare function paginationRange(total: number, value: number, siblings?: number, boundaries?: number): Array<number | "dots">;
+/** <ray-pagination> JS: setPage(n), next(), previous(), first(), last(); page (clamped value). */
+export declare class RayPagination extends RayElement {
+  /** Number of pages. */
+  total: number;
+  /** Current page (1-based). */
+  value: number;
+  /** Pages shown on each side of the current one. */
+  siblings: number;
+  /** Pages always shown at the start and the end. */
+  boundaries: number;
+  /** Adds first/last page buttons. */
+  withEdges: boolean | undefined;
+  /** Hides the previous/next (and first/last) buttons. */
+  hideControls: boolean | undefined;
+  /** Color of the current page: a palette color or any CSS color. Default: the primary color. */
+  color: string | undefined;
+  /** Item size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius of the items. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Not interactive. */
+  disabled: boolean | undefined;
+  /** Accessible name of the navigation landmark. */
+  label: string;
+  /** The current page clamped to 1…total. */
+  readonly page: number;
+  /** Goes to a page (fires change). */
+  setPage(page: number): void;
+  /** Next page. */
+  next(): void;
+  /** Previous page. */
+  previous(): void;
+  /** First page. */
+  first(): void;
+  /** Last page. */
+  last(): void;
+}
+
+// --- Sidebar (sidebar)
+/** <ray-sidebar> Put ray-sidebar-group + ray-nav-link (with an icon in slot=left) inside. Collapsed, nav links show only their icon (the label becomes the tooltip) and the host has the collapsed attribute, so your own header/footer content can hide with CSS (ray-sidebar[collapsed] .brand-name { display: none }). */
+export declare class RaySidebar extends RayElement {
+  /** Wide screens: an icon rail instead of the full panel. */
+  collapsed: boolean | undefined;
+  /** Narrow screens: the drawer is shown (modal, focus trapped; Escape, backdrop click or a followed link close it). */
+  open: boolean | undefined;
+  /** The edge it sits on. */
+  side: "left" | "right";
+  /** A panel against the edge, or a floating card with a margin. */
+  variant: "sidebar" | "floating";
+  /** Width when expanded (CSS length). Default 16rem. */
+  width: string | undefined;
+  /** Width of the icon rail. Default 3.5rem. */
+  collapsedWidth: string | undefined;
+  /** At this viewport width and below, it becomes a drawer. */
+  breakpoint: string;
+  /** Accessible name of its navigation. */
+  label: string;
+  /** Collapses/expands on wide screens; opens/closes the drawer on narrow ones. */
+  toggle(): void;
+  /** Whether it is in drawer mode (at or below the breakpoint). */
+  readonly mobile: boolean;
+  addEventListener<K extends keyof RaySidebarEventMap>(type: K, listener: (this: RaySidebar, ev: RaySidebarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RaySidebarEventMap>(type: K, listener: (this: RaySidebar, ev: RaySidebarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RaySidebarEventMap extends HTMLElementEventMap {
+  /** After toggle(). */
+  "ray-toggle": CustomEvent<{ collapsed: boolean; open: boolean; mobile: boolean }>;
+  /** The drawer opened (narrow screens). */
+  "ray-open": CustomEvent<unknown>;
+  /** The drawer closed (narrow screens). */
+  "ray-close": CustomEvent<unknown>;
+}
+/** <ray-sidebar-group> A titled section of nav links; the title fades out (keeping its height) when the sidebar collapses. */
+export declare class RaySidebarGroup extends RayElement {
+  /** Section title. */
+  label: string | undefined;
+}
+
+// --- Stepper (stepper)
+/** <ray-stepper> The steps are a labelled list; the active one has aria-current="step" and each reads "Step 2 of 4: Shipping, completed". Only the active step's content shows; past the last step, the completed slot. */
+export declare class RayStepper extends RayElement {
+  /** Index of the active step (steps.length: completed). */
+  active: number;
+  /** Steps in a row above the content, or in a column beside it. */
+  orientation: "horizontal" | "vertical";
+  /** Label beside the number, or under it (narrow screens, many steps). */
+  iconPosition: "left" | "top";
+  /** Completed steps are buttons that go back to them. */
+  allowStepSelect: boolean | undefined;
+  /** With allow-step-select off, false lets the user jump to any step. */
+  linear: boolean;
+  /** Size of the numbers. */
+  size: "sm" | "md" | "lg";
+  /** A palette color or any CSS color for active and completed steps (default: primary). */
+  color: string | undefined;
+  /** Accessible name of the list of steps. */
+  label: string;
+  /** The steps, in order. */
+  readonly steps: RayStep[];
+  /** To the next step (past the last: completed). */
+  next(): void;
+  /** To the previous step. */
+  prev(): void;
+}
+/** <ray-step> A step: its header is drawn by the stepper, its content shows while it is active. */
+export declare class RayStep extends RayElement {
+  /** The label. */
+  label: string | undefined;
+  /** A line under the label. */
+  description: string | undefined;
+  /** An icon instead of the number. */
+  icon: string | undefined;
+  /** The icon once done (default: check). */
+  completedIcon: string | undefined;
+  /** A spinner instead of the number. */
+  loading: boolean | undefined;
+  /** An error message: red step, the message as its description. */
+  error: string | undefined;
+  /** Cannot be selected. */
+  disabled: boolean | undefined;
+}
+
+// --- Tabs (tabs)
+/** <ray-tabs> Tabs and panels (WAI-ARIA tabs pattern): arrows, Home/End, automatic or manual activation. */
+export declare class RayTabs extends RayElement {
+  /** Value of the active tab (default: the first enabled one). */
+  value: string | undefined;
+  /** Tab style. */
+  variant: "default" | "outline" | "pills";
+  /** Tab list direction (and arrow keys). */
+  orientation: "horizontal" | "vertical";
+  /** Active indicator color. */
+  color: string | undefined;
+  /** manual: arrows move focus, Enter/Space activates. */
+  activation: "auto" | "manual";
+  /** Tabs share the full width. */
+  grow: boolean | undefined;
+  /** The tabs. */
+  readonly tabs: RayTab[];
+  /** The panels. */
+  readonly panels: RayTabPanel[];
+}
+/** <ray-tab> Tabs and panels (WAI-ARIA tabs pattern): arrows, Home/End, automatic or manual activation. */
+export declare class RayTab extends RayElement {
+  /** Matches a ray-tab-panel's value. */
+  value: string | undefined;
+  /** Cannot be activated. */
+  disabled: boolean | undefined;
+}
+/** <ray-tab-panel> Tabs and panels (WAI-ARIA tabs pattern): arrows, Home/End, automatic or manual activation. */
+export declare class RayTabPanel extends RayElement {
+  /** Matches a ray-tab's value. */
+  value: string | undefined;
+}
+
+// --- Command palette (command-palette)
+/** An action of ray-command-palette. */
+export type CommandAction = { id?: string; label: string; description?: string; group?: string; keywords?: string | string[]; shortcut?: string; icon?: string | Node; disabled?: boolean; native?: boolean; tag?: string; onSelect?: (action: CommandAction) => void };
+/** How well an action matches a query (0 = not at all). */
+export declare function score(action: CommandAction, query: string): number;
+/** <ray-command-palette> Running an action fires ray-select and calls its onSelect. The best matches come first, grouped. */
+export declare class RayCommandPalette extends RayElement {
+  /** Shown. */
+  open: boolean | undefined;
+  /** The actions. */
+  actions: CommandAction[] | undefined;
+  /** The search text. */
+  query: string | undefined;
+  /** Placeholder of the search field. */
+  placeholder: string;
+  /** Toggle shortcut (mod = ⌘ on macOS, Ctrl elsewhere); empty to disable. */
+  hotkey: string;
+  /** Maximum results. */
+  limit: number;
+  /** Text without results. */
+  emptyLabel: string;
+  /** Accessible name. */
+  label: string;
+  /** No keyboard hint at the bottom. */
+  hideHint: boolean | undefined;
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window, menus declared with elements/bridge), also lists the app's menu bar, grouped by menu with its shortcuts; running one gives the program the menu's own event. */
+  nativeMenus: boolean | undefined;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur: string | undefined;
+  /** Opens it. */
+  show(): void;
+  /** Closes it. */
+  hide(): void;
+  /** Opens or closes it. */
+  toggle(): void;
+  /** The actions matching the query, in display order. */
+  readonly results: CommandAction[];
+  addEventListener<K extends keyof RayCommandPaletteEventMap>(type: K, listener: (this: RayCommandPalette, ev: RayCommandPaletteEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayCommandPaletteEventMap>(type: K, listener: (this: RayCommandPalette, ev: RayCommandPaletteEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayCommandPaletteEventMap extends HTMLElementEventMap {
+  /** An action was run. */
+  "ray-select": CustomEvent<{ action: CommandAction }>;
+  /** After it opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** After it closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Dialog (dialog)
+/** Options of confirmDialog(). */
+export type ConfirmOptions = { label?: string; message?: string; confirmLabel?: string; cancelLabel?: string; color?: string; native?: boolean };
+/** A confirmation dialog; resolves true when confirmed. With a native host, the system dialog (native: false keeps the ray-dialog). */
+export declare function confirmDialog(options?: ConfirmOptions): Promise<boolean>;
+/** <ray-dialog> Any slotted element with data-dialog-close closes it (its value becomes returnValue). JS: show(), close(returnValue), confirmDialog({ label, message, confirmLabel, cancelLabel, color, native }) -> Promise<boolean>; with a native host (ray-elements/core/raylang.js in a std/ui window) it asks with the system dialog unless native is false. */
+export declare class RayDialog extends RayElement {
+  /** Shown as a modal. */
+  open: boolean | undefined;
+  /** Heading (also the dialog's accessible name). */
+  label: string | undefined;
+  /** A line under the title (the dialog's accessible description). */
+  description: string | undefined;
+  /** Width: xs…xl, full (the whole window), or any CSS length; a percentage is of the window (70% = 70vw, at least 40rem). Never wider than the window. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+  /** Fixed height (the body scrolls): any CSS length; a percentage is of the window (70% = 70dvh, at least 30rem). Never taller than the window. Default: as tall as the content, up to the window. */
+  height: string | undefined;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: lg. */
+  radius: string | undefined;
+  /** Vertical placement. */
+  position: "center" | "top";
+  /** Escape and backdrop clicks do not close it (the × still does; hide it with hide-close). To allow only one of them, cancel ray-request-close by its source. */
+  persistent: boolean | undefined;
+  /** No close button in the header. */
+  hideClose: boolean | undefined;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur: string | undefined;
+  /** Opens it. */
+  show(): void;
+  /** Closes it with an optional return value. */
+  close(returnValue?: string): void;
+  /** The value it was closed with. */
+  returnValue: string;
+  addEventListener<K extends keyof RayDialogEventMap>(type: K, listener: (this: RayDialog, ev: RayDialogEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayDialogEventMap>(type: K, listener: (this: RayDialog, ev: RayDialogEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayDialogEventMap extends HTMLElementEventMap {
+  /** After it opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** After it closed; detail: { returnValue }. */
+  "ray-close": CustomEvent<{ returnValue: string }>;
+  /** Escape, backdrop or close button; cancelable (preventDefault keeps it open). detail: { source }. */
+  "ray-request-close": CustomEvent<{ source: "escape" | "backdrop" | "button" }>;
+}
+
+// --- Drawer (drawer)
+/** <ray-drawer> Any slotted element with data-dialog-close closes it. JS: show(), close(returnValue). */
+export declare class RayDrawer extends RayElement {
+  /** Shown. */
+  open: boolean | undefined;
+  /** Heading (also the accessible name). */
+  label: string | undefined;
+  /** A line under the title (the drawer's accessible description). */
+  description: string | undefined;
+  /** The edge it slides from. */
+  position: "right" | "left" | "top" | "bottom";
+  /** Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+  /** No backdrop nor scroll lock: the page stays interactive (a side panel). */
+  modeless: boolean | undefined;
+  /** Detached from the edge, with rounded corners. */
+  floating: boolean | undefined;
+  /** Escape and backdrop clicks do not close it. */
+  persistent: boolean | undefined;
+  /** No close button in the header. */
+  hideClose: boolean | undefined;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur: string | undefined;
+  /** Opens it. */
+  show(): void;
+  /** Closes it with an optional return value. */
+  close(returnValue?: string): void;
+  /** The value it was closed with. */
+  returnValue: string;
+  addEventListener<K extends keyof RayDrawerEventMap>(type: K, listener: (this: RayDrawer, ev: RayDrawerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayDrawerEventMap>(type: K, listener: (this: RayDrawer, ev: RayDrawerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayDrawerEventMap extends HTMLElementEventMap {
+  /** After it opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** After it closed; detail: { returnValue }. */
+  "ray-close": CustomEvent<{ returnValue: string }>;
+  /** Escape, backdrop or close button; cancelable. */
+  "ray-request-close": CustomEvent<{ source: "escape" | "backdrop" | "button" }>;
+}
+
+// --- Menu (menu)
+/** <ray-menu> A dropdown menu (menu button pattern: arrows, Home/End, typeahead, Enter, Escape) or, with context, a context menu at the pointer. */
+export declare class RayMenu extends Floating {
+  /** Shown. */
+  open: boolean | undefined;
+  /** Preferred side and alignment. */
+  placement: "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "left-start";
+  /** Opens on right click (contextmenu) over the trigger area, at the pointer. */
+  context: boolean | undefined;
+  /** Choosing an item does not close the menu. */
+  keepOpen: boolean | undefined;
+  /** With a native host (ray-elements/core/raylang.js in a std/ui window), opens as the system's context menu at the pointer: items and dividers, same ray-select. */
+  native: boolean | undefined;
+  /** Opens the items as the system's context menu (needs a native host); resolves to the chosen item, or null. */
+  popupNative(): Promise<RayMenuItem | null>;
+  /** Opens it. */
+  show(): void;
+  /** Closes it. */
+  hide(): void;
+  /** Opens or closes it. */
+  toggle(): void;
+  /** The trigger element. */
+  readonly trigger: Element | null;
+  /** The items of this menu. */
+  readonly items: RayMenuItem[];
+  addEventListener<K extends keyof RayMenuEventMap>(type: K, listener: (this: RayMenu, ev: RayMenuEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayMenuEventMap>(type: K, listener: (this: RayMenu, ev: RayMenuEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayMenuEventMap extends HTMLElementEventMap {
+  /** An item was chosen; detail: { value, item }. */
+  "ray-select": CustomEvent<{ value: string; item: RayMenuItem }>;
+  /** After it opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** After it closed. */
+  "ray-close": CustomEvent<unknown>;
+}
+/** <ray-menu-item> A dropdown menu (menu button pattern: arrows, Home/End, typeahead, Enter, Escape) or, with context, a context menu at the pointer. */
+export declare class RayMenuItem extends RayElement {
+  /** Reported in ray-select (default: the text). */
+  value: string | undefined;
+  /** Skipped by the keyboard, cannot be chosen. */
+  disabled: boolean | undefined;
+  /** Text and hover color (e.g. red for destructive actions). */
+  color: string | undefined;
+}
+/** <ray-menu-label> A section caption inside the menu. */
+export declare class RayMenuLabel extends RayElement {
+}
+/** <ray-menu-divider> A separator between groups of items. */
+export declare class RayMenuDivider extends RayElement {
+}
+
+// --- Popover (popover)
+/** <ray-popover> Positioned in JS (flip + shift to stay in the viewport). JS: show(), hide(), toggle(). */
+export declare class RayPopover extends Floating {
+  /** Shown. */
+  open: boolean | undefined;
+  /** Preferred side and alignment. */
+  placement: "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+  /** Gap to the trigger in px. */
+  offset: number;
+  /** Panel width (px number or CSS length). Default: its content. */
+  width: string | undefined;
+  /** At least as wide as the trigger. */
+  matchWidth: boolean | undefined;
+  /** Panel padding. */
+  padding: "0" | "xs" | "sm" | "md" | "lg";
+  /** Moves focus into the panel when opened and keeps Tab inside it. */
+  trapFocus: boolean | undefined;
+  /** Opens it. */
+  show(): void;
+  /** Closes it. */
+  hide(): void;
+  /** Opens or closes it. */
+  toggle(): void;
+  /** The trigger element. */
+  readonly trigger: Element | null;
+  addEventListener<K extends keyof RayPopoverEventMap>(type: K, listener: (this: RayPopover, ev: RayPopoverEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayPopoverEventMap>(type: K, listener: (this: RayPopover, ev: RayPopoverEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayPopoverEventMap extends HTMLElementEventMap {
+  /** After it opened. */
+  "ray-open": CustomEvent<unknown>;
+  /** After it closed (also by Escape or an outside click). */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Tooltip (tooltip)
+/** <ray-tooltip> A short hint on hover and focus of its child; the label also becomes the child's accessible description. */
+export declare class RayTooltip extends Floating {
+  /** Tooltip text. */
+  label: string | undefined;
+  /** Preferred side. */
+  placement: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+  /** ms before showing. */
+  openDelay: number;
+  /** ms before hiding. */
+  closeDelay: number;
+  /** A palette color or any CSS color. Default: inverted foreground/background. */
+  color: string | undefined;
+  /** Never shows. */
+  disabled: boolean | undefined;
+  /** Opens it. */
+  show(): void;
+  /** Closes it. */
+  hide(): void;
+  /** Opens or closes it. */
+  toggle(): void;
+  /** The trigger element. */
+  readonly trigger: Element | null;
+}
+
+// --- Accordion (accordion)
+/** <ray-accordion> Collapsible sections (WAI-ARIA accordion pattern); one open at a time, or several with multiple. */
+export declare class RayAccordion extends RayElement {
+  /** Open item's value; with multiple, an array (attribute: comma-separated). */
+  value: string | string[] | undefined;
+  /** Several items may be open. */
+  multiple: boolean | undefined;
+  /** Visual style. */
+  variant: "default" | "contained" | "separated" | "filled";
+  /** Side of the chevron. */
+  chevronPosition: "right" | "left";
+  /** The items. */
+  readonly items: RayAccordionItem[];
+  /** The open values as an array, whatever the mode. */
+  readonly openValues: string[];
+}
+/** <ray-accordion-item> Collapsible sections (WAI-ARIA accordion pattern); one open at a time, or several with multiple. */
+export declare class RayAccordionItem extends RayElement {
+  /** Identifies the item in the accordion's value. */
+  value: string | undefined;
+  /** Header text (or slot=label). */
+  label: string | undefined;
+  /** A secondary line under the label, in the header. */
+  description: string | undefined;
+  /** Cannot be toggled. */
+  disabled: boolean | undefined;
+  /** aria-level of the header. */
+  headingLevel: number;
+  /** Whether this item is expanded. */
+  readonly open: boolean;
+}
+
+// --- Attachment (attachment)
+/** <ray-attachment> Assign a File to `file` to fill name, size, type and an image thumbnail. Removing it (× button) fires a cancelable ray-remove and then removes the element. */
+export declare class RayAttachment extends RayElement {
+  /** File name (ellipsized; full name in the tooltip). */
+  name: string | undefined;
+  /** Size in bytes, shown as "12 KB", "3.4 MB". */
+  size: number | undefined;
+  /** MIME type: picks the icon (image or file) and, with the name, the extension badge. */
+  type: string | undefined;
+  /** Thumbnail URL for images (falls back to the icon if it fails to load). */
+  src: string | undefined;
+  /** Makes the name a download link. */
+  href: string | undefined;
+  /** Upload progress 0–100: a thin bar and "Uploading… 45%". Unset: done. */
+  progress: number | undefined;
+  /** Explicit state. Default: "uploading" while progress is set, else "done". */
+  status: "uploading" | "done" | "error" | undefined;
+  /** Error text shown with status="error" (default "Upload failed"). */
+  error: string | undefined;
+  /** Shows a remove (×) button. */
+  removable: boolean | undefined;
+  /** Accessible label of the remove button; {name} is replaced by the file name. */
+  removeLabel: string;
+  /** row: a compact chip; card: the thumbnail on top. */
+  variant: "row" | "card";
+  /** Dimmed, not removable, the name is not a link. */
+  disabled: boolean | undefined;
+  /** The File shown (fills name, size, type and a thumbnail for images). */
+  file: File | null;
+  /** The effective status. */
+  readonly state: "uploading" | "done" | "error";
+  addEventListener<K extends keyof RayAttachmentEventMap>(type: K, listener: (this: RayAttachment, ev: RayAttachmentEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayAttachmentEventMap>(type: K, listener: (this: RayAttachment, ev: RayAttachmentEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayAttachmentEventMap extends HTMLElementEventMap {
+  /** The remove button was pressed; cancelable (preventDefault keeps the element). */
+  "ray-remove": CustomEvent<{ name: string; file: File | null }>;
+}
+/** <ray-attachments> A wrapping row of ray-attachment elements. */
+export declare class RayAttachments extends RayElement {
+}
+
+// --- Avatar (avatar)
+/** Up to two initials of a name: "Ada Lovelace" -> "AL". */
+export declare function initials(name: string): string;
+/** <ray-avatar> An image, the initials of a name, or a placeholder icon. */
+export declare class RayAvatar extends RayElement {
+  /** Image URL; falls back to initials if it fails to load. */
+  src: string | undefined;
+  /** Accessible name (default: name). */
+  alt: string | undefined;
+  /** Person or entity name; its initials are shown without an image. */
+  name: string | undefined;
+  /** A palette color or any CSS color. */
+  color: string | undefined;
+  /** Style of the initials/placeholder. */
+  variant: "light" | "filled" | "outline" | "default";
+  /** Diameter. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+}
+
+// --- Badge (badge)
+/** <ray-badge> A short status label. */
+export declare class RayBadge extends RayElement {
+  /** Visual style. */
+  variant: "light" | "filled" | "outline" | "dot" | "default" | "gradient";
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient: string | undefined;
+  /** A palette color or any CSS color. */
+  color: string | undefined;
+  /** Height and font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Keeps the text as written instead of uppercase. */
+  normalCase: boolean | undefined;
+}
+
+// --- Blockquote (blockquote)
+/** <ray-blockquote> Paragraphs in it are spaced and the last one has no bottom margin. The attribution is text (cite) or rich content (slot="cite": an avatar, a name, a role). */
+export declare class RayBlockquote extends RayElement {
+  /** Who said it, shown below the quote ("— Grace Hopper"). */
+  cite: string | undefined;
+  /** URL of the source: the inner blockquote's cite attribute. */
+  href: string | undefined;
+  /** A palette color or any CSS color, for the edge, the mark and the tint. Default: the primary. */
+  color: string | undefined;
+  /** light: tinted background; outline: border and edge only; filled: solid color (a pull quote). */
+  variant: "light" | "outline" | "filled";
+  /** Registry icon of the mark, or none. The icon slot replaces it. */
+  icon: string;
+  /** Text size (lg for a pull quote). */
+  size: "sm" | "md" | "lg";
+  /** Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md. */
+  padding: string | undefined;
+  /** No colored edge on the start side (the tint, border and mark stay). */
+  hideEdge: boolean | undefined;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius: string | undefined;
+}
+
+// --- Carousel (carousel)
+/** <ray-carousel> Any child is a slide. With several slides in view, positions are the snap points the viewport can reach. ArrowLeft/Right (Up/Down when vertical), Home and End move it. */
+export declare class RayCarousel extends RayElement {
+  /** Current position (0-based). Setting it scrolls there. */
+  index: number;
+  /** Accessible name of the carousel region. */
+  label: string;
+  /** Size of each slide along the scroll axis ("100%" by default; "50%", "18rem"…). */
+  slideSize: string | undefined;
+  /** Space between slides (default var(--ray-space-4)). */
+  slideGap: string | undefined;
+  /** Where a slide snaps in the viewport. */
+  align: "start" | "center";
+  /** Scroll axis (vertical needs a height; 20rem by default). */
+  orientation: "horizontal" | "vertical";
+  /** next() on the last position goes to the first, prev() on the first to the last. */
+  loop: boolean | undefined;
+  /** Milliseconds between automatic moves (0: off). Pauses on hover, focus and when the page is hidden; starts paused with reduced motion. Shows a pause/play button. */
+  autoplay: number;
+  /** No previous/next buttons. */
+  hideControls: boolean | undefined;
+  /** No indicator dots. */
+  hideIndicators: boolean | undefined;
+  /** Goes to the next position. */
+  next(): void;
+  /** Goes to the previous position. */
+  prev(): void;
+  /** Scrolls to a position (smoothly unless instant or reduced motion). */
+  goTo(index: number, options?: { instant?: boolean }): void;
+  /** Number of positions. */
+  readonly count: number;
+  /** The slide elements. */
+  readonly slides: Element[];
+}
+
+// --- Code (code)
+/** Hands every ray-code to a highlighter that returns HTML (Prism, highlight.js, Shiki…); null/undefined falls back to the built-in one. The HTML is inserted as is: pass only a trusted highlighter. null restores the built-in one. */
+export declare function setHighlighter(fn: ((code: string, lang: string) => string | Node | null | undefined | Promise<string | Node | null | undefined>) | null): void;
+/** The built-in highlighter: tokens of type keyword, string, number, comment, function, type, tag, attr, punctuation or text. */
+export declare function tokenize(code: string, lang?: string): [type: string, text: string][];
+/** <ray-code> The code comes from the code property, a <script type="text/plain"> child (raw text: anything but a closing script tag), a <template> child (parsed as HTML: the easiest for markup, but a < that is not a tag, as in Promise<void>, breaks it), or the element's text; common indentation and blank edges are removed. Built-in languages: js/ts (jsx, tsx), json, html/xml/svg/vue, css, shell, ray and diff; others show as plain text. Library classes painted with the tokens: Prism's .token.*, highlight.js's .hljs-*, and Shiki's css-variables theme. */
+export declare class RayCode extends RayElement {
+  /** The code, from script (the most convenient in React and Vue). Wins over the content. */
+  code: string | undefined;
+  /** The language: js, ts, jsx, tsx, json, html, xml, svg, vue, css, sh, ray, diff… (also shown in the header). Not lang: that is the human language of the text. */
+  language: string | undefined;
+  /** A file name or title in the header; also the scroll region's accessible name. */
+  filename: string | undefined;
+  /** Numbers each line (not copied, not selectable). */
+  lineNumbers: boolean | undefined;
+  /** Lines to highlight: "3, 5-7". */
+  highlight: string | undefined;
+  /** Wraps long lines instead of scrolling sideways. */
+  wrap: boolean | undefined;
+  /** Height before it scrolls: px as a number, or a CSS length. A taller block gets a "Show all N lines" button. */
+  maxHeight: string | undefined;
+  /** Shown whole, past max-height. */
+  expanded: boolean | undefined;
+  /** No copy button. */
+  hideCopy: boolean | undefined;
+  /** No header bar (the copy button floats in the corner). */
+  hideHeader: boolean | undefined;
+  /** Font size. */
+  size: "xs" | "sm" | "md";
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius: string | undefined;
+  /** Accessible name of the copy button. */
+  copyLabel: string;
+  /** Shown and announced after copying. */
+  copiedLabel: string;
+  /** The code shown (dedented), whatever its source. */
+  readonly source: string;
+  /** Copies the code; resolves to true when it worked. */
+  copy(): Promise<boolean>;
+  addEventListener<K extends keyof RayCodeEventMap>(type: K, listener: (this: RayCode, ev: RayCodeEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayCodeEventMap>(type: K, listener: (this: RayCode, ev: RayCodeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayCodeEventMap extends HTMLElementEventMap {
+  /** The code was copied. */
+  "ray-copy": CustomEvent<{ code: string }>;
+}
+
+// --- Icon (icon)
+/** <ray-icon> setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system. */
+export declare class RayIcon extends RayElement {
+  /** Registered icon name (iconNames()). */
+  name: string | undefined;
+  /** xs…xl or any CSS length. Default: 1em. */
+  size: string | undefined;
+  /** Accessible name; without it the icon is decorative (hidden from screen readers). */
+  label: string | undefined;
+  /** A palette color or any CSS color. Default: the text color. */
+  color: string | undefined;
+  /** Stroke width for stroke icons (default: --ray-icon-stroke, 2). */
+  stroke: number | undefined;
+}
+
+// --- Indicator (indicator)
+/** <ray-indicator> Wraps its content as tight as it is (fit-content). The label is part of the element's text for assistive technology; a dot has none: describe it on the content (aria-label="Grace, online"). */
+export declare class RayIndicator extends RayElement {
+  /** Text in the indicator (a word or a count). Empty: a dot. */
+  label: string | undefined;
+  /** Which point of the content's box it sits on. */
+  position: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
+  /** Moves it inward from that point: px as a number, or a CSS length. Use it on round content (an avatar), so it sits on the curve. */
+  offset: string | number | undefined;
+  /** A palette color or any CSS color. Default: the primary. */
+  color: string | undefined;
+  /** Diameter of the dot (and minimum height of a label): px as a number, or a CSS length. Default: 10px. */
+  size: string | number | undefined;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: round. */
+  radius: string | undefined;
+  /** A numeric label above it shows as max+ (99+). */
+  max: number | undefined;
+  /** inline-block, to sit within a line of text. */
+  inline: boolean | undefined;
+  /** A ring in the background color, to separate it from the content. */
+  withBorder: boolean | undefined;
+  /** A pulse around it (live, recording, syncing). */
+  processing: boolean | undefined;
+  /** Hides the indicator (the content stays). */
+  disabled: boolean | undefined;
+}
+
+// --- Kbd (kbd)
+/** <ray-kbd> A keyboard key: a raised keycap, or a flat chip (filled or outline) for hints in menus and buttons. */
+export declare class RayKbd extends RayElement {
+  /** Font size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** default: raised keycap; filled: flat muted chip; outline: flat with a border. */
+  variant: "default" | "filled" | "outline";
+}
+
+// --- Stat (stat)
+/** <ray-stat> A metric tile: label, value, change against a previous period, note. */
+export declare class RayStat extends RayElement {
+  /** What is measured. */
+  label: string | undefined;
+  /** The figure, already formatted. */
+  value: string | undefined;
+  /** Change (positive is shown as good, in green; see inverse). */
+  diff: number | undefined;
+  /** Unit of diff. */
+  diffUnit: string;
+  /** A line under the value (compared to…). */
+  note: string | undefined;
+  /** Lower is better (errors, latency): negative diffs are green. */
+  inverse: boolean | undefined;
+  /** Without the card around. */
+  plain: boolean | undefined;
+}
+
+// --- Table (table)
+/** A column of ray-table. */
+export type TableColumn = { key: string; label?: string; width?: number | string; align?: "left" | "center" | "right"; sortable?: boolean; render?: (row: any, index: number) => string | number | Node | null | undefined; sort?: (a: any, b: any) => number };
+/** The sort state of ray-table. */
+export type TableSort = { key: string; direction: "asc" | "desc" };
+/** <ray-table> Cells are text (render may return a DOM node; strings are never parsed as HTML). The scroll height comes from --ray-table-max-height. */
+export declare class RayTable extends RayElement {
+  /** Columns: key, label, width, align, sortable, render(row, index), sort(a, b). */
+  columns: TableColumn[] | undefined;
+  /** Rows (objects). */
+  data: any[] | undefined;
+  /** Field that identifies a row (selection). */
+  rowKey: string;
+  /** A checkbox per row and a select-all checkbox. */
+  selectable: boolean | undefined;
+  /** Keys of the selected rows. */
+  selection: unknown[] | undefined;
+  /** Current sort; set it, or let header clicks change it. */
+  sort: TableSort | null;
+  /** Do not sort here: listen to ray-sort and pass sorted data. */
+  manualSort: boolean | undefined;
+  /** Rows are focusable and fire ray-row-click (Enter too; arrows move between rows). */
+  clickableRows: boolean | undefined;
+  /** Alternate row background. */
+  striped: boolean | undefined;
+  /** Border around the table. */
+  withBorder: boolean | undefined;
+  /** Borders between columns. */
+  withColumnBorders: boolean | undefined;
+  /** The header stays visible while scrolling (with --ray-table-max-height). */
+  stickyHeader: boolean | undefined;
+  /** No row highlight on hover. */
+  noHover: boolean | undefined;
+  /** Cell padding. */
+  density: "xs" | "sm" | "md" | "lg";
+  /** Caption (also the table's accessible name). */
+  label: string | undefined;
+  /** Text without rows (or put a ray-empty-state in slot=empty). */
+  emptyLabel: string;
+  /** The rows in display order. */
+  readonly rows: any[];
+  addEventListener<K extends keyof RayTableEventMap>(type: K, listener: (this: RayTable, ev: RayTableEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayTableEventMap>(type: K, listener: (this: RayTable, ev: RayTableEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayTableEventMap extends HTMLElementEventMap {
+  /** A header changed the sort. */
+  "ray-sort": CustomEvent<{ key: string; direction: "asc" | "desc" | null }>;
+  /** The selection changed. */
+  "ray-selection-change": CustomEvent<{ selection: unknown[] }>;
+  /** A row was clicked or activated with Enter (clickable-rows). */
+  "ray-row-click": CustomEvent<{ row: any; index: number }>;
+}
+
+// --- Timeline (timeline)
+/** <ray-timeline> A list (role="list") of ray-timeline-item. */
+export declare class RayTimeline extends RayElement {
+  /** Index of the last reached item (-1: none). */
+  active: number;
+  /** Side of the line. */
+  align: "left" | "right";
+  /** Bullet size: px as a number or a CSS length (default 20px). */
+  bulletSize: string | undefined;
+  /** Line width in px (default 2). */
+  lineWidth: number | undefined;
+  /** A palette color or any CSS color for what is reached (default: primary). */
+  color: string | undefined;
+  /** Counts active from the end (the latest event at the top). */
+  reverseActive: boolean | undefined;
+  /** The items, in order. */
+  readonly items: RayTimelineItem[];
+}
+/** <ray-timeline-item> Events in order along a line (Mantine's Timeline): activity, history, a deploy's stages. Items up to active are reached (filled bullet, colored line); a bullet is a dot, an icon or an avatar. */
+export declare class RayTimelineItem extends RayElement {
+  /** The title of the event. */
+  label: string | undefined;
+  /** When ("2 h ago", a date). */
+  time: string | undefined;
+  /** An icon of the registry in the bullet. */
+  icon: string | undefined;
+  /** Its own color (a failed step in red). */
+  color: string | undefined;
+  /** The line to the next item (dashed: not happened yet). */
+  lineVariant: "solid" | "dashed" | "dotted";
+}
+
+// --- Alert (alert)
+/** <ray-alert> Announced as an alert. The icon follows the color (info, circle-check, alert-triangle, circle-x) unless icon or slot=icon. */
+export declare class RayAlert extends RayElement {
+  /** Title. */
+  label: string | undefined;
+  /** A palette color or any CSS color. */
+  color: string | undefined;
+  /** Visual style. */
+  variant: "light" | "filled" | "outline" | "default" | "transparent";
+  /** Corner radius. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** A registered icon name, or none. */
+  icon: string | undefined;
+  /** A close button; closing hides the alert (cancel ray-close to keep it). */
+  closable: boolean | undefined;
+  /** Accessible name of the close button. */
+  closeLabel: string;
+  addEventListener<K extends keyof RayAlertEventMap>(type: K, listener: (this: RayAlert, ev: RayAlertEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayAlertEventMap>(type: K, listener: (this: RayAlert, ev: RayAlertEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayAlertEventMap extends HTMLElementEventMap {
+  /** The close button was pressed; cancelable. */
+  "ray-close": CustomEvent<unknown>;
+}
+
+// --- Empty state (empty-state)
+/** <ray-empty-state> What a list, table or pane shows when it is empty: icon, title, text and the action that fills it. */
+export declare class RayEmptyState extends RayElement {
+  /** Title. */
+  label: string | undefined;
+  /** Less padding. */
+  compact: boolean | undefined;
+  /** Dashed border. */
+  withBorder: boolean | undefined;
+}
+
+// --- Notification (notification)
+/** Options of notify() and updateNotification(). */
+export type NotifyOptions = { id?: string; title?: string; message?: string; color?: string; icon?: string; loading?: boolean; autoClose?: number | false; closable?: boolean; withBorder?: boolean; action?: { label: string; onClick?: () => void }; onClose?: () => void };
+/** Shows a notification; returns its id. */
+export declare function notify(options?: NotifyOptions): string;
+/** Changes a shown notification and restarts its auto-close. */
+export declare function updateNotification(id: string, options?: NotifyOptions): boolean;
+/** Removes a notification. */
+export declare function hideNotification(id: string): boolean;
+/** Removes every notification. */
+export declare function clearNotifications(): void;
+/** The status icon a color gets: circle-check, circle-x, alert-triangle or info. */
+export declare function statusIcon(color: string): string;
+/** <ray-notification> notify({ id, title, message, color, icon, loading, autoClose (ms, default 4000; false = stays), closable, withBorder, onClose }) returns its id. A color adds a status icon in that color: green/teal a check, red/pink an error, yellow/orange a warning, others info. The status icon and the loader are 1.5rem with a 1.5 stroke; set --ray-notification-icon-size and --ray-notification-icon-stroke to change them. */
+export declare class RayNotification extends RayElement {
+  /** Title. */
+  label: string | undefined;
+  /** Status color: tints the status icon (and a slotted icon's circle). */
+  color: string | undefined;
+  /** Status icon from the registry (default: from the color); "none" for no icon. */
+  icon: string | undefined;
+  /** Shows a spinner (notify() does not auto-close it). */
+  loading: boolean | undefined;
+  /** No close button. */
+  hideClose: boolean | undefined;
+  /** Draws a border. */
+  withBorder: boolean | undefined;
+  /** Text of an action button (e.g. "Undo"); pressing it fires ray-action. */
+  actionLabel: string | undefined;
+  addEventListener<K extends keyof RayNotificationEventMap>(type: K, listener: (this: RayNotification, ev: RayNotificationEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayNotificationEventMap>(type: K, listener: (this: RayNotification, ev: RayNotificationEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayNotificationEventMap extends HTMLElementEventMap {
+  /** The close button was pressed. */
+  "ray-close": CustomEvent<unknown>;
+  /** The action button was pressed (notify() runs action.onClick and closes it). */
+  "ray-action": CustomEvent<unknown>;
+}
+/** <ray-toaster> Created by notify() when missing; add one yourself to choose its position. A stack (newest in front, older ones peeking behind) that spreads into a list on hover or keyboard focus; on touch screens a tap expands it, a tap outside collapses it, and a sideways swipe dismisses a toast. Auto-close pauses while expanded. Full width on phones. */
+export declare class RayToaster extends RayElement {
+  /** Corner of the stack. */
+  position: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center";
+  /** Maximum kept; the oldest go first. */
+  limit: number;
+  /** Toasts shown in the collapsed stack (the rest wait, hidden). */
+  visible: number;
+  /** Always expanded: a list instead of a stack. */
+  expand: boolean | undefined;
+  /** Pixels between toasts when expanded. */
+  gap: number;
+  /** Whether the stack is spread out (set it to expand or collapse it). */
+  expanded: boolean;
+  /** Places the toasts again (done automatically on changes). */
+  layout(): void;
+  /** Brings the stack above everything else in the top layer. */
+  raise(): void;
+}
+
+// --- Progress (progress)
+/** <ray-progress> A determinate or (without value) indeterminate progress bar, announced as a progressbar. */
+export declare class RayProgress extends RayElement {
+  /** Progress, from 0 to max. Unset: indeterminate. */
+  value: number | undefined;
+  /** The value of a full bar. */
+  max: number;
+  /** A palette color or any CSS color. */
+  color: string | undefined;
+  /** Bar height. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+  /** Diagonal stripes. */
+  striped: boolean | undefined;
+  /** Moving stripes (with striped). */
+  animated: boolean | undefined;
+  /** Shows the percentage: inside the bar on lg and xl, beside it on smaller sizes. */
+  showValue: boolean | undefined;
+  /** Accessible name (default: Progress). */
+  label: string | undefined;
+}
+
+// --- Skeleton (skeleton)
+/** <ray-skeleton> aria-busy="true" on the host while loading; the placeholder is aria-hidden. */
+export declare class RaySkeleton extends RayElement {
+  /** Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem). */
+  width: string | undefined;
+  /** Height of a block or of each line (CSS length, a number is px). Default: 1rem. */
+  height: string | undefined;
+  /** A circle (avatar placeholder): its diameter is width, else height. */
+  circle: boolean | undefined;
+  /** Number of text lines (the last one is shorter). */
+  lines: number | undefined;
+  /** Corner radius: xs…xl, full or a CSS length. Default: sm. */
+  radius: string | undefined;
+  /** The loading effect (always none with reduced motion). */
+  animation: "shimmer" | "pulse" | "none";
+  /** Shows the slotted content instead of the placeholder. */
+  loaded: boolean | undefined;
+}
+
+// --- Spinner (spinner)
+/** <ray-spinner> An indeterminate loading indicator, announced as a status. */
+export declare class RaySpinner extends RayElement {
+  /** A palette color or any CSS color. Default: the primary color. */
+  color: string | undefined;
+  /** Diameter. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Text read by screen readers. */
+  label: string;
+}
+
+// --- App bar (app-bar)
+/** <ray-app-bar> It follows the scroller of its ray-app-shell, else scroll-target, else the window; clear of the notch (safe-area inset). The title is plain text: put a heading in the default slot when the page needs one. */
+export declare class RayAppBar extends RayElement {
+  /** The title. */
+  label: string | undefined;
+  /** A line under the title. */
+  description: string | undefined;
+  /** The title centered (iOS). */
+  center: boolean | undefined;
+  /** default: the page background; filled: the primary color; transparent: until it elevates. */
+  variant: "default" | "filled" | "transparent";
+  /** Height: 48, 56 or 64 px. */
+  size: "sm" | "md" | "lg";
+  /** While the content scrolls: elevate (border and shadow), hide (also slides away going down, back going up), none. */
+  scrollBehavior: "elevate" | "hide" | "none";
+  /** Sticks to the top of the window (outside a shell). */
+  sticky: boolean | undefined;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget: string | undefined;
+  /** Whether scroll-behavior="hide" has slid it away. */
+  readonly concealed: boolean;
+}
+
+// --- App shell (app-shell)
+/** <ray-app-shell> The layout follows the shell's own width (a phone-sized frame shows the phone layout). Below breakpoint the navbar and the aside take no room (a ray-sidebar there still opens as its drawer) and the bottom slot shows. It fills the window's height (100dvh) unless sized. In a std/ui full_content window (ray-elements/core/raylang.js) the header becomes the title bar: room for the window buttons, and it drags the window; with layout="alt" or no header, the navbar and main start below it. */
+export declare class RayAppShell extends RayElement {
+  /** default: the header across the top; alt: the navbar full height, the header beside it. */
+  layout: "default" | "alt";
+  /** Width (px, em or rem) below which it takes the phone layout. */
+  breakpoint: string;
+  /** Padding of the main area: xs…xl, a number (px) or a CSS length. */
+  padding: string | undefined;
+  /** The element that scrolls the main content. */
+  readonly scroller: HTMLElement;
+  /** Whether it is in the phone layout. */
+  readonly mobile: boolean;
+  addEventListener<K extends keyof RayAppShellEventMap>(type: K, listener: (this: RayAppShell, ev: RayAppShellEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayAppShellEventMap>(type: K, listener: (this: RayAppShell, ev: RayAppShellEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayAppShellEventMap extends HTMLElementEventMap {
+  /** It switched between the wide and the phone layout. */
+  "ray-breakpoint": CustomEvent<{ mobile: boolean }>;
+}
+
+// --- Aspect ratio (aspect-ratio)
+/** A ratio ("16/9", "4:3", 1.5) as a CSS aspect-ratio value, or null. */
+export declare function parseRatio(value: string | number): string | null;
+/** <ray-aspect-ratio> A box with a fixed width/height ratio; its image, video or iframe fills it. */
+export declare class RayAspectRatio extends RayElement {
+  /** Width/height: "16/9", "4:3", "1" or a number. */
+  ratio: string;
+  /** How the media fills the box (object-fit). */
+  fit: "cover" | "contain";
+  /** Corner radius: xs…xl, full or a CSS length. */
+  radius: string | undefined;
+}
+
+// --- Card (card)
+/** <ray-card> A surface for grouped content, with optional media, header and footer. */
+export declare class RayCard extends RayElement {
+  /** Inner spacing (named space scale). */
+  padding: "0" | "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** Elevation. */
+  shadow: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+  /** Draws a border. */
+  withBorder: boolean | undefined;
+  /** default: card surface; filled: muted surface; outline: border without fill. */
+  variant: "default" | "filled" | "outline";
+}
+
+// --- Center (center)
+/** <ray-center> It fills its parent's width; give it a height (or a flex or grid parent that stretches it) to center vertically. */
+export declare class RayCenter extends RayElement {
+  /** As wide as its content (inline-flex): an icon beside text. */
+  inline: boolean | undefined;
+}
+
+// --- Container (container)
+/** The maximum widths of size. */
+export declare const CONTAINER_SIZES: { xs: string; sm: string; md: string; lg: string; xl: string };
+/** <ray-container> Its content centered, up to a maximum width, with side padding (Mantine's Container): the column of a page. */
+export declare class RayContainer extends RayElement {
+  /** Maximum width: xs 540px, sm 720px, md 960px, lg 1140px, xl 1320px, or any CSS length. */
+  size: string;
+  /** Side padding: xs…xl, a number (px) or a CSS length. */
+  padding: string;
+  /** No maximum width: the whole width, still padded. */
+  fluid: boolean | undefined;
+}
+
+// --- Grid (grid)
+/** "1 sm:2 lg:4" as counts per width. */
+export declare function parseCols(value: string | number | undefined): { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number };
+/** The widths of cols (36em, 48em, 62em, 75em, 88em). */
+export declare const BREAKPOINTS: { xs: string; sm: string; md: string; lg: string; xl: string };
+/** <ray-grid> The widths are the grid's own (container queries: xs 36em, sm 48em, md 62em, lg 75em, xl 88em), so a grid in a narrow column or a phone frame drops to fewer columns. It needs a width from its parent: in a flex row give it one or let it grow. A child spans with data-span="2"…"12" or "full". */
+export declare class RayGrid extends RayElement {
+  /** Columns: a count, then counts from a width up ("1 sm:2 lg:4"). */
+  cols: string;
+  /** Instead of cols: as many columns of at least this width as fit ("14rem", 220). */
+  minColWidth: string | undefined;
+  /** Space between cells: xs…xl, a number (px) or a CSS length. */
+  gap: string;
+  /** Space between rows when it differs from gap. */
+  rowGap: string | undefined;
+  /** Vertical alignment of the cells in a row. */
+  align: "stretch" | "start" | "center" | "end";
+}
+
+// --- Group (group)
+/** <ray-group> A flex row on the host: the children are laid out directly, no wrapper. */
+export declare class RayGroup extends RayElement {
+  /** Space between children: xs…xl (the space scale), a number (px) or any CSS length. */
+  gap: string;
+  /** Cross-axis alignment. */
+  align: "center" | "start" | "end" | "stretch" | "baseline";
+  /** Main-axis distribution: space-between for a title on one side and actions on the other. */
+  justify: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+  /** Keeps the children on one line. */
+  nowrap: boolean | undefined;
+  /** The children share the width equally. */
+  grow: boolean | undefined;
+}
+
+// --- Scroll area (scroll-area)
+/** <ray-scroll-area> Give it a size: height, max-height, CSS, or a flex/grid parent. The scrolling box is focusable (keyboard scrolling); name it with label when it holds a region of its own. */
+export declare class RayScrollArea extends RayElement {
+  /** Height (CSS length). */
+  height: string | undefined;
+  /** Maximum height: it grows with its content up to this, then scrolls. */
+  maxHeight: string | undefined;
+  /** Which ways it scrolls. */
+  orientation: "vertical" | "horizontal" | "both";
+  /** The scrollbar: auto (when it scrolls), hover (while hovered or scrolling), never (still scrolls). */
+  type: "auto" | "hover" | "never";
+  /** No edge shadows. */
+  noShadows: boolean | undefined;
+  /** Distance from the end (px) at which ray-reach-end fires. */
+  threshold: number;
+  /** Accessible name: makes the scrolling box a named region. */
+  label: string | undefined;
+  /** The scrolling element (scrollTop, scrollTo…). */
+  readonly viewport: HTMLElement;
+  /** Scrolls to the top (left). */
+  scrollToStart(options?: { behavior?: ScrollBehavior }): void;
+  /** Scrolls to the bottom (right when horizontal). */
+  scrollToEnd(options?: { behavior?: ScrollBehavior }): void;
+  addEventListener<K extends keyof RayScrollAreaEventMap>(type: K, listener: (this: RayScrollArea, ev: RayScrollAreaEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayScrollAreaEventMap>(type: K, listener: (this: RayScrollArea, ev: RayScrollAreaEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayScrollAreaEventMap extends HTMLElementEventMap {
+  /** The end came within threshold (once per arrival). */
+  "ray-reach-end": CustomEvent<{ edge: "bottom" | "right" }>;
+}
+
+// --- Separator (separator)
+/** <ray-separator> A horizontal or vertical rule, optionally labeled (Mantine's Divider). */
+export declare class RaySeparator extends RayElement {
+  /** Direction of the rule. */
+  orientation: "horizontal" | "vertical";
+  /** Text in the middle of a horizontal rule. */
+  label: string | undefined;
+  /** Where the label sits. */
+  labelPosition: "left" | "center" | "right";
+  /** Thickness (1–5px). */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Line style. */
+  variant: "solid" | "dashed" | "dotted";
+}
+
+// --- Split (split)
+/** <ray-split> Divider keys: arrows move it (Shift: faster), Home/End go to min/max, Enter or double click collapse the start pane. */
+export declare class RaySplit extends RayElement {
+  /** horizontal: side by side; vertical: stacked. */
+  orientation: "horizontal" | "vertical";
+  /** Initial size of the start pane: px (280) or any CSS length (30%, 20rem). */
+  position: string;
+  /** Minimum size of the start pane in px. */
+  min: number;
+  /** Maximum size of the start pane in px. */
+  max: number | undefined;
+  /** The start pane is hidden. */
+  collapsed: boolean | undefined;
+  /** The divider cannot be moved. */
+  disabled: boolean | undefined;
+  /** A key: the size is saved in localStorage and restored. */
+  autosave: string | undefined;
+  /** The start pane's size in px. */
+  readonly size: number;
+  /** Collapses or restores the start pane. */
+  toggle(): void;
+  addEventListener<K extends keyof RaySplitEventMap>(type: K, listener: (this: RaySplit, ev: RaySplitEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RaySplitEventMap>(type: K, listener: (this: RaySplit, ev: RaySplitEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RaySplitEventMap extends HTMLElementEventMap {
+  /** After a drag, a key or a collapse. */
+  "ray-resize": CustomEvent<{ size: number; collapsed: boolean }>;
+}
+
+// --- Stack (stack)
+/** Gap, align and justify of a stack or group onto an element's custom properties (for a layout component of your own). */
+export declare function applyFlex(el: HTMLElement, options: { gap?: string; align?: string; justify?: string }, alignDefault: string): void;
+/** <ray-stack> A flex column on the host: the children are laid out directly, no wrapper. */
+export declare class RayStack extends RayElement {
+  /** Space between children: xs…xl (the space scale), a number (px) or any CSS length. */
+  gap: string;
+  /** Cross-axis alignment: stretch fills the width. */
+  align: "stretch" | "start" | "center" | "end" | "baseline";
+  /** Main-axis distribution (with a height to distribute). */
+  justify: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+}
+
+// --- Status bar (statusbar)
+/** <ray-statusbar> The bar at the bottom of an app window: items on the left and on the right; items with action are buttons. */
+export declare class RayStatusbar extends RayElement {
+  /** accent: the primary color (e.g. while debugging). */
+  variant: "default" | "accent";
+}
+/** <ray-statusbar-item> The bar at the bottom of an app window: items on the left and on the right; items with action are buttons. */
+export declare class RayStatusbarItem extends RayElement {
+  /** A button (listen to click). */
+  action: boolean | undefined;
+  /** Text color (red for errors…). */
+  color: string | undefined;
+  /** Accessible name and tooltip (for icon-only or terse items). */
+  label: string | undefined;
+}
+
+// --- Theme toggle (theme-toggle)
+/** <ray-theme-toggle> Icon button that cycles the document theme: system, light, dark. */
+export declare class RayThemeToggle extends RayElement {
+  /** Control height. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  addEventListener<K extends keyof RayThemeToggleEventMap>(type: K, listener: (this: RayThemeToggle, ev: RayThemeToggleEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RayThemeToggleEventMap>(type: K, listener: (this: RayThemeToggle, ev: RayThemeToggleEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface RayThemeToggleEventMap extends HTMLElementEventMap {
+  /** Fired on the document root by setTheme(); detail: { theme, resolved, primary }. */
+  "ray-theme-change": CustomEvent<{ theme: "light" | "dark" | "system"; resolved: "light" | "dark"; primary: string | null }>;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ray-button": RayButton;
+    "ray-button-group": RayButtonGroup;
+    "ray-icon-button": RayIconButton;
+    "ray-toggle": RayToggle;
+    "ray-toggle-group": RayToggleGroup;
+    "ray-checkbox": RayCheckbox;
+    "ray-checkbox-group": RayCheckboxGroup;
+    "ray-color-picker": RayColorPicker;
+    "ray-color-input": RayColorInput;
+    "ray-combobox": RayCombobox;
+    "ray-date-picker": RayDatePicker;
+    "ray-calendar": RayCalendar;
+    "ray-file-upload": RayFileUpload;
+    "ray-input": RayInput;
+    "ray-number-input": RayNumberInput;
+    "ray-password-input": RayPasswordInput;
+    "ray-path-input": RayPathInput;
+    "ray-radio-group": RayRadioGroup;
+    "ray-radio": RayRadio;
+    "ray-search": RaySearch;
+    "ray-segmented-control": RaySegmentedControl;
+    "ray-select": RaySelect;
+    "ray-slider": RaySlider;
+    "ray-switch": RaySwitch;
+    "ray-textarea": RayTextarea;
+    "ray-bottom-nav": RayBottomNav;
+    "ray-bottom-nav-item": RayBottomNavItem;
+    "ray-breadcrumbs": RayBreadcrumbs;
+    "ray-breadcrumb": RayBreadcrumb;
+    "ray-nav-link": RayNavLink;
+    "ray-pagination": RayPagination;
+    "ray-sidebar": RaySidebar;
+    "ray-sidebar-group": RaySidebarGroup;
+    "ray-stepper": RayStepper;
+    "ray-step": RayStep;
+    "ray-tabs": RayTabs;
+    "ray-tab": RayTab;
+    "ray-tab-panel": RayTabPanel;
+    "ray-command-palette": RayCommandPalette;
+    "ray-dialog": RayDialog;
+    "ray-drawer": RayDrawer;
+    "ray-menu": RayMenu;
+    "ray-menu-item": RayMenuItem;
+    "ray-menu-label": RayMenuLabel;
+    "ray-menu-divider": RayMenuDivider;
+    "ray-popover": RayPopover;
+    "ray-tooltip": RayTooltip;
+    "ray-accordion": RayAccordion;
+    "ray-accordion-item": RayAccordionItem;
+    "ray-attachment": RayAttachment;
+    "ray-attachments": RayAttachments;
+    "ray-avatar": RayAvatar;
+    "ray-badge": RayBadge;
+    "ray-blockquote": RayBlockquote;
+    "ray-carousel": RayCarousel;
+    "ray-code": RayCode;
+    "ray-icon": RayIcon;
+    "ray-indicator": RayIndicator;
+    "ray-kbd": RayKbd;
+    "ray-stat": RayStat;
+    "ray-table": RayTable;
+    "ray-timeline": RayTimeline;
+    "ray-timeline-item": RayTimelineItem;
+    "ray-alert": RayAlert;
+    "ray-empty-state": RayEmptyState;
+    "ray-notification": RayNotification;
+    "ray-toaster": RayToaster;
+    "ray-progress": RayProgress;
+    "ray-skeleton": RaySkeleton;
+    "ray-spinner": RaySpinner;
+    "ray-app-bar": RayAppBar;
+    "ray-app-shell": RayAppShell;
+    "ray-aspect-ratio": RayAspectRatio;
+    "ray-card": RayCard;
+    "ray-center": RayCenter;
+    "ray-container": RayContainer;
+    "ray-grid": RayGrid;
+    "ray-group": RayGroup;
+    "ray-scroll-area": RayScrollArea;
+    "ray-separator": RaySeparator;
+    "ray-split": RaySplit;
+    "ray-stack": RayStack;
+    "ray-statusbar": RayStatusbar;
+    "ray-statusbar-item": RayStatusbarItem;
+    "ray-theme-toggle": RayThemeToggle;
+  }
+}