@raylang/elements 0.6.0 → 0.8.0

package/components/separator/separator.js

@@ -18,7 +18,7 @@ const styles = css`
   :host([variant="dotted"]) { --_style: dotted; }
   :host([orientation="vertical"]) { display: inline-block; align-self: stretch; height: auto; min-height: 1em; vertical-align: middle; }
   .line { border-top: var(--_w) var(--_style) var(--_color); }
-  :host([orientation="vertical"]) .line { height: 100%; border-top: 0; border-left: var(--_w) var(--_style) var(--_color); }
+  :host([orientation="vertical"]) .line { height: 100%; border-top: 0; border-inline-start: var(--_w) var(--_style) var(--_color); }
   .labeled {
     display: flex;
     align-items: center;
@@ -27,8 +27,13 @@ const styles = css`
     color: var(--ray-muted-foreground);
   }
   .labeled::before, .labeled::after { content: ""; flex: 1; border-top: var(--_w) var(--_style) var(--_color); }
-  :host([label-position="left"]) .labeled::before { flex: 0 0 var(--ray-space-3); }
-  :host([label-position="right"]) .labeled::after { flex: 0 0 var(--ray-space-3); }
+  /* start/end follow the writing direction; left/right are sides of the screen. */
+  :host([label-position="start"]) .labeled::before,
+  :host([label-position="left"]) .labeled:dir(ltr)::before,
+  :host([label-position="right"]) .labeled:dir(rtl)::before,
+  :host([label-position="end"]) .labeled::after,
+  :host([label-position="right"]) .labeled:dir(ltr)::after,
+  :host([label-position="left"]) .labeled:dir(rtl)::after { flex: 0 0 var(--ray-space-3); }
   [hidden] { display: none !important; }
 `;
 

package/components/sidebar/sidebar.js

@@ -38,7 +38,11 @@ const styles = css`
     background: var(--ray-sidebar, color-mix(in srgb, var(--ray-muted) 70%, var(--ray-background)));
     border-inline-end: 1px solid var(--ray-border);
   }
-  :host([side="right"]) .panel { border-inline-end: 0; border-inline-start: 1px solid var(--ray-border); }
+  /* side: start/end follow the writing direction, left/right are sides of
+     the screen; the border faces the content. */
+  :host([side="end"]) .panel { border-inline-end: 0; border-inline-start: 1px solid var(--ray-border); }
+  :host([side="left"]) .panel { border: 0; border-right: 1px solid var(--ray-border); } /* physical */
+  :host([side="right"]) .panel { border: 0; border-left: 1px solid var(--ray-border); } /* physical */
   :host([variant="floating"]:not([data-mobile])) { padding: var(--ray-space-2); box-sizing: border-box; }
   :host([variant="floating"]) .panel { border: 1px solid var(--ray-border); border-radius: var(--ray-radius-lg); box-shadow: var(--ray-shadow-sm); }
   .header, .footer { flex: none; padding: var(--ray-space-2); }
@@ -49,7 +53,8 @@ const styles = css`
   dialog {
     --_from: -100%;
     position: fixed;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     box-sizing: border-box;
     width: min(var(--_w), calc(100vw - 3rem));
     max-width: none;
@@ -61,11 +66,14 @@ const styles = css`
     background: transparent;
     overflow: visible;
   }
-  :host([side="right"]) dialog { inset: 0 0 0 auto; }
+  dialog:dir(rtl) { --_from: 100%; }
+  :host([side="end"]) dialog { inset-inline: auto 0; --_from: 100%; }
+  :host([side="end"]) dialog:dir(rtl) { --_from: -100%; }
+  :host([side="left"]) dialog { inset: 0 auto 0 0; --_from: -100%; } /* physical */
+  :host([side="right"]) dialog { inset: 0 0 0 auto; --_from: 100%; } /* physical */
   dialog[open] { display: block; animation: ray-sidebar-in var(--ray-duration-slow) var(--ray-easing-out); }
   dialog .panel { box-shadow: var(--ray-shadow-xl); background: var(--ray-card); }
   @keyframes ray-sidebar-in { from { transform: translateX(var(--_from)); } }
