@raylang/elements 0.6.0 → 0.7.0

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. */

package/custom-elements.json

@@ -9141,9 +9141,9 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
-              "description": "An icon of the registry (or put one in the icon slot).",
+              "description": "An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is).",
               "fieldName": "icon"
             },
             {
@@ -9220,9 +9220,9 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
-              "description": "An icon of the registry (or put one in the icon slot).",
+              "description": "An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is).",
               "attribute": "icon",
               "reflects": false
             },
@@ -13997,7 +13997,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registry icon of the mark, or none. The icon slot replaces it.",
               "fieldName": "icon",
@@ -14083,7 +14083,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registry icon of the mark, or none. The icon slot replaces it.",
               "attribute": "icon",
@@ -14844,7 +14844,7 @@
           "name": "RayIcon",
           "tagName": "ray-icon",
           "customElement": true,
-          "description": "setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system.",
+          "description": "setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. An icon may have a filled version for a state (filled; \"<name>:filled\" in setIcons; iconNames({ filled: true }) lists them). The components draw roles (\"ui.close\", \"ui.remove\", \"ui.expand\"…; iconAliases()), each its glyph until the app registers the role: setIcons({ \"ui.remove\": … }) changes only the chips' ×. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system.",
           "superclass": {
             "name": "RayElement"
           },
@@ -14852,11 +14852,19 @@
             {
               "name": "name",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registered icon name (iconNames()); \"none\" draws nothing, a blank that keeps the alignment (a menu item without its check).",
               "fieldName": "name"
             },
+            {
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.",
+              "fieldName": "filled"
+            },
             {
               "name": "size",
               "type": {
@@ -14895,12 +14903,22 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registered icon name (iconNames()); \"none\" draws nothing, a blank that keeps the alignment (a menu item without its check).",
               "attribute": "name",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.",
+              "attribute": "filled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -15999,7 +16017,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "An icon of the registry in the bullet.",
               "fieldName": "icon"
@@ -16047,7 +16065,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "An icon of the registry in the bullet.",
               "attribute": "icon",
@@ -16195,7 +16213,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "A registered icon name, or none.",
               "fieldName": "icon"
@@ -16264,7 +16282,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "A registered icon name, or none.",
               "attribute": "icon",
@@ -16483,7 +16501,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Status icon from the registry (default: from the color); \"none\" for no icon.",
               "fieldName": "icon"
@@ -16546,7 +16564,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Status icon from the registry (default: from the color); \"none\" for no icon.",
               "attribute": "icon",
@@ -17634,8 +17652,24 @@
               "type": {
                 "text": "string"
               },
-              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps).",
+              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps). In another language, use value-text.",
               "fieldName": "label"
+            },
+            {
+              "name": "value-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text=\"Asalto {step} de {count}\". Default: \"<label> {step} of {count}\".",
+              "fieldName": "valueText"
+            },
+            {
+              "name": "done-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text once every step is done (value = count), with {count}. Default: value-text, else \"{count} of {count}, done\".",
+              "fieldName": "doneText"
             }
           ],
           "members": [
@@ -17699,9 +17733,29 @@
               "type": {
                 "text": "string"
               },
-              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps).",
+              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps). In another language, use value-text.",
               "attribute": "label",
               "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "valueText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text=\"Asalto {step} de {count}\". Default: \"<label> {step} of {count}\".",
+              "attribute": "value-text",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "doneText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text once every step is done (value = count), with {count}. Default: value-text, else \"{count} of {count}, done\".",
+              "attribute": "done-text",
+              "reflects": false
             }
           ],
           "events": [],

package/llms-full.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.6.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.7.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -75,7 +75,14 @@ reference of every component follows them.
   (`label` is required: it is the accessible name). Add or replace icons with
   `setIcons({ inbox: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>' })`
   (the style of the built-in set: 24×24, a 2px `currentColor` stroke) from
-  your own code, never from user input.
+  your own code, never from user input. `filled` draws an icon's filled
+  version for a state (`<ray-icon name="star" filled>` when it is a favorite);
+  `"name:filled"` in `setIcons` adds one. An icon the set lacks (`trash`,
+  `save`): register it from Lucide, the same grid and stroke —
+  `import { Trash2 } from "lucide-static"; setIcons({ trash: Trash2 })` (or
+  its SVG pasted in, without a bundler); never draw your own paths. To change
+  one control's icon (only the chips' ×), register its role
+  (`setIcons({ "ui.remove": … })`, roles listed in the reference).
 - **Overlays are in the top layer**: `ray-dialog` is a native modal
   `<dialog>`; popovers, menus, tooltips and notifications are `[popover]`
   elements. Never fight them with `z-index` or `overflow`.
