@raylang/elements 0.7.0 → 0.9.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); }
@@ -398,6 +400,7 @@ export class RayCode extends RayElement {
     lineNumbers: { type: Boolean, reflect: true },
     highlight: { type: String },
     wrap: { type: Boolean, reflect: true },
+    verbatim: { type: Boolean, reflect: true },
     maxHeight: { type: String },
     expanded: { type: Boolean, reflect: true },
     hideCopy: { type: Boolean, reflect: true },
@@ -448,20 +451,22 @@ export class RayCode extends RayElement {
     this.#observer.disconnect();
   }
 
-  /** The code shown (dedented), whatever its source. */
+  /** The code shown (dedented unless verbatim), whatever its source. */
   get source() {
     return this.#source;
   }
 
   #readSource() {
-    if (typeof this.code === "string") return dedent(this.code);
+    // verbatim: data (a response body, a log) is shown and copied as it came.
+    const shape = this.verbatim ? String : dedent;
+    if (typeof this.code === "string") return shape(this.code);
     // A <template> is parsed as HTML: perfect for markup; its serialization
     // escapes &, < and > in text, undone here.
     const tpl = this.querySelector(":scope > template");
-    if (tpl) return dedent(tpl.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, "\u00a0").replace(/&amp;/g, "&"));
+    if (tpl) return shape(tpl.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, "\u00a0").replace(/&amp;/g, "&"));
     const script = this.querySelector(':scope > script[type="text/plain"]');
-    if (script) return dedent(script.textContent);
-    return dedent(this.textContent);
+    if (script) return shape(script.textContent);
+    return shape(this.textContent);
   }
 
   update() {

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

@@ -86,6 +86,7 @@ const styles = css`
   .icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--ray-muted-foreground); }
   .option[aria-selected="true"] .icon { color: inherit; }
   .icon svg { width: 1rem; height: 1rem; }
+  .prefix { flex: none; display: inline-flex; align-items: center; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
   .text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
   .label, .description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .label { font-size: var(--ray-font-size-sm); }
@@ -110,7 +111,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;
@@ -187,6 +188,9 @@ export class RayCommandPalette extends RayElement {
     emptyLabel: { type: String, default: "Nothing found" },
     label: { type: String, default: "Command palette" },
     hideHint: { type: Boolean, reflect: true },
+    navigateLabel: { type: String, default: "navigate" },
+    runLabel: { type: String, default: "run" },
+    closeLabel: { type: String, default: "close" },
     overlayBlur: { type: String },
     nativeMenus: { type: Boolean, attribute: "native-menus", reflect: true },
   };
@@ -196,7 +200,7 @@ export class RayCommandPalette extends RayElement {
       <div class="search" part="search">${SEARCH_ICON}<input id="input" part="input" role="combobox" aria-expanded="true" aria-controls="list" aria-autocomplete="list" autocomplete="off" spellcheck="false"></div>
       <div class="list" id="list" role="listbox" part="list"></div>
       <div class="empty" part="empty" hidden></div>
-      <div class="hint" part="hint"><span><b>↑↓</b> navigate</span><span><b>↵</b> run</span><span><b>esc</b> close</span></div>
+      <div class="hint" part="hint"><span><b>↑↓</b> <span id="hint-navigate"></span></span><span><b>↵</b> <span id="hint-run"></span></span><span><b>esc</b> <span id="hint-close"></span></span></div>
       <slot name="overlay"></slot>
     </dialog>`;
 
@@ -281,6 +285,9 @@ export class RayCommandPalette extends RayElement {
     this.dialog.setAttribute("aria-label", this.label ?? "Command palette");
     if (this.input.value !== (this.query ?? "")) this.input.value = this.query ?? "";
     this.$(".hint").hidden = Boolean(this.hideHint);
+    this.$("#hint-navigate").textContent = this.navigateLabel ?? "";
+    this.$("#hint-run").textContent = this.runLabel ?? "";
+    this.$("#hint-close").textContent = this.closeLabel ?? "";
     this._render();
     if (changed.has("open") || this._first === undefined) {
       this._first = false;
@@ -399,6 +406,14 @@ export class RayCommandPalette extends RayElement {
       else icon.textContent = String(a.icon);
       opt.append(icon);
     }
+    // Content of its own before the text, any width: a colored method tag.
+    if (a.prefix !== undefined && a.prefix !== null && a.prefix !== "") {
+      const prefix = document.createElement("span");
+      prefix.className = "prefix";
+      if (a.prefix instanceof Node) prefix.append(a.prefix);
+      else prefix.textContent = String(a.prefix);
+      opt.append(prefix);
+    }
     const text = document.createElement("span");
     text.className = "text";
     const label = document.createElement("span");

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;