-  :host([side="right"]) dialog { --_from: 100%; }
   dialog::backdrop { animation: ray-fade-in var(--ray-duration-base) var(--ray-easing-out); }
   @keyframes ray-fade-in { from { opacity: 0; } }
 `;
@@ -74,7 +82,7 @@ export class RaySidebar extends RayElement {
   static properties = {
     collapsed: { type: Boolean, reflect: true },
     open: { type: Boolean, reflect: true },
-    side: { type: String, reflect: true, default: "left" },
+    side: { type: String, reflect: true, default: "start" },
     variant: { type: String, reflect: true, default: "sidebar" },
     width: { type: String },
     collapsedWidth: { type: String },
@@ -193,7 +201,7 @@ export class RaySidebar extends RayElement {
   }
 
   async _leave() {
-    const to = this.side === "right" ? "translateX(100%)" : "translateX(-100%)";
+    const to = `translateX(${getComputedStyle(this.dialog).getPropertyValue("--_from").trim() || "-100%"})`;
     const exit = playAll([
       play(this.dialog, [{ transform: "none" }, { transform: to }]),
       play(this.dialog, [{ opacity: 1 }, { opacity: 0 }], { pseudoElement: "::backdrop" }),

package/components/slider/slider.js

@@ -33,9 +33,11 @@ const styles = css`
   input::-webkit-slider-runnable-track {
     height: var(--_track);
     border-radius: var(--ray-radius-full);
-    background: linear-gradient(to right, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct));
+    background: linear-gradient(to right, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct)); /* physical */
     box-shadow: inset 0 0 0 1px var(--ray-border);
   }
+  /* Right to left the native range runs from the right: so does its fill. */
+  input:dir(rtl)::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct)); } /* physical */
   input::-moz-range-track { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--ray-muted); }
   input::-moz-range-progress { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--_filled); }
   input::-webkit-slider-thumb {
@@ -62,6 +64,7 @@ const styles = css`
   .marks { position: relative; height: 1.25rem; margin: var(--ray-space-1) calc(var(--_thumb) / 2) 0; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
   .marks:empty { display: none; }
   .mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+  .mark:dir(rtl) { transform: translateX(50%); }
   .mark::before { content: ""; display: block; width: 1px; height: 0.25rem; margin: 0 auto 0.125rem; background: var(--ray-border); }
 `;
 
@@ -137,7 +140,7 @@ export class RaySlider extends FieldControl {
       const v = typeof m === "number" ? m : m.value;
       const span = document.createElement("span");
       span.className = "mark";
-      span.style.left = `${((v - min) / (max - min || 1)) * 100}%`;
+      span.style.insetInlineStart = `${((v - min) / (max - min || 1)) * 100}%`;
       span.textContent = typeof m === "number" ? String(m) : (m.label ?? String(m.value));
       box.append(span);
     }

package/components/split/split.js

@@ -7,6 +7,7 @@
 // pane. With `autosave="key"` the size survives reloads (localStorage).
 
 import { RayElement, css, define } from "../../core/core.js";
+import { isRtl, inlineKey } from "../../core/direction.js";
 
 const styles = css`
   :host {
@@ -34,13 +35,13 @@ const styles = css`
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 50%;
+    left: 50%; /* physical */
     width: 1px;
     background: var(--ray-border);
     transform: translateX(-50%);
     transition: background-color var(--ray-duration-fast) var(--ray-easing-standard), width var(--ray-duration-fast) var(--ray-easing-standard);
   }
-  :host([orientation="vertical"]) .divider::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); }
+  :host([orientation="vertical"]) .divider::before { top: 50%; bottom: auto; inset-inline: 0; width: auto; height: 1px; transform: translateY(-50%); }
   :host(:not([disabled])) .divider:hover::before,
   .divider:focus-visible::before,
   :host([data-dragging]) .divider::before { width: 3px; background: var(--ray-primary); }
