@raylang/react 0.7.0 → 0.9.0

package/components/code.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayCode = /*#__PURE__*/ createComponent("ray-code", {
   displayName: "RayCode",
-  properties: ["code", "language", "filename", "lineNumbers", "highlight", "wrap", "maxHeight", "expanded", "hideCopy", "hideHeader", "size", "radius", "copyLabel", "copiedLabel"],
+  properties: ["code", "language", "filename", "lineNumbers", "highlight", "wrap", "verbatim", "maxHeight", "expanded", "hideCopy", "hideHeader", "size", "radius", "copyLabel", "copiedLabel"],
   events: { onRayCopy: "ray-copy" },
 });

package/components/command-palette.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayCommandPalette = /*#__PURE__*/ createComponent("ray-command-palette", {
   displayName: "RayCommandPalette",
-  properties: ["open", "actions", "query", "placeholder", "hotkey", "limit", "emptyLabel", "label", "hideHint", "nativeMenus", "overlayBlur"],
+  properties: ["open", "actions", "query", "placeholder", "hotkey", "limit", "emptyLabel", "label", "hideHint", "navigateLabel", "runLabel", "closeLabel", "nativeMenus", "overlayBlur"],
   events: { onRaySelect: "ray-select", onRayOpen: "ray-open", onRayClose: "ray-close" },
 });

package/components/doc-tabs.js

@@ -0,0 +1,15 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/doc-tabs";
+import { createComponent } from "../create.js";
+
+export const RayDocTabs = /*#__PURE__*/ createComponent("ray-doc-tabs", {
+  displayName: "RayDocTabs",
+  properties: ["value", "panel", "label", "closeLabel", "dirtyLabel"],
+  events: { onChange: "change", onRayRequestClose: "ray-request-close" },
+});
+export const RayDocTab = /*#__PURE__*/ createComponent("ray-doc-tab", {
+  displayName: "RayDocTab",
+  properties: ["value", "dirty", "hideClose"],
+  events: {  },
+});

package/components/icon.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayIcon = /*#__PURE__*/ createComponent("ray-icon", {
   displayName: "RayIcon",
-  properties: ["name", "filled", "size", "label", "color", "stroke"],
+  properties: ["name", "filled", "mirror", "size", "label", "color", "stroke"],
   events: {  },
 });

