@raylang/elements 0.7.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/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); }

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;

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;

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;

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; }
@@ -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();
@@ -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,7 +103,7 @@ 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="ui.checked"></span><span class="dash" data-ray-icon="ui.indeterminate"></span></span>`);

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

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;

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);

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;

package/components/date-picker/date-picker.js

@@ -12,6 +12,7 @@
 // arithmetic), so no time zone shifts a day.
 
 import { RayElement, css, define } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
 import { sizeStyles, radiusStyles } from "../../core/styles.js";
 import { place, autoUpdate } from "../../core/position.js";
 import { dismissable } from "../../core/dismiss.js";
@@ -268,7 +269,8 @@ export class RayCalendar extends RayElement {
     const d = this._focusDate();
     const first = this.firstDay ?? firstDayOf(localeOf(this));
     let next = null;
-    switch (e.key) {
+    // The grid follows the writing direction: right to left, ArrowLeft is the next day.
+    switch (inlineKey(e.key, this)) {
       case "ArrowLeft": next = addDays(d, -1); break;
       case "ArrowRight": next = addDays(d, 1); break;
       case "ArrowUp": next = addDays(d, -7); break;
@@ -321,7 +323,7 @@ const pickerStyles = css`
     gap: var(--ray-space-2);
     width: 100%;
     min-width: 0;
-    text-align: left;
+    text-align: start;
     color: inherit;
     background: transparent;
     border: 0;
@@ -340,7 +342,7 @@ const pickerStyles = css`
     justify-content: center;
     width: calc(var(--_h) * 0.6);
     height: calc(var(--_h) * 0.6);
-    margin-right: calc(var(--_px) * 0.4);
+    margin-inline-end: calc(var(--_px) * 0.4);
     padding: 0;
     color: var(--ray-muted-foreground);
     background: transparent;

package/components/dialog/dialog.js

@@ -66,7 +66,7 @@ const styles = css`
     justify-content: center;
     width: var(--ray-control-height-xs);
     height: var(--ray-control-height-xs);
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0;
     color: var(--ray-muted-foreground);
     background: transparent;

package/components/drawer/drawer.js

@@ -32,24 +32,41 @@ const styles = css`
   dialog[open] { display: flex; flex-direction: column; }
   dialog::backdrop { animation: ray-fade-in var(--ray-duration-base) var(--ray-easing-out); }
 
-  :host(:not([position])) dialog, :host([position="right"]) dialog {
-    inset: var(--_inset) var(--_inset) var(--_inset) auto;
+  /* position: start/end follow the writing direction, left/right are sides
+     of the screen. */
+  dialog {
+    inset-block: var(--_inset);
+    inset-inline: auto var(--_inset);
     width: min(var(--_size), calc(100vw - 2 * var(--_inset)));
     height: calc(100dvh - 2 * var(--_inset));
-    border-left-width: 1px;
+    border-inline-start-width: 1px;
+    --_from: translateX(100%);
+  }
+  dialog:dir(rtl) { --_from: translateX(-100%); }
+  :host([position="start"]) dialog {
+    inset-inline: var(--_inset) auto;
+    border-inline-start-width: 0;
+    border-inline-end-width: 1px;
+    --_from: translateX(-100%);
+  }
+  :host([position="start"]) dialog:dir(rtl) { --_from: translateX(100%); }
+  :host([position="right"]) dialog {
+    inset: var(--_inset) var(--_inset) var(--_inset) auto; /* physical */
+    border-width: 0;
+    border-left-width: 1px; /* physical */
     --_from: translateX(100%);
   }
   :host([position="left"]) dialog {
-    inset: var(--_inset) auto var(--_inset) var(--_inset);
-    width: min(var(--_size), calc(100vw - 2 * var(--_inset)));
-    height: calc(100dvh - 2 * var(--_inset));
-    border-right-width: 1px;
+    inset: var(--_inset) auto var(--_inset) var(--_inset); /* physical */
+    border-width: 0;
+    border-right-width: 1px; /* physical */
     --_from: translateX(-100%);
   }
   :host([position="top"]) dialog {
     inset: var(--_inset) var(--_inset) auto var(--_inset);
     width: calc(100vw - 2 * var(--_inset));
     height: min(var(--_size), calc(100dvh - 2 * var(--_inset)));
+    border-width: 0;
     border-bottom-width: 1px;
     --_from: translateY(-100%);
   }
@@ -57,6 +74,7 @@ const styles = css`
     inset: auto var(--_inset) var(--_inset) var(--_inset);
     width: calc(100vw - 2 * var(--_inset));
     height: min(var(--_size), calc(100dvh - 2 * var(--_inset)));