@@ -182,13 +183,16 @@ export class RaySplit extends RayElement {
     this.setAttribute("data-dragging", "");
     const rect = this.getBoundingClientRect();
     const vertical = this._vertical();
-    const move = (ev) => this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, false);
+    // The start pane's size: right to left it is on the right.
+    const rtl = !vertical && isRtl(this);
+    const at = (ev) => (vertical ? ev.clientY - rect.top : rtl ? rect.right - ev.clientX : ev.clientX - rect.left);
+    const move = (ev) => this._resizeTo(at(ev), false);
     const up = (ev) => {
       this.divider.removeEventListener("pointermove", move);
       this.divider.removeEventListener("pointerup", up);
       this.divider.removeEventListener("pointercancel", up);
       this.removeAttribute("data-dragging");
-      this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, true);
+      this._resizeTo(at(ev), true);
     };
     this.divider.addEventListener("pointermove", move);
     this.divider.addEventListener("pointerup", up);
@@ -202,9 +206,11 @@ export class RaySplit extends RayElement {
     const current = this.collapsed ? 0 : this.size;
     const less = vertical ? "ArrowUp" : "ArrowLeft";
     const more = vertical ? "ArrowDown" : "ArrowRight";
+    // Right to left, ArrowLeft moves the divider away from the start pane.
+    const key = vertical ? e.key : inlineKey(e.key, this);
     let next = null;
-    if (e.key === less) next = current - step;
-    else if (e.key === more) next = current + step;
+    if (key === less) next = current - step;
+    else if (key === more) next = current + step;
     else if (e.key === "Home") next = this.min ?? 0;
     else if (e.key === "End") next = this.max ?? this._total();
     else if (e.key === "Enter") {

package/components/stat/stat.js

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

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

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

package/components/stepper/stepper.js

@@ -30,7 +30,7 @@ const stepperStyles = css`
     padding: 0;
     font: inherit;
     color: inherit;
-    text-align: left;
+    text-align: start;
     background: none;
     border: 0;
     border-radius: var(--ray-radius-md);
@@ -58,7 +58,7 @@ const stepperStyles = css`
   .step[data-state="active"] .indicator { color: var(--_light-color); background: var(--ray-background); border-color: var(--_filled); }
   .step[data-state="done"] .indicator { color: var(--_contrast); background: var(--_filled); border-color: var(--_filled); }
   .step[data-error] .indicator { color: #fff; background: var(--ray-red-filled); border-color: var(--ray-red-filled); }
-  .spinner { width: 50%; height: 50%; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ray-step-spin 0.8s linear infinite; }
+  .spinner { width: 50%; height: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ray-step-spin 0.8s linear infinite; }
   @keyframes ray-step-spin { to { rotate: 1turn; } }
   .text { display: grid; min-width: 0; }
   .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ray-font-size-sm); font-weight: var(--ray-font-weight-medium); }
@@ -69,7 +69,7 @@ const stepperStyles = css`
   .connector { flex: 1; min-width: var(--ray-space-4); height: 2px; border-radius: 1px; background: var(--ray-border); transition: background-color var(--ray-duration-base); }
   .step[data-state="done"] .connector { background: var(--_filled); }
   .step:last-child .connector { display: none; }
-  :host([orientation="vertical"]) .connector { flex: none; width: 2px; min-width: 0; height: auto; min-height: var(--ray-space-6); margin: var(--ray-space-1) 0 var(--ray-space-1) calc(var(--_icon) / 2 - 1px); }
+  :host([orientation="vertical"]) .connector { flex: none; width: 2px; min-width: 0; height: auto; min-height: var(--ray-space-6); margin-block: var(--ray-space-1); margin-inline-start: calc(var(--_icon) / 2 - 1px); }
   /* Narrow (labels-below or a narrow stepper): the labels under the numbers. */
   :host([icon-position="top"]) .step { align-items: flex-start; }
   :host([icon-position="top"]) .head { flex-direction: column; align-items: center; text-align: center; gap: var(--ray-space-1); }
@@ -91,7 +91,7 @@ export class RayStepper extends RayElement {
   static properties = {
     active: { type: Number, reflect: true, default: 0 },
     orientation: { type: String, reflect: true, default: "horizontal" },
-    iconPosition: { type: String, reflect: true, attribute: "icon-position", default: "left" },
+    iconPosition: { type: String, reflect: true, attribute: "icon-position", default: "start" },
     allowStepSelect: { type: Boolean, reflect: true, attribute: "allow-step-select" },
     linear: { type: Boolean, default: true },
     size: { type: String, reflect: true, default: "md" },
@@ -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/switch/switch.js

@@ -18,7 +18,7 @@ const styles = css`
   .thumb {
     position: absolute;
     top: 50%;
-    left: 2px;
+    inset-inline-start: 2px;
     width: calc(var(--_s) - 6px);
     height: calc(var(--_s) - 6px);
     background: var(--ray-white);
@@ -26,12 +26,12 @@ const styles = css`
     border-radius: var(--_r);
     box-shadow: var(--ray-shadow-xs);
     transform: translateY(-50%);
-    transition: left var(--ray-duration-base) var(--ray-easing-standard);
+    transition: inset-inline-start var(--ray-duration-base) var(--ray-easing-standard);
   }
   .control:checked + .indicator { background: var(--_filled); border-color: var(--_filled); }
   /* The thumb takes the text color of the filled shade: white on dark fills,
      black on light ones (yellow, or "dark" in the dark scheme). */
-  .control:checked + .indicator .thumb { left: calc(100% - var(--_s) + 4px); border-color: transparent; background: var(--_contrast); }
+  .control:checked + .indicator .thumb { inset-inline-start: calc(100% - var(--_s) + 4px); border-color: transparent; background: var(--_contrast); }
   /* Disabled: a muted track (gray when on, like a disabled checkbox) and a
      plain thumb that stays visible on it, on its side. */
   .control:disabled + .indicator .thumb { background: var(--ray-background); border-color: var(--ray-border); box-shadow: none; }

package/components/table/table.js

@@ -27,14 +27,14 @@ const styles = css`
   .scroll { max-height: var(--ray-table-max-height, none); overflow: auto; }
   :host([with-border]) .scroll { border: 1px solid var(--ray-border); border-radius: var(--ray-radius-default); }
   table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
-  caption { padding: var(--_py) var(--_px); text-align: left; font-weight: var(--ray-font-weight-semibold); }
-  th, td { padding: var(--_py) var(--_px); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ray-border); }
-  :host([with-column-borders]) th + th, :host([with-column-borders]) td + td { border-left: 1px solid var(--ray-border); }
+  caption { padding: var(--_py) var(--_px); text-align: start; font-weight: var(--ray-font-weight-semibold); }
+  th, td { padding: var(--_py) var(--_px); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--ray-border); }
+  :host([with-column-borders]) th + th, :host([with-column-borders]) td + td { border-inline-start: 1px solid var(--ray-border); }
   tbody tr:last-child td { border-bottom: 0; }
   :host(:not([with-border])) tbody tr:last-child td { border-bottom: 1px solid var(--ray-border); }
   th { font-size: var(--ray-font-size-xs); font-weight: var(--ray-font-weight-semibold); color: var(--ray-muted-foreground); white-space: nowrap; background: var(--ray-background); }
   :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--ray-border); }
