@raylang/elements 0.12.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>.

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/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"
@@ -4935,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"
             },
@@ -5125,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"
@@ -5985,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"
             },
@@ -6147,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"
@@ -6429,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"
             },
@@ -6601,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"
@@ -13190,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"
             },
@@ -13283,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"

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.12.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.
@@ -2148,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.

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.12.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.12.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). */
@@ -1716,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. */

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"
             }
           ]
         },