+    border-width: 0;
     border-top-width: 1px;
     --_from: translateY(100%);
   }
@@ -83,7 +101,7 @@ const styles = css`
     justify-content: center;
     width: var(--ray-control-height-xs);
     height: var(--ray-control-height-xs);
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0;
     color: var(--ray-muted-foreground);
     background: transparent;
@@ -101,7 +119,7 @@ const styles = css`
 export class RayDrawer extends RayDialog {
   static properties = {
     ...RayDialog.properties,
-    position: { type: String, reflect: true, default: "right" },
+    position: { type: String, reflect: true, default: "end" },
     size: { type: String, reflect: true, default: "md" },
     modeless: { type: Boolean, reflect: true },
     floating: { type: Boolean, reflect: true },

package/components/icon/icon.js

@@ -1,7 +1,8 @@
 // <ray-icon name="…">: an icon of the registry (setIcons), so the app's own
 // markup uses the same set as the components. Decorative unless `label`.
 // `filled` draws the icon's filled version (a state: active, selected,
-// favorite), or the outline one when it has none.
+// favorite), or the outline one when it has none. `mirror` mirrors it right
+// to left (a back arrow), as the roles that point along the text (ui.next…) are.
 
 import { RayElement, css, define } from "../../core/core.js";
 
@@ -13,6 +14,7 @@ const styles = css`
      size) must not reach the icon. size= overrides it inline. */
   :host { --_size: 1em; display: inline-flex; vertical-align: -0.125em; line-height: 1; }
   .icon svg { width: var(--_size); height: var(--_size); }
+  :host([mirror]) .icon:dir(rtl) > svg { transform: scaleX(-1); }
 `;
 
 export class RayIcon extends RayElement {
@@ -23,6 +25,7 @@ export class RayIcon extends RayElement {
     color: { type: String, reflect: true },
     stroke: { type: Number },
     filled: { type: Boolean, reflect: true },
+    mirror: { type: Boolean, reflect: true },
   };
   static styles = [styles];
   static template = `<span class="icon" part="icon" data-ray-icon=""></span>`;

package/components/indicator/indicator.js

@@ -21,7 +21,7 @@ const styles = css`
     position: absolute;
     z-index: 1;
     top: var(--_top);
-    left: var(--_left);
+    inset-inline-start: var(--_left);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -34,6 +34,7 @@ const styles = css`
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
+  .indicator:dir(rtl) { transform: translate(50%, -50%); }
   .indicator[data-label] {
     height: auto;
     min-height: var(--_size);

package/components/menu/menu.js

@@ -230,7 +230,7 @@ const itemStyles = css`
   .section { display: inline-flex; align-items: center; color: var(--ray-muted-foreground); }
   :host([color]) .section { color: inherit; }
   .section:not([data-filled]) { display: none; }
-  .right { margin-left: var(--ray-space-6); font-size: var(--ray-font-size-xs); }
+  .right { margin-inline-start: var(--ray-space-6); font-size: var(--ray-font-size-xs); }
   ::slotted(svg) { width: 1rem; height: 1rem; }
 `;
 

package/components/nav-link/nav-link.js

@@ -17,7 +17,7 @@ const styles = css`
     font: inherit;
     font-size: var(--ray-font-size-sm);
     color: var(--ray-foreground);
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     background: transparent;
     border: 0;
@@ -43,6 +43,8 @@ const styles = css`
   .chevron svg { width: 0.875rem; height: 0.875rem; }
   :host([data-parent]) .chevron { display: inline-flex; }
   :host([opened]) .chevron { transform: rotate(90deg); }
+  /* Right to left the chevron is mirrored (it points left): it turns the other way. */
+  :host([opened]) .chevron:dir(rtl) { transform: rotate(-90deg); }
   /* Children expand and collapse: a 0fr → 1fr grid row animates the height
      in both directions without measuring it (like the accordion). */
   .children {
@@ -58,7 +60,7 @@ const styles = css`
   :host([icon-only]) .body, :host([icon-only]) .chevron, :host([icon-only]) .section.right { display: none; }
   :host([icon-only]) .children { display: none; }
   /* 2px of room so the focus ring of a child is not clipped. */
-  .children-inner { min-height: 0; overflow: hidden; margin: -2px 0; padding: 2px 0 2px var(--ray-space-5); }
+  .children-inner { min-height: 0; overflow: hidden; margin: -2px 0; padding-block: 2px; padding-inline-start: var(--ray-space-5); }
 `;
 
 const INNER = `
@@ -153,6 +155,7 @@ export class RayNavLink extends RayElement {
     });
     this.shadowRoot.prepend(el);
     this._el = el;
+    this.paintIcons(el);
   }
 }
 

package/components/notification/notification.js

@@ -17,7 +17,8 @@ const notificationStyles = css`
     display: flex;
     align-items: flex-start;
     gap: var(--ray-space-3);
-    padding: var(--ray-space-3) var(--ray-space-3) var(--ray-space-3) var(--ray-space-4);
+    padding: var(--ray-space-3);
+    padding-inline-start: var(--ray-space-4);
     overflow: hidden;
     color: var(--ray-popover-foreground);
     background: var(--ray-popover);
@@ -29,7 +30,7 @@ const notificationStyles = css`
   /* Behind the front toast of a collapsed stack: only its edge shows. */
   .card > * { transition: opacity var(--ray-duration-base) var(--ray-easing-standard); }
   :host([data-behind]) .card > * { opacity: 0; }
-  .card[data-icon], .card[data-loading], .card[data-glyph] { padding-left: var(--ray-space-3); }
+  .card[data-icon], .card[data-loading], .card[data-glyph] { padding-inline-start: var(--ray-space-3); }
   .icon {
     display: none;
     flex: none;
@@ -201,14 +202,16 @@ const toasterStyles = css`
   :host(:not(:popover-open)) { display: none; }
   :host([position^="top"]) { top: 0; }
   :host([position^="bottom"]), :host(:not([position])) { bottom: 0; }
-  :host([position$="right"]), :host(:not([position])) { right: 0; }
-  :host([position$="left"]) { left: 0; }
-  :host([position$="center"]) { left: 50%; transform: translateX(-50%); }
+  /* -start/-end follow the writing direction; -left/-right are sides of the screen. */
+  :host([position$="-end"]), :host(:not([position])) { inset-inline-end: 0; }
+  :host([position$="-start"]) { inset-inline-start: 0; }
+  :host([position$="right"]) { right: 0; } /* physical */
+  :host([position$="left"]) { left: 0; } /* physical */
+  :host([position$="center"]) { left: 50%; transform: translateX(-50%); } /* physical */
   /* Toasts are placed by layout(): absolute, stacked from the edge. */
   ::slotted(*) {
     position: absolute;
-    left: var(--ray-space-4);
-    right: var(--ray-space-4);
+    inset-inline: var(--ray-space-4);
     pointer-events: auto;
     touch-action: pan-y;
     transform-origin: 50% 100%;
@@ -222,10 +225,10 @@ const toasterStyles = css`
   ::slotted([data-swiping]) { transition: none; }
   /* Phones: full width at the bottom (or top), wherever the desktop position is. */
   @media (max-width: 40em) {
-    :host { width: auto; left: 0; right: 0; transform: none; padding: var(--ray-space-3); }
+    :host { width: auto; inset-inline: 0; transform: none; padding: var(--ray-space-3); }
     :host([position^="top"]) { top: 0; bottom: auto; }
     :host(:not([position^="top"])) { bottom: 0; top: auto; }
-    ::slotted(*) { left: var(--ray-space-3); right: var(--ray-space-3); }
+    ::slotted(*) { inset-inline: var(--ray-space-3); }
     :host(:not([position^="top"])) ::slotted(*) { bottom: var(--ray-space-3); }
     :host([position^="top"]) ::slotted(*) { top: var(--ray-space-3); }
   }
@@ -272,7 +275,7 @@ const SHRINK = 0.05;
 
 export class RayToaster extends RayElement {
   static properties = {
-    position: { type: String, reflect: true, default: "bottom-right" },
+    position: { type: String, reflect: true, default: "bottom-end" },
     limit: { type: Number, default: 5 },
     // Toasts visible in the collapsed stack (the rest wait, invisible).
     visible: { type: Number, default: 3 },
@@ -358,7 +361,7 @@ export class RayToaster extends RayElement {
   /** Places every toast: a stack (collapsed) or a list (expanded). */
   layout() {
     const toasts = this.toasts;
-    const top = (this.position ?? "bottom-right").startsWith("top");
+    const top = (this.position ?? "bottom-end").startsWith("top");
     const dir = top ? 1 : -1;
     const heights = toasts.map((el) => el.shadowRoot?.querySelector(".card")?.offsetHeight || el.offsetHeight || 0);
     const front = heights[0] ?? 0;
@@ -529,7 +532,7 @@ export function notify(options = {}) {
   el._onClose = options.onClose;
   t.append(el);
   // Enter from the edge: start off-screen, then let layout() transition it in.
-  const top = (t.position ?? "bottom-right").startsWith("top");
+  const top = (t.position ?? "bottom-end").startsWith("top");
   el.style.transition = "none";
   el.style.opacity = "0";
   el.style.transform = `translateY(${top ? -100 : 100}%)`;