@raylang/vue 0.0.0-stage → 0.3.0

package/index.d.ts

@@ -0,0 +1,2360 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import type { DefineComponent, Plugin } from "vue";
+import type * as Ray from "@raylang/elements";
+
+/** Wraps any custom element as a Vue component (props set as DOM properties, optional v-model). */
+export declare function createComponent<P = Record<string, unknown>>(
+  name: string,
+  tagName: string,
+  options?: { properties?: string[]; booleans?: string[]; model?: { prop: string; events: string[] } },
+): DefineComponent<P>;
+/** A plugin registering components globally. */
+export declare function createPlugin(components: Record<string, unknown>): Plugin;
+
+export interface RayButtonProps {
+  /** 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;
+  /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Height, padding and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Not interactive (also when inside a disabled fieldset). */
+  disabled?: boolean;
+  /** Shows a spinner over the content and blocks clicks. */
+  loading?: boolean;
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+}
+/** <ray-button> as a Vue component. */
+export declare const RayButton: DefineComponent<RayButtonProps>;
+
+export interface RayButtonGroupProps {
+  /** Direction of the group. */
+  orientation?: "horizontal" | "vertical";
+  /** Fills its container; the children share the width. */
+  fullWidth?: boolean;
+  /** Accessible name (aria-label). */
+  label?: string;
+}
+/** <ray-button-group> as a Vue component. */
+export declare const RayButtonGroup: DefineComponent<RayButtonGroupProps>;
+
+export interface RayIconButtonProps {
+  /** Accessible name and tooltip (required: the button has no text). */
+  label?: string;
+  /** 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;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Width and height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Shows a spinner instead of the icon. */
+  loading?: boolean;
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+}
+/** <ray-icon-button> as a Vue component. */
+export declare const RayIconButton: DefineComponent<RayIconButtonProps>;
+
+export interface RayToggleProps {
+  /** On. */
+  pressed?: boolean;
+  /** 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;
+  /** Accessible name and tooltip, for icon-only toggles. */
+  label?: string;
+  /** With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens. */
+  gradient?: string;
+  /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Height, padding and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** submit/reset act on the enclosing form. */
+  type?: "button" | "submit" | "reset";
+  /** Not interactive (also when inside a disabled fieldset). */
+  disabled?: boolean;
+  /** Shows a spinner over the content and blocks clicks. */
+  loading?: boolean;
+  /** Takes the whole width of its container. */
+  fullWidth?: boolean;
+  /** Renders a link instead of a button. */
+  href?: string;
+  /** Link target, with href. */
+  target?: string;
+  /** With type=submit: submitted as name=value. */
+  name?: string;
+  /** With type=submit: the submitted value. */
+  value?: string;
+  /** The user flipped it (read `pressed`). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-toggle> as a Vue component. */
+export declare const RayToggle: DefineComponent<RayToggleProps>;
+
+export interface RayToggleGroupProps {
+  /** 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;
+  /** Needs a value; with single the selected toggle cannot be turned off. */
+  required?: boolean;
+  /** Disables every toggle. */
+  disabled?: boolean;
+  /** Toggles apart, each with its own corners (default: joined). */
+  spaced?: boolean;
+  /** Variant of the toggles. */
+  variant?: "subtle" | "outline" | "light" | "filled" | "raised";
+  /** Color of the toggles' on state. */
+  color?: string;
+  /** Size of the toggles. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius of the toggles. */
+  radius?: string;
+  /** Square toggles, for icons. */
+  square?: boolean;
+  /** Direction of the group. */
+  orientation?: "horizontal" | "vertical";
+  /** Fills its container; the children share the width. */
+  fullWidth?: boolean;
+  /** Accessible name (aria-label). */
+  label?: string;
+  /** The user changed the selection (read `value` or `values`; the toggles' own change events stop at the group). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-toggle-group> as a Vue component. */
+export declare const RayToggleGroup: DefineComponent<RayToggleGroupProps>;
+
+export interface RayCheckboxProps {
+  /** Current state. The checked attribute is the initial state (restored on reset). */
+  checked?: boolean;
+  /** Mixed state; cleared on the next user change. */
+  indeterminate?: boolean;
+  /** Submitted value when checked. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Label text (or put the label in the content). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** Must be checked to submit. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** 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;
+  /** Box and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Side of the label. */
+  labelPosition?: "right" | "left";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `checked`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** When the user toggles it. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-checkbox> as a Vue component. */
+export declare const RayCheckbox: DefineComponent<RayCheckboxProps>;
+
+export interface RayCheckboxGroupProps {
+  /** The checked values. The value attribute: "a,b". */
+  value?: string[];
+  /** Form field name. */
+  name?: string;
+  /** Group label (also its accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** At least one must be checked. */
+  required?: boolean;
+  /** Disables every checkbox. */
+  disabled?: boolean;
+  /** At most this many: the others are disabled once reached; the label shows the count. */
+  max?: number;
+  /** Layout of the checkboxes. */
+  orientation?: "vertical" | "horizontal";
+  /** Size of the checkboxes that set none. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Color of the checkboxes that set none. */
+  color?: string;
+  /** The description before the checkboxes or after them. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `value`. */
+  modelValue?: string[];
+  "onUpdate:modelValue"?: (value: string[]) => void;
+  /** The user checked or unchecked one (read value). */
+  onChange?: (event: Event) => void;
+  /** Same moment as change. */
+  onInput?: (event: Event) => void;
+}
+/** <ray-checkbox-group> as a Vue component. */
+export declare const RayCheckboxGroup: DefineComponent<RayCheckboxGroupProps>;
+
+export interface RayColorPickerProps {
+  /** 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;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. Formats ending in a show the opacity slider. */
+  format?: Ray.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[];
+  /** Swatches in each row. */
+  swatchesPerRow?: number;
+  /** Only the swatches: no area nor sliders. */
+  swatchesOnly?: boolean;
+  /** Width of the picker and size of its thumbs. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Takes the width of its container. */
+  fullWidth?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Accessible name of the whole picker. */
+  label?: string;
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** The color moved (every step of a drag). */
+  onInput?: (event: Event) => void;
+  /** The color settled: pointer released, a key pressed or a swatch chosen (read value). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-color-picker> as a Vue component. */
+export declare const RayColorPicker: DefineComponent<RayColorPickerProps>;
+
+export interface RayColorInputProps {
+  /** The color, written in format. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** How value is written: hex, hexa, rgb, rgba, hsl or hsla. */
+  format?: Ray.ColorFormat;
+  /** Preset colors in the dropdown (an array, or a comma-separated list). */
+  swatches?: string | string[];
+  /** Swatches in each row. */
+  swatchesPerRow?: number;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** Hides the eyedropper button. */
+  hideEyedropper?: boolean;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Label above the field. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error message; marks the field invalid. */
+  error?: string;
+  /** Must have a color. */
+  required?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Field height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius: xs…xl or a CSS length. */
+  radius?: string;
+  /** Visual style of the field. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Where the description goes. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** The color changed (typing a valid color, or moving the picker). */
+  onInput?: (event: Event) => void;
+  /** The color settled (picker released, a swatch, the eyedropper, or the field left with a new color). */
+  onChange?: (event: Event) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-color-input> as a Vue component. */
+export declare const RayColorInput: DefineComponent<RayColorInputProps>;
+
+export interface RayComboboxProps {
+  /** The chosen value; an array with multiple. The value attribute: "a,b" with multiple. */
+  value?: string | string[];
+  /** Options instead of child <option>/<optgroup> elements. */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean; group?: string }>;
+  /** Several values, shown as chips. */
+  multiple?: boolean;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** What was typed can be added when no option matches it ("+ Create …"); fires ray-create. */
+  creatable?: boolean;
+  /** A button that clears the value. */
+  clearable?: boolean;
+  /** With multiple: at most this many. */
+  maxValues?: number;
+  /** At most this many options shown (large lists: keep typing). */
+  limit?: number;
+  /** Shown when nothing matches. */
+  nothingFound?: string;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `value`. */
+  modelValue?: string | string[];
+  "onUpdate:modelValue"?: (value: string | string[]) => void;
+  /** The value changed (read value). */
+  onChange?: (event: Event) => void;
+  /** Same moment as change. */
+  onInput?: (event: Event) => void;
+  /** A new value was created from the typed text. */
+  onRayCreate?: (event: CustomEvent<{ value: string }>) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-combobox> as a Vue component. */
+export declare const RayCombobox: DefineComponent<RayComboboxProps>;
+
+export interface RayDatePickerProps {
+  /** The chosen date, ISO "YYYY-MM-DD" ("" for none). The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Earliest selectable date (ISO). Earlier days are disabled; an earlier value is invalid (rangeUnderflow). */
+  min?: string;
+  /** Latest selectable date (ISO). */
+  max?: string;
+  /** 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;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay?: number;
+  /** Shows a button that clears the date. */
+  clearable?: boolean;
+  /** The calendar dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** 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;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** When the date changes (picked or cleared). */
+  onInput?: (event: Event) => void;
+  /** When the date changes (picked or cleared). */
+  onChange?: (event: Event) => void;
+  /** The calendar opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The calendar closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-date-picker> as a Vue component. */
+export declare const RayDatePicker: DefineComponent<RayDatePickerProps>;
+
+export interface RayCalendarProps {
+  /** The selected date, ISO "YYYY-MM-DD". */
+  value?: string;
+  /** Earliest selectable date (ISO). */
+  min?: string;
+  /** Latest selectable date (ISO). */
+  max?: string;
+  /** Locale for month and weekday names. Default: the nearest lang attribute, else the browser's. */
+  locale?: string;
+  /** First day of the week, 0 (Sunday) to 6. Default: the locale's. */
+  firstDay?: number;
+  /** Day cell size and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** A day was selected (read `value`). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-calendar> as a Vue component. */
+export declare const RayCalendar: DefineComponent<RayCalendarProps>;
+
+export interface RayFileUploadProps {
+  /** Form field name: every file is submitted under it. */
+  name?: string;
+  /** Label above the zone. */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** Error text (replaces the explanation of refused files). */
+  error?: string;
+  /** The form needs at least one file. */
+  required?: boolean;
+  /** No picking, dropping or removing. */
+  disabled?: boolean;
+  /** Accepted types, as in <input type=file>: ".pdf,.png", "image/*", "application/json". */
+  accept?: string;
+  /** Several files (else one, replaced by the next). */
+  multiple?: boolean;
+  /** Largest file: bytes or a size like "10 MB", "512 KB". */
+  maxSize?: string | number;
+  /** With multiple: the most files kept. */
+  maxFiles?: number;
+  /** 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;
+  /** 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;
+  /** Accent of hover, drag and the browse link (default: primary). */
+  color?: string;
+  /** Files were added or removed (read `files`, and `lastChange` for which). */
+  onChange?: (event: Event) => void;
+  /** Some files were refused (type, size or count). */
+  onRayReject?: (event: CustomEvent<{ rejected: Ray.FileRejection[] }>) => void;
+  /** The native dialog failed (with `native`). */
+  onRayError?: (event: CustomEvent<{ error: Error }>) => void;
+}
+/** <ray-file-upload> as a Vue component. */
+export declare const RayFileUpload: DefineComponent<RayFileUploadProps>;
+
+export interface RayInputProps {
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** 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;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed (blur, Enter). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-input> as a Vue component. */
+export declare const RayInput: DefineComponent<RayInputProps>;
+
+export interface RayNumberInputProps {
+  /** The number (undefined when empty). */
+  value?: number;
+  /** Minimum. */
+  min?: number;
+  /** Maximum. */
+  max?: number;
+  /** What + and − add. */
+  step?: number;
+  /** Fixed decimals (2: 3 shows as 3.00). */
+  decimals?: number;
+  /** Shown before the number ("$"). */
+  prefix?: string | null;
+  /** Shown after the number (" kg", "%"). */
+  suffix?: string;
+  /** Groups thousands in the shown text (",", ".", " "). */
+  thousandsSeparator?: string;
+  /** 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;
+  /** Shown while empty. */
+  placeholder?: string;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `value`. */
+  modelValue?: number;
+  "onUpdate:modelValue"?: (value: number) => void;
+  /** On every change of the value (typing, keys, buttons). */
+  onInput?: (event: Event) => void;
+  /** When the value is committed (blur, a step). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-number-input> as a Vue component. */
+export declare const RayNumberInput: DefineComponent<RayNumberInputProps>;
+
+export interface RayPasswordInputProps {
+  /** The password is shown as text. */
+  visible?: boolean;
+  /** Accessible name of the toggle while hidden. */
+  showLabel?: string;
+  /** Accessible name of the toggle while shown. */
+  hideLabel?: string;
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** 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;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** The user showed or hid the password. */
+  onRayVisibilityChange?: (event: CustomEvent<{ visible: boolean }>) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed (blur, Enter). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-password-input> as a Vue component. */
+export declare const RayPasswordInput: DefineComponent<RayPasswordInputProps>;
+
+export interface RayPathInputProps {
+  /** 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;
+  /** Text of the button. */
+  browseLabel?: string;
+  /** Title of the system dialog (default: the label). */
+  dialogTitle?: string;
+  /** Current value. The value attribute is the initial value (restored on form reset). */
+  value?: string;
+  /** Input type. */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** 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;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Required for form submission; shows an asterisk. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Forwarded to the inner input. */
+  autocomplete?: string;
+  /** Virtual keyboard hint. */
+  inputmode?: string;
+  /** Validation pattern (regular expression). */
+  pattern?: string;
+  /** Minimum (number/date types). */
+  min?: string;
+  /** Maximum (number/date types). */
+  max?: string;
+  /** Step (number types). */
+  step?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** Mobile auto-capitalization. */
+  autocapitalize?: string;
+  /** Label of the Enter key on virtual keyboards. */
+  enterkeyhint?: string;
+  /** Id of a <datalist> with suggestions. */
+  list?: string;
+  /** The path changed: typed and committed, or chosen in the dialog. */
+  onChange?: (event: Event) => void;
+  /** The system dialog failed. */
+  onRayError?: (event: CustomEvent<{ error: Error }>) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+}
+/** <ray-path-input> as a Vue component. */
+export declare const RayPathInput: DefineComponent<RayPathInputProps>;
+
+export interface RayRadioGroupProps {
+  /** Value of the checked radio. Initial: the value attribute, or a radio with the checked attribute. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Group label (also its accessible name). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** 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;
+  /** A choice is needed to submit. */
+  required?: boolean;
+  /** Disables every radio. */
+  disabled?: boolean;
+  /** Layout of the radios. */
+  orientation?: "vertical" | "horizontal";
+  /** Size of every radio. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Checked color of every radio. */
+  color?: string;
+  /** Checked look of every radio: filled circle, or colored ring and dot. */
+  variant?: "filled" | "outline";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** When the user picks a radio. */
+  onInput?: (event: Event) => void;
+  /** When the user picks a radio. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-radio-group> as a Vue component. */
+export declare const RayRadioGroup: DefineComponent<RayRadioGroupProps>;
+
+export interface RayRadioProps {
+  /** Value given to the group when chosen. */
+  value?: string;
+  /** Label text (or the content). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** Cannot be chosen. */
+  disabled?: boolean;
+  /** Overrides the group color. */
+  color?: string;
+  /** Overrides the group size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Overrides the group variant. */
+  variant?: "filled" | "outline";
+}
+/** <ray-radio> as a Vue component. */
+export declare const RayRadio: DefineComponent<RayRadioProps>;
+
+export interface RaySearchProps {
+  /** Current text. */
+  value?: string;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Keyboard shortcut that focuses it ("mod+k", "/"; mod = ⌘ on macOS, Ctrl elsewhere). Shown as a hint while empty. */
+  shortcut?: string;
+  /** Milliseconds of quiet typing before ray-search fires (0: on every keystroke). */
+  debounce?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label (also the accessible name). Without it, use aria-label. */
+  label?: string;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Help text. */
+  description?: string;
+  /** Error text; marks the field invalid. */
+  error?: string;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** After `debounce` ms without typing, on Enter, and when cleared. */
+  onRaySearch?: (event: CustomEvent<{ value: string }>) => void;
+}
+/** <ray-search> as a Vue component. */
+export declare const RaySearch: DefineComponent<RaySearchProps>;
+
+export interface RaySegmentedControlProps {
+  /** Selected value (default: the first enabled option). */
+  value?: string;
+  /** Options as strings or { value, label, disabled }. */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean }>;
+  /** Form field name. */
+  name?: string;
+  /** Indicator color (default: a raised neutral segment). */
+  color?: string;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Takes the whole width. */
+  fullWidth?: boolean;
+  /** Direction. */
+  orientation?: "horizontal" | "vertical";
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** The user picked another option. */
+  onInput?: (event: Event) => void;
+  /** The user picked another option. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-segmented-control> as a Vue component. */
+export declare const RaySegmentedControl: DefineComponent<RaySegmentedControlProps>;
+
+export interface RaySelectProps {
+  /** Selected value. */
+  value?: string;
+  /** Options as strings or { value, label, disabled } (instead of child options). */
+  data?: Array<string | { value: string; label?: string; disabled?: boolean }>;
+  /** Shown while nothing is selected (with required, blocks submit). */
+  placeholder?: string;
+  /** The dropdown is shown. */
+  open?: boolean;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** 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;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** When the selection changes. */
+  onInput?: (event: Event) => void;
+  /** When the selection changes. */
+  onChange?: (event: Event) => void;
+  /** The dropdown opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The dropdown closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-select> as a Vue component. */
+export declare const RaySelect: DefineComponent<RaySelectProps>;
+
+export interface RaySliderProps {
+  /** Current value. The value attribute is the initial one (restored on reset). */
+  value?: number;
+  /** Minimum. */
+  min?: number;
+  /** Maximum. */
+  max?: number;
+  /** Step. */
+  step?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** 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;
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Track and thumb color. */
+  color?: string;
+  /** Track and thumb size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Shows the value next to the label. */
+  showValue?: boolean;
+  /** Appended to the shown value and its spoken text (%, px, ms…). */
+  unit?: string;
+  /** Labeled ticks under the track. */
+  marks?: Array<number | { value: number; label?: string }>;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** v-model: the element's `value`. */
+  modelValue?: number;
+  "onUpdate:modelValue"?: (value: number) => void;
+  /** While dragging. */
+  onInput?: (event: Event) => void;
+  /** When released. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-slider> as a Vue component. */
+export declare const RaySlider: DefineComponent<RaySliderProps>;
+
+export interface RaySwitchProps {
+  /** Current state. The checked attribute is the initial state. */
+  checked?: boolean;
+  /** Submitted value when on. */
+  value?: string;
+  /** Form field name. */
+  name?: string;
+  /** Label text (or the content). */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** Error text. */
+  error?: string;
+  /** Side of the label. */
+  labelPosition?: "right" | "left";
+  /** Track color when on. */
+  color?: string;
+  /** Track size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Not interactive nor submitted. */
+  disabled?: boolean;
+  /** Mixed state; cleared on the next user change. */
+  indeterminate?: boolean;
+  /** Must be checked to submit. */
+  required?: boolean;
+  /** Checked look: filled box, or colored border and mark. */
+  variant?: "filled" | "outline";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Description before or after the control. */
+  descriptionPosition?: "above" | "below";
+  /** v-model: the element's `checked`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** When the user toggles it. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-switch> as a Vue component. */
+export declare const RaySwitch: DefineComponent<RaySwitchProps>;
+
+export interface RayTextareaProps {
+  /** Current value. */
+  value?: string;
+  /** Visible rows (minimum when autosize). */
+  rows?: number;
+  /** Grows with the content. */
+  autosize?: boolean;
+  /** With autosize: stop growing and scroll after this many rows. */
+  maxRows?: number;
+  /** Form field name. */
+  name?: string;
+  /** Visible label. */
+  label?: string;
+  /** Help text. */
+  description?: string;
+  /** 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;
+  /** Required for form submission. */
+  required?: boolean;
+  /** Not editable nor submitted. */
+  disabled?: boolean;
+  /** Not editable, still submitted. */
+  readonly?: boolean;
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Box style. */
+  variant?: "default" | "filled" | "unstyled";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Forwarded to the inner textarea. */
+  autocomplete?: string;
+  /** Minimum length. */
+  minlength?: string;
+  /** Maximum length. */
+  maxlength?: string;
+  /** soft or hard. */
+  wrap?: string;
+  /** On every edit. */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-textarea> as a Vue component. */
+export declare const RayTextarea: DefineComponent<RayTextareaProps>;
+
+export interface RayBottomNavProps {
+  /** The current destination (an item's value, else its href, else its label). */
+  value?: string;
+  /** 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;
+  /** 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;
+  /** Pinned to the bottom of the window (outside a shell). */
+  fixed?: boolean;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget?: string;
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** The user picked another destination (read value). */
+  onChange?: (event: Event) => void;
+  /** An action item was pressed. */
+  onRaySelect?: (event: CustomEvent<{ value: string }>) => void;
+}
+/** <ray-bottom-nav> as a Vue component. */
+export declare const RayBottomNav: DefineComponent<RayBottomNavProps>;
+
+export interface RayBottomNavItemProps {
+  /** Its value (default: its href, else its label). */
+  value?: string;
+  /** The label. */
+  label?: string;
+  /** An icon of the registry (or put one in the icon slot). */
+  icon?: string;
+  /** Makes it a link. */
+  href?: string;
+  /** A count or a short text on the icon. */
+  badge?: string;
+  /** A dot on the icon (something new). */
+  dot?: boolean;
+  /** Set by the bar: the current destination. */
+  active?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** A raised round button ("New"): it fires ray-select on the bar, it is not a destination. */
+  action?: boolean;
+}
+/** <ray-bottom-nav-item> as a Vue component. */
+export declare const RayBottomNavItem: DefineComponent<RayBottomNavItemProps>;
+
+export interface RayBreadcrumbsProps {
+  /** 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;
+  /** Accessible name of the nav. */
+  label?: string;
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg";
+}
+/** <ray-breadcrumbs> as a Vue component. */
+export declare const RayBreadcrumbs: DefineComponent<RayBreadcrumbsProps>;
+
+export interface RayBreadcrumbProps {
+  /** Where it leads. */
+  href?: string;
+  /** This crumb is the current page (default: the last). */
+  current?: boolean;
+}
+/** <ray-breadcrumb> as a Vue component. */
+export declare const RayBreadcrumb: DefineComponent<RayBreadcrumbProps>;
+
+export interface RayNavLinkProps {
+  /** Text. */
+  label?: string;
+  /** Second line. */
+  description?: string;
+  /** Makes it a link (ignored when it has nested links). */
+  href?: string;
+  /** The current page or section. */
+  active?: boolean;
+  /** Nested links are shown. */
+  opened?: boolean;
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Style of the active state. */
+  variant?: "light" | "filled" | "subtle";
+  /** Active color. */
+  color?: string;
+  /** Only the icon (left section), centered; the label becomes its accessible name and tooltip. A collapsed ray-sidebar sets it. */
+  iconOnly?: boolean;
+  /** v-model: the element's `opened`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** Nested links were shown or hidden. */
+  onRayToggle?: (event: CustomEvent<{ opened: boolean }>) => void;
+}
+/** <ray-nav-link> as a Vue component. */
+export declare const RayNavLink: DefineComponent<RayNavLinkProps>;
+
+export interface RayPaginationProps {
+  /** 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;
+  /** Hides the previous/next (and first/last) buttons. */
+  hideControls?: boolean;
+  /** Color of the current page: a palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Item size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius of the items. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Not interactive. */
+  disabled?: boolean;
+  /** Accessible name of the navigation landmark. */
+  label?: string;
+  /** v-model: the element's `value`. */
+  modelValue?: number;
+  "onUpdate:modelValue"?: (value: number) => void;
+  /** The user went to another page (read `value`). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-pagination> as a Vue component. */
+export declare const RayPagination: DefineComponent<RayPaginationProps>;
+
+export interface RaySidebarProps {
+  /** Wide screens: an icon rail instead of the full panel. */
+  collapsed?: boolean;
+  /** Narrow screens: the drawer is shown (modal, focus trapped; Escape, backdrop click or a followed link close it). */
+  open?: boolean;
+  /** 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;
+  /** Width of the icon rail. Default 3.5rem. */
+  collapsedWidth?: string;
+  /** At this viewport width and below, it becomes a drawer. */
+  breakpoint?: string;
+  /** Accessible name of its navigation. */
+  label?: string;
+  /** After toggle(). */
+  onRayToggle?: (event: CustomEvent<{ collapsed: boolean; open: boolean; mobile: boolean }>) => void;
+  /** The drawer opened (narrow screens). */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** The drawer closed (narrow screens). */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-sidebar> as a Vue component. */
+export declare const RaySidebar: DefineComponent<RaySidebarProps>;
+
+export interface RaySidebarGroupProps {
+  /** Section title. */
+  label?: string;
+}
+/** <ray-sidebar-group> as a Vue component. */
+export declare const RaySidebarGroup: DefineComponent<RaySidebarGroupProps>;
+
+export interface RayStepperProps {
+  /** 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;
+  /** 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;
+  /** Accessible name of the list of steps. */
+  label?: string;
+  /** v-model: the element's `active`. */
+  modelValue?: number;
+  "onUpdate:modelValue"?: (value: number) => void;
+  /** active changed by the user (a step clicked, next(), prev()). */
+  onChange?: (event: Event) => void;
+}
+/** <ray-stepper> as a Vue component. */
+export declare const RayStepper: DefineComponent<RayStepperProps>;
+
+export interface RayStepProps {
+  /** The label. */
+  label?: string;
+  /** A line under the label. */
+  description?: string;
+  /** An icon instead of the number. */
+  icon?: string;
+  /** The icon once done (default: check). */
+  completedIcon?: string;
+  /** A spinner instead of the number. */
+  loading?: boolean;
+  /** An error message: red step, the message as its description. */
+  error?: string;
+  /** Cannot be selected. */
+  disabled?: boolean;
+}
+/** <ray-step> as a Vue component. */
+export declare const RayStep: DefineComponent<RayStepProps>;
+
+export interface RayTabsProps {
+  /** Value of the active tab (default: the first enabled one). */
+  value?: string;
+  /** Tab style. */
+  variant?: "default" | "outline" | "pills";
+  /** Tab list direction (and arrow keys). */
+  orientation?: "horizontal" | "vertical";
+  /** Active indicator color. */
+  color?: string;
+  /** manual: arrows move focus, Enter/Space activates. */
+  activation?: "auto" | "manual";
+  /** Tabs share the full width. */
+  grow?: boolean;
+  /** v-model: the element's `value`. */
+  modelValue?: string;
+  "onUpdate:modelValue"?: (value: string) => void;
+  /** The user activated another tab. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-tabs> as a Vue component. */
+export declare const RayTabs: DefineComponent<RayTabsProps>;
+
+export interface RayTabProps {
+  /** Matches a ray-tab-panel's value. */
+  value?: string;
+  /** Cannot be activated. */
+  disabled?: boolean;
+}
+/** <ray-tab> as a Vue component. */
+export declare const RayTab: DefineComponent<RayTabProps>;
+
+export interface RayTabPanelProps {
+  /** Matches a ray-tab's value. */
+  value?: string;
+}
+/** <ray-tab-panel> as a Vue component. */
+export declare const RayTabPanel: DefineComponent<RayTabPanelProps>;
+
+export interface RayCommandPaletteProps {
+  /** Shown. */
+  open?: boolean;
+  /** The actions. */
+  actions?: Ray.CommandAction[];
+  /** The search text. */
+  query?: string;
+  /** 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;
+  /** 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;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** v-model: the element's `open`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** An action was run. */
+  onRaySelect?: (event: CustomEvent<{ action: Ray.CommandAction }>) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-command-palette> as a Vue component. */
+export declare const RayCommandPalette: DefineComponent<RayCommandPaletteProps>;
+
+export interface RayDialogProps {
+  /** Shown as a modal. */
+  open?: boolean;
+  /** Heading (also the dialog's accessible name). */
+  label?: string;
+  /** A line under the title (the dialog's accessible description). */
+  description?: string;
+  /** 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;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: lg. */
+  radius?: string;
+  /** 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;
+  /** No close button in the header. */
+  hideClose?: boolean;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** v-model: the element's `open`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed; detail: { returnValue }. */
+  onRayClose?: (event: CustomEvent<{ returnValue: string }>) => void;
+  /** Escape, backdrop or close button; cancelable (preventDefault keeps it open). detail: { source }. */
+  onRayRequestClose?: (event: CustomEvent<{ source: "escape" | "backdrop" | "button" }>) => void;
+}
+/** <ray-dialog> as a Vue component. */
+export declare const RayDialog: DefineComponent<RayDialogProps>;
+
+export interface RayDrawerProps {
+  /** Shown. */
+  open?: boolean;
+  /** Heading (also the accessible name). */
+  label?: string;
+  /** A line under the title (the drawer's accessible description). */
+  description?: string;
+  /** 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;
+  /** Detached from the edge, with rounded corners. */
+  floating?: boolean;
+  /** Escape and backdrop clicks do not close it. */
+  persistent?: boolean;
+  /** No close button in the header. */
+  hideClose?: boolean;
+  /** Blur of the page behind: px ("8"), a CSS length or "none". Default: --ray-overlay-blur ([overlay] blur in tokens.toml). */
+  overlayBlur?: string;
+  /** v-model: the element's `open`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed; detail: { returnValue }. */
+  onRayClose?: (event: CustomEvent<{ returnValue: string }>) => void;
+  /** Escape, backdrop or close button; cancelable. */
+  onRayRequestClose?: (event: CustomEvent<{ source: "escape" | "backdrop" | "button" }>) => void;
+}
+/** <ray-drawer> as a Vue component. */
+export declare const RayDrawer: DefineComponent<RayDrawerProps>;
+
+export interface RayMenuProps {
+  /** Shown. */
+  open?: boolean;
+  /** 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;
+  /** Choosing an item does not close the menu. */
+  keepOpen?: boolean;
+  /** 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;
+  /** Gap to the anchor in px. */
+  offset?: number;
+  /** v-model: the element's `open`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** An item was chosen; detail: { value, item }. */
+  onRaySelect?: (event: CustomEvent<{ value: string; item: Ray.RayMenuItem }>) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-menu> as a Vue component. */
+export declare const RayMenu: DefineComponent<RayMenuProps>;
+
+export interface RayMenuItemProps {
+  /** Reported in ray-select (default: the text). */
+  value?: string;
+  /** Skipped by the keyboard, cannot be chosen. */
+  disabled?: boolean;
+  /** Text and hover color (e.g. red for destructive actions). */
+  color?: string;
+}
+/** <ray-menu-item> as a Vue component. */
+export declare const RayMenuItem: DefineComponent<RayMenuItemProps>;
+
+export interface RayMenuLabelProps {
+}
+/** <ray-menu-label> as a Vue component. */
+export declare const RayMenuLabel: DefineComponent<RayMenuLabelProps>;
+
+export interface RayMenuDividerProps {
+}
+/** <ray-menu-divider> as a Vue component. */
+export declare const RayMenuDivider: DefineComponent<RayMenuDividerProps>;
+
+export interface RayPopoverProps {
+  /** Shown. */
+  open?: boolean;
+  /** 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;
+  /** At least as wide as the trigger. */
+  matchWidth?: boolean;
+  /** Panel padding. */
+  padding?: "0" | "xs" | "sm" | "md" | "lg";
+  /** Moves focus into the panel when opened and keeps Tab inside it. */
+  trapFocus?: boolean;
+  /** v-model: the element's `open`. */
+  modelValue?: boolean;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+  /** After it opened. */
+  onRayOpen?: (event: CustomEvent<unknown>) => void;
+  /** After it closed (also by Escape or an outside click). */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-popover> as a Vue component. */
+export declare const RayPopover: DefineComponent<RayPopoverProps>;
+
+export interface RayTooltipProps {
+  /** Tooltip text. */
+  label?: string;
+  /** 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;
+  /** Never shows. */
+  disabled?: boolean;
+  /** Shown. */
+  open?: boolean;
+  /** Gap to the anchor in px. */
+  offset?: number;
+}
+/** <ray-tooltip> as a Vue component. */
+export declare const RayTooltip: DefineComponent<RayTooltipProps>;
+
+export interface RayAccordionProps {
+  /** Open item's value; with multiple, an array (attribute: comma-separated). */
+  value?: string | string[] | undefined;
+  /** Several items may be open. */
+  multiple?: boolean;
+  /** Visual style. */
+  variant?: "default" | "contained" | "separated" | "filled";
+  /** Side of the chevron. */
+  chevronPosition?: "right" | "left";
+  /** v-model: the element's `value`. */
+  modelValue?: string | string[] | undefined;
+  "onUpdate:modelValue"?: (value: string | string[] | undefined) => void;
+  /** The user opened or closed an item. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-accordion> as a Vue component. */
+export declare const RayAccordion: DefineComponent<RayAccordionProps>;
+
+export interface RayAccordionItemProps {
+  /** Identifies the item in the accordion's value. */
+  value?: string;
+  /** Header text (or slot=label). */
+  label?: string;
+  /** A secondary line under the label, in the header. */
+  description?: string;
+  /** Cannot be toggled. */
+  disabled?: boolean;
+  /** aria-level of the header. */
+  headingLevel?: number;
+}
+/** <ray-accordion-item> as a Vue component. */
+export declare const RayAccordionItem: DefineComponent<RayAccordionItemProps>;
+
+export interface RayAttachmentProps {
+  /** File name (ellipsized; full name in the tooltip). */
+  name?: string;
+  /** Size in bytes, shown as "12 KB", "3.4 MB". */
+  size?: number;
+  /** MIME type: picks the icon (image or file) and, with the name, the extension badge. */
+  type?: string;
+  /** Thumbnail URL for images (falls back to the icon if it fails to load). */
+  src?: string;
+  /** Makes the name a download link. */
+  href?: string;
+  /** Upload progress 0–100: a thin bar and "Uploading… 45%". Unset: done. */
+  progress?: number;
+  /** Explicit state. Default: "uploading" while progress is set, else "done". */
+  status?: "uploading" | "done" | "error";
+  /** Error text shown with status="error" (default "Upload failed"). */
+  error?: string;
+  /** Shows a remove (×) button. */
+  removable?: boolean;
+  /** 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;
+  /** The remove button was pressed; cancelable (preventDefault keeps the element). */
+  onRayRemove?: (event: CustomEvent<{ name: string; file: File | null }>) => void;
+}
+/** <ray-attachment> as a Vue component. */
+export declare const RayAttachment: DefineComponent<RayAttachmentProps>;
+
+export interface RayAttachmentsProps {
+}
+/** <ray-attachments> as a Vue component. */
+export declare const RayAttachments: DefineComponent<RayAttachmentsProps>;
+
+export interface RayAvatarProps {
+  /** Image URL; falls back to initials if it fails to load. */
+  src?: string;
+  /** Accessible name (default: name). */
+  alt?: string;
+  /** Person or entity name; its initials are shown without an image. */
+  name?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** 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";
+}
+/** <ray-avatar> as a Vue component. */
+export declare const RayAvatar: DefineComponent<RayAvatarProps>;
+
+export interface RayBadgeProps {
+  /** 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;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Height and font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Keeps the text as written instead of uppercase. */
+  normalCase?: boolean;
+}
+/** <ray-badge> as a Vue component. */
+export declare const RayBadge: DefineComponent<RayBadgeProps>;
+
+export interface RayBlockquoteProps {
+  /** Who said it, shown below the quote ("— Grace Hopper"). */
+  cite?: string;
+  /** URL of the source: the inner blockquote's cite attribute. */
+  href?: string;
+  /** A palette color or any CSS color, for the edge, the mark and the tint. Default: the primary. */
+  color?: string;
+  /** 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;
+  /** No colored edge on the start side (the tint, border and mark stay). */
+  hideEdge?: boolean;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius?: string;
+}
+/** <ray-blockquote> as a Vue component. */
+export declare const RayBlockquote: DefineComponent<RayBlockquoteProps>;
+
+export interface RayCarouselProps {
+  /** 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;
+  /** Space between slides (default var(--ray-space-4)). */
+  slideGap?: string;
+  /** 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;
+  /** 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;
+  /** No indicator dots. */
+  hideIndicators?: boolean;
+  /** The current position changed (read `index`) by the user or a method (controls, indicators, keyboard, swipe, scroll, next/prev/goTo, autoplay) — not when `index` is set by code. */
+  onChange?: (event: Event) => void;
+}
+/** <ray-carousel> as a Vue component. */
+export declare const RayCarousel: DefineComponent<RayCarouselProps>;
+
+export interface RayCodeProps {
+  /** The code, from script (the most convenient in React and Vue). Wins over the content. */
+  code?: string;
+  /** 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;
+  /** A file name or title in the header; also the scroll region's accessible name. */
+  filename?: string;
+  /** Numbers each line (not copied, not selectable). */
+  lineNumbers?: boolean;
+  /** Lines to highlight: "3, 5-7". */
+  highlight?: string;
+  /** Wraps long lines instead of scrolling sideways. */
+  wrap?: boolean;
+  /** Height before it scrolls: px as a number, or a CSS length. A taller block gets a "Show all N lines" button. */
+  maxHeight?: string;
+  /** Shown whole, past max-height. */
+  expanded?: boolean;
+  /** No copy button. */
+  hideCopy?: boolean;
+  /** No header bar (the copy button floats in the corner). */
+  hideHeader?: boolean;
+  /** Font size. */
+  size?: "xs" | "sm" | "md";
+  /** Corner radius: xs…xl, none, or a CSS length. Default: md. */
+  radius?: string;
+  /** Accessible name of the copy button. */
+  copyLabel?: string;
+  /** Shown and announced after copying. */
+  copiedLabel?: string;
+  /** The code was copied. */
+  onRayCopy?: (event: CustomEvent<{ code: string }>) => void;
+}
+/** <ray-code> as a Vue component. */
+export declare const RayCode: DefineComponent<RayCodeProps>;
+
+export interface RayIconProps {
+  /** Registered icon name (iconNames()). */
+  name?: string;
+  /** xs…xl or any CSS length. Default: 1em. */
+  size?: string;
+  /** Accessible name; without it the icon is decorative (hidden from screen readers). */
+  label?: string;
+  /** A palette color or any CSS color. Default: the text color. */
+  color?: string;
+  /** Stroke width for stroke icons (default: --ray-icon-stroke, 2). */
+  stroke?: number;
+}
+/** <ray-icon> as a Vue component. */
+export declare const RayIcon: DefineComponent<RayIconProps>;
+
+export interface RayIndicatorProps {
+  /** Text in the indicator (a word or a count). Empty: a dot. */
+  label?: string;
+  /** 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;
+  /** A palette color or any CSS color. Default: the primary. */
+  color?: string;
+  /** Diameter of the dot (and minimum height of a label): px as a number, or a CSS length. Default: 10px. */
+  size?: string | number;
+  /** Corner radius: xs…xl, none, or a CSS length. Default: round. */
+  radius?: string;
+  /** A numeric label above it shows as max+ (99+). */
+  max?: number;
+  /** inline-block, to sit within a line of text. */
+  inline?: boolean;
+  /** A ring in the background color, to separate it from the content. */
+  withBorder?: boolean;
+  /** A pulse around it (live, recording, syncing). */
+  processing?: boolean;
+  /** Hides the indicator (the content stays). */
+  disabled?: boolean;
+}
+/** <ray-indicator> as a Vue component. */
+export declare const RayIndicator: DefineComponent<RayIndicatorProps>;
+
+export interface RayKbdProps {
+  /** Font size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** default: raised keycap; filled: flat muted chip; outline: flat with a border. */
+  variant?: "default" | "filled" | "outline";
+}
+/** <ray-kbd> as a Vue component. */
+export declare const RayKbd: DefineComponent<RayKbdProps>;
+
+export interface RayStatProps {
+  /** What is measured. */
+  label?: string;
+  /** The figure, already formatted. */
+  value?: string;
+  /** Change (positive is shown as good, in green; see inverse). */
+  diff?: number;
+  /** Unit of diff. */
+  diffUnit?: string;
+  /** A line under the value (compared to…). */
+  note?: string;
+  /** Lower is better (errors, latency): negative diffs are green. */
+  inverse?: boolean;
+  /** Without the card around. */
+  plain?: boolean;
+}
+/** <ray-stat> as a Vue component. */
+export declare const RayStat: DefineComponent<RayStatProps>;
+
+export interface RayTableProps {
+  /** Columns: key, label, width, align, sortable, render(row, index), sort(a, b). */
+  columns?: Ray.TableColumn[];
+  /** Rows (objects). */
+  data?: any[];
+  /** Field that identifies a row (selection). */
+  rowKey?: string;
+  /** A checkbox per row and a select-all checkbox. */
+  selectable?: boolean;
+  /** Keys of the selected rows. */
+  selection?: unknown[];
+  /** Current sort; set it, or let header clicks change it. */
+  sort?: Ray.TableSort | null;
+  /** Do not sort here: listen to ray-sort and pass sorted data. */
+  manualSort?: boolean;
+  /** Rows are focusable and fire ray-row-click (Enter too; arrows move between rows). */
+  clickableRows?: boolean;
+  /** Alternate row background. */
+  striped?: boolean;
+  /** Border around the table. */
+  withBorder?: boolean;
+  /** Borders between columns. */
+  withColumnBorders?: boolean;
+  /** The header stays visible while scrolling (with --ray-table-max-height). */
+  stickyHeader?: boolean;
+  /** No row highlight on hover. */
+  noHover?: boolean;
+  /** Cell padding. */
+  density?: "xs" | "sm" | "md" | "lg";
+  /** Caption (also the table's accessible name). */
+  label?: string;
+  /** Text without rows (or put a ray-empty-state in slot=empty). */
+  emptyLabel?: string;
+  /** A header changed the sort. */
+  onRaySort?: (event: CustomEvent<{ key: string; direction: "asc" | "desc" | null }>) => void;
+  /** The selection changed. */
+  onRaySelectionChange?: (event: CustomEvent<{ selection: unknown[] }>) => void;
+  /** A row was clicked or activated with Enter (clickable-rows). */
+  onRayRowClick?: (event: CustomEvent<{ row: any; index: number }>) => void;
+}
+/** <ray-table> as a Vue component. */
+export declare const RayTable: DefineComponent<RayTableProps>;
+
+export interface RayTimelineProps {
+  /** 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;
+  /** Line width in px (default 2). */
+  lineWidth?: number;
+  /** A palette color or any CSS color for what is reached (default: primary). */
+  color?: string;
+  /** Counts active from the end (the latest event at the top). */
+  reverseActive?: boolean;
+}
+/** <ray-timeline> as a Vue component. */
+export declare const RayTimeline: DefineComponent<RayTimelineProps>;
+
+export interface RayTimelineItemProps {
+  /** The title of the event. */
+  label?: string;
+  /** When ("2 h ago", a date). */
+  time?: string;
+  /** An icon of the registry in the bullet. */
+  icon?: string;
+  /** Its own color (a failed step in red). */
+  color?: string;
+  /** The line to the next item (dashed: not happened yet). */
+  lineVariant?: "solid" | "dashed" | "dotted";
+}
+/** <ray-timeline-item> as a Vue component. */
+export declare const RayTimelineItem: DefineComponent<RayTimelineItemProps>;
+
+export interface RayAlertProps {
+  /** Title. */
+  label?: string;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Visual style. */
+  variant?: "light" | "filled" | "outline" | "default" | "transparent";
+  /** Corner radius. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** A registered icon name, or none. */
+  icon?: string;
+  /** A close button; closing hides the alert (cancel ray-close to keep it). */
+  closable?: boolean;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+  /** The close button was pressed; cancelable. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-alert> as a Vue component. */
+export declare const RayAlert: DefineComponent<RayAlertProps>;
+
+export interface RayEmptyStateProps {
+  /** Title. */
+  label?: string;
+  /** Less padding. */
+  compact?: boolean;
+  /** Dashed border. */
+  withBorder?: boolean;
+}
+/** <ray-empty-state> as a Vue component. */
+export declare const RayEmptyState: DefineComponent<RayEmptyStateProps>;
+
+export interface RayNotificationProps {
+  /** Title. */
+  label?: string;
+  /** Status color: tints the status icon (and a slotted icon's circle). */
+  color?: string;
+  /** Status icon from the registry (default: from the color); "none" for no icon. */
+  icon?: string;
+  /** Shows a spinner (notify() does not auto-close it). */
+  loading?: boolean;
+  /** No close button. */
+  hideClose?: boolean;
+  /** Draws a border. */
+  withBorder?: boolean;
+  /** Text of an action button (e.g. "Undo"); pressing it fires ray-action. */
+  actionLabel?: string;
+  /** The close button was pressed. */
+  onRayClose?: (event: CustomEvent<unknown>) => void;
+  /** The action button was pressed (notify() runs action.onClick and closes it). */
+  onRayAction?: (event: CustomEvent<unknown>) => void;
+}
+/** <ray-notification> as a Vue component. */
+export declare const RayNotification: DefineComponent<RayNotificationProps>;
+
+export interface RayToasterProps {
+  /** 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;
+  /** Pixels between toasts when expanded. */
+  gap?: number;
+}
+/** <ray-toaster> as a Vue component. */
+export declare const RayToaster: DefineComponent<RayToasterProps>;
+
+export interface RayProgressProps {
+  /** Progress, from 0 to max. Unset: indeterminate. */
+  value?: number;
+  /** The value of a full bar. */
+  max?: number;
+  /** A palette color or any CSS color. */
+  color?: string;
+  /** Bar height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: full. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  /** Diagonal stripes. */
+  striped?: boolean;
+  /** Moving stripes (with striped). */
+  animated?: boolean;
+  /** Shows the percentage: inside the bar on lg and xl, beside it on smaller sizes. */
+  showValue?: boolean;
+  /** Accessible name (default: Progress). */
+  label?: string;
+}
+/** <ray-progress> as a Vue component. */
+export declare const RayProgress: DefineComponent<RayProgressProps>;
+
+export interface RaySkeletonProps {
+  /** Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem). */
+  width?: string;
+  /** Height of a block or of each line (CSS length, a number is px). Default: 1rem. */
+  height?: string;
+  /** A circle (avatar placeholder): its diameter is width, else height. */
+  circle?: boolean;
+  /** Number of text lines (the last one is shorter). */
+  lines?: number;
+  /** Corner radius: xs…xl, full or a CSS length. Default: sm. */
+  radius?: string;
+  /** The loading effect (always none with reduced motion). */
+  animation?: "shimmer" | "pulse" | "none";
+  /** Shows the slotted content instead of the placeholder. */
+  loaded?: boolean;
+}
+/** <ray-skeleton> as a Vue component. */
+export declare const RaySkeleton: DefineComponent<RaySkeletonProps>;
+
+export interface RaySpinnerProps {
+  /** A palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Diameter. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Text read by screen readers. */
+  label?: string;
+}
+/** <ray-spinner> as a Vue component. */
+export declare const RaySpinner: DefineComponent<RaySpinnerProps>;
+
+export interface RayAppBarProps {
+  /** The title. */
+  label?: string;
+  /** A line under the title. */
+  description?: string;
+  /** The title centered (iOS). */
+  center?: boolean;
+  /** 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;
+  /** A selector of the element whose scrolling it follows (default: its shell's, else the window). */
+  scrollTarget?: string;
+}
+/** <ray-app-bar> as a Vue component. */
+export declare const RayAppBar: DefineComponent<RayAppBarProps>;
+
+export interface RayAppShellProps {
+  /** 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;
+  /** It switched between the wide and the phone layout. */
+  onRayBreakpoint?: (event: CustomEvent<{ mobile: boolean }>) => void;
+}
+/** <ray-app-shell> as a Vue component. */
+export declare const RayAppShell: DefineComponent<RayAppShellProps>;
+
+export interface RayAspectRatioProps {
+  /** 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;
+}
+/** <ray-aspect-ratio> as a Vue component. */
+export declare const RayAspectRatio: DefineComponent<RayAspectRatioProps>;
+
+export interface RayCardProps {
+  /** Inner spacing (named space scale). */
+  padding?: "0" | "xs" | "sm" | "md" | "lg" | "xl";
+  /** Corner radius. Default: --ray-radius-default. */
+  radius?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Elevation. */
+  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Draws a border. */
+  withBorder?: boolean;
+  /** default: card surface; filled: muted surface; outline: border without fill. */
+  variant?: "default" | "filled" | "outline";
+}
+/** <ray-card> as a Vue component. */
+export declare const RayCard: DefineComponent<RayCardProps>;
+
+export interface RayCenterProps {
+  /** As wide as its content (inline-flex): an icon beside text. */
+  inline?: boolean;
+}
+/** <ray-center> as a Vue component. */
+export declare const RayCenter: DefineComponent<RayCenterProps>;
+
+export interface RayContainerProps {
+  /** 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;
+}
+/** <ray-container> as a Vue component. */
+export declare const RayContainer: DefineComponent<RayContainerProps>;
+
+export interface RayGridProps {
+  /** 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;
+  /** Space between cells: xs…xl, a number (px) or a CSS length. */
+  gap?: string;
+  /** Space between rows when it differs from gap. */
+  rowGap?: string;
+  /** Vertical alignment of the cells in a row. */
+  align?: "stretch" | "start" | "center" | "end";
+}
+/** <ray-grid> as a Vue component. */
+export declare const RayGrid: DefineComponent<RayGridProps>;
+
+export interface RayGroupProps {
+  /** 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;
+  /** The children share the width equally. */
+  grow?: boolean;
+}
+/** <ray-group> as a Vue component. */
+export declare const RayGroup: DefineComponent<RayGroupProps>;
+
+export interface RayScrollAreaProps {
+  /** Height (CSS length). */
+  height?: string;
+  /** Maximum height: it grows with its content up to this, then scrolls. */
+  maxHeight?: string;
+  /** 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;
+  /** Distance from the end (px) at which ray-reach-end fires. */
+  threshold?: number;
+  /** Accessible name: makes the scrolling box a named region. */
+  label?: string;
+  /** The end came within threshold (once per arrival). */
+  onRayReachEnd?: (event: CustomEvent<{ edge: "bottom" | "right" }>) => void;
+}
+/** <ray-scroll-area> as a Vue component. */
+export declare const RayScrollArea: DefineComponent<RayScrollAreaProps>;
+
+export interface RaySeparatorProps {
+  /** Direction of the rule. */
+  orientation?: "horizontal" | "vertical";
+  /** Text in the middle of a horizontal rule. */
+  label?: string;
+  /** Where the label sits. */
+  labelPosition?: "left" | "center" | "right";
+  /** Thickness (1–5px). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Line style. */
+  variant?: "solid" | "dashed" | "dotted";
+}
+/** <ray-separator> as a Vue component. */
+export declare const RaySeparator: DefineComponent<RaySeparatorProps>;
+
+export interface RaySplitProps {
+  /** 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;
+  /** The start pane is hidden. */
+  collapsed?: boolean;
+  /** The divider cannot be moved. */
+  disabled?: boolean;
+  /** A key: the size is saved in localStorage and restored. */
+  autosave?: string;
+  /** After a drag, a key or a collapse. */
+  onRayResize?: (event: CustomEvent<{ size: number; collapsed: boolean }>) => void;
+}
+/** <ray-split> as a Vue component. */
+export declare const RaySplit: DefineComponent<RaySplitProps>;
+
+export interface RayStackProps {
+  /** 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";
+}
+/** <ray-stack> as a Vue component. */
+export declare const RayStack: DefineComponent<RayStackProps>;
+
+export interface RayStatusbarProps {
+  /** accent: the primary color (e.g. while debugging). */
+  variant?: "default" | "accent";
+}
+/** <ray-statusbar> as a Vue component. */
+export declare const RayStatusbar: DefineComponent<RayStatusbarProps>;
+
+export interface RayStatusbarItemProps {
+  /** A button (listen to click). */
+  action?: boolean;
+  /** Text color (red for errors…). */
+  color?: string;
+  /** Accessible name and tooltip (for icon-only or terse items). */
+  label?: string;
+}
+/** <ray-statusbar-item> as a Vue component. */
+export declare const RayStatusbarItem: DefineComponent<RayStatusbarItemProps>;
+
+export interface RayThemeToggleProps {
+  /** Control height. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Fired on the document root by setTheme(); detail: { theme, resolved, primary }. */
+  onRayThemeChange?: (event: CustomEvent<{ theme: "light" | "dark" | "system"; resolved: "light" | "dark"; primary: string | null }>) => void;
+}
+/** <ray-theme-toggle> as a Vue component. */
+export declare const RayThemeToggle: DefineComponent<RayThemeToggleProps>;
+
+export declare const components: {
+  RayButton: typeof RayButton;
+  RayButtonGroup: typeof RayButtonGroup;
+  RayIconButton: typeof RayIconButton;
+  RayToggle: typeof RayToggle;
+  RayToggleGroup: typeof RayToggleGroup;
+  RayCheckbox: typeof RayCheckbox;
+  RayCheckboxGroup: typeof RayCheckboxGroup;
+  RayColorPicker: typeof RayColorPicker;
+  RayColorInput: typeof RayColorInput;
+  RayCombobox: typeof RayCombobox;
+  RayDatePicker: typeof RayDatePicker;
+  RayCalendar: typeof RayCalendar;
+  RayFileUpload: typeof RayFileUpload;
+  RayInput: typeof RayInput;
+  RayNumberInput: typeof RayNumberInput;
+  RayPasswordInput: typeof RayPasswordInput;
+  RayPathInput: typeof RayPathInput;
+  RayRadioGroup: typeof RayRadioGroup;
+  RayRadio: typeof RayRadio;
+  RaySearch: typeof RaySearch;
+  RaySegmentedControl: typeof RaySegmentedControl;
+  RaySelect: typeof RaySelect;
+  RaySlider: typeof RaySlider;
+  RaySwitch: typeof RaySwitch;
+  RayTextarea: typeof RayTextarea;
+  RayBottomNav: typeof RayBottomNav;
+  RayBottomNavItem: typeof RayBottomNavItem;
+  RayBreadcrumbs: typeof RayBreadcrumbs;
+  RayBreadcrumb: typeof RayBreadcrumb;
+  RayNavLink: typeof RayNavLink;
+  RayPagination: typeof RayPagination;
+  RaySidebar: typeof RaySidebar;
+  RaySidebarGroup: typeof RaySidebarGroup;
+  RayStepper: typeof RayStepper;
+  RayStep: typeof RayStep;
+  RayTabs: typeof RayTabs;
+  RayTab: typeof RayTab;
+  RayTabPanel: typeof RayTabPanel;
+  RayCommandPalette: typeof RayCommandPalette;
+  RayDialog: typeof RayDialog;
+  RayDrawer: typeof RayDrawer;
+  RayMenu: typeof RayMenu;
+  RayMenuItem: typeof RayMenuItem;
+  RayMenuLabel: typeof RayMenuLabel;
+  RayMenuDivider: typeof RayMenuDivider;
+  RayPopover: typeof RayPopover;
+  RayTooltip: typeof RayTooltip;
+  RayAccordion: typeof RayAccordion;
+  RayAccordionItem: typeof RayAccordionItem;
+  RayAttachment: typeof RayAttachment;
+  RayAttachments: typeof RayAttachments;
+  RayAvatar: typeof RayAvatar;
+  RayBadge: typeof RayBadge;
+  RayBlockquote: typeof RayBlockquote;
+  RayCarousel: typeof RayCarousel;
+  RayCode: typeof RayCode;
+  RayIcon: typeof RayIcon;
+  RayIndicator: typeof RayIndicator;
+  RayKbd: typeof RayKbd;
+  RayStat: typeof RayStat;
+  RayTable: typeof RayTable;
+  RayTimeline: typeof RayTimeline;
+  RayTimelineItem: typeof RayTimelineItem;
+  RayAlert: typeof RayAlert;
+  RayEmptyState: typeof RayEmptyState;
+  RayNotification: typeof RayNotification;
+  RayToaster: typeof RayToaster;
+  RayProgress: typeof RayProgress;
+  RaySkeleton: typeof RaySkeleton;
+  RaySpinner: typeof RaySpinner;
+  RayAppBar: typeof RayAppBar;
+  RayAppShell: typeof RayAppShell;
+  RayAspectRatio: typeof RayAspectRatio;
+  RayCard: typeof RayCard;
+  RayCenter: typeof RayCenter;
+  RayContainer: typeof RayContainer;
+  RayGrid: typeof RayGrid;
+  RayGroup: typeof RayGroup;
+  RayScrollArea: typeof RayScrollArea;
+  RaySeparator: typeof RaySeparator;
+  RaySplit: typeof RaySplit;
+  RayStack: typeof RayStack;
+  RayStatusbar: typeof RayStatusbar;
+  RayStatusbarItem: typeof RayStatusbarItem;
+  RayThemeToggle: typeof RayThemeToggle;
+};
+/** app.use(RayDs) registers every component globally. */
+export declare const RayDs: Plugin;
+export default RayDs;
+
+declare module "vue" {
+  export interface GlobalComponents {
+    RayButton: typeof RayButton;
+    RayButtonGroup: typeof RayButtonGroup;
+    RayIconButton: typeof RayIconButton;
+    RayToggle: typeof RayToggle;
+    RayToggleGroup: typeof RayToggleGroup;
+    RayCheckbox: typeof RayCheckbox;
+    RayCheckboxGroup: typeof RayCheckboxGroup;
+    RayColorPicker: typeof RayColorPicker;
+    RayColorInput: typeof RayColorInput;
+    RayCombobox: typeof RayCombobox;
+    RayDatePicker: typeof RayDatePicker;
+    RayCalendar: typeof RayCalendar;
+    RayFileUpload: typeof RayFileUpload;
+    RayInput: typeof RayInput;
+    RayNumberInput: typeof RayNumberInput;
+    RayPasswordInput: typeof RayPasswordInput;
+    RayPathInput: typeof RayPathInput;
+    RayRadioGroup: typeof RayRadioGroup;
+    RayRadio: typeof RayRadio;
+    RaySearch: typeof RaySearch;
+    RaySegmentedControl: typeof RaySegmentedControl;
+    RaySelect: typeof RaySelect;
+    RaySlider: typeof RaySlider;
+    RaySwitch: typeof RaySwitch;
+    RayTextarea: typeof RayTextarea;
+    RayBottomNav: typeof RayBottomNav;
+    RayBottomNavItem: typeof RayBottomNavItem;
+    RayBreadcrumbs: typeof RayBreadcrumbs;
+    RayBreadcrumb: typeof RayBreadcrumb;
+    RayNavLink: typeof RayNavLink;
+    RayPagination: typeof RayPagination;
+    RaySidebar: typeof RaySidebar;
+    RaySidebarGroup: typeof RaySidebarGroup;
+    RayStepper: typeof RayStepper;
+    RayStep: typeof RayStep;
+    RayTabs: typeof RayTabs;
+    RayTab: typeof RayTab;
+    RayTabPanel: typeof RayTabPanel;
+    RayCommandPalette: typeof RayCommandPalette;
+    RayDialog: typeof RayDialog;
+    RayDrawer: typeof RayDrawer;
+    RayMenu: typeof RayMenu;
+    RayMenuItem: typeof RayMenuItem;
+    RayMenuLabel: typeof RayMenuLabel;
+    RayMenuDivider: typeof RayMenuDivider;
+    RayPopover: typeof RayPopover;
+    RayTooltip: typeof RayTooltip;
+    RayAccordion: typeof RayAccordion;
+    RayAccordionItem: typeof RayAccordionItem;
+    RayAttachment: typeof RayAttachment;
+    RayAttachments: typeof RayAttachments;
+    RayAvatar: typeof RayAvatar;
+    RayBadge: typeof RayBadge;
+    RayBlockquote: typeof RayBlockquote;
+    RayCarousel: typeof RayCarousel;
+    RayCode: typeof RayCode;
+    RayIcon: typeof RayIcon;
+    RayIndicator: typeof RayIndicator;
+    RayKbd: typeof RayKbd;
+    RayStat: typeof RayStat;
+    RayTable: typeof RayTable;
+    RayTimeline: typeof RayTimeline;
+    RayTimelineItem: typeof RayTimelineItem;
+    RayAlert: typeof RayAlert;
+    RayEmptyState: typeof RayEmptyState;
+    RayNotification: typeof RayNotification;
+    RayToaster: typeof RayToaster;
+    RayProgress: typeof RayProgress;
+    RaySkeleton: typeof RaySkeleton;
+    RaySpinner: typeof RaySpinner;
+    RayAppBar: typeof RayAppBar;
+    RayAppShell: typeof RayAppShell;
+    RayAspectRatio: typeof RayAspectRatio;
+    RayCard: typeof RayCard;
+    RayCenter: typeof RayCenter;
+    RayContainer: typeof RayContainer;
+    RayGrid: typeof RayGrid;
+    RayGroup: typeof RayGroup;
+    RayScrollArea: typeof RayScrollArea;
+    RaySeparator: typeof RaySeparator;
+    RaySplit: typeof RaySplit;
+    RayStack: typeof RayStack;
+    RayStatusbar: typeof RayStatusbar;
+    RayStatusbarItem: typeof RayStatusbarItem;
+    RayThemeToggle: typeof RayThemeToggle;
+  }
+}