-  [data-align="right"] { text-align: right; }
+  [data-align="right"] { text-align: right; } /* physical */
   [data-align="center"] { text-align: center; }
   :host([striped]) tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ray-muted) 60%, transparent); }
   tbody tr:hover td { background: var(--ray-default-hover); }
@@ -61,13 +61,13 @@ const styles = css`
   th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--ray-foreground); }
   th[aria-sort="ascending"] .sort svg, th[aria-sort="descending"] .sort svg { opacity: 1; }
   th[aria-sort="descending"] .sort svg { transform: rotate(180deg); }
-  .check { width: 1%; padding-right: 0; }
+  .check { width: 1%; padding-inline-end: 0; }
   .check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ray-primary); cursor: pointer; vertical-align: middle; }
   .empty td { padding: var(--ray-space-8) var(--_px); text-align: center; color: var(--ray-muted-foreground); }
   .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/tabs/tabs.js

@@ -5,6 +5,7 @@
 // panel share a `value`.
 
 import { RayElement, css, define, uid } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { applyColor } from "../../core/styles.js";
 
 const tabsStyles = css`
@@ -24,9 +25,9 @@ const tabsStyles = css`
   }
   .list::-webkit-scrollbar { display: none; }
   .list ::slotted(ray-tab) { flex: none; }
-  :host([orientation="vertical"]) .list { flex-direction: column; overflow-x: visible; box-shadow: none; border-right: 2px solid var(--ray-border); }
+  :host([orientation="vertical"]) .list { flex-direction: column; overflow-x: visible; box-shadow: none; border-inline-end: 2px solid var(--ray-border); }
   :host([variant="outline"]) .list { --_line: 1px; }
-  :host([variant="outline"][orientation="vertical"]) .list { border-right-width: 1px; }
+  :host([variant="outline"][orientation="vertical"]) .list { border-inline-end-width: 1px; }
   :host([variant="pills"]) .list { gap: var(--ray-space-1); border: 0; box-shadow: none; }
   :host([grow]) .list ::slotted(ray-tab) { flex: 1 0 auto; }
   .panels { flex: 1; min-width: 0; padding-top: var(--ray-space-3); }
@@ -114,9 +115,11 @@ export class RayTabs extends RayElement {
     const vertical = this.orientation === "vertical";
     const next = vertical ? "ArrowDown" : "ArrowRight";
     const prev = vertical ? "ArrowUp" : "ArrowLeft";
+    // Right to left, ArrowLeft is the next tab.
+    const key = vertical ? e.key : inlineKey(e.key, this);
     let target = null;
-    if (e.key === next) target = tabs[(i + 1) % tabs.length];
-    else if (e.key === prev) target = tabs[(i - 1 + tabs.length) % tabs.length];
+    if (key === next) target = tabs[(i + 1) % tabs.length];
+    else if (key === prev) target = tabs[(i - 1 + tabs.length) % tabs.length];
     else if (e.key === "Home") target = tabs[0];
     else if (e.key === "End") target = tabs[tabs.length - 1];
     else if ((e.key === "Enter" || e.key === " ") && this.activation === "manual") {
@@ -157,14 +160,14 @@ const tabStyles = css`
   :host([data-variant="default"]) { border-bottom: 2px solid transparent; }
   :host([data-variant="default"]:hover:not([data-active])) { border-bottom-color: var(--ray-border); background: var(--ray-muted); }
   :host([data-variant="default"][data-active]) { border-bottom-color: var(--_filled, var(--ray-primary)); }
