@raylang/elements 0.7.0 → 0.8.0

package/components/progress/progress.js

@@ -42,7 +42,7 @@ const styles = css`
   .value {
     flex: none;
     min-width: 2.75em;
-    text-align: right;
+    text-align: end;
     font-size: var(--ray-font-size-xs);
     font-variant-numeric: tabular-nums;
     color: var(--ray-muted-foreground);
@@ -59,7 +59,7 @@ const styles = css`
     width: 40%;
     animation: ray-indeterminate 1.4s var(--ray-easing-standard) infinite;
   }
-  @keyframes ray-indeterminate { from { left: -40%; } to { left: 100%; } }
+  @keyframes ray-indeterminate { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
 `;
 
 export class RayProgress extends RayElement {

package/components/radio/radio.js

@@ -8,6 +8,7 @@
 // plans, presets, shipping methods. Both can share a group.
 
 import { RayElement, css, define } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { applyColor, sizeStyles } from "../../core/styles.js";
 import { FormControl, fieldStyles } from "../../core/form.js";
 
@@ -136,9 +137,10 @@ export class RayRadioGroup extends FormControl {
     const radios = this.radios.filter((r) => !r.disabled);
     const i = radios.indexOf(e.target.closest?.(RADIOS));
     if (i < 0) return;
+    const key = inlineKey(e.key, this);
     let next = null;
-    if (e.key === "ArrowDown" || e.key === "ArrowRight") next = radios[(i + 1) % radios.length];
-    else if (e.key === "ArrowUp" || e.key === "ArrowLeft") next = radios[(i - 1 + radios.length) % radios.length];
+    if (key === "ArrowDown" || key === "ArrowRight") next = radios[(i + 1) % radios.length];
+    else if (key === "ArrowUp" || key === "ArrowLeft") next = radios[(i - 1 + radios.length) % radios.length];
     else if (e.key === " ") next = radios[i];
     if (!next) return;
     e.preventDefault();

package/components/scroll-area/scroll-area.js

@@ -7,6 +7,7 @@
 // Give it a size: height / max-height (or CSS, or a flex/grid parent).
 
 import { RayElement, css, define } from "../../core/core.js";
+import { isRtl } from "../../core/direction.js";
 
 const styles = css`
   :host {
@@ -47,12 +48,14 @@ const styles = css`
     transition: opacity var(--ray-duration-fast);
   }
   .edge[data-show] { opacity: 1; }
-  .top, .bottom { left: 0; right: 0; height: 0.75rem; }
-  .left, .right { top: 0; bottom: 0; width: 0.75rem; }
+  .top, .bottom { inset-inline: 0; height: 0.75rem; }
+  .start, .end { top: 0; bottom: 0; width: 0.75rem; }
   .top { top: 0; background: linear-gradient(var(--_shadow), transparent); }
   .bottom { bottom: 0; background: linear-gradient(transparent, var(--_shadow)); }
-  .left { left: 0; background: linear-gradient(to right, var(--_shadow), transparent); }
-  .right { right: 0; background: linear-gradient(to left, var(--_shadow), transparent); }
+  .start { inset-inline-start: 0; background: linear-gradient(to right, var(--_shadow), transparent); } /* physical */
+  .end { inset-inline-end: 0; background: linear-gradient(to left, var(--_shadow), transparent); } /* physical */
+  .start:dir(rtl) { background: linear-gradient(to left, var(--_shadow), transparent); } /* physical */
+  .end:dir(rtl) { background: linear-gradient(to right, var(--_shadow), transparent); } /* physical */
   :host([no-shadows]) .edge { display: none; }
 `;
 
@@ -70,7 +73,7 @@ export class RayScrollArea extends RayElement {
   static template = `
     <div class="viewport" part="viewport" tabindex="0"><slot></slot></div>
     <span class="edge top" part="shadow"></span><span class="edge bottom" part="shadow"></span>
-    <span class="edge left" part="shadow"></span><span class="edge right" part="shadow"></span>`;
+    <span class="edge start" part="shadow"></span><span class="edge end" part="shadow"></span>`;
 
   #ro = null;
   #atEnd = false;
@@ -115,15 +118,15 @@ export class RayScrollArea extends RayElement {
     this._edges();
   }
 
-  /** Scrolls to the start (top/left). */
+  /** Scrolls to the start (the top, or the left; the right right to left). */
   scrollToStart({ behavior = "smooth" } = {}) {
     this.viewport.scrollTo({ top: 0, left: 0, behavior });
   }
 
-  /** Scrolls to the end (bottom, or right when horizontal). */
+  /** Scrolls to the end (the bottom, or the right when horizontal; the left right to left). */
   scrollToEnd({ behavior = "smooth" } = {}) {
     const v = this.viewport;
-    if (this.orientation === "horizontal") v.scrollTo({ left: v.scrollWidth, behavior });
+    if (this.orientation === "horizontal") v.scrollTo({ left: isRtl(this) ? -v.scrollWidth : v.scrollWidth, behavior });
     else v.scrollTo({ top: v.scrollHeight, behavior });
   }
 
@@ -144,13 +147,13 @@ export class RayScrollArea extends RayElement {
     const x = Math.abs(v.scrollLeft);
     show("top", v.scrollTop > 1);
     show("bottom", maxY > 1 && v.scrollTop < maxY - 1);
-    show("left", x > 1);
-    show("right", maxX > 1 && x < maxX - 1);
+    show("start", x > 1);
+    show("end", maxX > 1 && x < maxX - 1);
     const horizontal = this.orientation === "horizontal";
     const left = horizontal ? maxX - x : maxY - v.scrollTop;
     const scrollable = horizontal ? maxX > 1 : maxY > 1;
     const atEnd = scrollable && left <= (this.threshold ?? 48);
-    if (atEnd && !this.#atEnd) this.emit("ray-reach-end", { edge: horizontal ? "right" : "bottom" });
+    if (atEnd && !this.#atEnd) this.emit("ray-reach-end", { edge: !horizontal ? "bottom" : isRtl(this) ? "left" : "right" });
     this.#atEnd = atEnd;
   }
 }

package/components/search/search.js

@@ -14,14 +14,14 @@ const styles = css`
   :host(:not([variant])) .box { background: var(--ray-muted); border-color: transparent; }
   .lead {
     display: inline-flex;
-    padding-left: calc(var(--_px) * 0.66);
+    padding-inline-start: calc(var(--_px) * 0.66);
     color: var(--ray-muted-foreground);
     pointer-events: none;
   }
   .lead svg { width: 1.1em; height: 1.1em; }
-  .control { padding-left: calc(var(--_px) * 0.5); }
+  .control { padding-inline-start: calc(var(--_px) * 0.5); }
   .control::-webkit-search-cancel-button, .control::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
-  .tail { display: inline-flex; align-items: center; gap: var(--ray-space-1); padding-right: calc(var(--_px) * 0.4); }
+  .tail { display: inline-flex; align-items: center; gap: var(--ray-space-1); padding-inline-end: calc(var(--_px) * 0.4); }
   .clear {
     display: inline-flex;
     align-items: center;

package/components/segmented-control/segmented-control.js

@@ -3,6 +3,7 @@
 // <option> elements or the `data` property. Form-associated.
 
 import { css, define } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { applyColor, sizeStyles, radiusStyles } from "../../core/styles.js";
 import { FormControl } from "../../core/form.js";
 
@@ -22,7 +23,7 @@ const styles = css`
   .indicator {
     position: absolute;
     top: 0;
-    left: 0;
+    left: 0; /* physical */
     z-index: 0;
     box-sizing: border-box;
     background: var(--ray-raised);
@@ -170,9 +171,10 @@ export class RaySegmentedControl extends FormControl {
   _key(e) {
     const enabled = this._buttons.filter((b) => !b.disabled);
     const i = enabled.findIndex((b) => b.dataset.value === this.value);
+    const key = inlineKey(e.key, this);
     let next = null;
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = enabled[(i + 1) % enabled.length];
-    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = enabled[(i - 1 + enabled.length) % enabled.length];
+    if (key === "ArrowRight" || key === "ArrowDown") next = enabled[(i + 1) % enabled.length];
+    else if (key === "ArrowLeft" || key === "ArrowUp") next = enabled[(i - 1 + enabled.length) % enabled.length];
     if (!next) return;
     e.preventDefault();
     this._choose(next.dataset.value, true);

package/components/select/select.js

@@ -30,8 +30,8 @@ const styles = css`
     align-items: center;
     width: 100%;
     min-width: 0;
-    padding-right: calc(var(--_h) * 0.8);
-    text-align: left;
+    padding-inline-end: calc(var(--_h) * 0.8);
+    text-align: start;
     color: inherit;
     background: transparent;
     border: 0;
@@ -43,7 +43,7 @@ const styles = css`
   .trigger[data-placeholder] .value { color: var(--ray-muted-foreground); }
   .chevron {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;

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/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" },

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,7 +61,7 @@ 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; }

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/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,7 +2,7 @@
 // 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, iconAliases } from "./icons.js";
@@ -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);
@@ -315,11 +317,14 @@ export class RayElement extends HTMLElement {
    * 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;
    * 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, { 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;
+}