package/components/input.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayInput = /*#__PURE__*/ createComponent("ray-input", {
   displayName: "RayInput",
-  properties: ["value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
-  events: { onInput: "input", onChange: "change" },
+  properties: ["value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
+  events: { onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
 });

package/components/menu.js

@@ -6,11 +6,11 @@ import { createComponent } from "../create.js";
 export const RayMenu = /*#__PURE__*/ createComponent("ray-menu", {
   displayName: "RayMenu",
   properties: ["open", "placement", "context", "keepOpen", "native", "offset"],
-  events: { onRaySelect: "ray-select", onRayOpen: "ray-open", onRayClose: "ray-close" },
+  events: { onRaySelect: "ray-select", onRayRequestOpen: "ray-request-open", onRayOpen: "ray-open", onRayClose: "ray-close" },
 });
 export const RayMenuItem = /*#__PURE__*/ createComponent("ray-menu-item", {
   displayName: "RayMenuItem",
-  properties: ["value", "disabled", "color"],
+  properties: ["value", "disabled", "color", "type", "checked", "name"],
   events: {  },
 });
 export const RayMenuLabel = /*#__PURE__*/ createComponent("ray-menu-label", {

package/components/mode-input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/mode-input";
+import { createComponent } from "../create.js";
+
+export const RayModeInput = /*#__PURE__*/ createComponent("ray-mode-input", {
+  displayName: "RayModeInput",
+  properties: ["mode", "options", "display", "position", "menuLabel", "nativeMenu", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
+  events: { onRayModeChange: "ray-mode-change", onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
+});

package/components/password-input.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayPasswordInput = /*#__PURE__*/ createComponent("ray-password-input", {
   displayName: "RayPasswordInput",
-  properties: ["visible", "showLabel", "hideLabel", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
-  events: { onRayVisibilityChange: "ray-visibility-change", onInput: "input", onChange: "change" },
+  properties: ["visible", "showLabel", "hideLabel", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
+  events: { onRayVisibilityChange: "ray-visibility-change", onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
 });

package/components/path-input.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayPathInput = /*#__PURE__*/ createComponent("ray-path-input", {
   displayName: "RayPathInput",
-  properties: ["mode", "accept", "browseLabel", "dialogTitle", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
-  events: { onChange: "change", onRayError: "ray-error", onInput: "input" },
+  properties: ["mode", "accept", "browseLabel", "dialogTitle", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant", "highlight", "complete", "suggestionsLabel"],
+  events: { onChange: "change", onRayError: "ray-error", onRayComplete: "ray-complete", onInput: "input" },
 });

package/components/sidebar.js

@@ -5,8 +5,8 @@ import { createComponent } from "../create.js";
 
 export const RaySidebar = /*#__PURE__*/ createComponent("ray-sidebar", {
   displayName: "RaySidebar",
-  properties: ["collapsed", "open", "side", "variant", "width", "collapsedWidth", "breakpoint", "label"],
-  events: { onRayToggle: "ray-toggle", onRayOpen: "ray-open", onRayClose: "ray-close" },
+  properties: ["collapsed", "collapse", "open", "side", "variant", "width", "collapsedWidth", "breakpoint", "label", "resizable", "minWidth", "maxWidth", "autosave", "resizeLabel"],
+  events: { onRayResize: "ray-resize", onRayToggle: "ray-toggle", onRayOpen: "ray-open", onRayClose: "ray-close" },
 });
 export const RaySidebarGroup = /*#__PURE__*/ createComponent("ray-sidebar-group", {
   displayName: "RaySidebarGroup",

package/components/tabs.js

@@ -5,12 +5,12 @@ import { createComponent } from "../create.js";
 
 export const RayTabs = /*#__PURE__*/ createComponent("ray-tabs", {
   displayName: "RayTabs",
-  properties: ["value", "variant", "orientation", "color", "activation", "grow"],
+  properties: ["value", "variant", "orientation", "color", "size", "activation", "grow"],
   events: { onChange: "change" },
 });
 export const RayTab = /*#__PURE__*/ createComponent("ray-tab", {
   displayName: "RayTab",
-  properties: ["value", "disabled"],
+  properties: ["value", "disabled", "count"],
   events: {  },
 });
 export const RayTabPanel = /*#__PURE__*/ createComponent("ray-tab-panel", {

package/components/textarea.js

@@ -5,6 +5,6 @@ import { createComponent } from "../create.js";
 
 export const RayTextarea = /*#__PURE__*/ createComponent("ray-textarea", {
   displayName: "RayTextarea",
-  properties: ["value", "rows", "autosize", "maxRows", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "readonly", "size", "variant", "radius"],
-  events: { onInput: "input", onChange: "change" },
+  properties: ["value", "rows", "autosize", "maxRows", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "readonly", "size", "variant", "highlight", "complete", "suggestionsLabel", "radius"],
+  events: { onRayComplete: "ray-complete", onInput: "input", onChange: "change" },
 });

package/index.d.ts

@@ -188,8 +188,8 @@ export interface RayCheckboxOwnProps {
   color?: string;
   /** Box and font size. */
   size?: "xs" | "sm" | "md" | "lg" | "xl";
-  /** Side of the label. */
-  labelPosition?: "right" | "left";
+  /** Side of the label: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "end" | "start" | "right" | "left";
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Description before or after the control. */
@@ -520,6 +520,12 @@ export interface RayInputOwnProps {
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Box style. */
   variant?: "default" | "filled" | "unstyled";
+  /** Marks ranges of the text, painted behind it: called with the text on every change (typed or set), it returns { start, end, kind?, title? } offsets. kind "error" is red with a wavy underline; any other kind is styled with ::part(highlight-<kind>); title is the tooltip over the range. Ranges must not overlap. */
+  highlight?: ((text: string) => Ray.HighlightRange[]) | null;
+  /** Inline suggestions: called as the user types (and on Ctrl+Space) with the text and the caret, it returns the part of the text a suggestion would replace and the suggestions ({ from, to, items }), or null for none. A list opens under that part (ArrowUp/Down, Enter or Tab to accept, Escape to close); the chosen item's value replaces from–to as an undoable edit, then ray-complete fires. The field becomes a combobox (aria-autocomplete, aria-expanded, aria-activedescendant). */
+  complete?: ((text: string, caret: number) => Ray.CompletionResult | null | Promise<Ray.CompletionResult | null>) | null;
+  /** Accessible name of the suggestion list. */
+  suggestionsLabel?: string;
   /** Forwarded to the inner input. */
   autocomplete?: string;
   /** Virtual keyboard hint. */
@@ -542,6 +548,8 @@ export interface RayInputOwnProps {
   enterkeyhint?: string;
   /** Id of a <datalist> with suggestions. */
   list?: string;
+  /** A suggestion was accepted (the text already has it). */
+  onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -551,6 +559,88 @@ export type RayInputProps = RayInputOwnProps & Omit<React.HTMLAttributes<Ray.Ray
 /** <ray-input> as a React component. */
 export declare const RayInput: React.ForwardRefExoticComponent<RayInputProps & React.RefAttributes<Ray.RayInput>>;
 
+export interface RayModeInputOwnProps {
+  /** The chosen mode's value (default: the first). Setting it applies that mode without ray-mode-change. */
+  mode?: string;
+  /** The modes; when not set, the <option> children. */
+  options?: Ray.ModeOption[];
+  /** What the trigger shows: the mode's hint or label, its icon, or both. Default: the icon when the mode has one, else the label. */
+  display?: "label" | "icon" | "both";
+  /** The side of the field the trigger sits on. */
+  position?: "start" | "end";
+  /** The trigger's accessible name, read with the current mode ("Mode: File"). */
+  menuLabel?: string;
+  /** With a native host (a std/ui window with the bridge), the system's menu (no descriptions there). */
+  nativeMenu?: boolean;
+  /** 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";
+  /** Marks ranges of the text, painted behind it: called with the text on every change (typed or set), it returns { start, end, kind?, title? } offsets. kind "error" is red with a wavy underline; any other kind is styled with ::part(highlight-<kind>); title is the tooltip over the range. Ranges must not overlap. */
+  highlight?: ((text: string) => Ray.HighlightRange[]) | null;
+  /** Inline suggestions: called as the user types (and on Ctrl+Space) with the text and the caret, it returns the part of the text a suggestion would replace and the suggestions ({ from, to, items }), or null for none. A list opens under that part (ArrowUp/Down, Enter or Tab to accept, Escape to close); the chosen item's value replaces from–to as an undoable edit, then ray-complete fires. The field becomes a combobox (aria-autocomplete, aria-expanded, aria-activedescendant). */
+  complete?: ((text: string, caret: number) => Ray.CompletionResult | null | Promise<Ray.CompletionResult | null>) | null;
+  /** Accessible name of the suggestion list. */
+  suggestionsLabel?: string;
+  /** 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 chose a mode (mode is already the new one); cancelable: preventDefault keeps the previous mode. */
+  onRayModeChange?: (event: CustomEvent<{ mode: string; previous: string | null; option: Ray.ModeOption }>) => void;
+  /** A suggestion was accepted (the text already has it). */
+  onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** On every edit (value already updated). */
+  onInput?: (event: Event) => void;
+  /** When an edit is committed (blur, Enter). */
+  onChange?: (event: Event) => void;
+}
+export type RayModeInputProps = RayModeInputOwnProps & Omit<React.HTMLAttributes<Ray.RayModeInput>, keyof RayModeInputOwnProps> & { children?: React.ReactNode };
+/** <ray-mode-input> as a React component. */
+export declare const RayModeInput: React.ForwardRefExoticComponent<RayModeInputProps & React.RefAttributes<Ray.RayModeInput>>;
+
 export interface RayNumberInputOwnProps {
   /** The number (undefined when empty). */
   value?: number;
@@ -644,6 +734,12 @@ export interface RayPasswordInputOwnProps {
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Box style. */
   variant?: "default" | "filled" | "unstyled";
+  /** Marks ranges of the text, painted behind it: called with the text on every change (typed or set), it returns { start, end, kind?, title? } offsets. kind "error" is red with a wavy underline; any other kind is styled with ::part(highlight-<kind>); title is the tooltip over the range. Ranges must not overlap. */
+  highlight?: ((text: string) => Ray.HighlightRange[]) | null;
+  /** Inline suggestions: called as the user types (and on Ctrl+Space) with the text and the caret, it returns the part of the text a suggestion would replace and the suggestions ({ from, to, items }), or null for none. A list opens under that part (ArrowUp/Down, Enter or Tab to accept, Escape to close); the chosen item's value replaces from–to as an undoable edit, then ray-complete fires. The field becomes a combobox (aria-autocomplete, aria-expanded, aria-activedescendant). */
+  complete?: ((text: string, caret: number) => Ray.CompletionResult | null | Promise<Ray.CompletionResult | null>) | null;
+  /** Accessible name of the suggestion list. */
+  suggestionsLabel?: string;
   /** Forwarded to the inner input. */
   autocomplete?: string;
   /** Virtual keyboard hint. */
@@ -668,6 +764,8 @@ export interface RayPasswordInputOwnProps {
   list?: string;
   /** The user showed or hid the password. */
   onRayVisibilityChange?: (event: CustomEvent<{ visible: boolean }>) => void;
+  /** A suggestion was accepted (the text already has it). */
+  onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -714,6 +812,12 @@ export interface RayPathInputOwnProps {
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Box style. */
   variant?: "default" | "filled" | "unstyled";
+  /** Marks ranges of the text, painted behind it: called with the text on every change (typed or set), it returns { start, end, kind?, title? } offsets. kind "error" is red with a wavy underline; any other kind is styled with ::part(highlight-<kind>); title is the tooltip over the range. Ranges must not overlap. */
+  highlight?: ((text: string) => Ray.HighlightRange[]) | null;
+  /** Inline suggestions: called as the user types (and on Ctrl+Space) with the text and the caret, it returns the part of the text a suggestion would replace and the suggestions ({ from, to, items }), or null for none. A list opens under that part (ArrowUp/Down, Enter or Tab to accept, Escape to close); the chosen item's value replaces from–to as an undoable edit, then ray-complete fires. The field becomes a combobox (aria-autocomplete, aria-expanded, aria-activedescendant). */
+  complete?: ((text: string, caret: number) => Ray.CompletionResult | null | Promise<Ray.CompletionResult | null>) | null;
+  /** Accessible name of the suggestion list. */
+  suggestionsLabel?: string;
   /** Forwarded to the inner input. */
   autocomplete?: string;
   /** Virtual keyboard hint. */
@@ -740,6 +844,8 @@ export interface RayPathInputOwnProps {
   onChange?: (event: Event) => void;
   /** The system dialog failed. */
   onRayError?: (event: CustomEvent<{ error: Error }>) => void;
+  /** A suggestion was accepted (the text already has it). */
+  onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
 }
@@ -994,8 +1100,8 @@ export interface RaySwitchOwnProps {
   description?: string;
   /** Error text. */
   error?: string;
-  /** Side of the label. */
-  labelPosition?: "right" | "left";
+  /** Side of the label: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "end" | "start" | "right" | "left";
   /** Track color when on. */
   color?: string;
   /** Track size. */
@@ -1048,6 +1154,12 @@ export interface RayTextareaOwnProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** Box style. */
   variant?: "default" | "filled" | "unstyled";
+  /** Marks ranges of the text, painted behind it: called with the text on every change (typed or set), it returns { start, end, kind?, title? } offsets. kind "error" is red with a wavy underline; any other kind is styled with ::part(highlight-<kind>); title is the tooltip over the range. Ranges must not overlap. */
+  highlight?: ((text: string) => Ray.HighlightRange[]) | null;
+  /** Inline suggestions: called as the user types (and on Ctrl+Space) with the text and the caret, it returns the part of the text a suggestion would replace and the suggestions ({ from, to, items }), or null for none. A list opens under that part (ArrowUp/Down, Enter or Tab to accept, Escape to close); the chosen item's value replaces from–to as an undoable edit, then ray-complete fires. The field becomes a combobox (aria-autocomplete, aria-expanded, aria-activedescendant). */
+  complete?: ((text: string, caret: number) => Ray.CompletionResult | null | Promise<Ray.CompletionResult | null>) | null;
+  /** Accessible name of the suggestion list. */
+  suggestionsLabel?: string;
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** Placeholder text. */
@@ -1060,6 +1172,8 @@ export interface RayTextareaOwnProps {
   maxlength?: string;
   /** soft or hard. */
   wrap?: string;
+  /** A suggestion was accepted (the text already has it). */
+  onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
   /** On every edit. */
   onInput?: (event: Event) => void;
   /** When an edit is committed. */
@@ -1145,6 +1259,38 @@ export type RayBreadcrumbProps = RayBreadcrumbOwnProps & Omit<React.HTMLAttribut
 /** <ray-breadcrumb> as a React component. */
 export declare const RayBreadcrumb: React.ForwardRefExoticComponent<RayBreadcrumbProps & React.RefAttributes<Ray.RayBreadcrumb>>;
 
+export interface RayDocTabsOwnProps {
+  /** Value of the selected tab (default: the first). */
+  value?: string;
+  /** The id of the shared panel: it gets role=tabpanel and aria-labelledby the selected tab; the tabs get aria-controls. */
+  panel?: string;
+  /** Accessible name of the tab list ("Open requests"). */
+  label?: string;
+  /** Tooltip of the ×. */
+  closeLabel?: string;
+  /** What assistive technology hears after the name of a dirty tab. */
+  dirtyLabel?: string;
+  /** The selected tab changed: a click, the arrow keys, or the selected tab removed. */
+  onChange?: (event: Event) => void;
+  /** The × was clicked, the tab middle-clicked, or Delete/Backspace pressed on it: remove the tab to close it (not fired for hide-close tabs). */
+  onRayRequestClose?: (event: CustomEvent<{ value: string; tab: Ray.RayDocTab; source: "button" | "middle" | "key" }>) => void;
+}
+export type RayDocTabsProps = RayDocTabsOwnProps & Omit<React.HTMLAttributes<Ray.RayDocTabs>, keyof RayDocTabsOwnProps> & { children?: React.ReactNode };
+/** <ray-doc-tabs> as a React component. */
+export declare const RayDocTabs: React.ForwardRefExoticComponent<RayDocTabsProps & React.RefAttributes<Ray.RayDocTabs>>;
+
+export interface RayDocTabOwnProps {
+  /** Identifies the document (ray-doc-tabs value). */
+  value?: string;
+  /** Unsaved changes: a dot in place of the ×, which comes back under the pointer. */
+  dirty?: boolean;
+  /** Cannot be closed: no ×, no middle click, no Delete. */
+  hideClose?: boolean;
+}
+export type RayDocTabProps = RayDocTabOwnProps & Omit<React.HTMLAttributes<Ray.RayDocTab>, keyof RayDocTabOwnProps> & { children?: React.ReactNode };
+/** <ray-doc-tab> as a React component. */
+export declare const RayDocTab: React.ForwardRefExoticComponent<RayDocTabProps & React.RefAttributes<Ray.RayDocTab>>;
+
 export interface RayNavLinkOwnProps {
   /** Text. */
   label?: string;
@@ -1202,12 +1348,14 @@ export type RayPaginationProps = RayPaginationOwnProps & Omit<React.HTMLAttribut
 export declare const RayPagination: React.ForwardRefExoticComponent<RayPaginationProps & React.RefAttributes<Ray.RayPagination>>;
 
 export interface RaySidebarOwnProps {
-  /** Wide screens: an icon rail instead of the full panel. */
+  /** Wide screens: collapsed as collapse says (an icon rail, or out of view). */
   collapsed?: boolean;
+  /** What collapsed does on wide screens: icon, a rail of the nav links' icons; offcanvas, hidden entirely (no width, out of the tab order). */
+  collapse?: "icon" | "offcanvas";
   /** 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";
+  /** The edge it sits on (its border faces the content, its narrow-screen drawer slides from there): start/end follow the writing direction; left/right are sides of the screen. */
+  side?: "start" | "end" | "left" | "right";
   /** A panel against the edge, or a floating card with a margin. */
   variant?: "sidebar" | "floating";
   /** Width when expanded (CSS length). Default 16rem. */
@@ -1218,6 +1366,18 @@ export interface RaySidebarOwnProps {
   breakpoint?: string;
   /** Accessible name of its navigation. */
   label?: string;
+  /** Wide screens, expanded: its inner edge drags (or, focused, arrow-keys; Shift is faster, Home/End go to the limits) the width between min-width and max-width. */
+  resizable?: boolean;
+  /** Narrowest width when resizing, in px. */
+  minWidth?: number;
+  /** Widest width when resizing, in px. */
+  maxWidth?: number;
+  /** A key: the resized width is saved in localStorage and restored. A later change of width wins. */
+  autosave?: string;
+  /** Accessible name of the resize edge. */
+  resizeLabel?: string;
+  /** After a drag or a key resized it (resizable). */
+  onRayResize?: (event: CustomEvent<{ width: number }>) => void;
   /** After toggle(). */
   onRayToggle?: (event: CustomEvent<{ collapsed: boolean; open: boolean; mobile: boolean }>) => void;
   /** The drawer opened (narrow screens). */
@@ -1242,8 +1402,8 @@ export interface RayStepperOwnProps {
   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";
+  /** Label beside the number (after it in the reading direction), or under it (narrow screens, many steps). "left", its former name, still works. */
+  iconPosition?: "start" | "top" | "left";
   /** Completed steps are buttons that go back to them. */
   allowStepSelect?: boolean;
   /** With allow-step-select off, false lets the user jump to any step. */
@@ -1290,6 +1450,8 @@ export interface RayTabsOwnProps {
   orientation?: "horizontal" | "vertical";
   /** Active indicator color. */
   color?: string;
+  /** Height, font size and padding of the tabs (xs for a compact bar). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** manual: arrows move focus, Enter/Space activates. */
   activation?: "auto" | "manual";
   /** Tabs share the full width. */
@@ -1306,6 +1468,8 @@ export interface RayTabOwnProps {
   value?: string;
   /** Cannot be activated. */
   disabled?: boolean;
+  /** A small number after the label ("3", "99+"), lighter than a badge; part of the tab's accessible name. Empty: none. */
+  count?: string;
 }
 export type RayTabProps = RayTabOwnProps & Omit<React.HTMLAttributes<Ray.RayTab>, keyof RayTabOwnProps> & { children?: React.ReactNode };
 /** <ray-tab> as a React component. */
@@ -1338,6 +1502,12 @@ export interface RayCommandPaletteOwnProps {
   label?: string;
   /** No keyboard hint at the bottom. */
   hideHint?: boolean;
+  /** The keyboard hint's word for ↑↓. */
+  navigateLabel?: string;
+  /** The keyboard hint's word for ↵. */
+  runLabel?: string;
+  /** The keyboard hint's word for esc. */
+  closeLabel?: string;
   /** 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). */
@@ -1392,8 +1562,8 @@ export interface RayDrawerOwnProps {
   label?: string;
   /** A line under the title (the drawer's accessible description). */
   description?: string;
-  /** The edge it slides from. */
-  position?: "right" | "left" | "top" | "bottom";
+  /** The edge it slides from: start/end follow the writing direction; left/right are sides of the screen. */
+  position?: "end" | "start" | "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). */
@@ -1420,7 +1590,7 @@ export declare const RayDrawer: React.ForwardRefExoticComponent<RayDrawerProps &
 export interface RayMenuOwnProps {
   /** Shown. */
   open?: boolean;
-  /** Preferred side and alignment. */
+  /** Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, "bottom-start" lines up the right edges). */
   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;
@@ -1432,6 +1602,8 @@ export interface RayMenuOwnProps {
   offset?: number;
   /** An item was chosen; detail: { value, item }. */
   onRaySelect?: (event: CustomEvent<{ value: string; item: Ray.RayMenuItem }>) => void;
+  /** Its trigger is about to open it (click, Arrow keys, right click), before the items are read, native menu included: fill items that depend on what was clicked here. Cancelable (preventDefault keeps it closed). Not fired by show() or open = true. detail: { event }. */
+  onRayRequestOpen?: (event: CustomEvent<{ event: Event }>) => void;
   /** After it opened. */
   onRayOpen?: (event: CustomEvent<unknown>) => void;
   /** After it closed. */
@@ -1448,6 +1620,12 @@ export interface RayMenuItemOwnProps {
   disabled?: boolean;
   /** Text and hover color (e.g. red for destructive actions). */
   color?: string;
+  /** checkbox: choosing it toggles checked (menuitemcheckbox); radio: choosing it checks it and unchecks the radio items of the menu with the same name (menuitemradio). Both show a check mark when checked, in the native menu too. */
+  type?: "item" | "checkbox" | "radio";
+  /** Checked (checkbox and radio items). Already updated when ray-select fires. */
+  checked?: boolean;
+  /** The group of a radio item: one checked per name in the menu. */
+  name?: string;
 }
 export type RayMenuItemProps = RayMenuItemOwnProps & Omit<React.HTMLAttributes<Ray.RayMenuItem>, keyof RayMenuItemOwnProps> & { children?: React.ReactNode };
 /** <ray-menu-item> as a React component. */
@@ -1468,7 +1646,7 @@ export declare const RayMenuDivider: React.ForwardRefExoticComponent<RayMenuDivi
 export interface RayPopoverOwnProps {
   /** Shown. */
   open?: boolean;
-  /** Preferred side and alignment. */
+  /** Preferred side and alignment: top/bottom/left/right are sides of the screen; on top and bottom, -start/-end follow the writing direction (right to left, "bottom-start" lines up the right edges). */
   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;
@@ -1492,7 +1670,7 @@ export declare const RayPopover: React.ForwardRefExoticComponent<RayPopoverProps
 export interface RayTooltipOwnProps {
   /** Tooltip text. */
   label?: string;
-  /** Preferred side. */
+  /** Preferred side; -start/-end follow the writing direction. */
   placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
   /** ms before showing. */
   openDelay?: number;
@@ -1518,8 +1696,8 @@ export interface RayAccordionOwnProps {
   multiple?: boolean;
   /** Visual style. */
   variant?: "default" | "contained" | "separated" | "filled";
-  /** Side of the chevron. */
-  chevronPosition?: "right" | "left";
+  /** Side of the chevron: start/end follow the writing direction; left/right are sides of the screen. */
+  chevronPosition?: "end" | "start" | "right" | "left";
   /** The user opened or closed an item. */
   onChange?: (event: Event) => void;
 }
@@ -1684,6 +1862,8 @@ export interface RayCodeOwnProps {
   highlight?: string;
   /** Wraps long lines instead of scrolling sideways. */
   wrap?: boolean;
+  /** Shows and copies the text exactly as given: no common indentation or blank first and last lines removed. For data (a response body, a log) rather than code written in the page. */
+  verbatim?: 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. */
@@ -1712,6 +1892,8 @@ export interface RayIconOwnProps {
   name?: Ray.IconName;
   /** The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle. */
   filled?: boolean;
+  /** Mirrored in a right-to-left context (dir="rtl"), for an icon that points along the text: back, forward, send, undo. The roles that do (ui.next, ui.previous, ui.first, ui.last, ui.disclosure, ui.separator) mirror by themselves. */
+  mirror?: boolean;
   /** xs…xl or any CSS length. Default: 1em. */
   size?: string;
   /** Accessible name; without it the icon is decorative (hidden from screen readers). */
@@ -1830,8 +2012,8 @@ export declare const RayTable: React.ForwardRefExoticComponent<RayTableProps & R
 export interface RayTimelineOwnProps {
   /** Index of the last reached item (-1: none). */
   active?: number;
-  /** Side of the line. */
-  align?: "left" | "right";
+  /** Side of the line: start/end follow the writing direction; left/right are sides of the screen. */
+  align?: "start" | "end" | "left" | "right";
   /** Bullet size: px as a number or a CSS length (default 20px). */
   bulletSize?: string;
   /** Line width in px (default 2). */
@@ -1920,8 +2102,8 @@ export type RayNotificationProps = RayNotificationOwnProps & Omit<React.HTMLAttr
 export declare const RayNotification: React.ForwardRefExoticComponent<RayNotificationProps & React.RefAttributes<Ray.RayNotification>>;
 
 export interface RayToasterOwnProps {
-  /** Corner of the stack. */
-  position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center";
+  /** Corner of the stack: -start/-end follow the writing direction; -left/-right are sides of the screen. */
+  position?: "bottom-end" | "bottom-start" | "bottom-center" | "top-end" | "top-start" | "top-center" | "bottom-right" | "bottom-left" | "top-right" | "top-left";
   /** Maximum kept; the oldest go first. */
   limit?: number;
   /** Toasts shown in the collapsed stack (the rest wait, hidden). */
@@ -2166,8 +2348,8 @@ export interface RayScrollAreaOwnProps {
   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;
+  /** The end came within threshold (once per arrival): the bottom, or the right when horizontal (the left right to left). */
+  onRayReachEnd?: (event: CustomEvent<{ edge: "bottom" | "right" | "left" }>) => void;
 }
 export type RayScrollAreaProps = RayScrollAreaOwnProps & Omit<React.HTMLAttributes<Ray.RayScrollArea>, keyof RayScrollAreaOwnProps> & { children?: React.ReactNode };
 /** <ray-scroll-area> as a React component. */
@@ -2178,8 +2360,8 @@ export interface RaySeparatorOwnProps {
   orientation?: "horizontal" | "vertical";
   /** Text in the middle of a horizontal rule. */
   label?: string;
-  /** Where the label sits. */
-  labelPosition?: "left" | "center" | "right";
+  /** Where the label sits: start/end follow the writing direction; left/right are sides of the screen. */
+  labelPosition?: "start" | "center" | "end" | "left" | "right";
   /** Thickness (1–5px). */
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** Line style. */
@@ -2202,7 +2384,7 @@ export interface RaySplitOwnProps {
   collapsed?: boolean;
   /** The divider cannot be moved. */
   disabled?: boolean;
-  /** A key: the size is saved in localStorage and restored. */
+  /** A key: the size and the collapsed state are saved in localStorage and restored (a saved state wins over the collapsed attribute). */
   autosave?: string;
   /** After a drag, a key or a collapse. */
   onRayResize?: (event: CustomEvent<{ size: number; collapsed: boolean }>) => void;

package/index.js

@@ -16,6 +16,7 @@ export { RayCombobox } from "./components/combobox.js";
 export { RayDatePicker, RayCalendar } from "./components/date-picker.js";
 export { RayFileUpload } from "./components/file-upload.js";
 export { RayInput } from "./components/input.js";
+export { RayModeInput } from "./components/mode-input.js";
 export { RayNumberInput } from "./components/number-input.js";
 export { RayPasswordInput } from "./components/password-input.js";
 export { RayPathInput } from "./components/path-input.js";
@@ -28,6 +29,7 @@ export { RaySwitch } from "./components/switch.js";
 export { RayTextarea } from "./components/textarea.js";
 export { RayBottomNav, RayBottomNavItem } from "./components/bottom-nav.js";
 export { RayBreadcrumbs, RayBreadcrumb } from "./components/breadcrumbs.js";
+export { RayDocTabs, RayDocTab } from "./components/doc-tabs.js";
 export { RayNavLink } from "./components/nav-link.js";
 export { RayPagination } from "./components/pagination.js";
 export { RaySidebar, RaySidebarGroup } from "./components/sidebar.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "React wrappers of the ray-elements web components",
   "license": "Apache-2.0",
   "keywords": ["web-components", "design-system", "ui", "raylang", "react"],
@@ -28,7 +28,7 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@raylang/elements": "^0.7.0",
+    "@raylang/elements": "^0.9.0",
     "react": ">=18"
   }
 }