@raylang/elements 0.5.2 → 0.7.0

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/radio/radio.js

@@ -3,12 +3,17 @@
 // Native radios cannot group across shadow roots, so the group owns the
 // state: it is the form control (value submitted under `name`), keeps one
 // radio checked, and moves focus and selection with the arrow keys (roving
-// tabindex), like native radios.
+// tabindex), like native radios. <ray-radio-card> is a radio drawn as a
+// card (a title, a detail, an icon), for choices that need more than a line:
+// plans, presets, shipping methods. Both can share a group.
 
 import { RayElement, css, define } from "../../core/core.js";
 import { applyColor, sizeStyles } from "../../core/styles.js";
 import { FormControl, fieldStyles } from "../../core/form.js";
 
+/** The elements a group owns: radios and radio cards. */
+const RADIOS = "ray-radio, ray-radio-card";
+
 const groupStyles = css`
   :host { --_rs: 1.25rem; }
   :host([size="xs"]) { --_rs: 1rem; }
@@ -53,7 +58,7 @@ export class RayRadioGroup extends FormControl {
     this.internals.role = "radiogroup";
     this.addEventListener("keydown", (e) => this._keydown(e));
     this.addEventListener("click", (e) => {
-      const radio = e.target.closest?.("ray-radio");
+      const radio = e.target.closest?.(RADIOS);
       if (radio && this.radios.includes(radio)) this._choose(radio, true);
     });
   }
@@ -67,9 +72,9 @@ export class RayRadioGroup extends FormControl {
     }
   }
 
-  /** The radios of this group (direct or nested, not in a nested group). */
+  /** The radios (and radio cards) of this group (direct or nested, not in a nested group). */
   get radios() {
-    return [...this.querySelectorAll("ray-radio")].filter((r) => r.closest("ray-radio-group") === this);
+    return [...this.querySelectorAll(RADIOS)].filter((r) => r.closest("ray-radio-group") === this);
   }
 
   update() {
@@ -129,7 +134,7 @@ export class RayRadioGroup extends FormControl {
 
   _keydown(e) {
     const radios = this.radios.filter((r) => !r.disabled);
-    const i = radios.indexOf(e.target.closest?.("ray-radio"));
+    const i = radios.indexOf(e.target.closest?.(RADIOS));
     if (i < 0) return;
     let next = null;
     if (e.key === "ArrowDown" || e.key === "ArrowRight") next = radios[(i + 1) % radios.length];
@@ -266,5 +271,63 @@ export class RayRadio extends RayElement {
   }
 }
 
+const cardStyles = css`
+  :host { --_s: var(--_rs, 1.125rem); }
+  .root {
+    align-items: flex-start;
+    gap: var(--ray-space-3);
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--ray-space-3) var(--ray-space-4);
+    background: var(--ray-background);
+    border: 1px solid var(--ray-border);
+    border-radius: var(--ray-radius-default);
+    transition: background-color var(--ray-duration-fast) var(--ray-easing-standard), border-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  :host(:not([data-disabled])) .root:hover { background: var(--ray-default-hover); }
+  :host([data-checked]) .root, :host([data-checked]) .root:hover {
+    background: var(--_light, var(--ray-primary-light));
+    border-color: var(--_filled, var(--ray-primary-filled));
+  }
+  :host(:focus-visible) .root { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: var(--ray-focus-ring-offset); }
+  :host(:focus-visible) .indicator { outline: none; }
+  :host([data-disabled]) .root { background: var(--ray-muted); opacity: 0.6; }
+  .body { flex: 1; min-width: 0; min-height: 0; }
+  .label { font-weight: var(--ray-font-weight-semibold); }
+  .icon { display: inline-flex; flex: none; color: var(--_filled, var(--ray-primary-filled)); font-size: 1.25rem; line-height: 1; }
+  .extra { margin-top: var(--ray-space-2); font-size: var(--ray-font-size-sm); }
+  :host([hide-indicator]) .indicator { display: none; }
+`;
+
+export class RayRadioCard extends RayRadio {
+  static properties = {
+    ...RayRadio.properties,
+    hideIndicator: { type: Boolean, reflect: true, attribute: "hide-indicator" },
+  };
+  static styles = [radioStyles, cardStyles];
+  static template = `
+    <div class="root" part="root">
+      <span class="icon" part="icon" hidden><slot name="icon"></slot></span>
+      <span class="body">
+        <span class="label" part="label"><span class="label-text"></span></span>
+        <span class="description" part="description" hidden></span>
+        <span class="extra" hidden><slot></slot></span>
+      </span>
+      <span class="indicator" part="indicator"><span class="dot"></span></span>
+    </div>`;
+
+  constructor() {
+    super();
+    // The icon and the extra content take room only when given.
+    for (const slot of this.shadowRoot.querySelectorAll("slot")) {
+      slot.addEventListener("slotchange", () => {
+        const given = slot.assignedNodes().some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent.trim());
+        slot.parentElement.hidden = !given;
+      });
+    }
+  }
+}
+
 define("ray-radio-group", RayRadioGroup);
 define("ray-radio", RayRadio);
+define("ray-radio-card", RayRadioCard);

package/components/ring-progress/ring-progress.js

@@ -0,0 +1,127 @@
+// <ray-ring-progress>: progress as a ring (Mantine's RingProgress), with
+// room in the middle for content (a countdown's clock, a percentage).
+//
+// The arc is a stroke-dasharray on a circle with pathLength=100, drawn from
+// 12 o'clock clockwise; r is a CSS length (half the box minus half the
+// stroke), so any size and thickness need no viewBox arithmetic.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const SIZES = { xs: "3rem", sm: "5rem", md: "7.5rem", lg: "10rem", xl: "12.5rem" };
+
+const styles = css`
+  :host {
+    --_d: 7.5rem;
+    --_t: calc(var(--_d) / 10);
+    position: relative;
+    display: inline-grid;
+    /* One cell of exactly the diameter: the svg's intrinsic 300×150 must not size it. */
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+    vertical-align: middle;
+    width: var(--_d);
+    height: var(--_d);
+    flex: none;
+  }
+  svg {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    transform: rotate(-90deg);
+  }
+  circle {
+    cx: 50%;
+    cy: 50%;
+    r: calc(50% - var(--_t) / 2);
+    fill: none;
+    stroke-width: var(--_t);
+  }
+  .track { stroke: var(--ray-muted); }
+  .bar {
+    stroke: var(--_filled);
+    stroke-dasharray: var(--_pct, 0) 100;
+    transition: stroke-dasharray var(--ray-duration-slow) var(--ray-easing-standard);
+  }
+  :host([round-caps]) .bar { stroke-linecap: round; }
+  /* A round cap draws a dot at 0. */
+  .bar[data-empty] { visibility: hidden; }
+  svg[data-indeterminate] { animation: ray-ring-spin 1.2s linear infinite; }
+  svg[data-indeterminate] .bar { transition: none; }
+  @keyframes ray-ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
+  .center {
+    grid-area: 1 / 1;
+    display: grid;
+    place-items: center;
+    padding: calc(var(--_t) * 1.5);
+    min-width: 0;
+    text-align: center;
+    font-size: max(var(--ray-font-size-xs), calc(var(--_d) * 0.16));
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+  .value { font-weight: var(--ray-font-weight-semibold); }
+  .value:empty { display: none; }
+`;
+
+export class RayRingProgress extends RayElement {
+  static properties = {
+    value: { type: Number },
+    max: { type: Number, default: 100 },
+    color: { type: String, reflect: true },
+    size: { type: String, reflect: true, default: "md" },
+    thickness: { type: String, reflect: true },
+    roundCaps: { type: Boolean, reflect: true, attribute: "round-caps" },
+    showValue: { type: Boolean, reflect: true, attribute: "show-value" },
+    label: { type: String },
+  };
+  static styles = [styles];
+  static template = `<svg aria-hidden="true"><circle class="track" part="track" pathLength="100"></circle><circle class="bar" part="bar" pathLength="100"></circle></svg><div class="center" part="center"><slot></slot><span class="value" aria-hidden="true"></span></div>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "progressbar";
+  }
+
+  update() {
+    const svg = this.$("svg");
+    const bar = this.$(".bar");
+    applyColor(svg, this.color);
+    // size: xs…xl or a length; thickness: a length (a bare number is px).
+    const d = SIZES[this.size] ?? this.size ?? "";
+    if (d) this.style.setProperty("--_d", d);
+    else this.style.removeProperty("--_d");
+    const t = this.thickness ? (/^\d*\.?\d+$/.test(this.thickness) ? `${this.thickness}px` : this.thickness) : "";
+    if (t) this.style.setProperty("--_t", t);
+    else this.style.removeProperty("--_t");
+
+    const max = this.max > 0 ? this.max : 100;
+    const indeterminate = this.value === undefined || this.value === null || Number.isNaN(this.value);
+    svg.toggleAttribute("data-indeterminate", indeterminate);
+    const pct = indeterminate ? 0 : Math.min(100, Math.max(0, (this.value / max) * 100));
+    // Indeterminate: a quarter arc that spins.
+    bar.style.setProperty("--_pct", String(indeterminate ? 25 : pct));
+    bar.toggleAttribute("data-empty", !indeterminate && pct === 0);
+    // The percentage in the middle only when the app puts nothing there.
+    const empty = this.$("slot").assignedNodes().every((n) => n.nodeType === Node.TEXT_NODE && !n.textContent.trim());
+    this.$(".value").textContent = this.showValue && !indeterminate && empty ? `${Math.round(pct)}%` : "";
+
+    const i = this.internals;
+    i.ariaValueMin = "0";
+    i.ariaValueMax = String(max);
+    i.ariaValueNow = indeterminate ? null : String(this.value);
+    i.ariaValueText = indeterminate ? null : `${Math.round(pct)}%`;
+    i.ariaLabel = this.label || this.getAttribute("aria-label") || "Progress";
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._wired) {
+      this._wired = true;
+      this.$("slot").addEventListener("slotchange", () => this.requestUpdate());
+    }
+  }
+}
+
+define("ray-ring-progress", RayRingProgress);

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

