@raylang/elements 0.6.0 → 0.8.0

package/base.css

@@ -84,7 +84,7 @@
   }
   :where(.ray-table) :where(th, td) {
     padding: var(--ray-space-2) var(--ray-space-3);
-    text-align: left;
+    text-align: start;
     vertical-align: middle;
     border-bottom: 1px solid var(--ray-border);
   }

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

@@ -17,7 +17,7 @@ export class RayAccordion extends RayElement {
     value: { type: String },
     multiple: { type: Boolean, reflect: true },
     variant: { type: String, reflect: true, default: "default" },
-    chevronPosition: { type: String, reflect: true, default: "right" },
+    chevronPosition: { type: String, reflect: true, default: "end" },
   };
   static styles = [accordionStyles];
   static template = `<div class="items" part="items"><slot></slot></div>`;
@@ -52,7 +52,7 @@ export class RayAccordion extends RayElement {
     items.forEach((item, i) => {
       item._setOpen(open.includes(item.value));
       item.dataset.variant = this.variant || "default";
-      item.dataset.chevron = this.chevronPosition || "right";
+      item.dataset.chevron = this.chevronPosition || "end";
       item.toggleAttribute("data-first", i === 0);
       item.toggleAttribute("data-last", i === items.length - 1);
     });
@@ -104,7 +104,7 @@ const itemStyles = css`
     font-size: var(--ray-font-size-md);
     font-weight: var(--ray-font-weight-medium);
     color: var(--ray-foreground);
-    text-align: left;
+    text-align: start;
     background: transparent;
     border: 0;
     border-radius: inherit;
@@ -116,7 +116,10 @@ const itemStyles = css`
   .label { display: grid; flex: 1; gap: 0.125rem; min-width: 0; }
   .description { font-size: var(--ray-font-size-sm); font-weight: var(--ray-font-weight-normal, 400); color: var(--ray-muted-foreground); }
   .description:empty { display: none; }
-  :host([data-chevron="left"]) .chevron { order: -1; }
+  /* The chevron before the label: start, or left/right as sides of the screen. */
+  :host([data-chevron="start"]) .chevron,
+  :host([data-chevron="left"]) .chevron:dir(ltr),
+  :host([data-chevron="right"]) .chevron:dir(rtl) { order: -1; }
   .chevron { display: inline-flex; color: var(--ray-muted-foreground); transition: transform var(--ray-duration-base) var(--ray-easing-standard); }
   .chevron svg { width: 1rem; height: 1rem; }
   :host([data-open]) .chevron { transform: rotate(180deg); }
@@ -149,7 +152,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

@@ -34,7 +34,8 @@ const styles = css`
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin: -0.125rem -0.375rem 0 0;
+    margin: -0.125rem 0 0;
+    margin-inline-end: -0.375rem;
     padding: 0;
     color: inherit;
     background: transparent;
@@ -66,7 +67,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

@@ -25,7 +25,7 @@ const styles = css`
     width: 16rem;
     max-width: 100%;
     padding: var(--ray-space-2);
-    padding-right: var(--ray-space-3);
+    padding-inline-end: var(--ray-space-3);
     color: var(--ray-foreground);
     background: var(--ray-card);
     border: 1px solid var(--ray-border);
@@ -53,7 +53,7 @@ const styles = css`
   .badge {
     position: absolute;
     bottom: 3px;
-    left: 50%;
+    left: 50%; /* physical */
     transform: translateX(-50%);
     padding: 0 0.25rem;
     font-size: 0.5625rem;
@@ -82,8 +82,7 @@ const styles = css`
   :host([status="error"]) .meta { color: var(--ray-destructive); }
   .bar {
     position: absolute;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     bottom: 0;
     height: 2px;
     background: var(--ray-muted);
@@ -131,7 +130,7 @@ const styles = css`
   :host([variant="card"]) .remove {
     position: absolute;
     top: calc(var(--ray-space-2) + 4px);
-    right: calc(var(--ray-space-2) + 4px);
+    inset-inline-end: calc(var(--ray-space-2) + 4px);
     background: var(--ray-card);
     box-shadow: var(--ray-shadow-xs);
     opacity: 1;
@@ -191,7 +190,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/blockquote/blockquote.js

@@ -22,7 +22,7 @@ const styles = css`
   :host([hide-edge]) { --_edge: 0px; }
   figure { position: relative; margin: 0; }
   /* Room for the mark, so it does not cover what is above or beside. */
-  :host([data-icon]) figure { padding: calc(var(--_icon) / 2) 0 0 calc(var(--_icon) / 2); }
+  :host([data-icon]) figure { padding-block-start: calc(var(--_icon) / 2); padding-inline-start: calc(var(--_icon) / 2); }
   blockquote {
     margin: 0;
     padding: var(--_p) calc(var(--_p) * 1.25);
@@ -43,7 +43,7 @@ const styles = css`
   .icon {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     display: grid;
     place-items: center;
     width: var(--_icon);

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

@@ -40,7 +40,7 @@ const navStyles = css`
     grid-auto-columns: minmax(0, 1fr);
     grid-auto-flow: column;
     align-items: stretch;
-    padding: var(--ray-space-1) max(var(--ray-space-1), env(safe-area-inset-right, 0px)) max(var(--ray-space-1), env(safe-area-inset-bottom, 0px)) max(var(--ray-space-1), env(safe-area-inset-left, 0px));
+    padding: var(--ray-space-1) max(var(--ray-space-1), env(safe-area-inset-right, 0px)) max(var(--ray-space-1), env(safe-area-inset-bottom, 0px)) max(var(--ray-space-1), env(safe-area-inset-left, 0px)); /* physical */
     background: var(--ray-bottom-nav, var(--ray-background));
     border-top: 1px solid var(--ray-border);
   }
@@ -109,7 +109,7 @@ const itemStyles = css`
   .badge {
     position: absolute;
     top: 0;
-    left: calc(50% + 0.375rem);
+    inset-inline-start: calc(50% + 0.375rem);
     min-width: 1rem;
     height: 1rem;
     padding: 0 0.25rem;
@@ -125,7 +125,7 @@ const itemStyles = css`
     box-sizing: content-box;
   }
   .badge:empty:not([data-dot]) { display: none; }
-  .badge[data-dot] { min-width: 0; width: 0.5rem; height: 0.5rem; padding: 0; top: 0.25rem; left: calc(50% + 0.5rem); }
+  .badge[data-dot] { min-width: 0; width: 0.5rem; height: 0.5rem; padding: 0; top: 0.25rem; inset-inline-start: calc(50% + 0.5rem); }
   .label {
     max-width: 100%;
     overflow: hidden;
@@ -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

@@ -9,6 +9,7 @@
 
 import { RayElement, css, define } from "../../core/core.js";
 import { motionAllowed } from "../../core/motion.js";
+import { isRtl, inlineKey } from "../../core/direction.js";
 
 const styles = css`
   :host {
@@ -74,9 +75,11 @@ const styles = css`
   .control:hover:not(:disabled) { background: var(--ray-accent); }
   .control:disabled { opacity: 0; pointer-events: none; }
   .control svg { width: 1rem; height: 1rem; }
-  .prev { left: var(--ray-space-2); }
-  .next { right: var(--ray-space-2); }
-  :host([orientation="vertical"]) .control { top: auto; left: 50%; transform: translateX(-50%) rotate(90deg); }
+  .prev { inset-inline-start: var(--ray-space-2); }
+  .next { inset-inline-end: var(--ray-space-2); }
+  :host([orientation="vertical"]) .control { top: auto; left: 50%; transform: translateX(-50%) rotate(90deg); } /* physical */
+  /* Up and down do not depend on the writing direction: the turned arrows are not mirrored. */
+  :host([orientation="vertical"]) .control [data-ray-icon] > svg { transform: none; }
   :host([orientation="vertical"]) .prev { top: var(--ray-space-2); }
   :host([orientation="vertical"]) .next { bottom: var(--ray-space-2); }
   :host([hide-controls]) .control { display: none; }
@@ -128,7 +131,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 +153,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>
@@ -272,6 +275,14 @@ export class RayCarousel extends RayElement {
     return this.orientation === "vertical";
   }
 
+  // The scroll offset from the start. Right to left, scrollLeft runs from 0
+  // (the start, on the right) down to negative values.
+  _scroll() {
+    const vp = this.viewport;
+    if (this._vertical()) return vp.scrollTop;
+    return isRtl(this) ? -vp.scrollLeft : vp.scrollLeft;
+  }
+
   _current() {
     return Math.min(Math.max(0, this.index ?? 0), this.count - 1);
   }
@@ -294,11 +305,12 @@ export class RayCarousel extends RayElement {
     const vr = vp.getBoundingClientRect();
     const size = v ? vp.clientHeight : vp.clientWidth;
     const max = Math.max(0, v ? vp.scrollHeight - vp.clientHeight : vp.scrollWidth - vp.clientWidth);
-    const scroll = v ? vp.scrollTop : vp.scrollLeft;
+    const scroll = this._scroll();
+    const rtl = !v && isRtl(this);
     const snaps = [];
     for (const s of slides) {
       const r = s.getBoundingClientRect();
-      const start = (v ? r.top - vr.top : r.left - vr.left) + scroll;
+      const start = (v ? r.top - vr.top : rtl ? vr.right - r.right : r.left - vr.left) + scroll;
       const length = v ? r.height : r.width;
       const pos = this.align === "center" ? start - (size - length) / 2 : start;
       const clamped = Math.round(Math.min(max, Math.max(0, pos)));
@@ -333,8 +345,7 @@ export class RayCarousel extends RayElement {
 
   // The position closest to the current scroll offset.
   _track() {
-    const vp = this.viewport;
-    const scroll = this._vertical() ? vp.scrollTop : vp.scrollLeft;
+    const scroll = this._scroll();
     let best = 0;
     for (let i = 1; i < this.#snaps.length; i++) {
       if (Math.abs(this.#snaps[i] - scroll) < Math.abs(this.#snaps[best] - scroll)) best = i;
@@ -358,7 +369,7 @@ export class RayCarousel extends RayElement {
     const smooth = user && !instant && !reduced?.matches && motionAllowed(this);
     const opts = { behavior: smooth ? "smooth" : "instant" };
     if (this._vertical()) this.viewport.scrollTo({ top: pos, ...opts });
-    else this.viewport.scrollTo({ left: pos, ...opts });
+    else this.viewport.scrollTo({ left: isRtl(this) ? -pos : pos, ...opts });
     this._setIndex(i);
     this._paint();
     this._schedule();
@@ -403,7 +414,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");
     }
@@ -416,10 +427,11 @@ export class RayCarousel extends RayElement {
     const v = this._vertical();
     const back = v ? "ArrowUp" : "ArrowLeft";
     const fwd = v ? "ArrowDown" : "ArrowRight";
-    if (e.key === fwd) {
+    const key = v ? e.key : inlineKey(e.key, this);
+    if (key === fwd) {
       e.preventDefault();
       this.next();
-    } else if (e.key === back) {
+    } else if (key === back) {
       e.preventDefault();
       this.prev();
     } else if (e.key === "Home") {

package/components/checkbox/checkbox.js

@@ -19,7 +19,10 @@ export const checkStyles = css`
     align-items: flex-start;
     gap: calc(var(--_s) * 0.6);
   }
-  :host([label-position="left"]) .root { flex-direction: row-reverse; justify-content: flex-end; }
+  /* The label before the box: start, or left/right as sides of the screen. */
+  :host([label-position="start"]) .root,
+  :host([label-position="left"]) .root:dir(ltr),
+  :host([label-position="right"]) .root:dir(rtl) { flex-direction: row-reverse; justify-content: flex-end; }
   .inner {
     position: relative;
     flex: none;
@@ -100,10 +103,10 @@ export class RayCheckbox extends FieldControl {
     value: { type: String, reflect: true, default: "on" },
     color: { type: String, reflect: true },
     variant: { type: String, reflect: true, default: "filled" },
-    labelPosition: { type: String, reflect: true, default: "right" },
+    labelPosition: { type: String, reflect: true, default: "end" },
   };
   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/checkbox-group/checkbox-group.js

@@ -15,7 +15,7 @@ const styles = css`
   .items { display: flex; flex-direction: column; gap: var(--ray-space-3); margin-top: var(--ray-space-2); }
   :host([orientation="horizontal"]) .items { flex-direction: row; flex-wrap: wrap; gap: var(--ray-space-3) var(--ray-space-5); }
   .label { margin-bottom: 0; }
-  .count { margin-left: var(--ray-space-1); font-weight: 400; color: var(--ray-muted-foreground); font-variant-numeric: tabular-nums; }
+  .count { margin-inline-start: var(--ray-space-1); font-weight: 400; color: var(--ray-muted-foreground); font-variant-numeric: tabular-nums; }
 `;
 
 /** "a, b" (an attribute) or an array, as an array of values. */

package/components/code/code.js

@@ -293,7 +293,8 @@ const styles = css`
     align-items: center;
     gap: var(--ray-space-2);
     min-height: 2.5rem;
-    padding: 0 var(--ray-space-2) 0 var(--ray-space-4);
+    padding-block: 0;
+    padding-inline: var(--ray-space-4) var(--ray-space-2);
     font-size: var(--ray-font-size-xs);
     color: var(--ray-muted-foreground);
     border-bottom: 1px solid var(--ray-border);
@@ -325,12 +326,13 @@ const styles = css`
   .copy-label { display: none; }
   .copy[data-copied] .copy-label { display: inline; }
   /* Without a header, the button floats in the top-end corner. */
-  .copy.floating { position: absolute; z-index: 1; top: var(--ray-space-2); right: var(--ray-space-2); background: var(--ray-code-background); opacity: 0; transition: opacity var(--ray-duration-fast); }
+  .copy.floating { position: absolute; z-index: 1; top: var(--ray-space-2); inset-inline-end: var(--ray-space-2); background: var(--ray-code-background); opacity: 0; transition: opacity var(--ray-duration-fast); }
   .frame:hover .copy.floating, .copy.floating:focus-visible, .copy.floating[data-copied] { opacity: 1; }
   @media (hover: none) { .copy.floating { opacity: 1; } }
   .copy[hidden] { display: none; }
 
-  .scroller { overflow: auto; max-height: var(--_max, none); outline: none; }
+  /* Code reads left to right, in a right-to-left page too. */
+  .scroller { direction: ltr; overflow: auto; max-height: var(--_max, none); outline: none; }
   .scroller:focus-visible { box-shadow: inset 0 0 0 2px var(--ray-ring); }
   :host([expanded]) .scroller { max-height: none; }
   pre { margin: 0; padding: var(--ray-space-3) 0; font-family: var(--ray-font-mono); font-size: var(--_fs); line-height: var(--_lh); tab-size: 2; }
@@ -339,19 +341,19 @@ const styles = css`
   .line { display: block; padding: 0 var(--ray-space-4); white-space: pre; border-inline-start: 2px solid transparent; }
   :host([wrap]) .line { white-space: pre-wrap; overflow-wrap: anywhere; }
   .line:empty::after { content: " "; }
-  :host([line-numbers]) .line { counter-increment: line; padding-left: 0; }
+  :host([line-numbers]) .line { counter-increment: line; padding-inline-start: 0; }
   :host([line-numbers]) .line::before {
     content: counter(line);
     display: inline-block;
     width: calc(var(--_digits, 2) * 1ch + var(--ray-space-6));
     padding-inline-end: var(--ray-space-4);
     box-sizing: border-box;
-    text-align: right;
+    text-align: end;
     color: var(--ray-code-comment);
     opacity: 0.7;
     user-select: none;
   }
-  :host([line-numbers][wrap]) .line { padding-left: calc(var(--_digits, 2) * 1ch + var(--ray-space-6)); text-indent: calc((var(--_digits, 2) * 1ch + var(--ray-space-6)) * -1); }
+  :host([line-numbers][wrap]) .line { padding-inline-start: calc(var(--_digits, 2) * 1ch + var(--ray-space-6)); text-indent: calc((var(--_digits, 2) * 1ch + var(--ray-space-6)) * -1); }
   .line[data-highlight] { background: color-mix(in srgb, var(--ray-primary) 12%, transparent); border-inline-start-color: var(--ray-primary); }
   .line[data-diff="add"] { color: var(--ray-code-added); background: color-mix(in srgb, var(--ray-code-added) 12%, transparent); }
   .line[data-diff="remove"] { color: var(--ray-code-removed); background: color-mix(in srgb, var(--ray-code-removed) 12%, transparent); }
@@ -427,7 +429,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

@@ -172,7 +172,7 @@ const pickerStyles = css`
     height: calc(var(--_w) * 0.62);
     background:
       linear-gradient(to top, #000, transparent),
-      linear-gradient(to right, #fff, hsl(var(--_hue) 100% 50%));
+      linear-gradient(to right, #fff, hsl(var(--_hue) 100% 50%)); /* physical */
     border-radius: var(--ray-radius-sm);
     cursor: crosshair;
     touch-action: none;
@@ -180,7 +180,7 @@ const pickerStyles = css`
   :host([full-width]) .area { height: auto; aspect-ratio: 5 / 3; }
   .area-thumb {
     position: absolute;
-    left: var(--_s);
+    left: var(--_s); /* physical */
     top: calc(100% - var(--_v));
     width: var(--_thumb);
     height: var(--_thumb);
@@ -209,13 +209,13 @@ const pickerStyles = css`
     inset: 0 calc(var(--_thumb) / -2);
     border-radius: inherit;
   }
-  .hue::before { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
-  .alpha::before { background: linear-gradient(to right, transparent, var(--_solid)), ${CHECKER}; }
+  .hue::before { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } /* physical */
+  .alpha::before { background: linear-gradient(to right, transparent, var(--_solid)), ${CHECKER}; } /* physical */
   :host(:not([data-alpha])) .alpha { display: none; }
   .slider-thumb {
     position: absolute;
     top: 50%;
-    left: var(--_pos);
+    left: var(--_pos); /* physical */
     width: var(--_thumb);
     height: var(--_thumb);
     box-sizing: border-box;
@@ -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

@@ -30,7 +30,8 @@ const styles = css`
     max-width: 100%;
     height: calc(var(--_h) - 0.75rem);
     min-height: 1.375rem;
-    padding: 0 0.125rem 0 0.5rem;
+    padding-block: 0;
+    padding-inline: 0.5rem 0.125rem;
     font-size: calc(var(--_fs) - 0.0625rem);
     color: var(--ray-foreground);
     background: var(--ray-muted);
@@ -120,7 +121,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 +300,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 +365,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

@@ -110,7 +110,7 @@ const styles = css`
   .hint b {
     display: inline-block;
     min-width: 1.25rem;
-    margin-right: var(--ray-space-1);
+    margin-inline-end: var(--ray-space-1);
     padding: 0 0.3rem;
     font-family: var(--ray-font-mono);
     font-size: 0.6875rem;
@@ -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