@raylang/elements 0.7.0 → 0.9.0

package/components/mode-input/mode-input.js

@@ -0,0 +1,221 @@
+// <ray-mode-input>: a text field with a menu of modes on one side, like
+// ray-password-input's toggle but with any number of choices. Choosing a
+// mode applies its attributes to the field (type, placeholder, inputmode,
+// pattern… whatever a ray-input takes), so one control says both what a
+// value is and the value: "a file at this path", "text", "an amount in €".
+//
+// A ray-input underneath: label, description, error, sizes, forms, the
+// left/right slots and validation work the same.
+//
+//   <ray-mode-input mode="text">
+//     <option value="text" label="Text"></option>
+//     <option value="file" label="File" data-icon="file" data-set-placeholder="Path to a file"></option>
+//   </ray-mode-input>
+//
+// or from script: `el.options = [{ value, label, icon, hint, description,
+// disabled, attrs: { placeholder: "…" } }]`.
+//
+// Choosing fires a cancelable ray-mode-change ({ mode, previous, option });
+// cancelling it keeps the previous mode. Alt+ArrowDown in the field opens
+// the menu. The menu is a ray-menu of radio items, native with native-menu.
+
+import { css, define } from "../../core/core.js";
+import { fieldTemplate } from "../../core/form.js";
+import { RayInput } from "../input/input.js";
+import "../menu/menu.js";
+
+const styles = css`
+  .mode-menu { display: contents; }
+  .trigger {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.25em;
+    height: max(1.5rem, calc(var(--_h) * 0.7));
+    min-width: max(1.5rem, calc(var(--_h) * 0.7));
+    margin-inline: calc(var(--_px) * 0.35);
+    padding: 0 0.35em;
+    font: inherit;
+    font-size: var(--_fs);
+    color: var(--ray-muted-foreground);
+    white-space: nowrap;
+    background: transparent;
+    border: 0;
+    border-radius: var(--ray-radius-sm);
+    cursor: pointer;
+  }
+  .trigger:hover, .trigger[aria-expanded="true"] { color: var(--ray-foreground); background: var(--ray-default-hover); }
+  .trigger:disabled { cursor: not-allowed; opacity: 0.6; }
+  .trigger [data-ray-icon] svg { width: 1.1em; height: 1.1em; }
+  .trigger .chevron svg { width: 0.85em; height: 0.85em; }
+  .trigger .text:empty, .trigger .icon:empty { display: none; }
+  /* At the start unless position="end". */
+  :host(:not([position="end"])) .mode-box { order: -1; }
+  .item-description { display: block; font-size: 0.85em; color: var(--ray-muted-foreground); }
+`;
+
+// An option from an <option> child: label, data-icon, data-hint,
+// data-description, disabled, and every data-set-<attr> as an attribute
+// for the field.
+function optionOf(node) {
+  const attrs = {};
+  for (const a of node.attributes) {
+    if (a.name.startsWith("data-set-")) attrs[a.name.slice(9)] = a.value;
+  }
+  return {
+    value: node.value,
+    label: node.getAttribute("label") ?? node.textContent.trim(),
+    icon: node.dataset.icon || "",
+    hint: node.dataset.hint || "",
+    description: node.dataset.description || "",
+    disabled: node.disabled,
+    attrs,
+  };
+}
+
+export class RayModeInput extends RayInput {
+  static properties = {
+    ...RayInput.properties,
+    mode: { type: String, reflect: true },
+    options: { attribute: false },
+    display: { type: String, reflect: true },
+    position: { type: String, reflect: true, default: "start" },
+    menuLabel: { type: String, default: "Mode" },
+    nativeMenu: { type: Boolean, reflect: true },
+  };
+  static styles = [...RayInput.styles, styles];
+  static template = fieldTemplate(
+    `<input id="control" class="control" part="input">` +
+      `<span class="mode-box"><ray-menu class="mode-menu" placement="bottom-start" part="menu">` +
+      `<button type="button" slot="trigger" class="trigger focus-ring" part="trigger">` +
+      `<span class="icon" part="trigger-icon"></span><span class="text" part="trigger-label"></span>` +
+      `<span class="chevron" data-ray-icon="ui.expand" aria-hidden="true"></span>` +
+      `</button></ray-menu></span>`,
+  );
+
+  // The field's own value of each attribute a mode changed, to give it back.
+  #saved = new Map();
+  #applied = null;
+
+  /** The modes in use: the `options` property, else the <option> children. */
+  get modes() {
+    if (Array.isArray(this.options)) return this.options.map((o) => ({ attrs: {}, ...o, value: String(o.value) }));
+    return [...this.querySelectorAll(":scope > option")].map(optionOf);
+  }
+
+  /** The chosen mode (the first when `mode` names none). */
+  get currentOption() {
+    const all = this.modes;
+    return all.find((o) => o.value === this.mode) ?? all[0] ?? null;
+  }
+
+  wire() {
+    super.wire();
+    const menu = this.$(".mode-menu");
+    // Keep the caret in the field while the pointer opens the menu.
+    this.$(".trigger").addEventListener("pointerdown", (e) => e.preventDefault());
+    menu.addEventListener("ray-select", (e) => {
+      e.stopPropagation();
+      this.choose(e.detail.value);
+      this.control.focus();
+    });
+    this.control.addEventListener("keydown", (e) => {
+      if (e.altKey && e.key === "ArrowDown") {
+        e.preventDefault();
+        if (menu.native) menu.popupNative();
+        else menu.open = true;
+      }
+    });
+    // <option> children may come, go or change (the field's own attributes are not modes).
+    new MutationObserver((records) => {
+      if (records.some((r) => r.type === "childList" || r.target !== this)) this.requestUpdate();
+    }).observe(this, { childList: true, subtree: true, attributes: true, characterData: true });
+  }
+
+  /** Switches to the mode `value` as the user would: fires ray-mode-change, which may cancel it. */
+  choose(value) {
+    const option = this.modes.find((o) => o.value === value);
+    const previous = this.currentOption;
+    if (!option || option.disabled || option.value === previous?.value) {
+      this.requestUpdate();
+      return;
+    }
+    this.mode = value;
+    const go = this.emit("ray-mode-change", { mode: value, previous: previous?.value ?? null, option }, { cancelable: true });
+    if (!go) this.mode = previous?.value;
+  }
+
+  // The chosen mode's attributes on the field; the previous mode's taken back.
+  #apply(option) {
+    if (option && this.#applied === option.value) return;
+    for (const [name, value] of this.#saved) {
+      if (value === null) this.removeAttribute(name);
+      else this.setAttribute(name, value);
+    }
+    this.#saved.clear();
+    for (const [name, value] of Object.entries(option?.attrs ?? {})) {
+      this.#saved.set(name, this.getAttribute(name));
+      this.setAttribute(name, value);
+    }
+    this.#applied = option?.value ?? null;
+  }
+
+  update(changed) {
+    const option = this.currentOption;
+    // The setter, so the mode is reflected (CSS can read [mode="file"]).
+    if (option && this.mode !== option.value) this.mode = option.value;
+    this.#apply(option);
+    super.update(changed);
+    this.#renderMenu(option);
+  }
+
+  #renderMenu(option) {
+    const menu = this.$(".mode-menu");
+    const trigger = this.$(".trigger");
+    menu.native = Boolean(this.nativeMenu);
+    menu.placement = this.position === "end" ? "bottom-end" : "bottom-start";
+    const display = this.display || (option?.icon ? "icon" : "label");
+    trigger.querySelector(".text").textContent = display === "icon" || !option ? "" : option.hint || option.label;
+    const icon = trigger.querySelector(".icon");
+    const iconName = display === "label" || !option?.icon ? "" : option.icon;
+    if ((icon.dataset.rayIcon ?? "") !== iconName) {
+      icon.replaceChildren();
+      if (iconName) icon.dataset.rayIcon = iconName;
+      else delete icon.dataset.rayIcon;
+    }
+    // The trigger is named with the current mode: "Mode: File".
+    const name = option ? `${this.menuLabel ?? "Mode"}: ${option.label}` : this.menuLabel ?? "Mode";
+    trigger.setAttribute("aria-label", name);
+    trigger.title = name;
+    trigger.disabled = this.effectivelyDisabled || Boolean(this.readonly);
+
+    // The menu: one radio item per mode, the current one checked.
+    const all = this.modes;
+    // A native menu takes the item's whole text as its title: no description there.
+    const describe = !this.nativeMenu;
+    const key = JSON.stringify([describe, all.map((o) => [o.value, o.label, o.description, Boolean(o.disabled)])]);
+    if (menu.dataset.key !== key) {
+      menu.dataset.key = key;
+      for (const old of menu.querySelectorAll("ray-menu-item")) old.remove();
+      for (const o of all) {
+        const item = document.createElement("ray-menu-item");
+        item.type = "radio";
+        item.name = "mode";
+        item.value = o.value;
+        item.disabled = Boolean(o.disabled);
+        item.append(o.label);
+        if (o.description && describe) {
+          const d = document.createElement("span");
+          d.className = "item-description";
+          d.textContent = o.description;
+          item.append(d);
+        }
+        menu.append(item);
+      }
+    }
+    for (const item of menu.querySelectorAll("ray-menu-item")) item.checked = item.value === option?.value;
+    this.paintIcons(this.shadowRoot);
+  }
+}
+
+define("ray-mode-input", RayModeInput);

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

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