@raylang/elements 0.6.0 → 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",
 };
 
@@ -83,7 +84,9 @@ function attribute(a) {
   const literals = parts.filter((s) => /^"[^"]*"$/.test(s)).map((s) => s.slice(1, -1));
   const others = parts.filter((s) => !/^"[^"]*"$/.test(s) && s !== "undefined" && s !== "null");
   const length = others.length === 1 && others[0] === "(string & {})";
-  return { name: a.name, boolean: text === "boolean", values: literals.length > 0 && (others.length === 0 || length) ? literals : null, length };
+  // 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;
@@ -99,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) => {
@@ -138,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 });
     }
@@ -231,7 +245,7 @@ function attributeChecks(a, tok, el, parent, language, icons, allow, report) {
     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/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

@@ -115,7 +115,7 @@ export class RayNumberInput extends FieldControl {
   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;

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);

package/components/password-input/password-input.js

@@ -43,7 +43,7 @@ export class RayPasswordInput extends RayInput {
   static styles = [...RayInput.styles, styles];
   static template = fieldTemplate(
     `<input id="control" class="control" part="input" type="password" autocomplete="current-password" spellcheck="false" autocapitalize="off">` +
-      `<button type="button" class="toggle focus-ring" part="toggle" aria-pressed="false"><span data-ray-icon="eye" aria-hidden="true"></span></button>`,
+      `<button type="button" class="toggle focus-ring" part="toggle" aria-pressed="false"><span data-ray-icon="ui.show-password" aria-hidden="true"></span></button>`,
   );
 
   wire() {
@@ -69,7 +69,7 @@ export class RayPasswordInput extends RayInput {
     toggle.title = toggle.getAttribute("aria-label");
     toggle.disabled = this.effectivelyDisabled;
     const icon = toggle.firstElementChild;
-    const name = this.visible ? "eye-off" : "eye";
+    const name = this.visible ? "ui.hide-password" : "ui.show-password";
     if (icon.dataset.rayIcon !== name) {
       icon.dataset.rayIcon = name;
       this.paintIcons(toggle);

package/components/search/search.js

@@ -62,9 +62,9 @@ export class RaySearch extends RayInput {
   };
   static styles = [...RayInput.styles, styles];
   static template = fieldTemplate(
-    `<span class="lead" part="icon" aria-hidden="true" data-ray-icon="search"></span>` +
+    `<span class="lead" part="icon" aria-hidden="true" data-ray-icon="ui.search"></span>` +
       `<input id="control" class="control" part="input" type="search" enterkeyhint="search" autocomplete="off" spellcheck="false">` +
-      `<span class="tail"><button class="clear focus-ring" part="clear" type="button" aria-label="Clear search" tabindex="-1" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>` +
+      `<span class="tail"><button class="clear focus-ring" part="clear" type="button" aria-label="Clear search" tabindex="-1" hidden><span data-ray-icon="ui.clear" aria-hidden="true"></span></button>` +
       `<kbd class="shortcut" part="shortcut" aria-hidden="true" hidden></kbd></span>`,
   );
 

package/components/select/select.js

@@ -101,7 +101,7 @@ const styles = css`
   .empty { padding: var(--ray-space-2); color: var(--ray-muted-foreground); }
 `;
 
-const CHEVRON = `<span class="chevron" aria-hidden="true" data-ray-icon="chevron-down"></span>`;
+const CHEVRON = `<span class="chevron" aria-hidden="true" data-ray-icon="ui.expand"></span>`;
 
 export class RaySelect extends FieldControl {
   static properties = {
@@ -261,7 +261,7 @@ export class RaySelect extends FieldControl {
       const group = o.parentElement?.localName === "optgroup" ? o.parentElement : null;
       const disabled = o.disabled || Boolean(group?.disabled);
       el.setAttribute("aria-disabled", String(disabled));
-      el.innerHTML = `<span class="text"></span><span class="mark" aria-hidden="true" data-ray-icon="check"></span>`;
+      el.innerHTML = `<span class="text"></span><span class="mark" aria-hidden="true" data-ray-icon="ui.checked"></span>`;
       el.firstChild.textContent = o.label || o.text;
       this.#items.push({ el, value: o.value, disabled, text: (o.label || o.text).trim().toLowerCase() });
       return el;

package/components/stat/stat.js

@@ -34,7 +34,7 @@ const styles = css`
 `;
 
 // Icon of each trend (from the icon registry).
-const ARROWS = { up: "arrow-up-right", down: "arrow-down-right", flat: "minus" };
+const ARROWS = { up: "ui.trend-up", down: "ui.trend-down", flat: "ui.trend-flat" };
 
 export class RayStat extends RayElement {
   static properties = {

package/components/step-dots/step-dots.js

@@ -45,6 +45,8 @@ export class RayStepDots extends RayElement {
     size: { type: String, reflect: true, default: "sm" },
     align: { type: String, reflect: true, default: "center" },
     label: { type: String },
+    valueText: { type: String, attribute: "value-text" },
+    doneText: { type: String, attribute: "done-text" },
   };
   static styles = [styles];
   static template = `<div class="dots" part="dots" aria-hidden="true"></div>`;
@@ -72,14 +74,21 @@ export class RayStepDots extends RayElement {
       dot.dataset.state = i < value ? "done" : i === value ? "current" : "todo";
     });
 
-    const noun = this.label || "Step";
+    // The announced text: value-text / done-text ({step}: the current one,
+    // 1-based; {count}), numbers in the element's language; English otherwise.
+    const lang = this.closest("[lang]")?.lang || undefined;
+    const n = (x) => new Intl.NumberFormat(lang).format(x);
+    const fill = (tpl) => tpl.replaceAll("{step}", n(Math.min(value + 1, count))).replaceAll("{count}", n(count));
     const done = count > 0 && value >= count;
+    const text = done
+      ? fill(this.doneText ?? this.valueText ?? "{count} of {count}, done")
+      : fill(this.valueText ?? `${this.label || "Step"} {step} of {count}`);
     const i = this.internals;
     i.ariaLabel = this.label || this.getAttribute("aria-label") || "Steps";
     i.ariaValueMin = "0";
     i.ariaValueMax = String(count);
     i.ariaValueNow = String(value);
-    i.ariaValueText = count === 0 ? null : done ? `${count} of ${count}, done` : `${noun} ${value + 1} of ${count}`;
+    i.ariaValueText = count === 0 ? null : text;
   }
 }
 

package/components/stepper/stepper.js

@@ -172,7 +172,7 @@ export class RayStepper extends RayElement {
       indicator.setAttribute("aria-hidden", "true");
       if (step.loading) indicator.innerHTML = `<span class="spinner"></span>`;
       else if (step.error) indicator.append(glyph("close"));
-      else if (state === "done") indicator.append(glyph(step.completedIcon || "check"));
+      else if (state === "done") indicator.append(glyph(step.completedIcon || "ui.checked"));
       else if (step.icon) indicator.append(glyph(step.icon));
       else indicator.textContent = String(i + 1);
       const text = document.createElement("span");

package/components/table/table.js

@@ -67,7 +67,7 @@ const styles = css`
   .empty:hover td { background: inherit; }
 `;
 
-const SORT_ICON = `<span data-ray-icon="chevron-up" aria-hidden="true"></span>`;
+const SORT_ICON = `<span data-ray-icon="ui.sort" aria-hidden="true"></span>`;
 
 export class RayTable extends RayElement {
   static properties = {

package/components/theme-toggle/theme-toggle.js

@@ -6,7 +6,7 @@ const ORDER = ["system", "light", "dark"];
 const LABEL = { system: "System theme", light: "Light theme", dark: "Dark theme" };
 
 // Icon of each theme (from the icon registry).
-const ICONS = { system: "monitor", light: "sun", dark: "moon" };
+const ICONS = { system: "ui.theme-system", light: "ui.theme-light", dark: "ui.theme-dark" };
 
 const styles = css`
   :host {
@@ -41,7 +41,7 @@ export class RayThemeToggle extends RayElement {
   };
   static styles = [styles];
   static delegatesFocus = true;
-  static template = `<button part="button" class="focus-ring" type="button"><span class="icon" data-ray-icon="monitor" aria-hidden="true"></span></button>`;
+  static template = `<button part="button" class="focus-ring" type="button"><span class="icon" data-ray-icon="ui.theme-system" aria-hidden="true"></span></button>`;
 
   connectedCallback() {
     super.connectedCallback();

package/core/core.js

@@ -5,7 +5,7 @@
 import { getIcon, onIconsChange } from "./icons.js";
 import { parseColor, shades, contrastRatio, toHex, toOklch } from "./color.js";
 
-export { setIcons, getIcon, iconNames } from "./icons.js";
+export { setIcons, getIcon, iconNames, iconAliases } from "./icons.js";
 
 export const PREFIX = "ray";
 
@@ -313,12 +313,13 @@ export class RayElement extends HTMLElement {
    * Protected. Fills every [data-ray-icon="name"] under `root` (default: the
    * shadow root) with that icon of the registry (setIcons). Components call
    * it for markup they create after the template. An empty name or "none"
-   * (the value components use to hide an icon) leaves the slot empty.
+   * (the value components use to hide an icon) leaves the slot empty;
+   * data-ray-icon-filled asks for the filled version (the outline without one).
    */
   paintIcons(root = this.shadowRoot) {
     for (const slot of root.querySelectorAll("[data-ray-icon]")) {
       const name = slot.getAttribute("data-ray-icon");
-      slot.innerHTML = name && name !== "none" ? getIcon(name) : "";
+      slot.innerHTML = name && name !== "none" ? getIcon(name, { filled: slot.hasAttribute("data-ray-icon-filled") }) : "";
     }
   }
 }