-  :host([data-variant="default"][data-vertical]) { margin: 0 -2px 0 0; justify-content: flex-start; border-bottom: 0; border-right: 2px solid transparent; }
-  :host([data-variant="default"][data-vertical][data-active]) { border-right-color: var(--_filled, var(--ray-primary)); }
+  :host([data-variant="default"][data-vertical]) { margin: 0; margin-inline-end: -2px; justify-content: flex-start; border-bottom: 0; border-inline-end: 2px solid transparent; }
+  :host([data-variant="default"][data-vertical][data-active]) { border-inline-end-color: var(--_filled, var(--ray-primary)); }
 
   /* outline */
   :host([data-variant="outline"]) { border: 1px solid transparent; border-radius: var(--ray-radius-default) var(--ray-radius-default) 0 0; }
   :host([data-variant="outline"][data-active]) { border-color: var(--ray-border); border-bottom-color: var(--ray-background); background: var(--ray-background); }
-  :host([data-variant="outline"][data-vertical]) { margin: 0 -1px 0 0; justify-content: flex-start; border-radius: var(--ray-radius-default) 0 0 var(--ray-radius-default); }
-  :host([data-variant="outline"][data-vertical][data-active]) { border-bottom-color: var(--ray-border); border-right-color: var(--ray-background); }
+  :host([data-variant="outline"][data-vertical]) { margin: 0; margin-inline-end: -1px; justify-content: flex-start; border-radius: 0; border-start-start-radius: var(--ray-radius-default); border-end-start-radius: var(--ray-radius-default); }
+  :host([data-variant="outline"][data-vertical][data-active]) { border-bottom-color: var(--ray-border); border-inline-end-color: var(--ray-background); }
 
   /* pills */
   :host([data-variant="pills"]) { border-radius: var(--ray-radius-default); }

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/components/timeline/timeline.js