@@ -1448,7 +1455,7 @@ Properties:
 
 - `value`: string, reflects. Its value (default: its href, else its label).
 - `label`: string. The label.
-- `icon`: string. An icon of the registry (or put one in the icon slot).
+- `icon`: `IconName`. An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is).
 - `href`: string, reflects. Makes it a link.
 - `badge`: string. A count or a short text on the icon.
 - `dot`: boolean, reflects. A dot on the icon (something new).
@@ -2334,7 +2341,7 @@ Properties:
 - `href`: string. URL of the source: the inner blockquote's cite attribute.
 - `color`: string, reflects. A palette color or any CSS color, for the edge, the mark and the tint. Default: the primary.
 - `variant`: `light` | `outline` | `filled`, default `light`, reflects. light: tinted background; outline: border and edge only; filled: solid color (a pull quote).
-- `icon`: string, default `quote`. Registry icon of the mark, or none. The icon slot replaces it.
+- `icon`: `IconName`, default `quote`. Registry icon of the mark, or none. The icon slot replaces it.
 - `size`: `sm` | `md` | `lg`, default `md`, reflects. Text size (lg for a pull quote).
 - `padding`: string, reflects. Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md.
 - `hideEdge` (attribute `hide-edge`): boolean, reflects. No colored edge on the start side (the tint, border and mark stay).
@@ -2461,11 +2468,12 @@ Import: `import "@raylang/elements/icon";` · Category: Data display
 
 #### `<ray-icon>` (RayIcon, extends RayElement)
 
-setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system.
+setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. An icon may have a filled version for a state (filled; "<name>:filled" in setIcons; iconNames({ filled: true }) lists them). The components draw roles ("ui.close", "ui.remove", "ui.expand"…; iconAliases()), each its glyph until the app registers the role: setIcons({ "ui.remove": … }) changes only the chips' ×. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system.
 
 Properties:
 
-- `name`: string, reflects. Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check).
+- `name`: `IconName`, reflects. Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check).
+- `filled`: boolean, reflects. The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.
 - `size`: string, reflects. xs…xl or any CSS length. Default: 1em.
 - `label`: string. Accessible name; without it the icon is decorative (hidden from screen readers).
 - `color`: string, reflects. A palette color or any CSS color. Default: the text color.
@@ -2475,6 +2483,10 @@ Parts (`::part()`):
 
 - `icon`: The icon box.
 
