@raylang/elements 0.11.0 → 0.13.0

package/check/cli.js

@@ -6,7 +6,7 @@
 //   node node_modules/@raylang/elements/check/cli.js check index.html   (no npm: a raylang app)
 
 import { readFileSync, readdirSync, statSync } from "node:fs";
-import { join, relative } from "node:path";
+import { dirname, join, relative, resolve } from "node:path";
 import { checkMarkup, customValues, RULES } from "./check.js";
 import { iconNames, iconAliases } from "../core/icons.js";
 
@@ -23,7 +23,8 @@ JSX and TSX files against @raylang/elements ${version()}. A directory is walked
 
 Options:
   --format json        the diagnostics as JSON
-  --icons a,b          icon names your app registers (setIcons calls are found by themselves)
+  --icons a,b          icon names your app registers (setIcons({ … }) and setIcons(X), X an
+                       object of the file or imported from a local module, are found by themselves)
   --allow attr=v,…     more values of an attribute: your own variant=brand (selectors such as
                        [variant="brand"] in your CSS and extendStyles are found by themselves)
   --manifest FILE      another custom-elements.json (your own components)
@@ -92,7 +93,7 @@ function main(argv) {
   const filledIcons = new Set(iconNames({ filled: true }));
   for (const f of scripts) {
     const src = readFileSync(f, "utf8");
-    for (const name of registeredIcons(src)) {
+    for (const name of registeredIcons(src, f)) {
       if (name.endsWith(":filled")) filledIcons.add(name.slice(0, -":filled".length));
       else icons.add(name);
     }
@@ -132,15 +133,59 @@ function collect(path, files, scripts, explicit) {
   if (SCRIPTS.has(ext)) scripts.push(path);
 }
 
-// The keys of setIcons({ inbox: '<svg…>', "file-text": …, "star:filled": …, "ui.remove": … }) calls.
-function registeredIcons(src) {
+// The keys of setIcons({ inbox: '<svg…>', "file-text": …, "star:filled": …, "ui.remove": … }) calls,
+// and of setIcons(ICONS) where ICONS is an object literal of the same file
+// (const ICONS = { … }) or one it imports from a local module
+// (import { ICONS } from "./icons.js" → export const ICONS = { … }, or a
+// default import → export default { … }).
+function registeredIcons(src, file) {
   const out = [];
-  for (const call of src.matchAll(/setIcons\(\s*\{([\s\S]*?)\}\s*\)/g)) {
-    for (const key of call[1].matchAll(/(?:^|[,{\s])(?:(["'])([A-Za-z][\w.-]*(?::filled)?)\1|([A-Za-z][\w-]*))\s*:/g)) out.push(key[2] ?? key[3]);
+  for (const call of src.matchAll(/setIcons\(\s*\{([\s\S]*?)\}\s*\)/g)) out.push(...objectKeys(call[1]));
+  for (const call of src.matchAll(/setIcons\(\s*([A-Za-z_$][\w$]*)\s*\)/g)) {
+    const body = objectNamed(src, call[1], file, new Set());
+    if (body !== null) out.push(...objectKeys(body));
   }
   return out;
 }
 
+function objectKeys(body) {
+  const out = [];
+  for (const key of body.matchAll(/(?:^|[,{\s])(?:(["'])([A-Za-z][\w.-]*(?::filled)?)\1|([A-Za-z][\w-]*))\s*:/g)) out.push(key[2] ?? key[3]);
+  return out;
+}
+
+const id = (name) => name.replace(/[$]/g, "\\$&");
+
+// The body of the object literal bound to `name` in `src` (a const/let/var,
+// or an export of a local module it imports it from), or null.
+function objectNamed(src, name, file, seen) {
+  const local = src.match(new RegExp(`(?:^|[\\s;])(?:export\\s+)?(?:const|let|var)\\s+${id(name)}\\s*=\\s*\\{([\\s\\S]*?)\\}\\s*(?:;|\\n|$)`));
+  if (local) return local[1];
+  const named = src.match(new RegExp(`import\\s*\\{([^}]*)\\}\\s*from\\s*(["'])(\\.[^"']*)\\2`, "g")) ?? [];
+  for (const m of named) {
+    const [, names, , from] = m.match(/import\s*\{([^}]*)\}\s*from\s*(["'])(\.[^"']*)\2/);
+    const spec = names.split(",").map((s) => s.trim().split(/\s+as\s+/)).find((s) => (s[1] ?? s[0]) === name);
+    if (spec) return exportedObject(file, from, spec[0], seen);
+  }
+  const def = src.match(new RegExp(`import\\s+${id(name)}\\s+from\\s*(["'])(\\.[^"']*)\\1`));
+  if (def) return exportedObject(file, def[2], "default", seen);
+  return null;
+}
+
+function exportedObject(file, from, name, seen) {
+  let target;
+  try {
+    target = resolve(dirname(file), from);
+    if (seen.has(target)) return null;
+    seen.add(target);
+    const src = readFileSync(target, "utf8");
+    if (name === "default") return src.match(/export\s+default\s*\{([\s\S]*?)\}\s*(?:;|\n|$)/)?.[1] ?? null;
+    return objectNamed(src, name, target, seen);
+  } catch {
+    return null;
+  }
+}
+
 try {
   process.exitCode = main(process.argv.slice(2));
 } catch (e) {

package/components/date-picker/date-picker.js

@@ -32,6 +32,13 @@ function parse(iso) {
 }
 
 /** A UTC Date -> "2026-10-06". */
+/** A dayState() result as a part token, or "" (letters, digits, - and _). */
+function stateToken(v) {
+  if (v === null || v === undefined || v === false || v === "") return "";
+  const s = String(v).trim();
+  return /^[A-Za-z][\w-]*$/.test(s) ? s : "";
+}
+
 function iso(d) {
   return d.toISOString().slice(0, 10);
 }
@@ -141,6 +148,7 @@ export class RayCalendar extends RayElement {
     locale: { type: String },
     firstDay: { type: Number },
     size: { type: String, reflect: true, default: "sm" },
+    dayState: { attribute: false },
   };
   static styles = [sizeStyles, calendarStyles];
   static template = `
@@ -154,6 +162,11 @@ export class RayCalendar extends RayElement {
   /** The day the keyboard focus is on (roving tabindex). */
   #focus = null;
 
+  /** Renders the month again (what dayState marks changed). */
+  refresh() {
+    this._render();
+  }
+
   constructor() {
     super();
     this.$(".prev").addEventListener("click", () => this._moveFocus(addMonths(this._focusDate(), -1), false));
@@ -228,6 +241,7 @@ export class RayCalendar extends RayElement {
     const selected = this.value && parse(this.value) ? this.value : "";
     const now = iso(today());
     const focusIso = iso(focus);
+    const state = typeof this.dayState === "function" ? this.dayState : null;
     const body = this.$("tbody");
     body.replaceChildren();
     for (let w = 0; w < 6; w++) {
@@ -251,6 +265,13 @@ export class RayCalendar extends RayElement {
         td.setAttribute("aria-selected", String(sel));
         b.toggleAttribute("data-selected", sel);
         if (this._disabled(day)) b.setAttribute("aria-disabled", "true");
+        // An app's mark on the day (adherence, events…): data-state and a
+        // part token, day-<state>, for ::part(day-<state>) from outside.
+        const s = state ? stateToken(state(id)) : "";
+        if (s) {
+          b.dataset.state = s;
+          b.setAttribute("part", `day day-${s}`);
+        }
         td.append(b);
         tr.append(td);
         day = addDays(day, 1);
@@ -379,6 +400,7 @@ export class RayDatePicker extends FieldControl {
     firstDay: { type: Number },
     clearable: { type: Boolean, reflect: true },
     open: { type: Boolean, reflect: true },
+    native: { type: String, reflect: true, default: "auto" },
   };
   static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, pickerStyles];
   static template = fieldTemplate(
@@ -425,6 +447,17 @@ export class RayDatePicker extends FieldControl {
       this.open = false;
       this.trigger.focus();
     });
+    // A date picked in the native control (the system's picker on a phone,
+    // reached through the trigger with native, or by the keyboard's form
+    // navigation): the model follows it, like a calendar pick.
+    this.control.addEventListener("input", (e) => {
+      e.stopPropagation();
+      this._picked("input");
+    });
+    this.control.addEventListener("change", (e) => {
+      e.stopPropagation();
+      this._picked("change");
+    });
     this.panel.addEventListener("toggle", (e) => this._onToggle(e.newState === "open"));
     this._default = this.getAttribute("value") ?? "";
   }
@@ -452,12 +485,44 @@ export class RayDatePicker extends FieldControl {
     cal.locale = this.locale;
     cal.firstDay = this.firstDay;
     cal.size = this.size === "xs" ? "xs" : this.size === "lg" || this.size === "xl" ? "md" : "sm";
+    // Out of the focus order unless it is the picker: on a phone, a form's
+    // previous/next keys would otherwise land on it beside the calendar.
+    c.inert = !this._useNative();
     this.syncField();
     this._commit();
     this._paint();
     if (changed.has("open")) this._setOpen(Boolean(this.open));
   }
 
+  /** Whether the trigger opens the system's picker instead of the calendar. */
+  _useNative() {
+    if (this.native === "always") return true;
+    if (this.native === "never") return false;
+    return typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+  }
+
+  /** Opens the native control's picker (the trigger, with native). */
+  _openNative() {
+    const c = this.control;
+    try {
+      c.showPicker();
+    } catch {
+      // No user activation or no showPicker(): focusing it opens the picker on a phone.
+      c.focus();
+      c.click();
+    }
+  }
+
+  // The native control changed on its own: sync the model and report it.
+  _picked(type) {
+    const v = this.control.value;
+    if (this.value !== v) this.commitProperty("value", v);
+    this._commit();
+    this._paint();
+    if (this.open) this.open = false;
+    this.dispatchEvent(new Event(type, { bubbles: true, composed: type === "input" }));
+  }
+
   /** Label, description, error and ARIA go to the button the user operates. */
   syncField() {
     super.syncField();
@@ -512,9 +577,13 @@ export class RayDatePicker extends FieldControl {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
 
-  /** Opens or closes the calendar. */
+  /** Opens or closes the calendar (with native, opens the system's picker). */
   toggle(force) {
     if (this.trigger.disabled) return;
+    if (this._useNative() && force !== false) {
+      this._openNative();
+      return;
+    }
     this.open = force ?? !this.open;
   }
 

package/components/drawer/drawer.js

@@ -78,6 +78,13 @@ const styles = css`
     border-top-width: 1px;
     --_from: translateY(100%);
   }
+  /* size="content": as big as what it holds, up to the viewport; the body scrolls past that. */
+  :host([size="content"]) dialog { width: max-content; max-width: calc(100vw - 2 * var(--_inset)); }
+  :host([size="content"][position="top"]) dialog, :host([size="content"][position="bottom"]) dialog {
+    width: calc(100vw - 2 * var(--_inset));
+    height: auto;
+    max-height: calc(100dvh - 2 * var(--_inset));
+  }
   :host([floating]) dialog { border-width: 1px; }
   /* A modeless dialog is not in the top layer: stack it above sticky headers
      and dropdowns (an ancestor with transform/filter would still clip it). */
@@ -147,9 +154,10 @@ export class RayDrawer extends RayDialog {
   }
 
   update(changed) {
-    // xs…xl, full, or any CSS length.
-    const size = SIZES[this.size] ?? this.size;
+    // xs…xl, full, content (CSS above), or any CSS length.
+    const size = this.size === "content" ? "" : SIZES[this.size] ?? this.size;
     if (size) this.style.setProperty("--_size", size);
+    else this.style.removeProperty("--_size");
     super.update(changed);
   }
 }

package/components/input/input.js

@@ -10,6 +10,10 @@ import { syncComplete, completeStyles } from "../../core/complete.js";
 const styles = css`
   .control[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
   .control[type="number"] { font-variant-numeric: tabular-nums; }
+  /* Pickers: the field's own height and font, not the browser's. */
+  .control[type="time"], .control[type="date"], .control[type="datetime-local"] { font-variant-numeric: tabular-nums; }
+  .control::-webkit-date-and-time-value { text-align: start; min-height: 1lh; }
+  .control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
 `;
 
 // Attributes copied as-is to the inner <input>.
@@ -73,6 +77,11 @@ export class RayInput extends FieldControl {
     syncComplete(this);
   }
 
+  /** The highlight range under a point of the viewport, or null. */
+  highlightAt(x, y) {
+    return this._textLayer?.rangeAt(x, y) ?? null;
+  }
+
   /** Runs `highlight` again (what it marks changed, not the text). */
   refreshHighlight() {
     syncHighlight(this);

package/components/menu/menu.js

@@ -142,6 +142,13 @@ export class RayMenu extends Floating {
     return this.context && this._point ? this._point : super.anchorRect();
   }
 
+  // A context menu's trigger is the area it serves: a press there, outside
+  // the panel, closes it like a system context menu (a right click reopens
+  // it at the new point).
+  triggerDismisses() {
+    return Boolean(this.context);
+  }
+
   toggled(open) {
     if (open) {
       this._focus(this._focusOnOpen ?? "first");

package/components/notification/notification.js

@@ -226,6 +226,8 @@ const toasterStyles = css`
   /* Phones: full width at the bottom (or top), wherever the desktop position is. */
   @media (max-width: 40em) {
     :host { width: auto; inset-inline: 0; transform: none; padding: var(--ray-space-3); }
+    /* Same specificity as the -center rule above, which would keep left: 50%. */
+    :host([position$="center"]) { left: 0; right: 0; transform: none; } /* physical */
     :host([position^="top"]) { top: 0; bottom: auto; }
     :host(:not([position^="top"])) { bottom: 0; top: auto; }
     ::slotted(*) { inset-inline: var(--ray-space-3); }

package/components/textarea/textarea.js

@@ -77,6 +77,11 @@ export class RayTextarea extends FieldControl {
     syncComplete(this);
   }
 
+  /** The highlight range under a point of the viewport, or null. */
+  highlightAt(x, y) {
+    return this._textLayer?.rangeAt(x, y) ?? null;
+  }
+
   /** Runs `highlight` again (what it marks changed, not the text). */
   refreshHighlight() {
     syncHighlight(this);

package/core/floating.js

@@ -35,6 +35,7 @@ export class Floating extends RayElement {
     open: { type: Boolean, reflect: true },
     placement: { type: String, reflect: true, default: "bottom" },
     offset: { type: Number, default: 8 },
+    anchor: { attribute: false },
   };
   /** popover attribute of the panel ("manual": closing is handled here). */
   static popoverMode = "manual";
@@ -102,8 +103,15 @@ export class Floating extends RayElement {
   /** Subclasses attach their trigger listeners here. */
   wireTrigger(_trigger) {}
 
-  /** The rectangle the panel is placed against (default: the trigger). */
+  /**
+   * The rectangle the panel is placed against: `anchor` when set (an element,
+   * a DOMRect or a function returning one: a text range, the pointer), else
+   * the trigger.
+   */
   anchorRect() {
+    const a = typeof this.anchor === "function" ? this.anchor() : this.anchor;
+    if (a instanceof Element) return a.getBoundingClientRect();
+    if (a && typeof a.left === "number") return a;
     return (this.trigger ?? this).getBoundingClientRect();
   }
 
@@ -132,7 +140,20 @@ export class Floating extends RayElement {
   _dismissable() {
     const ctor = /** @type {typeof Floating} */ (this.constructor);
     if (this.#undismiss || !ctor.lightDismiss || ctor.popoverMode !== "manual") return;
-    this.#undismiss = dismissable({ panel: this.panel, owner: this, trigger: this.trigger, close: () => { this.open = false; } });
+    // When the trigger dismisses, so does the rest of the host's light DOM
+    // (the area is a child of the host): only the panel is inside then.
+    const area = this.triggerDismisses();
+    this.#undismiss = dismissable({ panel: this.panel, owner: area ? this.panel : this, trigger: area ? null : this.trigger, close: () => { this.open = false; } });
+  }
+
+  /**
+   * Whether a press on the trigger counts as outside and closes the panel.
+   * Default false: a button that toggles the panel handles its own click
+   * (closing it there too would reopen it). A context menu's trigger is the
+   * whole area it serves, so there it is true.
+   */
+  triggerDismisses() {
+    return false;
   }
 
   /** The keyframes the panel leaves with (subclasses may change them). */
@@ -166,6 +187,15 @@ export class Floating extends RayElement {
 
   _onToggle(e) {
     const opening = e.newState === "open";
+    // `toggle` is a task: `open` may have changed again since the state it
+    // reports. An open that a later `open = false` is already animating out,
+    // or a close that a later `open = true` re-showed, must not win over
+    // that newer value; only the pair of events is still emitted.
+    const stale = opening ? !this.open && Boolean(this.#exit) : Boolean(this.open) && this.panel.matches(":popover-open");
+    if (stale) {
+      this.emit(opening ? "ray-open" : "ray-close");
+      return;
+    }
     if (this.popupKind()) this.#trigger?.setAttribute("aria-expanded", String(opening));
     if (opening) {
       this.reposition();

package/core/textlayer.js

@@ -176,10 +176,18 @@ export class TextLayer {
 
   /** The range under a point of the viewport, or null. */
   rangeAt(x, y) {
+    return this.hitAt(x, y)?.range ?? null;
+  }
+
+  /**
+   * The range under a point of the viewport and the box of the line of it
+   * the point is on (a range may wrap), or null.
+   */
+  hitAt(x, y) {
     const marks = [...this.text.querySelectorAll("mark")];
     for (let i = 0; i < marks.length; i++) {
       for (const r of marks[i].getClientRects()) {
-        if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return this.ranges[i];
+        if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return { range: this.ranges[i], rect: r };
       }
     }
     return null;
@@ -189,7 +197,9 @@ export class TextLayer {
 /**
  * Paints `host.highlight(text)` behind `host.control` (ray-input,
  * ray-textarea): the layer is made the first time a highlight function is
- * set. A range's `title` becomes the field's tooltip under the pointer.
+ * set. A range's `title` becomes the field's tooltip under the pointer, and
+ * `ray-highlight-hover` fires when the range under it changes (null leaving
+ * one), with its box, so an app can show its own popover over a range.
  */
 export function syncHighlight(host) {
   const fn = typeof host.highlight === "function" ? host.highlight : null;
@@ -197,10 +207,18 @@ export function syncHighlight(host) {
   host._textLayer ??= new TextLayer(host.control);
   if (!host._highlightTitles) {
     host._highlightTitles = true;
-    host.control.addEventListener("pointermove", (e) => {
-      const title = host._textLayer.rangeAt(e.clientX, e.clientY)?.title ?? "";
+    let over = null;
+    const hover = (x, y) => {
+      const hit = host._textLayer.hitAt(x, y);
+      const title = hit?.range.title ?? "";
       if (host.control.title !== title) host.control.title = title;
-    });
+      const range = hit?.range ?? null;
+      if (range === over) return;
+      over = range;
+      host.emit("ray-highlight-hover", { range, rect: hit?.rect ?? null });
+    };
+    host.control.addEventListener("pointermove", (e) => hover(e.clientX, e.clientY));
+    host.control.addEventListener("pointerleave", () => hover(-1, -1));
   }
   let ranges = [];
   if (fn) {

package/custom-elements.json

@@ -3196,7 +3196,7 @@
           "name": "RayDatePicker",
           "tagName": "ray-date-picker",
           "customElement": true,
-          "description": "Values are ISO dates (\"2026-10-06\"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it.",
+          "description": "Values are ISO dates (\"2026-10-06\"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. On a touch screen the trigger opens the system's picker instead (native).",
           "superclass": {
             "name": "FieldControl"
           },
@@ -3275,6 +3275,15 @@
               "description": "The calendar dropdown is shown.",
               "fieldName": "open"
             },
+            {
+              "name": "native",
+              "type": {
+                "text": "\"auto\" | \"always\" | \"never\""
+              },
+              "description": "Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar.",
+              "fieldName": "native",
+              "default": "auto"
+            },
             {
               "name": "name",
               "type": {
@@ -3452,6 +3461,17 @@
               "attribute": "open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "native",
+              "type": {
+                "text": "\"auto\" | \"always\" | \"never\""
+              },
+              "description": "Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar.",
+              "attribute": "native",
+              "reflects": true,
+              "default": "auto"
+            },
             {
               "kind": "field",
               "name": "name",
@@ -3746,6 +3766,19 @@
               "reflects": true,
               "default": "sm"
             },
+            {
+              "kind": "field",
+              "name": "dayState",
+              "type": {
+                "text": "((date: string) => string | null | undefined) | null"
+              },
+              "description": "Marks days: called with each day's ISO date on every render, it returns a state name (letters, digits, - and _) or nothing. The day button gets data-state and the part day-<state>, so ::part(day-taken) (or ::part(day-missed)::after for a dot) styles it from outside. Call refresh() when what it marks changed but the month did not."
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "description": "Renders the month again: when what dayState marks changed but the text did not."
+            },
             {
               "kind": "method",
               "name": "focusDay",
@@ -3786,7 +3819,7 @@
             },
             {
               "name": "day",
-              "description": "Each day button ([aria-selected], [aria-current=date], [aria-disabled], [data-outside])."
+              "description": "Each day button (data-date=\"YYYY-MM-DD\", [data-selected], [aria-current=date], [aria-disabled], [data-outside], and with dayState data-state plus the part day-<state>)."
             }
           ]
         }
@@ -4377,9 +4410,9 @@
             {
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "fieldName": "type",
               "default": "text"
             },
@@ -4584,9 +4617,9 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "attribute": "type",
               "reflects": true,
               "default": "text"
@@ -4746,6 +4779,11 @@
               "name": "select",
               "description": "Selects the text."
             },
+            {
+              "kind": "method",
+              "name": "highlightAt",
+              "description": "The highlight range under a point of the viewport (clientX, clientY), or null."
+            },
             {
               "kind": "method",
               "name": "refreshHighlight",
@@ -4760,6 +4798,13 @@
               },
               "description": "A suggestion was accepted (the text already has it)."
             },
+            {
+              "name": "ray-highlight-hover",
+              "type": {
+                "text": "CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>"
+              },
+              "description": "The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title."
+            },
             {
               "name": "input",
               "type": {
@@ -4923,9 +4968,9 @@
             {
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "fieldName": "type",
               "default": "text"
             },
@@ -5113,9 +5158,9 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "attribute": "type",
               "reflects": true,
               "default": "text"
@@ -5301,6 +5346,13 @@
               },
               "description": "A suggestion was accepted (the text already has it)."
             },
+            {
+              "name": "ray-highlight-hover",
+              "type": {
+                "text": "CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>"
+              },
+              "description": "The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title."
+            },
             {
               "name": "input",
               "type": {
@@ -5966,9 +6018,9 @@
             {
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "fieldName": "type",
               "default": "text"
             },
@@ -6128,9 +6180,9 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "attribute": "type",
               "reflects": true,
               "default": "text"
@@ -6301,6 +6353,13 @@
               },
               "description": "A suggestion was accepted (the text already has it)."
             },
+            {
+              "name": "ray-highlight-hover",
+              "type": {
+                "text": "CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>"
+              },
+              "description": "The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title."
+            },
             {
               "name": "input",
               "type": {
@@ -6403,9 +6462,9 @@
             {
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "fieldName": "type",
               "default": "text"
             },
@@ -6575,9 +6634,9 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\""
+                "text": "\"text\" | \"email\" | \"password\" | \"search\" | \"number\" | \"url\" | \"tel\" | \"time\" | \"date\" | \"datetime-local\""
               },
-              "description": "Input type.",
+              "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
               "attribute": "type",
               "reflects": true,
               "default": "text"
@@ -6765,6 +6824,13 @@
               },
               "description": "A suggestion was accepted (the text already has it)."
             },
+            {
+              "name": "ray-highlight-hover",
+              "type": {
+                "text": "CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>"
+              },
+              "description": "The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title."
+            },
             {
               "name": "input",
               "type": {
@@ -9540,6 +9606,11 @@
               "attribute": "radius",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "highlightAt",
+              "description": "The highlight range under a point of the viewport (clientX, clientY), or null."
+            },
             {
               "kind": "method",
               "name": "refreshHighlight",
@@ -9554,6 +9625,13 @@
               },
               "description": "A suggestion was accepted (the text already has it)."
             },
+            {
+              "name": "ray-highlight-hover",
+              "type": {
+                "text": "CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>"
+              },
+              "description": "The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title."
+            },
             {
               "name": "input",
               "type": {
@@ -13145,9 +13223,9 @@
             {
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | (string & {})"
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | \"content\" | (string & {})"
               },
-              "description": "Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length.",
+              "description": "Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length.",
               "fieldName": "size",
               "default": "md"
             },
@@ -13238,9 +13316,9 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | (string & {})"
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | \"content\" | (string & {})"
               },
-              "description": "Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length.",
+              "description": "Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length.",
               "attribute": "size",
               "reflects": true,
               "default": "md"
@@ -13496,6 +13574,14 @@
               "attribute": "native",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "Element | DOMRect | (() => DOMRect) | null"
+              },
+              "description": "What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it."
+            },
             {
               "kind": "field",
               "name": "offset",
@@ -13571,7 +13657,7 @@
           "slots": [
             {
               "name": "trigger",
-              "description": "The button that opens it, or the area for a context menu."
+              "description": "The button that opens it, or the area for a context menu (a press on the area outside the open menu closes it; a right click reopens it at the new point)."
             },
             {
               "name": "",
@@ -13940,6 +14026,14 @@
               "reflects": false,
               "default": "8"
             },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "Element | DOMRect | (() => DOMRect) | null"
+              },
+              "description": "What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it."
+            },
             {
               "kind": "field",
               "name": "width",

package/llms-full.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.11.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.13.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -701,7 +701,7 @@ Import: `import "@raylang/elements/date-picker";` · Category: Inputs
 
 #### `<ray-date-picker>` (RayDatePicker, extends FieldControl)
 
-Values are ISO dates ("2026-10-06"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it.
+Values are ISO dates ("2026-10-06"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. On a touch screen the trigger opens the system's picker instead (native).
 
 Properties:
 
@@ -714,6 +714,7 @@ Properties:
 - `firstDay` (attribute `first-day`): number. First day of the week, 0 (Sunday) to 6. Default: the locale's.
 - `clearable`: boolean, reflects. Shows a button that clears the date.
 - `open`: boolean, reflects. The calendar dropdown is shown.
+- `native`: `auto` | `always` | `never`, default `auto`, reflects. Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar.
 - `name`: string, reflects. Form field name.
 - `label`: string. Visible label (also the accessible name).
 - `description`: string. Help text.
@@ -760,6 +761,7 @@ Properties:
 - `locale`: string. Locale for month and weekday names. Default: the nearest lang attribute, else the browser's.
 - `firstDay` (attribute `first-day`): number. First day of the week, 0 (Sunday) to 6. Default: the locale's.
 - `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `sm`, reflects. Day cell size and font size.
+- `dayState` (property only): `((date: string) => string | null | undefined) | null`. Marks days: called with each day's ISO date on every render, it returns a state name (letters, digits, - and _) or nothing. The day button gets data-state and the part day-<state>, so ::part(day-taken) (or ::part(day-missed)::after for a dot) styles it from outside. Call refresh() when what it marks changed but the month did not.
 
 Events:
 
@@ -771,10 +773,11 @@ Parts (`::part()`):
 - `caption`: The month and year.
 - `nav`: The previous/next month buttons.
 - `grid`: The day grid (role=grid).
-- `day`: Each day button ([aria-selected], [aria-current=date], [aria-disabled], [data-outside]).
+- `day`: Each day button (data-date="YYYY-MM-DD", [data-selected], [aria-current=date], [aria-disabled], [data-outside], and with dayState data-state plus the part day-<state>).
 
 Methods and properties:
 
+- `refresh(): void`: Renders the month again: when what dayState marks changed but the text did not.
 - `focusDay(): void`: Focuses the day the keyboard is on (the selected day, else today).
 - `readonly focusedDate: string`: The day the keyboard is on (ISO).
 
@@ -884,7 +887,7 @@ Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, min
 Properties:
 
 - `value`: string. Current value. The value attribute is the initial value (restored on form reset).
-- `type`: `text` | `email` | `password` | `search` | `number` | `url` | `tel`, default `text`, reflects. Input type.
+- `type`: `text` | `email` | `password` | `search` | `number` | `url` | `tel` | `time` | `date` | `datetime-local`, default `text`, reflects. Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM".
 - `name`: string, reflects. Form field name.
 - `label`: string. Visible label (also the accessible name).
 - `description`: string. Help text under the label.
@@ -918,6 +921,7 @@ Attributes (forwarded to the inner element):
 Events:
 
 - `ray-complete` (detail `{ item: CompletionItem; from: number; to: number }`): A suggestion was accepted (the text already has it).
+- `ray-highlight-hover` (detail `{ range: HighlightRange | null; rect: DOMRect | null }`): The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title.
 - `input`: On every edit (value already updated).
 - `change`: When an edit is committed (blur, Enter).
 
@@ -944,6 +948,7 @@ Parts (`::part()`):
 Methods and properties:
 
 - `select(): void`: Selects the text.
+- `highlightAt(x: number, y: number): HighlightRange | null`: The highlight range under a point of the viewport (clientX, clientY), or null.
 - `refreshHighlight(): void`: Runs highlight again, when what it marks changed but the text did not.
 
 Vue `v-model`: `value` (updated on input).
@@ -1480,6 +1485,7 @@ Attributes (forwarded to the inner element):
 Events:
 
 - `ray-complete` (detail `{ item: CompletionItem; from: number; to: number }`): A suggestion was accepted (the text already has it).
+- `ray-highlight-hover` (detail `{ range: HighlightRange | null; rect: DOMRect | null }`): The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title.
 - `input`: On every edit.
 - `change`: When an edit is committed.
 
@@ -1497,6 +1503,7 @@ Parts (`::part()`):
 
 Methods and properties:
 
+- `highlightAt(x: number, y: number): HighlightRange | null`: The highlight range under a point of the viewport (clientX, clientY), or null.
 - `refreshHighlight(): void`: Runs highlight again, when what it marks changed but the text did not.
 
 Vue `v-model`: `value` (updated on input).
@@ -2144,7 +2151,7 @@ Properties:
 - `label`: string. Heading (also the accessible name).
 - `description`: string. A line under the title (the drawer's accessible description).
 - `position`: `end` | `start` | `right` | `left` | `top` | `bottom`, default `end`, reflects. The edge it slides from: start/end follow the writing direction; left/right are sides of the screen.
-- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {})`, default `md`, reflects. Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length.
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "full" | "content" | (string & {})`, default `md`, reflects. Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length.
 - `modeless`: boolean, reflects. No backdrop nor scroll lock: the page stays interactive (a side panel).
 - `floating`: boolean, reflects. Detached from the edge, with rounded corners.
 - `persistent`: boolean, reflects. Escape and backdrop clicks do not close it.
@@ -2191,6 +2198,7 @@ Properties:
 - `context`: boolean, reflects. Opens on right click (contextmenu) over the trigger area, at the pointer.
 - `keepOpen` (attribute `keep-open`): boolean, reflects. Choosing an item does not close the menu.
 - `native`: boolean, reflects. 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.
+- `anchor` (property only): `Element | DOMRect | (() => DOMRect) | null`. What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it.
 
 Also the properties of Floating: `offset`.
 
@@ -2203,7 +2211,7 @@ Events:
 
 Slots:
 
-- `trigger`: The button that opens it, or the area for a context menu.
+- `trigger`: The button that opens it, or the area for a context menu (a press on the area outside the open menu closes it; a right click reopens it at the new point).
 - (default): ray-menu-item, ray-menu-label and ray-menu-divider elements.
 
 Parts (`::part()`):
@@ -2294,6 +2302,7 @@ Properties:
 - `open`: boolean, reflects. Shown.
 - `placement`: `bottom` | `bottom-start` | `bottom-end` | `top` | `top-start` | `top-end` | `left` | `left-start` | `left-end` | `right` | `right-start` | `right-end`, default `bottom`, reflects. 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).
 - `offset`: number, default `8`. Gap to the trigger in px.
+- `anchor` (property only): `Element | DOMRect | (() => DOMRect) | null`. What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it.
 - `width`: string. Panel width (px number or CSS length). Default: its content.
 - `matchWidth` (attribute `match-width`): boolean. At least as wide as the trigger.
 - `padding`: `0` | `xs` | `sm` | `md` | `lg`, default `md`, reflects. Panel padding.

package/llms.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.11.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.13.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Web components for any app, with raylang extras (shadcn/ui + Mantine inspired)",
   "license": "Apache-2.0",
   "keywords": ["web-components", "custom-elements", "design-system", "ui", "raylang"],

package/ray-elements.d.ts

@@ -656,7 +656,7 @@ export interface RayComboboxEventMap extends HTMLElementEventMap {
 }
 
 // --- Date picker (date-picker)
-/** <ray-date-picker> Values are ISO dates ("2026-10-06"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. */
+/** <ray-date-picker> Values are ISO dates ("2026-10-06"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. On a touch screen the trigger opens the system's picker instead (native). */
 export declare class RayDatePicker extends FieldControl {
   /** The chosen date, ISO "YYYY-MM-DD" ("" for none). The value attribute is the initial value (restored on form reset). */
   value: string | undefined;
@@ -676,6 +676,8 @@ export declare class RayDatePicker extends FieldControl {
   clearable: boolean | undefined;
   /** The calendar dropdown is shown. */
   open: boolean | undefined;
+  /** Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar. */
+  native: "auto" | "always" | "never";
   /** Form field name. */
   name: string | undefined;
   /** Visible label (also the accessible name). */
@@ -725,6 +727,10 @@ export declare class RayCalendar extends RayElement {
   firstDay: number | undefined;
   /** Day cell size and font size. */
   size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Marks days: called with each day's ISO date on every render, it returns a state name (letters, digits, - and _) or nothing. The day button gets data-state and the part day-<state>, so ::part(day-taken) (or ::part(day-missed)::after for a dot) styles it from outside. Call refresh() when what it marks changed but the month did not. */
+  dayState: ((date: string) => string | null | undefined) | null;
+  /** Renders the month again: when what dayState marks changed but the text did not. */
+  refresh(): void;
   /** Focuses the day the keyboard is on (the selected day, else today). */
   focusDay(): void;
   /** The day the keyboard is on (ISO). */
@@ -821,8 +827,8 @@ export type CompletionResult = { from: number; to: number; items: CompletionItem
 export declare class RayInput extends FieldControl {
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value: string | undefined;
-  /** Input type. */
-  type: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM". */
+  type: "text" | "email" | "password" | "search" | "number" | "url" | "tel" | "time" | "date" | "datetime-local";
   /** Form field name. */
   name: string | undefined;
   /** Visible label (also the accessible name). */
@@ -855,6 +861,8 @@ export declare class RayInput extends FieldControl {
   suggestionsLabel: string;
   /** Selects the text. */
   select(): void;
+  /** The highlight range under a point of the viewport (clientX, clientY), or null. */
+  highlightAt(x: number, y: number): HighlightRange | null;
   /** Runs highlight again, when what it marks changed but the text did not. */
   refreshHighlight(): void;
   addEventListener<K extends keyof RayInputEventMap>(type: K, listener: (this: RayInput, ev: RayInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -865,6 +873,8 @@ export declare class RayInput extends FieldControl {
 export interface RayInputEventMap extends HTMLElementEventMap {
   /** A suggestion was accepted (the text already has it). */
   "ray-complete": CustomEvent<{ item: CompletionItem; from: number; to: number }>;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  "ray-highlight-hover": CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>;
 }
 
 // --- Mode input (mode-input)
@@ -900,6 +910,8 @@ export interface RayModeInputEventMap extends HTMLElementEventMap {
   "ray-mode-change": CustomEvent<{ mode: string; previous: string | null; option: ModeOption }>;
   /** A suggestion was accepted (the text already has it). */
   "ray-complete": CustomEvent<{ item: CompletionItem; from: number; to: number }>;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  "ray-highlight-hover": CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>;
 }
 
 // --- Number input (number-input)
@@ -960,6 +972,8 @@ export interface RayPasswordInputEventMap extends HTMLElementEventMap {
   "ray-visibility-change": CustomEvent<{ visible: boolean }>;
   /** A suggestion was accepted (the text already has it). */
   "ray-complete": CustomEvent<{ item: CompletionItem; from: number; to: number }>;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  "ray-highlight-hover": CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>;
 }
 
 // --- Path input (path-input)
@@ -991,6 +1005,8 @@ export interface RayPathInputEventMap extends HTMLElementEventMap {
   "ray-error": CustomEvent<{ error: Error }>;
   /** A suggestion was accepted (the text already has it). */
   "ray-complete": CustomEvent<{ item: CompletionItem; from: number; to: number }>;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  "ray-highlight-hover": CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>;
 }
 
 // --- Radio group (radio)
@@ -1250,6 +1266,8 @@ export declare class RayTextarea extends FieldControl {
   complete: ((text: string, caret: number) => CompletionResult | null | Promise<CompletionResult | null>) | null;
   /** Accessible name of the suggestion list. */
   suggestionsLabel: string;
+  /** The highlight range under a point of the viewport (clientX, clientY), or null. */
+  highlightAt(x: number, y: number): HighlightRange | null;
   /** Runs highlight again, when what it marks changed but the text did not. */
   refreshHighlight(): void;
   addEventListener<K extends keyof RayTextareaEventMap>(type: K, listener: (this: RayTextarea, ev: RayTextareaEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -1260,6 +1278,8 @@ export declare class RayTextarea extends FieldControl {
 export interface RayTextareaEventMap extends HTMLElementEventMap {
   /** A suggestion was accepted (the text already has it). */
   "ray-complete": CustomEvent<{ item: CompletionItem; from: number; to: number }>;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  "ray-highlight-hover": CustomEvent<{ range: HighlightRange | null; rect: DOMRect | null }>;
 }
 
 // --- Bottom nav (bottom-nav)
@@ -1702,8 +1722,8 @@ export declare class RayDrawer extends RayElement {
   description: string | undefined;
   /** 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 & {});
+  /** Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "content" | (string & {});
   /** No backdrop nor scroll lock: the page stays interactive (a side panel). */
   modeless: boolean | undefined;
   /** Detached from the edge, with rounded corners. */
@@ -1747,6 +1767,8 @@ export declare class RayMenu extends Floating {
   keepOpen: boolean | undefined;
   /** With a native host (ray-elements/core/raylang.js in a std/ui window), opens as the system's context menu at the pointer: items and dividers, same ray-select. */
   native: boolean | undefined;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor: Element | DOMRect | (() => DOMRect) | null;
   /** Opens the items as the system's context menu (needs a native host); resolves to the chosen item, or null. */
   popupNative(): Promise<RayMenuItem | null>;
   /** Opens it. */
@@ -1807,6 +1829,8 @@ export declare class RayPopover extends Floating {
   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;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor: Element | DOMRect | (() => DOMRect) | null;
   /** Panel width (px number or CSS length). Default: its content. */
   width: string | undefined;
   /** At least as wide as the trigger. */

package/vscode.html-custom-data.json

@@ -1151,7 +1151,7 @@
     },
     {
       "name": "ray-date-picker",
-      "description": "Values are ISO dates (\"2026-10-06\"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it.",
+      "description": "Values are ISO dates (\"2026-10-06\"), submitted as such. ArrowDown on the field opens the calendar; Escape closes it. On a touch screen the trigger opens the system's picker instead (native).",
       "attributes": [
         {
           "name": "value",
@@ -1205,6 +1205,21 @@
           "description": "The calendar dropdown is shown.",
           "valueSet": "v"
         },
+        {
+          "name": "native",
+          "description": "Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "always"
+            },
+            {
+              "name": "never"
+            }
+          ]
+        },
         {
           "name": "name",
           "description": "Form field name."
@@ -1467,7 +1482,7 @@
         },
         {
           "name": "type",
-          "description": "Input type.",
+          "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
           "values": [
             {
               "name": "text"
@@ -1489,6 +1504,15 @@
             },
             {
               "name": "tel"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
             }
           ]
         },
@@ -1699,7 +1723,7 @@
         },
         {
           "name": "type",
-          "description": "Input type.",
+          "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
           "values": [
             {
               "name": "text"
@@ -1721,6 +1745,15 @@
             },
             {
               "name": "tel"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
             }
           ]
         },
@@ -2085,7 +2118,7 @@
         },
         {
           "name": "type",
-          "description": "Input type.",
+          "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
           "values": [
             {
               "name": "text"
@@ -2107,6 +2140,15 @@
             },
             {
               "name": "tel"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
             }
           ]
         },
@@ -2304,7 +2346,7 @@
         },
         {
           "name": "type",
-          "description": "Input type.",
+          "description": "Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: \"HH:MM\", \"YYYY-MM-DD\", \"YYYY-MM-DDTHH:MM\".",
           "values": [
             {
               "name": "text"
@@ -2326,6 +2368,15 @@
             },
             {
               "name": "tel"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
             }
           ]
         },
@@ -4464,7 +4515,7 @@
         },
         {
           "name": "size",
-          "description": "Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length.",
+          "description": "Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length.",
           "values": [
             {
               "name": "xs"
@@ -4483,6 +4534,9 @@
             },
             {
               "name": "full"
+            },
+            {
+              "name": "content"
             }
           ]
         },