@@ -0,0 +1,95 @@
+// <ray-step-dots>: a row of dots, one per step: done (filled), the current
+// one (a filled pill), the rest (empty). A compact progress for rounds,
+// onboarding pages or a quiz. Not interactive: the carousel's dots are
+// buttons, these are a progressbar.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const styles = css`
+  :host {
+    --_dot: 0.5rem;
+    display: block;
+  }
+  :host([size="xs"]) { --_dot: 0.3125rem; }
+  :host([size="md"]) { --_dot: 0.625rem; }
+  :host([size="lg"]) { --_dot: 0.75rem; }
+  :host([size="xl"]) { --_dot: 1rem; }
+  .dots {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: var(--_justify, center);
+    gap: calc(var(--_dot) * 0.75);
+  }
+  :host([align="start"]) { --_justify: flex-start; }
+  :host([align="end"]) { --_justify: flex-end; }
+  .dot {
+    flex: none;
+    width: var(--_dot);
+    height: var(--_dot);
+    box-sizing: border-box;
+    border-radius: var(--ray-radius-full);
+    border: 1.5px solid color-mix(in srgb, var(--ray-foreground) 28%, transparent);
+    transition: width var(--ray-duration-base) var(--ray-easing-standard), background-color var(--ray-duration-base) var(--ray-easing-standard), border-color var(--ray-duration-base) var(--ray-easing-standard);
+  }
+  .dot[data-state="done"] { background: var(--_filled); border-color: var(--_filled); }
+  .dot[data-state="current"] { width: calc(var(--_dot) * 2.5); background: var(--_filled); border-color: var(--_filled); }
+`;
+
+export class RayStepDots extends RayElement {
+  static properties = {
+    count: { type: Number, default: 0 },
+    value: { type: Number, default: 0 },
+    color: { type: String, reflect: true },
+    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>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "progressbar";
+  }
+
+  update() {
+    applyColor(this, this.color);
+    const count = Math.max(0, Math.floor(this.count || 0));
+    // value: the current step, 0-based; count (or more) is all done.
+    const value = Math.min(count, Math.max(0, Math.floor(this.value || 0)));
+    const box = this.$(".dots");
+    while (box.children.length < count) {
+      const dot = document.createElement("span");
+      dot.className = "dot";
+      dot.setAttribute("part", "dot");
+      box.append(dot);
+    }
+    while (box.children.length > count) box.lastElementChild.remove();
+    [...box.children].forEach((dot, i) => {
+      dot.dataset.state = i < value ? "done" : i === value ? "current" : "todo";
+    });
+
+    // 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 : text;
+  }
+}
+
+define("ray-step-dots", RayStepDots);

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") }) : "";
     }
   }
 }

package/core/icons.js

@@ -6,6 +6,16 @@
 //
 // setIcons() also adds new names, for <ray-icon name="…">. Icons are SVG
 // markup (or an SVGElement) drawn with currentColor; components size them.
+//
+// The components ask for roles, not glyphs: "ui.close" (a dialog's close
+// button), "ui.remove" (a chip's ×), "ui.clear" (a field's ×)… Each role
+// draws its glyph (ALIASES) unless the app registers the role itself, so
+// setIcons({ close: … }) still changes every × and setIcons({ "ui.remove": … })
+// only the chips'.
+//
+// An icon may have a filled version, "<name>:filled", for a state: the active
+// tab, a favorite, unread. <ray-icon name="star" filled> draws it, and the
+// outline one when there is none. setIcons({ "star:filled": … }) adds one.
 // The markup is inserted as HTML: register icons from your own code only,
 // never from user input.
 
@@ -62,12 +72,72 @@ const DEFAULTS = {
   "message-circle": svg(`<path d="M20 11.5a8 8 0 0 1-11.6 7.2L4 20l1.3-4.2A8 8 0 1 1 20 11.5z"/>`),
 };
 
-const registry = new Map(Object.entries(DEFAULTS));
+// The filled versions: the outline's shapes filled (same silhouette: the
+// stroke stays), or one even-odd path where a mark is cut out of a disc.
+const solid = (body) =>
+  `<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+const cut = (d) => `<svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" aria-hidden="true"><path d="${d}"/></svg>`;
+
+/** The filled versions of the default set (registered as "<name>:filled"). */
+const FILLED = {
+  "user": solid(`<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0z"/>`),
+  "info": cut("M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z"),
+  "circle-check": cut("M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z"),
+  "alert-triangle": cut("M10.3 3.2 1.6 18.1a2 2 0 0 0 1.7 3h17.4a2 2 0 0 0 1.7-3L13.7 3.2a2 2 0 0 0-3.4 0zM11 8.5h2v5.5h-2zM12 16a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"),
+  "circle-x": cut("M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM14.12 8.46 15.54 9.88 13.41 12 15.54 14.12 14.12 15.54 12 13.41 9.88 15.54 8.46 14.12 10.59 12 8.46 9.88 9.88 8.46 12 10.59z"),
+  "folder": solid(`<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`),
+  bell: solid(`<path d="M10.3 21a1.9 1.9 0 0 0 3.4 0z"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.6 18 8A6 6 0 0 0 6 8c0 4.6-1.4 6-2.7 7.3"/>`),
+  "star": solid(`<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/>`),
+  "settings": solid(`<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="18" cy="18" r="2"/>`),
+  "home": solid(`<path d="M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z"/>`),
+  "message-circle": solid(`<path d="M20 11.5a8 8 0 0 1-11.6 7.2L4 20l1.3-4.2A8 8 0 1 1 20 11.5z"/>`),
+};
+
+const FILLED_SUFFIX = ":filled";
+
+/** The roles the components draw, and the glyph each one uses by default. */
+const ALIASES = {
+  "ui.close": "close",
+  "ui.clear": "close",
+  "ui.remove": "close",
+  "ui.expand": "chevron-down",
+  "ui.disclosure": "chevron-right",
+  "ui.previous": "chevron-left",
+  "ui.next": "chevron-right",
+  "ui.first": "chevrons-left",
+  "ui.last": "chevrons-right",
+  "ui.separator": "chevron-right",
+  "ui.increment": "chevron-up",
+  "ui.decrement": "chevron-down",
+  "ui.sort": "chevron-up",
+  "ui.checked": "check",
+  "ui.indeterminate": "minus",
+  "ui.copy": "copy",
+  "ui.copied": "check",
+  "ui.show-password": "eye",
+  "ui.hide-password": "eye-off",
+  "ui.play": "play",
+  "ui.pause": "pause",
+  "ui.search": "search",
+  "ui.calendar": "calendar",
+  "ui.eyedropper": "pipette",
+  "ui.upload": "upload",
+  "ui.avatar": "user",
+  "ui.theme-light": "sun",
+  "ui.theme-dark": "moon",
+  "ui.theme-system": "monitor",
+  "ui.trend-up": "arrow-up-right",
+  "ui.trend-down": "arrow-down-right",
+  "ui.trend-flat": "minus",
+};
+
+const registry = new Map([...Object.entries(DEFAULTS), ...Object.entries(FILLED).map(([name, markup]) => [name + FILLED_SUFFIX, markup])]);
 const listeners = new Set();
 const warned = new Set();
 
 /**
- * Replaces or adds icons. Values are SVG markup or an SVGElement.
+ * Replaces or adds icons. Values are SVG markup or an SVGElement; a name
+ * ending in ":filled" is the filled version of an icon.
  * @param {Record<string, string | SVGElement>} icons
  */
 export function setIcons(icons) {
@@ -81,9 +151,19 @@ export function setIcons(icons) {
   for (const cb of listeners) cb();
 }
 
-/** The SVG markup of an icon ("" and one warning when it is not registered). */
-export function getIcon(name) {
-  const markup = registry.get(name);
+/**
+ * The SVG markup of an icon or a role ("" and one warning when it is not
+ * registered). With `filled`, its filled version, or the outline one when it
+ * has none.
+ */
+export function getIcon(name, { filled = false } = {}) {
+  // A role the app has not registered draws its glyph.
+  const glyph = ALIASES[name];
+  if (filled) {
+    const solidMarkup = registry.get(name + FILLED_SUFFIX) ?? (glyph && !registry.has(name) ? registry.get(glyph + FILLED_SUFFIX) : undefined);
+    if (solidMarkup !== undefined) return solidMarkup;
+  }
+  const markup = registry.get(name) ?? (glyph ? registry.get(glyph) : undefined);
   if (markup !== undefined) return markup;
   if (!warned.has(name)) {
     warned.add(name);
@@ -92,9 +172,16 @@ export function getIcon(name) {
   return "";
 }
 
-/** The registered icon names. */
-export function iconNames() {
-  return [...registry.keys()];
+/** The roles the components draw ("ui.close"…) and the glyph each one uses unless registered. */
+export function iconAliases() {
+  return { ...ALIASES };
+}
+
+/** The registered icon names; with `filled`, those that have a filled version. */
+export function iconNames({ filled = false } = {}) {
+  const names = [...registry.keys()];
+  if (filled) return names.filter((n) => n.endsWith(FILLED_SUFFIX)).map((n) => n.slice(0, -FILLED_SUFFIX.length));
+  return names.filter((n) => !n.endsWith(FILLED_SUFFIX));
 }
 
 /** @internal Called by the core runtime to repaint components after setIcons. */