+Types:
+
+- `"close" | "check" | "minus" | "plus" | "chevron-down" | "chevron-up" | "chevron-right" | "chevron-left" | "chevrons-left" | "chevrons-right" | "search" | "arrow-up-right" | "arrow-down-right" | "sun" | "moon" | "monitor" | "user" | "info" | "circle-check" | "alert-triangle" | "circle-x" | "menu" | "more-horizontal" | "file" | "folder" | "pause" | "play" | "terminal" | "calendar" | "image" | "download" | "eye" | "eye-off" | "bell" | "copy" | "quote" | "pipette" | "star" | "upload" | "paperclip" | "panel-left" | "settings" | "home" | "arrow-left" | "message-circle" | "none" | (string & {})`: An icon name: one of the default set, or any name an app registers with setIcons().
+
 ### Indicator
 
 A dot or a small label on the edge of any element (Mantine's Indicator): "New" on an avatar, an unread count on a bell, an online dot. Nine positions, an inward offset, palette or CSS colors, a border and a live pulse.
@@ -2637,7 +2649,7 @@ Properties:
 
 - `label`: string. The title of the event.
 - `time`: string. When ("2 h ago", a date).
-- `icon`: string. An icon of the registry in the bullet.
+- `icon`: `IconName`. An icon of the registry in the bullet.
 - `color`: string, reflects. Its own color (a failed step in red).
 - `lineVariant` (attribute `line-variant`): `solid` | `dashed` | `dotted`, default `solid`, reflects. The line to the next item (dashed: not happened yet).
 
@@ -2670,7 +2682,7 @@ Properties:
 - `color`: string, reflects. A palette color or any CSS color.
 - `variant`: `light` | `filled` | `outline` | `default` | `transparent`, default `light`, reflects. Visual style.
 - `radius`: `xs` | `sm` | `md` | `lg` | `xl`. Corner radius.
-- `icon`: string, reflects. A registered icon name, or none.
+- `icon`: `IconName`, reflects. A registered icon name, or none.
 - `closable`: boolean, reflects. A close button; closing hides the alert (cancel ray-close to keep it).
 - `closeLabel` (attribute `close-label`): string, default `Dismiss`. Accessible name of the close button.
 
@@ -2722,7 +2734,7 @@ Properties:
 
 - `label`: string. Title.
 - `color`: string, reflects. Status color: tints the status icon (and a slotted icon's circle).
-- `icon`: string. Status icon from the registry (default: from the color); "none" for no icon.
+- `icon`: `IconName`. Status icon from the registry (default: from the color); "none" for no icon.
 - `loading`: boolean, reflects. Shows a spinner (notify() does not auto-close it).
 - `hideClose` (attribute `hide-close`): boolean, reflects. No close button.
 - `withBorder` (attribute `with-border`): boolean, reflects. Draws a border.
@@ -2893,7 +2905,9 @@ Properties:
 - `color`: string, reflects. A palette color or any CSS color for done and current dots. Default: the primary color.
 - `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `sm`, reflects. Size of a dot.
 - `align`: `start` | `center` | `end`, default `center`, reflects. Where the row sits in its width.
-- `label`: string. What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps).
+- `label`: string. What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). In another language, use value-text.
+- `valueText` (attribute `value-text`): string. The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text="Asalto {step} de {count}". Default: "<label> {step} of {count}".
+- `doneText` (attribute `done-text`): string. The announced text once every step is done (value = count), with {count}. Default: value-text, else "{count} of {count}, done".
 
 Parts (`::part()`):
 
@@ -3523,7 +3537,11 @@ breakpoint:
 
 The names `<ray-icon name>` and `setIcons()` know (more with `setIcons`):
 
-`close`, `check`, `minus`, `plus`, `chevron-down`, `chevron-up`, `chevron-right`, `chevron-left`, `chevrons-left`, `chevrons-right`, `search`, `arrow-up-right`, `arrow-down-right`, `sun`, `moon`, `monitor`, `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `menu`, `more-horizontal`, `file`, `folder`, `pause`, `play`, `terminal`, `calendar`, `image`, `download`, `eye`, `eye-off`, `bell`, `copy`, `pipette`, `star`, `upload`, `paperclip`, `panel-left`, `settings`, `home`, `arrow-left`, `message-circle`
+`close`, `check`, `minus`, `plus`, `chevron-down`, `chevron-up`, `chevron-right`, `chevron-left`, `chevrons-left`, `chevrons-right`, `search`, `arrow-up-right`, `arrow-down-right`, `sun`, `moon`, `monitor`, `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `menu`, `more-horizontal`, `file`, `folder`, `pause`, `play`, `terminal`, `calendar`, `image`, `download`, `eye`, `eye-off`, `bell`, `copy`, `quote`, `pipette`, `star`, `upload`, `paperclip`, `panel-left`, `settings`, `home`, `arrow-left`, `message-circle`
+
+With a filled version (`<ray-icon name="star" filled>`; the others draw their outline): `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `folder`, `bell`, `star`, `settings`, `home`, `message-circle`
+
+The roles the components draw, each with its default glyph; `setIcons({ "ui.remove": … })` changes one role only, `setIcons({ close: … })` every role that uses the glyph: `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)
 
 ## Core API
 
@@ -3584,12 +3602,14 @@ export declare function getCustomPrimary(el?: Element): string | null;
 
 // --- icons -------------------------------------------------------------------
 
-/** Replaces or adds icons (SVG markup or an SVGElement); repaints every component. */
+/** Replaces or adds icons (SVG markup or an SVGElement); repaints every component. "<name>:filled" is an icon's filled version. */
 export declare function setIcons(icons: Record<string, string | SVGElement>): void;
-/** The SVG markup of a registered icon ("" if unknown). */
-export declare function getIcon(name: string): string;
-/** The registered icon names. */
-export declare function iconNames(): string[];
+/** The SVG markup of a registered icon ("" if unknown); with filled, its filled version (the outline one without it). */
+export declare function getIcon(name: string, options?: { filled?: boolean }): string;
+/** The registered icon names; with filled, those that have a filled version. */
+export declare function iconNames(options?: { filled?: boolean }): string[];
+/** The roles the components draw ("ui.close", "ui.remove", "ui.expand"…) and the glyph each one uses unless the app registers the role. */
+export declare function iconAliases(): Record<string, string>;
 
 // --- base classes ------------------------------------------------------------
 

package/llms.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.6.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.7.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -75,7 +75,14 @@ reference of every component follows them.
   (`label` is required: it is the accessible name). Add or replace icons with
   `setIcons({ inbox: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>' })`
   (the style of the built-in set: 24×24, a 2px `currentColor` stroke) from
-  your own code, never from user input.
+  your own code, never from user input. `filled` draws an icon's filled
+  version for a state (`<ray-icon name="star" filled>` when it is a favorite);
+  `"name:filled"` in `setIcons` adds one. An icon the set lacks (`trash`,
+  `save`): register it from Lucide, the same grid and stroke —
+  `import { Trash2 } from "lucide-static"; setIcons({ trash: Trash2 })` (or
+  its SVG pasted in, without a bundler); never draw your own paths. To change
+  one control's icon (only the chips' ×), register its role
+  (`setIcons({ "ui.remove": … })`, roles listed in the reference).
 - **Overlays are in the top layer**: `ray-dialog` is a native modal
   `<dialog>`; popovers, menus, tooltips and notifications are `[popover]`
   elements. Never fight them with `z-index` or `overflow`.
@@ -329,7 +336,11 @@ Members whose name starts with `_` are internal.
 
 ## Icons
 
-`close`, `check`, `minus`, `plus`, `chevron-down`, `chevron-up`, `chevron-right`, `chevron-left`, `chevrons-left`, `chevrons-right`, `search`, `arrow-up-right`, `arrow-down-right`, `sun`, `moon`, `monitor`, `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `menu`, `more-horizontal`, `file`, `folder`, `pause`, `play`, `terminal`, `calendar`, `image`, `download`, `eye`, `eye-off`, `bell`, `copy`, `pipette`, `star`, `upload`, `paperclip`, `panel-left`, `settings`, `home`, `arrow-left`, `message-circle`
+`close`, `check`, `minus`, `plus`, `chevron-down`, `chevron-up`, `chevron-right`, `chevron-left`, `chevrons-left`, `chevrons-right`, `search`, `arrow-up-right`, `arrow-down-right`, `sun`, `moon`, `monitor`, `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `menu`, `more-horizontal`, `file`, `folder`, `pause`, `play`, `terminal`, `calendar`, `image`, `download`, `eye`, `eye-off`, `bell`, `copy`, `quote`, `pipette`, `star`, `upload`, `paperclip`, `panel-left`, `settings`, `home`, `arrow-left`, `message-circle`
+
+With a filled version (`<ray-icon name="star" filled>`; the others draw their outline): `user`, `info`, `circle-check`, `alert-triangle`, `circle-x`, `folder`, `bell`, `star`, `settings`, `home`, `message-circle`
+
+The roles the components draw, each with its default glyph; `setIcons({ "ui.remove": … })` changes one role only, `setIcons({ close: … })` every role that uses the glyph: `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)
 
 ## Reference
 

package/package.json

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

package/ray-elements.d.ts

@@ -54,12 +54,14 @@ export declare function getCustomPrimary(el?: Element): string | null;
 
 // --- icons -------------------------------------------------------------------
 
-/** Replaces or adds icons (SVG markup or an SVGElement); repaints every component. */
+/** Replaces or adds icons (SVG markup or an SVGElement); repaints every component. "<name>:filled" is an icon's filled version. */
 export declare function setIcons(icons: Record<string, string | SVGElement>): void;
-/** The SVG markup of a registered icon ("" if unknown). */
-export declare function getIcon(name: string): string;
-/** The registered icon names. */
-export declare function iconNames(): string[];
+/** The SVG markup of a registered icon ("" if unknown); with filled, its filled version (the outline one without it). */
+export declare function getIcon(name: string, options?: { filled?: boolean }): string;
+/** The registered icon names; with filled, those that have a filled version. */
+export declare function iconNames(options?: { filled?: boolean }): string[];
+/** The roles the components draw ("ui.close", "ui.remove", "ui.expand"…) and the glyph each one uses unless the app registers the role. */
+export declare function iconAliases(): Record<string, string>;
 
 // --- base classes ------------------------------------------------------------
 
@@ -1216,8 +1218,8 @@ export declare class RayBottomNavItem extends RayElement {
   value: string | undefined;
   /** The label. */
   label: string | undefined;
-  /** An icon of the registry (or put one in the icon slot). */
-  icon: string | undefined;
+  /** An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is). */
+  icon: IconName | undefined;
   /** Makes it a link. */
   href: string | undefined;
   /** A count or a short text on the icon. */
@@ -1832,7 +1834,7 @@ export declare class RayBlockquote extends RayElement {
   /** light: tinted background; outline: border and edge only; filled: solid color (a pull quote). */
   variant: "light" | "outline" | "filled";
   /** Registry icon of the mark, or none. The icon slot replaces it. */
-  icon: string;
+  icon: IconName;
   /** Text size (lg for a pull quote). */
   size: "sm" | "md" | "lg";
   /** Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md. */
@@ -1928,10 +1930,14 @@ export interface RayCodeEventMap extends HTMLElementEventMap {
 }
 
 // --- Icon (icon)
-/** <ray-icon> setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system. */
+/** An icon name: one of the default set, or any name an app registers with setIcons(). */
+export type IconName = "close" | "check" | "minus" | "plus" | "chevron-down" | "chevron-up" | "chevron-right" | "chevron-left" | "chevrons-left" | "chevrons-right" | "search" | "arrow-up-right" | "arrow-down-right" | "sun" | "moon" | "monitor" | "user" | "info" | "circle-check" | "alert-triangle" | "circle-x" | "menu" | "more-horizontal" | "file" | "folder" | "pause" | "play" | "terminal" | "calendar" | "image" | "download" | "eye" | "eye-off" | "bell" | "copy" | "quote" | "pipette" | "star" | "upload" | "paperclip" | "panel-left" | "settings" | "home" | "arrow-left" | "message-circle" | "none" | (string & {});
+/** <ray-icon> setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. An icon may have a filled version for a state (filled; "<name>:filled" in setIcons; iconNames({ filled: true }) lists them). The components draw roles ("ui.close", "ui.remove", "ui.expand"…; iconAliases()), each its glyph until the app registers the role: setIcons({ "ui.remove": … }) changes only the chips' ×. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system. */
 export declare class RayIcon extends RayElement {
   /** Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check). */
-  name: string | undefined;
+  name: IconName | undefined;
+  /** The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle. */
+  filled: boolean | undefined;
   /** xs…xl or any CSS length. Default: 1em. */
   size: string | undefined;
   /** Accessible name; without it the icon is decorative (hidden from screen readers). */
@@ -2077,7 +2083,7 @@ export declare class RayTimelineItem extends RayElement {
   /** When ("2 h ago", a date). */
   time: string | undefined;
   /** An icon of the registry in the bullet. */
-  icon: string | undefined;
+  icon: IconName | undefined;
   /** Its own color (a failed step in red). */
   color: string | undefined;
   /** The line to the next item (dashed: not happened yet). */
@@ -2096,7 +2102,7 @@ export declare class RayAlert extends RayElement {
   /** Corner radius. */
   radius: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
   /** A registered icon name, or none. */
-  icon: string | undefined;
+  icon: IconName | undefined;
   /** A close button; closing hides the alert (cancel ray-close to keep it). */
   closable: boolean | undefined;
   /** Accessible name of the close button. */
@@ -2142,7 +2148,7 @@ export declare class RayNotification extends RayElement {
   /** Status color: tints the status icon (and a slotted icon's circle). */
   color: string | undefined;
   /** Status icon from the registry (default: from the color); "none" for no icon. */
-  icon: string | undefined;
+  icon: IconName | undefined;
   /** Shows a spinner (notify() does not auto-close it). */
   loading: boolean | undefined;
   /** No close button. */
@@ -2269,8 +2275,12 @@ export declare class RayStepDots extends RayElement {
   size: "xs" | "sm" | "md" | "lg" | "xl";
   /** Where the row sits in its width. */
   align: "start" | "center" | "end";
-  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). */
+  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). In another language, use value-text. */
   label: string | undefined;
+  /** The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text="Asalto {step} de {count}". Default: "<label> {step} of {count}". */
+  valueText: string | undefined;
+  /** The announced text once every step is done (value = count), with {count}. Default: value-text, else "{count} of {count}, done". */
+  doneText: string | undefined;
 }
 
 // --- App bar (app-bar)