@@ -22,9 +22,14 @@ const itemStyles = css`
   }
   :host([hidden]) { display: none; }
   :host([data-last]) { padding-bottom: 0; }
-  :host([data-align="right"]) { grid-template-columns: minmax(0, 1fr) var(--_bullet); text-align: right; }
-  :host([data-align="right"]) .bullet-col { grid-column: 2; grid-row: 1; }
-  :host([data-align="right"]) .body { grid-column: 1; grid-row: 1; }
+  /* The line at the end: end, or left/right as sides of the screen (the
+     grid's columns follow the writing direction). */
+  :host([data-align="end"]), :host([data-align="right"]:dir(ltr)), :host([data-align="left"]:dir(rtl)) {
+    grid-template-columns: minmax(0, 1fr) var(--_bullet);
+    text-align: end;
+  }
+  :host([data-align="end"]) .bullet-col, :host([data-align="right"]:dir(ltr)) .bullet-col, :host([data-align="left"]:dir(rtl)) .bullet-col { grid-column: 2; grid-row: 1; }
+  :host([data-align="end"]) .body, :host([data-align="right"]:dir(ltr)) .body, :host([data-align="left"]:dir(rtl)) .body { grid-column: 1; grid-row: 1; }
   .bullet-col { position: relative; display: flex; justify-content: center; }
   .bullet {
     position: relative;
@@ -47,12 +52,12 @@ const itemStyles = css`
     position: absolute;
     top: var(--_bullet);
     bottom: calc(-1 * var(--ray-space-6));
-    left: calc(50% - var(--_line) / 2);
+    left: calc(50% - var(--_line) / 2); /* physical */
     width: 0;
-    border-left: var(--_line) var(--_line-style, solid) var(--ray-border);
+    border-left: var(--_line) var(--_line-style, solid) var(--ray-border); /* physical */
   }
   :host([data-last]) .line { display: none; }
-  :host([data-line-reached]) .line { border-left-color: var(--_filled); }
+  :host([data-line-reached]) .line { border-left-color: var(--_filled); } /* physical */
   :host([line-variant="dashed"]) .line { --_line-style: dashed; }
   :host([line-variant="dotted"]) .line { --_line-style: dotted; }
   .body { min-width: 0; padding-top: calc((var(--_bullet) - 1.4em) / 2); }
