@raylang/elements 0.5.2 → 0.7.0

package/check/check.d.ts

@@ -14,6 +14,8 @@ export interface CheckOptions {
   manifest: object | object[];
   /** The registered icon names; without them icons are not checked. */
   icons?: string[];
+  /** The icon names that have a filled version (iconNames({ filled: true })); without them filled is not checked. */
+  filledIcons?: string[];
   /** More values of an attribute, for every element: an app's own variant, { variant: ["brand"] }. */
   allow?: Record<string, string[]>;
   /** Reported in the diagnostics; its extension picks the language. */

package/check/check.js

@@ -20,6 +20,7 @@ export const RULES = {
   "unknown-event": "a ray-* event the element does not fire",
   "unknown-icon": "an icon name that is not registered",
   "missing-label": "an icon-only button without its accessible name",
+  "no-filled-icon": "filled on an icon that has no filled version (the outline one is drawn)",
   "literal-color": "a literal color in CSS instead of a token",
 };
 
@@ -74,14 +75,22 @@ function indexManifest(manifests) {
   return index;
 }
 
+// The literals of a union are its values. `(string & {})` beside them (keeps
+// the literals in autocompletion) is the system's "or any CSS length" (size
+// of buttons, dialogs, drawers).
 function attribute(a) {
   const text = a.type?.text ?? "string";
   const parts = text.split("|").map((s) => s.trim());
   const literals = parts.filter((s) => /^"[^"]*"$/.test(s)).map((s) => s.slice(1, -1));
   const others = parts.filter((s) => !/^"[^"]*"$/.test(s) && s !== "undefined" && s !== "null");
-  return { name: a.name, boolean: text === "boolean", values: literals.length > 0 && others.length === 0 ? literals : null };
+  const length = others.length === 1 && others[0] === "(string & {})";
+  // IconName (ray-icon's name, the icon of an alert, a nav item…): checked against the icons.
+  const icon = others.includes("IconName");
+  return { name: a.name, boolean: text === "boolean", values: literals.length > 0 && (others.length === 0 || length) ? literals : null, length, icon };
 }
 
+const LENGTH = /^(?:-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|ex|ch|lh|vw|vh|vmin|vmax|dvh|svh|lvh|cm|mm|in|pt|pc|q|%)|0|(?:calc|min|max|clamp|var)\(.*\))$/i;
+
 /** The language of a file by its extension: "html" (also Vue, Svelte, Astro) or "jsx". */
 export function languageOf(file) {
   const ext = file.slice(file.lastIndexOf(".") + 1).toLowerCase();
@@ -93,14 +102,16 @@ export function languageOf(file) {
 /**
  * Checks one file's markup.
  * @param {string} source
- * @param {{ manifest: object | object[], icons?: string[], allow?: Record<string, string[]>, file?: string, lang?: "html" | "vue" | "jsx" }} options
+ * @param {{ manifest: object | object[], icons?: string[], filledIcons?: string[], allow?: Record<string, string[]>, file?: string, lang?: "html" | "vue" | "jsx" }} options
+ *   filledIcons: the names with a filled version (iconNames({ filled: true }))
  *   allow: more values of an attribute, for every element (an app's own variant: { variant: ["brand"] })
  * @returns {Diagnostic[]}
  */
-export function checkMarkup(source, { manifest, icons, allow = {}, file = "<input>", lang } = {}) {
+export function checkMarkup(source, { manifest, icons, filledIcons, allow = {}, file = "<input>", lang } = {}) {
   const index = indexManifest(manifest);
   const language = lang ?? languageOf(file);
   const iconSet = icons ? new Set(icons) : null;
+  const filledSet = filledIcons ? new Set(filledIcons) : null;
   const lines = lineStarts(source);
   const out = [];
   const report = (pos, severity, rule, message) => {
@@ -132,6 +143,15 @@ export function checkMarkup(source, { manifest, icons, allow = {}, file = "<inpu
       const named = tok.attrs.some((a) => ["label", "aria-label", "aria-labelledby"].includes(normalize(a.name, language).name));
       if (!named) report(tok.pos, "error", "missing-label", `<${tok.name}> needs a label: it is the button's accessible name (and its tooltip)`);
     }
+    if (el?.tag === "ray-icon" && filledSet) {
+      const attr = (n) => tok.attrs.find((a) => normalize(a.name, language).name === n);
+      const filled = attr("filled");
+      const name = attr("name");
+      // Bound or not: an icon that is ever filled needs the filled version.
+      if (filled && name && name.value && !name.dynamic && !normalize(name.name, language).bound && name.value !== "none" && !filledSet.has(name.value)) {
+        report(filled.pos, "warning", "no-filled-icon", `"${name.value}" has no filled version: the outline icon is drawn (add one with setIcons({ "${name.value}:filled": … }))`);
+      }
+    }
     if (!tok.selfClosing && !(language !== "jsx" && VOID.has(tok.name.toLowerCase()))) {
       stack.push({ name: tok.name, el });
     }
@@ -220,11 +240,12 @@ function attributeChecks(a, tok, el, parent, language, icons, allow, report) {
   if (a.value === null || a.dynamic || n.bound) return;
   if (attr.boolean && a.value === "false") {
     report(a.pos, "error", "boolean-value", `${name}="false" still means true on <${tok.name}>: a boolean attribute is present or absent`);
-  } else if (attr.values && !attr.values.includes(a.value) && !allow[name]?.includes(a.value)) {
-    report(a.pos, "error", "invalid-value", `${name}="${a.value}" is not valid on <${tok.name}>: one of ${attr.values.map((v) => `"${v}"`).join(", ")}`);
+  } else if (attr.values && !attr.values.includes(a.value) && !allow[name]?.includes(a.value) && !(attr.length && LENGTH.test(a.value.trim()))) {
+    const or = attr.length ? " or a CSS length" : "";
+    report(a.pos, "error", "invalid-value", `${name}="${a.value}" is not valid on <${tok.name}>: one of ${attr.values.map((v) => `"${v}"`).join(", ")}${or}`);
   }
   // "none" (or nothing) draws no icon: a blank that keeps the alignment.
-  if (el.tag === "ray-icon" && name === "name" && icons && a.value !== "" && a.value !== "none" && !icons.has(a.value)) {
+  if (attr.icon && icons && a.value !== "" && a.value !== "none" && !icons.has(a.value)) {
     report(a.pos, "warning", "unknown-icon", `no icon named "${a.value}"${hint(a.value, [...icons], "icons")} (register it with setIcons)`);
   }
 }

package/check/cli.js

@@ -8,7 +8,7 @@
 import { readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 import { checkMarkup, customValues, RULES } from "./check.js";
-import { iconNames } from "../core/icons.js";
+import { iconNames, iconAliases } from "../core/icons.js";
 
 const EXTENSIONS = new Set(["html", "htm", "vue", "svelte", "astro", "jsx", "tsx"]);
 // Read for what an app adds: setIcons({ … }) and its own variants in CSS.
@@ -88,10 +88,14 @@ function main(argv) {
   const files = [];
   const scripts = [];
   for (const p of paths.length > 0 ? paths : ["."]) collect(p, files, scripts, true);
-  const icons = new Set([...iconNames(), ...extraIcons]);
+  const icons = new Set([...iconNames(), ...Object.keys(iconAliases()), ...extraIcons]);
+  const filledIcons = new Set(iconNames({ filled: true }));
   for (const f of scripts) {
     const src = readFileSync(f, "utf8");
-    for (const name of registeredIcons(src)) icons.add(name);
+    for (const name of registeredIcons(src)) {
+      if (name.endsWith(":filled")) filledIcons.add(name.slice(0, -":filled".length));
+      else icons.add(name);
+    }
     for (const [attr, values] of Object.entries(customValues(src))) values.forEach((v) => allowValue(attr, v));
   }
 
@@ -99,7 +103,7 @@ function main(argv) {
   for (const f of files) {
     const source = readFileSync(f, "utf8");
     const file = relative(process.cwd(), f) || f;
-    for (const d of checkMarkup(source, { manifest: manifests, icons: [...icons], allow, file })) {
+    for (const d of checkMarkup(source, { manifest: manifests, icons: [...icons], filledIcons: [...filledIcons], allow, file })) {
       if (!ignore.has(d.rule)) diagnostics.push(d);
     }
   }
@@ -128,11 +132,11 @@ function collect(path, files, scripts, explicit) {
   if (SCRIPTS.has(ext)) scripts.push(path);
 }
 
-// The keys of setIcons({ inbox: '<svg…>', "file-text": … }) calls.
+// The keys of setIcons({ inbox: '<svg…>', "file-text": …, "star:filled": …, "ui.remove": … }) calls.
 function registeredIcons(src) {
   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-]*)\1\s*:/g)) out.push(key[2]);
+    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]);
   }
   return out;
 }

package/components/accordion/accordion.js

@@ -149,7 +149,7 @@ export class RayAccordionItem extends RayElement {
       <button class="control focus-ring" id="control" part="control" type="button" aria-expanded="false" aria-controls="panel">
         <span class="section" part="left-section"><slot name="left"></slot></span>
         <span class="label" part="label"><span class="label-text"><slot name="label"></slot></span><span class="description" part="description"></span></span>
-        <span class="chevron" part="chevron" aria-hidden="true" data-ray-icon="chevron-down"></span>
+        <span class="chevron" part="chevron" aria-hidden="true" data-ray-icon="ui.expand"></span>
       </button>
     </h3>
     <div class="panel" id="panel" part="panel" role="region" aria-labelledby="control" inert>

package/components/alert/alert.js

@@ -66,7 +66,7 @@ export class RayAlert extends RayElement {
         <p class="title" part="title"></p>
         <div class="text" part="text"><slot></slot></div>
       </div>
-      <button class="close focus-ring" part="close" type="button" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>
+      <button class="close focus-ring" part="close" type="button" hidden><span data-ray-icon="ui.close" aria-hidden="true"></span></button>
     </div>`;
 
   constructor() {

package/components/attachment/attachment.js

@@ -191,7 +191,7 @@ export class RayAttachment extends RayElement {
     <div class="item" part="item" role="group">
       <span class="thumb" part="thumbnail"><img alt="" hidden><span class="icon" aria-hidden="true"></span><span class="badge" part="badge" aria-hidden="true"></span></span>
       <span class="text"><span class="name-box"></span><span class="meta" part="meta"></span></span>
-      <button class="remove focus-ring" part="remove" type="button" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>
+      <button class="remove focus-ring" part="remove" type="button" hidden><span data-ray-icon="ui.remove" aria-hidden="true"></span></button>
       <span class="bar" part="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" hidden><span></span></span>
     </div>`;
 

package/components/avatar/avatar.js

@@ -32,7 +32,7 @@ const styles = css`
   [hidden] { display: none !important; }
 `;
 
-const PLACEHOLDER = `<span data-ray-icon="user" aria-hidden="true"></span>`;
+const PLACEHOLDER = `<span data-ray-icon="ui.avatar" aria-hidden="true"></span>`;
 
 /** Up to two initials: "Ada Lovelace" -> "AL", "ray" -> "R". */
 export function initials(name) {

package/components/bottom-nav/bottom-nav.js

@@ -193,8 +193,10 @@ export class RayBottomNavItem extends RayElement {
     }
     if (this.active && !this.action) item.setAttribute("aria-current", "page");
     else item.removeAttribute("aria-current");
+    // The current destination draws its icon filled (when it has a filled version).
     const icon = this.$(".icon");
     icon.setAttribute("data-ray-icon", this.icon ?? "");
+    icon.toggleAttribute("data-ray-icon-filled", Boolean(this.active && !this.action));
     this.paintIcons();
     this.$(".label").textContent = this.label ?? "";
     const badge = this.$(".badge");

package/components/breadcrumbs/breadcrumbs.js

@@ -150,7 +150,7 @@ export class RayBreadcrumb extends RayElement {
     if (sep === this.#sep) return;
     this.#sep = sep;
     for (const el of this.shadowRoot.querySelectorAll(".sep")) {
-      if (sep === "chevron") el.innerHTML = `<span data-ray-icon="chevron-right"></span>`;
+      if (sep === "chevron") el.innerHTML = `<span data-ray-icon="ui.separator"></span>`;
       else el.textContent = sep;
     }
     this.paintIcons();

package/components/button/button.js

@@ -1,8 +1,13 @@
 // <ray-button>: a button (or a link, with href) in Mantine's variants.
+// `size` is xs…xl or any CSS length: the height, with the font, the padding
+// and the gap in the proportions of the scale (a big round main action:
+// <ray-icon-button size="5.5rem" radius="full">).
 
 import { RayElement, css, define } from "../../core/core.js";
 import { applyColor, applyGradient, sizeStyles, radiusStyles, variantStyles, loaderStyles } from "../../core/styles.js";
 
+const SIZES = ["xs", "sm", "md", "lg", "xl"];
+
 const styles = css`
   :host {
     display: inline-flex;
@@ -190,6 +195,7 @@ export class RayButton extends RayElement {
       }
     }
     el.toggleAttribute("aria-busy", Boolean(this.loading));
+    this._applySize();
     // ARIA put on the host (by the app, a popover, a menu…) belongs to the inner button.
     for (const attr of MIRRORED_ARIA) {
       const v = this.getAttribute(attr);
@@ -204,6 +210,17 @@ export class RayButton extends RayElement {
     }
   }
 
+  // A length sets sizeStyles' variables inline (over its :host rules).
+  _applySize() {
+    const length = this.size && !SIZES.includes(this.size) ? this.size : "";
+    if (length === (this._length ?? "")) return;
+    this._length = length;
+    for (const [prop, ratio] of [["--_h", 1], ["--_fs", 0.4], ["--_px", 0.5], ["--_gap", 0.22]]) {
+      if (length) this.style.setProperty(prop, ratio === 1 ? length : `calc(${length} * ${ratio})`);
+      else this.style.removeProperty(prop);
+    }
+  }
+
   _render(tag) {
     this._el?.remove();
     const el = document.createElement(tag);

package/components/carousel/carousel.js

@@ -128,7 +128,7 @@ const styles = css`
   .play svg { width: 0.875rem; height: 0.875rem; }
 `;
 
-const PAUSE_ICON = `<span data-ray-icon="pause" aria-hidden="true"></span>`;
+const PAUSE_ICON = `<span data-ray-icon="ui.pause" aria-hidden="true"></span>`;
 
 const reduced = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
 
@@ -150,8 +150,8 @@ export class RayCarousel extends RayElement {
     <div class="root" part="root" role="region" aria-roledescription="carousel">
       <div class="stage">
         <div class="viewport" part="viewport" tabindex="0" aria-live="polite"><slot></slot></div>
-        <button class="control prev" part="previous" type="button" aria-label="Previous slide"><span data-ray-icon="chevron-left" aria-hidden="true"></span></button>
-        <button class="control next" part="next" type="button" aria-label="Next slide"><span data-ray-icon="chevron-right" aria-hidden="true"></span></button>
+        <button class="control prev" part="previous" type="button" aria-label="Previous slide"><span data-ray-icon="ui.previous" aria-hidden="true"></span></button>
+        <button class="control next" part="next" type="button" aria-label="Next slide"><span data-ray-icon="ui.next" aria-hidden="true"></span></button>
       </div>
       <div class="footer" part="footer">
         <button class="play" part="play" type="button" hidden></button>
@@ -403,7 +403,7 @@ export class RayCarousel extends RayElement {
     const paused = this.#userPaused;
     if (auto && play.dataset.state !== (paused ? "paused" : "playing")) {
       play.dataset.state = paused ? "paused" : "playing";
-      play.innerHTML = paused ? `<span data-ray-icon="play" aria-hidden="true"></span>` : PAUSE_ICON;
+      play.innerHTML = paused ? `<span data-ray-icon="ui.play" aria-hidden="true"></span>` : PAUSE_ICON;
       this.paintIcons(play);
       play.setAttribute("aria-label", paused ? "Start autoplay" : "Pause autoplay");
     }

package/components/checkbox/checkbox.js

@@ -103,7 +103,7 @@ export class RayCheckbox extends FieldControl {
     labelPosition: { type: String, reflect: true, default: "right" },
   };
   static styles = [sizeStyles, radiusStyles, fieldStyles, checkStyles, styles];
-  static template = checkTemplate(`<span class="indicator" part="indicator" aria-hidden="true"><span class="check" data-ray-icon="check"></span><span class="dash" data-ray-icon="minus"></span></span>`);
+  static template = checkTemplate(`<span class="indicator" part="indicator" aria-hidden="true"><span class="check" data-ray-icon="ui.checked"></span><span class="dash" data-ray-icon="ui.indeterminate"></span></span>`);
 
   wire() {
     // The `checked` attribute is the default state, like on <input>.

package/components/code/code.js

@@ -427,7 +427,7 @@ export class RayCode extends RayElement {
     b.type = "button";
     b.className = "copy focus-ring";
     b.setAttribute("part", "copy");
-    b.innerHTML = `<span class="idle" data-ray-icon="copy" aria-hidden="true"></span><span class="done" data-ray-icon="check" aria-hidden="true"></span><span class="copy-label"></span>`;
+    b.innerHTML = `<span class="idle" data-ray-icon="ui.copy" aria-hidden="true"></span><span class="done" data-ray-icon="ui.copied" aria-hidden="true"></span><span class="copy-label"></span>`;
     b.addEventListener("click", () => this.copy());
     this.$(".more button").addEventListener("click", () => { this.expanded = !this.expanded; });
     this.$("slot").addEventListener("slotchange", () => this.requestUpdate());

package/components/color-picker/color-picker.js

@@ -540,7 +540,7 @@ export class RayColorInput extends FieldControl {
   static template = fieldTemplate(
     `<button type="button" class="preview" part="preview" tabindex="-1" aria-hidden="true"></button>` +
       `<input id="control" class="control" part="input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="none" aria-haspopup="dialog" aria-expanded="false" aria-controls="panel">` +
-      `<button type="button" class="dropper focus-ring" part="eyedropper" aria-label="Pick a color from the screen" hidden><span data-ray-icon="pipette" aria-hidden="true"></span></button>`,
+      `<button type="button" class="dropper focus-ring" part="eyedropper" aria-label="Pick a color from the screen" hidden><span data-ray-icon="ui.eyedropper" aria-hidden="true"></span></button>`,
     { sections: false },
   ) + `<div class="panel" id="panel" part="dropdown" popover="manual" role="dialog" aria-label="Choose a color"><ray-color-picker part="picker"></ray-color-picker></div>`;
 

package/components/combobox/combobox.js

@@ -120,7 +120,7 @@ export class RayCombobox extends FieldControl {
   static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
   static template = fieldTemplate(
     `<span class="chips" part="chips"></span><input id="control" class="control" part="input" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="listbox" autocomplete="off" spellcheck="false">` +
-      `<span class="tail"><button type="button" class="clear" part="clear" aria-label="Clear" hidden tabindex="-1"><span data-ray-icon="close"></span></button><span class="chevron" aria-hidden="true" data-ray-icon="chevron-down"></span></span>`,
+      `<span class="tail"><button type="button" class="clear" part="clear" aria-label="Clear" hidden tabindex="-1"><span data-ray-icon="ui.clear"></span></button><span class="chevron" aria-hidden="true" data-ray-icon="ui.expand"></span></span>`,
     { sections: false },
   ) + `<div class="listbox" id="listbox" part="dropdown" role="listbox" popover="manual" tabindex="-1"></div><div class="options"><slot></slot></div>`;
 
@@ -299,7 +299,7 @@ export class RayCombobox extends FieldControl {
       b.tabIndex = -1;
       b.dataset.value = v;
       b.setAttribute("aria-label", `Remove ${this._labelOf(v)}`);
-      b.innerHTML = `<span data-ray-icon="close"></span>`;
+      b.innerHTML = `<span data-ray-icon="ui.remove"></span>`;
       chip.append(t, b);
       box.append(chip);
     }
@@ -364,7 +364,7 @@ export class RayCombobox extends FieldControl {
       }
       const check = document.createElement("span");
       check.className = "mark";
-      check.setAttribute("data-ray-icon", "check");
+      check.setAttribute("data-ray-icon", "ui.checked");
       el.append(text, check);
       (groupEl ?? lb).append(el);
       this.#items.push({ el, value: o.value, disabled, create: false });

package/components/command-palette/command-palette.js

@@ -124,7 +124,7 @@ const styles = css`
   }
 `;
 
-const SEARCH_ICON = `<span data-ray-icon="search" aria-hidden="true"></span>`;
+const SEARCH_ICON = `<span data-ray-icon="ui.search" aria-hidden="true"></span>`;
 
 /**
  * How well `action` matches `query` (0 = not at all). Every word of the query

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

@@ -144,9 +144,9 @@ export class RayCalendar extends RayElement {
   static styles = [sizeStyles, calendarStyles];
   static template = `
     <div class="header" part="header">
-      <button class="nav prev focus-ring" part="nav" type="button" data-ray-icon="chevron-left"></button>
+      <button class="nav prev focus-ring" part="nav" type="button" data-ray-icon="ui.previous"></button>
       <div class="caption" part="caption" id="caption" aria-live="polite"></div>
-      <button class="nav next focus-ring" part="nav" type="button" data-ray-icon="chevron-right"></button>
+      <button class="nav next focus-ring" part="nav" type="button" data-ray-icon="ui.next"></button>
     </div>
     <table role="grid" aria-labelledby="caption" part="grid"><thead><tr></tr></thead><tbody></tbody></table>`;
 
@@ -382,8 +382,8 @@ export class RayDatePicker extends FieldControl {
   static template = fieldTemplate(
     `<input id="control" class="native" part="input" type="date" tabindex="-1" aria-hidden="true">` +
       `<button type="button" id="trigger" class="control trigger" part="trigger" aria-haspopup="dialog" aria-expanded="false" aria-controls="panel">` +
-      `<span class="icon" aria-hidden="true" data-ray-icon="calendar"></span><span class="value" id="value"></span></button>` +
-      `<button type="button" class="clear focus-ring" part="clear" aria-label="Clear date" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>`,
+      `<span class="icon" aria-hidden="true" data-ray-icon="ui.calendar"></span><span class="value" id="value"></span></button>` +
+      `<button type="button" class="clear focus-ring" part="clear" aria-label="Clear date" hidden><span data-ray-icon="ui.clear" aria-hidden="true"></span></button>`,
     { sections: false },
   ) + `<div class="panel" id="panel" part="dropdown" popover="manual" role="dialog" aria-label="Choose a date"><ray-calendar part="calendar" exportparts="day, caption, nav, grid"></ray-calendar></div>`;
 

package/components/dialog/dialog.js

@@ -106,7 +106,7 @@ export class RayDialog extends RayElement {
     <dialog part="dialog" aria-labelledby="title">
       <header class="header" part="header">
         <div class="heading"><h2 class="title" id="title" part="title"></h2><p class="description" id="description" part="description" hidden></p></div>
-        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="close" aria-hidden="true"></span></button></div>
+        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="ui.close" aria-hidden="true"></span></button></div>
       </header>
       <div class="body" part="body"><slot></slot></div>
       <footer class="footer" part="footer"><slot name="footer"></slot></footer>

package/components/drawer/drawer.js

@@ -111,7 +111,7 @@ export class RayDrawer extends RayDialog {
     <dialog part="drawer" aria-labelledby="title">
       <header class="header" part="header">
         <div class="heading"><h2 class="title" id="title" part="title"></h2><p class="description" id="description" part="description" hidden></p></div>
-        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="close" aria-hidden="true"></span></button></div>
+        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="ui.close" aria-hidden="true"></span></button></div>
       </header>
       <div class="body" part="body"><slot></slot></div>
       <footer class="footer" part="footer"><slot name="footer"></slot></footer>

package/components/file-upload/file-upload.js

@@ -233,7 +233,7 @@ export class RayFileUpload extends FormControl {
     <span class="label" part="label" id="label" hidden><span class="label-text"></span><span class="required" aria-hidden="true" hidden> *</span></span>
     <div class="description" part="description" id="description" hidden></div>
     <button type="button" class="zone" part="dropzone" aria-labelledby="label title hint pill" aria-describedby="description error">
-      <span class="glyph" part="icon"><slot name="icon"><span data-ray-icon="upload"></span></slot></span>
+      <span class="glyph" part="icon"><slot name="icon"><span data-ray-icon="ui.upload"></span></slot></span>
       <span class="copy">
         <span class="title" id="title"></span>
         <span class="hint" id="hint" part="hint"></span>

package/components/icon/icon.js

@@ -1,5 +1,7 @@
 // <ray-icon name="…">: an icon of the registry (setIcons), so the app's own
 // markup uses the same set as the components. Decorative unless `label`.
+// `filled` draws the icon's filled version (a state: active, selected,
+// favorite), or the outline one when it has none.
 
 import { RayElement, css, define } from "../../core/core.js";
 
@@ -20,6 +22,7 @@ export class RayIcon extends RayElement {
     label: { type: String },
     color: { type: String, reflect: true },
     stroke: { type: Number },
+    filled: { type: Boolean, reflect: true },
   };
   static styles = [styles];
   static template = `<span class="icon" part="icon" data-ray-icon=""></span>`;
@@ -31,8 +34,10 @@ export class RayIcon extends RayElement {
 
   update() {
     const icon = this.$(".icon");
-    if (icon.getAttribute("data-ray-icon") !== (this.name ?? "")) {
+    const filled = Boolean(this.filled);
+    if (icon.getAttribute("data-ray-icon") !== (this.name ?? "") || icon.hasAttribute("data-ray-icon-filled") !== filled) {
       icon.setAttribute("data-ray-icon", this.name ?? "");
+      icon.toggleAttribute("data-ray-icon-filled", filled);
       this.paintIcons();
     }
     // xs…xl from the scale, or any CSS length.

package/components/nav-link/nav-link.js

@@ -65,7 +65,7 @@ const INNER = `
   <span class="section" part="left-section"><slot name="left"></slot></span>
   <span class="body"><span class="label" part="label"></span><span class="description" part="description"></span></span>
   <span class="section right" part="right-section"><slot name="right"></slot></span>
-  <span class="chevron" aria-hidden="true" data-ray-icon="chevron-right"></span>`;
+  <span class="chevron" aria-hidden="true" data-ray-icon="ui.disclosure"></span>`;
 
 export class RayNavLink extends RayElement {
   static delegatesFocus = true;

package/components/notification/notification.js

@@ -150,7 +150,7 @@ export class RayNotification extends RayElement {
         <div class="message" part="message"><slot></slot></div>
       </div>
       <button class="action focus-ring" part="action" type="button" hidden></button>
-      <button class="close focus-ring" part="close" type="button" aria-label="Close notification"><span data-ray-icon="close" aria-hidden="true"></span></button>
+      <button class="close focus-ring" part="close" type="button" aria-label="Close notification"><span data-ray-icon="ui.close" aria-hidden="true"></span></button>
     </div>`;
 
   constructor() {

package/components/number-input/number-input.js

@@ -2,7 +2,8 @@
 // buttons (hold to repeat), the arrow keys (Shift: ×10), min/max/step,
 // a fixed number of decimals, a prefix and a suffix ("$", " kg") and a
 // thousands separator in the shown text. The value is a number (or empty);
-// the form gets its plain digits.
+// the form gets its plain digits. format="duration": the value is seconds,
+// shown and typed as m:ss (h:mm:ss from an hour).
 //
 // An ARIA spinbutton: aria-valuenow/min/max/valuetext on the text field.
 
@@ -60,6 +61,36 @@ export function formatNumber(n, { decimals, thousands = "", decimal = "." } = {}
   return frac !== undefined ? `${int}${decimal}${frac}` : int;
 }
 
+/** Seconds as m:ss, or h:mm:ss with `hours` (or from an hour); "" if not a number. */
+export function formatDuration(seconds, { hours = false } = {}) {
+  if (!Number.isFinite(seconds)) return "";
+  const sign = seconds < 0 ? "-" : "";
+  const t = Math.round(Math.abs(seconds));
+  const h = Math.floor(t / 3600);
+  const m = Math.floor((t % 3600) / 60);
+  const ss = String(t % 60).padStart(2, "0");
+  return hours || h > 0 ? `${sign}${h}:${String(m).padStart(2, "0")}:${ss}` : `${sign}${m}:${ss}`;
+}
+
+/** Seconds from "m:ss", "h:mm:ss" or a plain number of seconds ("3:", "3:0" while typing); NaN if none. */
+export function parseDuration(text) {
+  const m = String(text ?? "").replace(/\s+/g, "").match(/^(-?)(\d*)(?::(\d*))?(?::(\d*))?$/);
+  if (!m || (m[2] === "" && !m[3])) return NaN;
+  const parts = [m[2], m[3], m[4]].filter((p) => p !== undefined).map((p) => Number(p || 0));
+  const seconds = parts.reduce((total, p) => total * 60 + p, 0);
+  return m[1] ? -seconds : seconds;
+}
+
+/** "3 minutes, 15 seconds" in `lang` (Intl), for aria-valuetext. */
+export function durationText(seconds, lang) {
+  const t = Math.round(Math.abs(seconds));
+  const units = [["hour", Math.floor(t / 3600)], ["minute", Math.floor((t % 3600) / 60)], ["second", t % 60]];
+  const said = units.filter(([, n], i) => n > 0 || (t === 0 && i === 2));
+  const words = said.map(([unit, n]) => new Intl.NumberFormat(lang, { style: "unit", unit, unitDisplay: "long" }).format(n));
+  const text = new Intl.ListFormat(lang, { style: "long", type: "unit" }).format(words);
+  return seconds < 0 ? `-${text}` : text;
+}
+
 export class RayNumberInput extends FieldControl {
   /** Enter submits the form (core/form.js). */
   static implicitSubmission = true;
@@ -78,12 +109,13 @@ export class RayNumberInput extends FieldControl {
     placeholder: { type: String },
     hideControls: { type: Boolean, reflect: true, attribute: "hide-controls" },
     clamp: { type: String, default: "blur" },
+    format: { type: String, reflect: true, default: "number" },
     readonly: { type: Boolean, reflect: true },
   };
   static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
   static template = fieldTemplate(
     `<input id="control" class="control" part="input" role="spinbutton" inputmode="decimal" autocomplete="off" spellcheck="false">` +
-      `<span class="steppers" part="controls"><button type="button" class="step up" part="increment" tabindex="-1" aria-label="Increment"><span data-ray-icon="chevron-up"></span></button><button type="button" class="step down" part="decrement" tabindex="-1" aria-label="Decrement"><span data-ray-icon="chevron-down"></span></button></span>`,
+      `<span class="steppers" part="controls"><button type="button" class="step up" part="increment" tabindex="-1" aria-label="Increment"><span data-ray-icon="ui.increment"></span></button><button type="button" class="step down" part="decrement" tabindex="-1" aria-label="Decrement"><span data-ray-icon="ui.decrement"></span></button></span>`,
   );
 
   #typing = false;
@@ -135,6 +167,8 @@ export class RayNumberInput extends FieldControl {
   update() {
     const c = this.control;
     c.readOnly = Boolean(this.readonly);
+    // The number pad has no ":".
+    c.inputMode = this._duration ? "text" : "decimal";
     if (this.placeholder !== undefined) c.placeholder = this.placeholder;
     if (!this.#typing) this._paint();
     this.syncField();
@@ -162,10 +196,15 @@ export class RayNumberInput extends FieldControl {
     let v = n;
     if (this.min !== undefined && this.min !== null && v < this.min) v = this.min;
     if (this.max !== undefined && this.max !== null && v > this.max) v = this.max;
-    return this.decimals !== undefined && this.decimals !== null ? Number(v.toFixed(this.decimals)) : v;
+    return this.decimals !== undefined && this.decimals !== null && !this._duration ? Number(v.toFixed(this.decimals)) : v;
+  }
+
+  get _duration() {
+    return this.format === "duration";
   }
 
   _parse(text) {
+    if (this._duration) return parseDuration(text);
     let s = String(text ?? "");
     if (this.prefix) s = s.split(this.prefix).join("");
     if (this.suffix) s = s.split(this.suffix).join("");
@@ -184,10 +223,16 @@ export class RayNumberInput extends FieldControl {
     }
   }
 
-  // The shown text: prefix, separators, decimals, suffix.
+  // The shown text: prefix, separators, decimals, suffix; or m:ss.
   _text() {
-    if (this.value === undefined || this.value === null || !Number.isFinite(this.value)) return "";
-    const num = formatNumber(this.value, { decimals: this.decimals, thousands: this.thousandsSeparator || "", decimal: this.decimalSeparator || "." });
+    return this._show(this.value);
+  }
+
+  _show(n) {
+    if (n === undefined || n === null || !Number.isFinite(n)) return "";
+    // h:mm:ss when the range reaches an hour, so the width does not jump.
+    if (this._duration) return formatDuration(n, { hours: Math.abs(this.max ?? 0) >= 3600 || Math.abs(this.min ?? 0) >= 3600 });
+    const num = formatNumber(n, { decimals: this.decimals, thousands: this.thousandsSeparator || "", decimal: this.decimalSeparator || "." });
     return `${this.prefix ?? ""}${num}${this.suffix ?? ""}`;
   }
 
@@ -206,7 +251,8 @@ export class RayNumberInput extends FieldControl {
     set("aria-valuenow", this.value);
     set("aria-valuemin", this.min);
     set("aria-valuemax", this.max);
-    if (this.prefix || this.suffix || this.thousandsSeparator) set("aria-valuetext", this._text() || undefined);
+    if (this._duration) set("aria-valuetext", Number.isFinite(this.value) ? durationText(this.value, this.closest("[lang]")?.lang || undefined) : undefined);
+    else if (this.prefix || this.suffix || this.thousandsSeparator) set("aria-valuetext", this._text() || undefined);
     else c.removeAttribute("aria-valuetext");
   }
 
@@ -225,8 +271,8 @@ export class RayNumberInput extends FieldControl {
     const c = this.control;
     let msg = "";
     if (this.required && (this.value === undefined || this.value === null)) msg = "Please enter a number.";
-    else if (this.value !== undefined && this.min !== undefined && this.value < this.min) msg = `The minimum is ${this.min}.`;
-    else if (this.value !== undefined && this.max !== undefined && this.value > this.max) msg = `The maximum is ${this.max}.`;
+    else if (this.value !== undefined && this.min !== undefined && this.value < this.min) msg = `The minimum is ${this._show(this.min)}.`;
+    else if (this.value !== undefined && this.max !== undefined && this.value > this.max) msg = `The maximum is ${this._show(this.max)}.`;
     if (msg) this.internals.setValidity(this.value === undefined ? { valueMissing: true } : this.value < (this.min ?? -Infinity) ? { rangeUnderflow: true } : { rangeOverflow: true }, msg, c);
     else this.internals.setValidity({});
   }

package/components/pagination/pagination.js

@@ -139,15 +139,15 @@ export class RayPagination extends RayElement {
     const items = [];
     const control = (role, target, icon, label, off) => ({ kind: "control", role, target, icon, label, off });
     if (!this.hideControls) {
-      if (this.withEdges) items.push(control("first", 1, "chevrons-left", "First page", page <= 1));
-      items.push(control("previous", page - 1, "chevron-left", "Previous page", page <= 1));
+      if (this.withEdges) items.push(control("first", 1, "ui.first", "First page", page <= 1));
+      items.push(control("previous", page - 1, "ui.previous", "Previous page", page <= 1));
     }
     for (const it of paginationRange(total, page, this.siblings ?? 1, this.boundaries ?? 1)) {
       items.push(it === "dots" ? { kind: "dots" } : { kind: "page", target: it });
     }
     if (!this.hideControls) {
-      items.push(control("next", page + 1, "chevron-right", "Next page", page >= total));
-      if (this.withEdges) items.push(control("last", total, "chevrons-right", "Last page", page >= total));
+      items.push(control("next", page + 1, "ui.next", "Next page", page >= total));
+      if (this.withEdges) items.push(control("last", total, "ui.last", "Last page", page >= total));
     }
     list.replaceChildren(...items.map((it) => this._item(it, page)));
     this.paintIcons(list);