@raylang/elements 0.6.0 → 0.8.0

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";
@@ -144,9 +145,9 @@ export class RayCalendar extends RayElement {
   static styles = [sizeStyles, calendarStyles];
   static template = `
     <div class="header" part="header">
-      <button class="nav prev focus-ring" part="nav" type="button" data-ray-icon="chevron-left"></button>
+      <button class="nav prev focus-ring" part="nav" type="button" data-ray-icon="ui.previous"></button>
       <div class="caption" part="caption" id="caption" aria-live="polite"></div>
-      <button class="nav next focus-ring" part="nav" type="button" data-ray-icon="chevron-right"></button>
+      <button class="nav next focus-ring" part="nav" type="button" data-ray-icon="ui.next"></button>
     </div>
     <table role="grid" aria-labelledby="caption" part="grid"><thead><tr></tr></thead><tbody></tbody></table>`;
 
@@ -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;
@@ -382,8 +384,8 @@ export class RayDatePicker extends FieldControl {
   static template = fieldTemplate(
     `<input id="control" class="native" part="input" type="date" tabindex="-1" aria-hidden="true">` +
       `<button type="button" id="trigger" class="control trigger" part="trigger" aria-haspopup="dialog" aria-expanded="false" aria-controls="panel">` +
-      `<span class="icon" aria-hidden="true" data-ray-icon="calendar"></span><span class="value" id="value"></span></button>` +
-      `<button type="button" class="clear focus-ring" part="clear" aria-label="Clear date" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>`,
+      `<span class="icon" aria-hidden="true" data-ray-icon="ui.calendar"></span><span class="value" id="value"></span></button>` +
+      `<button type="button" class="clear focus-ring" part="clear" aria-label="Clear date" hidden><span data-ray-icon="ui.clear" aria-hidden="true"></span></button>`,
     { sections: false },
   ) + `<div class="panel" id="panel" part="dropdown" popover="manual" role="dialog" aria-label="Choose a date"><ray-calendar part="calendar" exportparts="day, caption, nav, grid"></ray-calendar></div>`;
 

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;
@@ -106,7 +106,7 @@ export class RayDialog extends RayElement {
     <dialog part="dialog" aria-labelledby="title">
       <header class="header" part="header">
         <div class="heading"><h2 class="title" id="title" part="title"></h2><p class="description" id="description" part="description" hidden></p></div>
-        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="close" aria-hidden="true"></span></button></div>
+        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="ui.close" aria-hidden="true"></span></button></div>
       </header>
       <div class="body" part="body"><slot></slot></div>
       <footer class="footer" part="footer"><slot name="footer"></slot></footer>

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 },
@@ -111,7 +129,7 @@ export class RayDrawer extends RayDialog {
     <dialog part="drawer" aria-labelledby="title">
       <header class="header" part="header">
         <div class="heading"><h2 class="title" id="title" part="title"></h2><p class="description" id="description" part="description" hidden></p></div>
-        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="close" aria-hidden="true"></span></button></div>
+        <div class="actions"><slot name="header"></slot><button class="close focus-ring" part="close" type="button" aria-label="Close"><span data-ray-icon="ui.close" aria-hidden="true"></span></button></div>
       </header>
       <div class="body" part="body"><slot></slot></div>
       <footer class="footer" part="footer"><slot name="footer"></slot></footer>

package/components/file-upload/file-upload.js

@@ -233,7 +233,7 @@ export class RayFileUpload extends FormControl {
     <span class="label" part="label" id="label" hidden><span class="label-text"></span><span class="required" aria-hidden="true" hidden> *</span></span>
     <div class="description" part="description" id="description" hidden></div>
     <button type="button" class="zone" part="dropzone" aria-labelledby="label title hint pill" aria-describedby="description error">
-      <span class="glyph" part="icon"><slot name="icon"><span data-ray-icon="upload"></span></slot></span>
+      <span class="glyph" part="icon"><slot name="icon"><span data-ray-icon="ui.upload"></span></slot></span>
       <span class="copy">
         <span class="title" id="title"></span>
         <span class="hint" id="hint" part="hint"></span>

package/components/icon/icon.js

@@ -1,5 +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. `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";
 
@@ -11,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 {
@@ -20,6 +24,8 @@ export class RayIcon extends RayElement {
     label: { type: String },
     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>`;
@@ -31,8 +37,10 @@ export class RayIcon extends RayElement {
 
   update() {
     const icon = this.$(".icon");
-    if (icon.getAttribute("data-ray-icon") !== (this.name ?? "")) {
+    const filled = Boolean(this.filled);
+    if (icon.getAttribute("data-ray-icon") !== (this.name ?? "") || icon.hasAttribute("data-ray-icon-filled") !== filled) {
       icon.setAttribute("data-ray-icon", this.name ?? "");
+      icon.toggleAttribute("data-ray-icon-filled", filled);
       this.paintIcons();
     }
     // xs…xl from the scale, or any CSS length.

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,14 +60,14 @@ 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 = `
   <span class="section" part="left-section"><slot name="left"></slot></span>
   <span class="body"><span class="label" part="label"></span><span class="description" part="description"></span></span>
   <span class="section right" part="right-section"><slot name="right"></slot></span>
-  <span class="chevron" aria-hidden="true" data-ray-icon="chevron-right"></span>`;
+  <span class="chevron" aria-hidden="true" data-ray-icon="ui.disclosure"></span>`;
 
 export class RayNavLink extends RayElement {
   static delegatesFocus = true;
@@ -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;
@@ -150,7 +151,7 @@ export class RayNotification extends RayElement {
         <div class="message" part="message"><slot></slot></div>
       </div>
       <button class="action focus-ring" part="action" type="button" hidden></button>
-      <button class="close focus-ring" part="close" type="button" aria-label="Close notification"><span data-ray-icon="close" aria-hidden="true"></span></button>
+      <button class="close focus-ring" part="close" type="button" aria-label="Close notification"><span data-ray-icon="ui.close" aria-hidden="true"></span></button>
     </div>`;
 
   constructor() {
@@ -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}%)`;

package/components/number-input/number-input.js

@@ -115,7 +115,7 @@ export class RayNumberInput extends FieldControl {
   static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
   static template = fieldTemplate(
     `<input id="control" class="control" part="input" role="spinbutton" inputmode="decimal" autocomplete="off" spellcheck="false">` +
-      `<span class="steppers" part="controls"><button type="button" class="step up" part="increment" tabindex="-1" aria-label="Increment"><span data-ray-icon="chevron-up"></span></button><button type="button" class="step down" part="decrement" tabindex="-1" aria-label="Decrement"><span data-ray-icon="chevron-down"></span></button></span>`,
+      `<span class="steppers" part="controls"><button type="button" class="step up" part="increment" tabindex="-1" aria-label="Increment"><span data-ray-icon="ui.increment"></span></button><button type="button" class="step down" part="decrement" tabindex="-1" aria-label="Decrement"><span data-ray-icon="ui.decrement"></span></button></span>`,
   );
 
   #typing = false;

package/components/pagination/pagination.js

@@ -139,15 +139,15 @@ export class RayPagination extends RayElement {
     const items = [];
     const control = (role, target, icon, label, off) => ({ kind: "control", role, target, icon, label, off });
     if (!this.hideControls) {
-      if (this.withEdges) items.push(control("first", 1, "chevrons-left", "First page", page <= 1));
-      items.push(control("previous", page - 1, "chevron-left", "Previous page", page <= 1));
+      if (this.withEdges) items.push(control("first", 1, "ui.first", "First page", page <= 1));
+      items.push(control("previous", page - 1, "ui.previous", "Previous page", page <= 1));
     }
     for (const it of paginationRange(total, page, this.siblings ?? 1, this.boundaries ?? 1)) {
       items.push(it === "dots" ? { kind: "dots" } : { kind: "page", target: it });
     }
     if (!this.hideControls) {
-      items.push(control("next", page + 1, "chevron-right", "Next page", page >= total));
-      if (this.withEdges) items.push(control("last", total, "chevrons-right", "Last page", page >= total));
+      items.push(control("next", page + 1, "ui.next", "Next page", page >= total));
+      if (this.withEdges) items.push(control("last", total, "ui.last", "Last page", page >= total));
     }
     list.replaceChildren(...items.map((it) => this._item(it, page)));
     this.paintIcons(list);

package/components/password-input/password-input.js

@@ -43,7 +43,7 @@ export class RayPasswordInput extends RayInput {
   static styles = [...RayInput.styles, styles];
   static template = fieldTemplate(
     `<input id="control" class="control" part="input" type="password" autocomplete="current-password" spellcheck="false" autocapitalize="off">` +
-      `<button type="button" class="toggle focus-ring" part="toggle" aria-pressed="false"><span data-ray-icon="eye" aria-hidden="true"></span></button>`,
+      `<button type="button" class="toggle focus-ring" part="toggle" aria-pressed="false"><span data-ray-icon="ui.show-password" aria-hidden="true"></span></button>`,
   );
 
   wire() {
@@ -69,7 +69,7 @@ export class RayPasswordInput extends RayInput {
     toggle.title = toggle.getAttribute("aria-label");
     toggle.disabled = this.effectivelyDisabled;
     const icon = toggle.firstElementChild;
-    const name = this.visible ? "eye-off" : "eye";
+    const name = this.visible ? "ui.hide-password" : "ui.show-password";
     if (icon.dataset.rayIcon !== name) {
       icon.dataset.rayIcon = name;
       this.paintIcons(toggle);

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;
@@ -62,9 +62,9 @@ export class RaySearch extends RayInput {
   };
   static styles = [...RayInput.styles, styles];
   static template = fieldTemplate(
-    `<span class="lead" part="icon" aria-hidden="true" data-ray-icon="search"></span>` +
+    `<span class="lead" part="icon" aria-hidden="true" data-ray-icon="ui.search"></span>` +
       `<input id="control" class="control" part="input" type="search" enterkeyhint="search" autocomplete="off" spellcheck="false">` +
-      `<span class="tail"><button class="clear focus-ring" part="clear" type="button" aria-label="Clear search" tabindex="-1" hidden><span data-ray-icon="close" aria-hidden="true"></span></button>` +
+      `<span class="tail"><button class="clear focus-ring" part="clear" type="button" aria-label="Clear search" tabindex="-1" hidden><span data-ray-icon="ui.clear" aria-hidden="true"></span></button>` +
       `<kbd class="shortcut" part="shortcut" aria-hidden="true" hidden></kbd></span>`,
   );
 

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;
@@ -101,7 +101,7 @@ const styles = css`
   .empty { padding: var(--ray-space-2); color: var(--ray-muted-foreground); }
 `;
 
-const CHEVRON = `<span class="chevron" aria-hidden="true" data-ray-icon="chevron-down"></span>`;
+const CHEVRON = `<span class="chevron" aria-hidden="true" data-ray-icon="ui.expand"></span>`;
 
 export class RaySelect extends FieldControl {
   static properties = {
@@ -261,7 +261,7 @@ export class RaySelect extends FieldControl {
       const group = o.parentElement?.localName === "optgroup" ? o.parentElement : null;
       const disabled = o.disabled || Boolean(group?.disabled);
       el.setAttribute("aria-disabled", String(disabled));
-      el.innerHTML = `<span class="text"></span><span class="mark" aria-hidden="true" data-ray-icon="check"></span>`;
+      el.innerHTML = `<span class="text"></span><span class="mark" aria-hidden="true" data-ray-icon="ui.checked"></span>`;
       el.firstChild.textContent = o.label || o.text;
       this.#items.push({ el, value: o.value, disabled, text: (o.label || o.text).trim().toLowerCase() });
       return el;