@@ -67,7 +72,7 @@ const itemStyles = css`
 export class RayTimeline extends RayElement {
   static properties = {
     active: { type: Number, reflect: true, default: -1 },
-    align: { type: String, reflect: true, default: "left" },
+    align: { type: String, reflect: true, default: "start" },
     bulletSize: { type: String, attribute: "bullet-size" },
     lineWidth: { type: Number, attribute: "line-width" },
     color: { type: String, reflect: true },
@@ -106,7 +111,7 @@ export class RayTimeline extends RayElement {
       item.toggleAttribute("data-reached", active >= 0 && k <= active);
       item.toggleAttribute("data-line-reached", active >= 0 && (this.reverseActive ? k <= active && k > 0 : k < active));
       item.toggleAttribute("data-last", i === n - 1);
-      item.setAttribute("data-align", this.align === "right" ? "right" : "left");
+      item.setAttribute("data-align", ["end", "left", "right"].includes(this.align) ? this.align : "start");
     });
   }
 }

package/components/toggle-group/toggle-group.js

@@ -13,6 +13,7 @@
 //   </ray-toggle-group>
 
 import { css, define } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { RayButtonGroup } from "../button-group/button-group.js";
 import "../toggle/toggle.js";
 
@@ -113,14 +114,15 @@ export class RayToggleGroup extends RayButtonGroup {
     const vertical = this.orientation === "vertical";
     const next = vertical ? "ArrowDown" : "ArrowRight";
     const prev = vertical ? "ArrowUp" : "ArrowLeft";
-    if (![next, prev, "Home", "End"].includes(e.key)) return;
+    const key = vertical ? e.key : inlineKey(e.key, this);
+    if (![next, prev, "Home", "End"].includes(key)) return;
     const items = this.toggles.filter((t) => !t.disabled);
     if (items.length === 0) return;
     const current = items.findIndex((t) => t.matches(":focus-within"));
     let i = current;
-    if (e.key === "Home") i = 0;
-    else if (e.key === "End") i = items.length - 1;
-    else if (e.key === next) i = (current + 1) % items.length;
+    if (key === "Home") i = 0;
+    else if (key === "End") i = items.length - 1;
+    else if (key === next) i = (current + 1) % items.length;
     else i = (current - 1 + items.length) % items.length;
     e.preventDefault();
     this.#rove(items[i]);

package/core/core.js

@@ -2,10 +2,10 @@
 // the theme API. No dependencies; loads as a plain ES module (also from
 // ray://app in a std/ui window).
 
-import { getIcon, onIconsChange } from "./icons.js";
+import { getIcon, mirrorsInRtl, 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";
 
@@ -59,6 +59,8 @@ export const hostStyles = css`
     height: var(--ray-icon-size, 1em);
     stroke-width: var(--ray-icon-stroke, 2);
   }
+  /* Right to left, the roles that point along the text. */
+  :where([data-ray-icon-mirror]):dir(rtl) > svg { transform: scaleX(-1); }
   .focus-ring:focus-visible {
     outline: var(--ray-focus-ring-width) solid var(--ray-ring);
     outline-offset: var(--ray-focus-ring-offset);
@@ -313,12 +315,16 @@ 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).
+   * A role that points along the text (ui.next…) gets data-ray-icon-mirror,
+   * which mirrors it under dir="rtl".
    */
   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") }) : "";
+      slot.toggleAttribute("data-ray-icon-mirror", mirrorsInRtl(name));
     }
   }
 }

package/core/direction.js

@@ -0,0 +1,19 @@
+// The writing direction, for what CSS does not mirror by itself: arrow keys
+// and pointer or scroll coordinates. Read when used (not cached), so a
+// change of dir takes effect at once.
+
+/** Whether `el` lays out right to left (dir="rtl" on it or an ancestor). */
+export function isRtl(el) {
+  return getComputedStyle(el).direction === "rtl";
+}
+
+/**
+ * An arrow key as the reading direction sees it. Right to left, ArrowLeft
+ * moves forward, so it comes back as "ArrowRight", and ArrowRight as
+ * "ArrowLeft"; any other key as it is.
+ *   if (inlineKey(e.key, this) === "ArrowRight") this.next();
+ */
+export function inlineKey(key, el) {
+  if ((key === "ArrowLeft" || key === "ArrowRight") && isRtl(el)) return key === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+  return key;
+}