@raylang/elements 0.7.0 → 0.9.0

package/components/sidebar/sidebar.js

@@ -1,17 +1,23 @@
 // <ray-sidebar>: the side navigation of an app shell (shadcn's Sidebar).
 // Header, content and footer slots; on wide screens a panel that can
-// collapse to an icon rail (`collapsed`); below `breakpoint` an off-canvas
+// collapse (`collapsed`) to an icon rail, or out of view with
+// collapse="offcanvas"; below `breakpoint` an off-canvas
 // drawer (`open`): a modal <dialog> sliding in from its side, with focus
 // trapped, Escape and backdrop click closing it.
 //
 // toggle() does the right thing for the screen: collapse/expand on wide
 // screens, open/close the drawer on narrow ones — wire it to a menu button.
 //
+// With `resizable`, its inner edge is a separator (WAI-ARIA window splitter)
+// that drags or arrow-keys the width between min-width and max-width;
+// `autosave="key"` keeps it (localStorage).
+//
 // <ray-sidebar-group label="Projects">: a titled section of nav links; the
 // title hides when the sidebar collapses.
 
 import { RayElement, css, define } from "../../core/core.js";
 import { overlayStyles } from "../../core/styles.js";
+import { isRtl } from "../../core/direction.js";
 import { play, playAll } from "../../core/motion.js";
 
 const styles = css`
@@ -26,6 +32,10 @@ const styles = css`
     transition: width var(--ray-duration-base) var(--ray-easing-standard);
   }
   :host([collapsed]:not([data-mobile])) { width: var(--_rail); }
+  /* offcanvas: collapsed is out of view, and out of the tab order once the
+     width has animated to 0 (visibility waits for it; showing does not). */
+  :host([collapse="offcanvas"][collapsed]:not([data-mobile])) { width: 0; padding: 0; }
+  :host([collapse="offcanvas"][collapsed]:not([data-mobile])) .panel { visibility: hidden; transition: visibility 0s var(--ray-duration-base); }
   :host([data-mobile]) { width: 0; }
   .panel {
     box-sizing: border-box;
@@ -38,7 +48,11 @@ const styles = css`
     background: var(--ray-sidebar, color-mix(in srgb, var(--ray-muted) 70%, var(--ray-background)));
     border-inline-end: 1px solid var(--ray-border);
   }
-  :host([side="right"]) .panel { border-inline-end: 0; border-inline-start: 1px solid var(--ray-border); }
+  /* side: start/end follow the writing direction, left/right are sides of
+     the screen; the border faces the content. */
+  :host([side="end"]) .panel { border-inline-end: 0; border-inline-start: 1px solid var(--ray-border); }
+  :host([side="left"]) .panel { border: 0; border-right: 1px solid var(--ray-border); } /* physical */
+  :host([side="right"]) .panel { border: 0; border-left: 1px solid var(--ray-border); } /* physical */
   :host([variant="floating"]:not([data-mobile])) { padding: var(--ray-space-2); box-sizing: border-box; }
   :host([variant="floating"]) .panel { border: 1px solid var(--ray-border); border-radius: var(--ray-radius-lg); box-shadow: var(--ray-shadow-sm); }
   .header, .footer { flex: none; padding: var(--ray-space-2); }
@@ -49,7 +63,8 @@ const styles = css`
   dialog {
     --_from: -100%;
     position: fixed;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     box-sizing: border-box;
     width: min(var(--_w), calc(100vw - 3rem));
     max-width: none;
@@ -61,25 +76,57 @@ const styles = css`
     background: transparent;
     overflow: visible;
   }
-  :host([side="right"]) dialog { inset: 0 0 0 auto; }
+  dialog:dir(rtl) { --_from: 100%; }
+  :host([side="end"]) dialog { inset-inline: auto 0; --_from: 100%; }
+  :host([side="end"]) dialog:dir(rtl) { --_from: -100%; }
+  :host([side="left"]) dialog { inset: 0 auto 0 0; --_from: -100%; } /* physical */
+  :host([side="right"]) dialog { inset: 0 0 0 auto; --_from: 100%; } /* physical */
   dialog[open] { display: block; animation: ray-sidebar-in var(--ray-duration-slow) var(--ray-easing-out); }
   dialog .panel { box-shadow: var(--ray-shadow-xl); background: var(--ray-card); }
   @keyframes ray-sidebar-in { from { transform: translateX(var(--_from)); } }
-  :host([side="right"]) dialog { --_from: 100%; }
   dialog::backdrop { animation: ray-fade-in var(--ray-duration-base) var(--ray-easing-out); }
   @keyframes ray-fade-in { from { opacity: 0; } }
+
+  /* resizable: a separator on the edge that faces the content. */
+  :host { position: relative; }
+  .resizer { display: none; position: absolute; z-index: 1; inset-block: 0; inset-inline-end: -0.25rem; width: 0.5rem; cursor: col-resize; touch-action: none; outline: none; }
+  :host([resizable]:not([collapsed]):not([data-mobile])) .resizer { display: block; }
+  :host([side="end"]) .resizer { inset-inline-end: auto; inset-inline-start: -0.25rem; }
+  :host([side="left"]) .resizer { inset-inline: auto; right: -0.25rem; } /* physical */
+  :host([side="right"]) .resizer { inset-inline: auto; left: -0.25rem; } /* physical */
+  .resizer::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    left: 50%; /* physical */
+    width: 3px;
+    background: transparent;
+    transform: translateX(-50%);
+    transition: background-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  .resizer:hover::before, .resizer:focus-visible::before, :host([data-dragging]) .resizer::before { background: var(--ray-primary); }
+  :host([data-dragging]) { transition: none; user-select: none; cursor: col-resize; }
 `;
 
+const STEP = 10;
+const BIG_STEP = 50;
+
 export class RaySidebar extends RayElement {
   static properties = {
     collapsed: { type: Boolean, reflect: true },
+    collapse: { type: String, reflect: true, default: "icon" },
     open: { type: Boolean, reflect: true },
-    side: { type: String, reflect: true, default: "left" },
+    side: { type: String, reflect: true, default: "start" },
     variant: { type: String, reflect: true, default: "sidebar" },
     width: { type: String },
     collapsedWidth: { type: String },
     breakpoint: { type: String, default: "48em" },
     label: { type: String, default: "Sidebar" },
+    resizable: { type: Boolean, reflect: true },
+    minWidth: { type: Number, default: 192 },
+    maxWidth: { type: Number, default: 480 },
+    autosave: { type: String },
+    resizeLabel: { type: String, default: "Resize sidebar" },
   };
   static styles = [overlayStyles, styles];
   static template = `
@@ -88,7 +135,8 @@ export class RaySidebar extends RayElement {
       <nav class="content" part="content"><slot></slot></nav>
       <div class="footer" part="footer"><slot name="footer"></slot></div>
     </div>
-    <dialog part="drawer"></dialog>`;
+    <dialog part="drawer"></dialog>
+    <div class="resizer" part="resizer" role="separator" tabindex="0" aria-orientation="vertical"></div>`;
 
   #mq = null;
   #exit = null;
@@ -120,11 +168,27 @@ export class RaySidebar extends RayElement {
     });
     // New nav links and groups pick up the collapsed state.
     this.$(".content slot").addEventListener("slotchange", () => this._syncCollapsed());
+    this._px = null;
+    this.resizer = this.$(".resizer");
+    this.resizer.addEventListener("pointerdown", (e) => this._down(e));
+    this.resizer.addEventListener("keydown", (e) => this._resizeKey(e));
   }
 
   connectedCallback() {
     super.connectedCallback();
     this._watch();
+    if (this.autosave && !this._restored) {
+      this._restored = true;
+      try {
+        const saved = Number(localStorage.getItem(`ray-sidebar:${this.autosave}`));
+        if (saved > 0) {
+          this._px = saved;
+          this.requestUpdate();
+        }
+      } catch {
+        // No storage: the default width is fine.
+      }
+    }
   }
 
   disconnectedCallback() {
@@ -168,13 +232,21 @@ export class RaySidebar extends RayElement {
   }
 
   update(changed) {
-    if (this.width) this.style.setProperty("--_w", this.width);
+    // A later change of `width` wins over a dragged or restored one.
+    if (changed.has("width") && this._updated) this._px = null;
+    this._updated = true;
+    if (this._px !== null) this.style.setProperty("--_w", `${this._clamp(this._px)}px`);
+    else if (this.width) this.style.setProperty("--_w", this.width);
     else this.style.removeProperty("--_w");
+    this.resizer.setAttribute("aria-label", this.resizeLabel ?? "Resize sidebar");
+    this.resizer.setAttribute("aria-valuemin", String(this.minWidth ?? 0));
+    this.resizer.setAttribute("aria-valuemax", String(this.maxWidth ?? 0));
+    queueMicrotask(() => this.resizer.setAttribute("aria-valuenow", String(Math.round(this._width()))));
     if (this.collapsedWidth) this.style.setProperty("--_rail", this.collapsedWidth);
     else this.style.removeProperty("--_rail");
     this.$(".content").setAttribute("aria-label", this.label ?? "Sidebar");
     if (changed.has("breakpoint") && this.isConnected) this._watch();
-    if (changed.has("collapsed")) this._syncCollapsed();
+    if (changed.has("collapsed") || changed.has("collapse")) this._syncCollapsed();
     if (changed.has("open") && this.mobile) {
       if (this.open && this.#exit) {
         this.#exit.cancel();
@@ -187,13 +259,84 @@ export class RaySidebar extends RayElement {
     }
   }
 
+  /** The expanded width in px (not mid-transition when it was set here). */
+  _width() {
+    return this._px !== null ? this._clamp(this._px) : this.getBoundingClientRect().width;
+  }
+
+  _clamp(px) {
+    return Math.round(Math.max(this.minWidth ?? 0, Math.min(px, this.maxWidth ?? Infinity)));
+  }
+
+  /** The screen side it sits on: start and end follow the writing direction. */
+  _onLeft() {
+    if (this.side === "left" || this.side === "right") return this.side === "left";
+    return (this.side === "end") === isRtl(this);
+  }
+
+  _resizeTo(px, commit) {
+    this._px = this._clamp(px);
+    this.requestUpdate();
+    if (!commit) return;
+    if (this.autosave) {
+      try {
+        localStorage.setItem(`ray-sidebar:${this.autosave}`, String(this._px));
+      } catch {
+        // Not persisted: fine.
+      }
+    }
+    this.emit("ray-resize", { width: this._px });
+  }
+
+  _down(e) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    this.resizer.focus();
+    try {
+      this.resizer.setPointerCapture(e.pointerId);
+    } catch {
+      // The pointer is already gone: drag without capture.
+    }
+    this.setAttribute("data-dragging", "");
+    const rect = this.getBoundingClientRect();
+    const left = this._onLeft();
+    const at = (ev) => (left ? ev.clientX - rect.left : rect.right - ev.clientX);
+    const move = (ev) => this._resizeTo(at(ev), false);
+    const up = (ev) => {
+      this.resizer.removeEventListener("pointermove", move);
+      this.resizer.removeEventListener("pointerup", up);
+      this.resizer.removeEventListener("pointercancel", up);
+      this.removeAttribute("data-dragging");
+      this._resizeTo(at(ev), true);
+    };
+    this.resizer.addEventListener("pointermove", move);
+    this.resizer.addEventListener("pointerup", up);
+    this.resizer.addEventListener("pointercancel", up);
+  }
+
+  // Arrows move the edge on screen: toward the content widens it.
+  _resizeKey(e) {
+    const step = e.shiftKey ? BIG_STEP : STEP;
+    const current = this._width();
+    const wider = this._onLeft() ? "ArrowRight" : "ArrowLeft";
+    const narrower = this._onLeft() ? "ArrowLeft" : "ArrowRight";
+    let next = null;
+    if (e.key === wider) next = current + step;
+    else if (e.key === narrower) next = current - step;
+    else if (e.key === "Home") next = this.minWidth ?? 0;
+    else if (e.key === "End") next = this.maxWidth ?? current;
+    if (next === null) return;
+    e.preventDefault();
+    this._resizeTo(next, true);
+  }
+
   _show() {
     this.dialog.showModal();
     this.emit("ray-open");
   }
 
   async _leave() {
-    const to = this.side === "right" ? "translateX(100%)" : "translateX(-100%)";
+    const to = `translateX(${getComputedStyle(this.dialog).getPropertyValue("--_from").trim() || "-100%"})`;
     const exit = playAll([
       play(this.dialog, [{ transform: "none" }, { transform: to }]),
       play(this.dialog, [{ opacity: 1 }, { opacity: 0 }], { pseudoElement: "::backdrop" }),
@@ -209,7 +352,7 @@ export class RaySidebar extends RayElement {
 
   // The rail shows icons only: nav links and group titles follow.
   _syncCollapsed() {
-    const rail = Boolean(this.collapsed) && !this.mobile;
+    const rail = Boolean(this.collapsed) && !this.mobile && this.collapse !== "offcanvas";
     for (const el of this.querySelectorAll("ray-nav-link")) el.iconOnly = rail;
     for (const el of this.querySelectorAll("ray-sidebar-group")) el.toggleAttribute("collapsed", rail);
   }

package/components/slider/slider.js

@@ -33,9 +33,11 @@ const styles = css`
   input::-webkit-slider-runnable-track {
     height: var(--_track);
     border-radius: var(--ray-radius-full);
-    background: linear-gradient(to right, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct));
+    background: linear-gradient(to right, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct)); /* physical */
     box-shadow: inset 0 0 0 1px var(--ray-border);
   }
+  /* Right to left the native range runs from the right: so does its fill. */
+  input:dir(rtl)::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct)); } /* physical */
   input::-moz-range-track { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--ray-muted); }
   input::-moz-range-progress { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--_filled); }
   input::-webkit-slider-thumb {
@@ -62,6 +64,7 @@ const styles = css`
   .marks { position: relative; height: 1.25rem; margin: var(--ray-space-1) calc(var(--_thumb) / 2) 0; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
   .marks:empty { display: none; }
   .mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+  .mark:dir(rtl) { transform: translateX(50%); }
   .mark::before { content: ""; display: block; width: 1px; height: 0.25rem; margin: 0 auto 0.125rem; background: var(--ray-border); }
 `;
 
@@ -137,7 +140,7 @@ export class RaySlider extends FieldControl {
       const v = typeof m === "number" ? m : m.value;
       const span = document.createElement("span");
       span.className = "mark";
-      span.style.left = `${((v - min) / (max - min || 1)) * 100}%`;
+      span.style.insetInlineStart = `${((v - min) / (max - min || 1)) * 100}%`;
       span.textContent = typeof m === "number" ? String(m) : (m.label ?? String(m.value));
       box.append(span);
     }

package/components/split/split.js

@@ -4,9 +4,11 @@
 //
 // The divider is a focusable separator (WAI-ARIA window splitter): arrows
 // move it (Shift: faster), Home/End go to min/max, Enter collapses the start
-// pane. With `autosave="key"` the size survives reloads (localStorage).
+// pane. With `autosave="key"` the size and the collapsed state survive
+// reloads (localStorage).
 
 import { RayElement, css, define } from "../../core/core.js";
+import { isRtl, inlineKey } from "../../core/direction.js";
 
 const styles = css`
   :host {
@@ -34,13 +36,13 @@ const styles = css`
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 50%;
+    left: 50%; /* physical */
     width: 1px;
     background: var(--ray-border);
     transform: translateX(-50%);
     transition: background-color var(--ray-duration-fast) var(--ray-easing-standard), width var(--ray-duration-fast) var(--ray-easing-standard);
   }
-  :host([orientation="vertical"]) .divider::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); }
+  :host([orientation="vertical"]) .divider::before { top: 50%; bottom: auto; inset-inline: 0; width: auto; height: 1px; transform: translateY(-50%); }
   :host(:not([disabled])) .divider:hover::before,
   .divider:focus-visible::before,
   :host([data-dragging]) .divider::before { width: 3px; background: var(--ray-primary); }
@@ -87,6 +89,9 @@ export class RaySplit extends RayElement {
       try {
         const saved = Number(localStorage.getItem(`ray-split:${this.autosave}`));
         if (saved > 0) this._px = saved;
+        // "1" or "0"; nothing saved keeps the markup's collapsed.
+        const collapsed = localStorage.getItem(`ray-split:${this.autosave}:collapsed`);
+        if (collapsed !== null) this.collapsed = collapsed === "1";
       } catch {
         // No storage: the default position is fine.
       }
@@ -108,6 +113,14 @@ export class RaySplit extends RayElement {
     // A later change of `position` wins over a dragged/restored size; the
     // first update (position from the markup) does not.
     if (changed.has("position") && this._updated) this._px = null;
+    // Collapsed by the divider or by script after the first update: saved.
+    if (changed.has("collapsed") && this._updated && this.autosave) {
+      try {
+        localStorage.setItem(`ray-split:${this.autosave}:collapsed`, this.collapsed ? "1" : "0");
+      } catch {
+        // Not persisted: fine.
+      }
+    }
     this._updated = true;
     const min = Math.max(0, this.min ?? 0);
     const max = this.max ?? null;
@@ -182,13 +195,16 @@ export class RaySplit extends RayElement {
     this.setAttribute("data-dragging", "");
     const rect = this.getBoundingClientRect();
     const vertical = this._vertical();
-    const move = (ev) => this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, false);
+    // The start pane's size: right to left it is on the right.
+    const rtl = !vertical && isRtl(this);
+    const at = (ev) => (vertical ? ev.clientY - rect.top : rtl ? rect.right - ev.clientX : ev.clientX - rect.left);
+    const move = (ev) => this._resizeTo(at(ev), false);
     const up = (ev) => {
       this.divider.removeEventListener("pointermove", move);
       this.divider.removeEventListener("pointerup", up);
       this.divider.removeEventListener("pointercancel", up);
       this.removeAttribute("data-dragging");
-      this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, true);
+      this._resizeTo(at(ev), true);
     };
     this.divider.addEventListener("pointermove", move);
     this.divider.addEventListener("pointerup", up);
@@ -202,9 +218,11 @@ export class RaySplit extends RayElement {
     const current = this.collapsed ? 0 : this.size;
     const less = vertical ? "ArrowUp" : "ArrowLeft";
     const more = vertical ? "ArrowDown" : "ArrowRight";
+    // Right to left, ArrowLeft moves the divider away from the start pane.
+    const key = vertical ? e.key : inlineKey(e.key, this);
     let next = null;
-    if (e.key === less) next = current - step;
-    else if (e.key === more) next = current + step;
+    if (key === less) next = current - step;
+    else if (key === more) next = current + step;
     else if (e.key === "Home") next = this.min ?? 0;
     else if (e.key === "End") next = this.max ?? this._total();
     else if (e.key === "Enter") {

package/components/stepper/stepper.js

@@ -30,7 +30,7 @@ const stepperStyles = css`
     padding: 0;
     font: inherit;
     color: inherit;
-    text-align: left;
+    text-align: start;
     background: none;
     border: 0;
     border-radius: var(--ray-radius-md);
@@ -58,7 +58,7 @@ const stepperStyles = css`
   .step[data-state="active"] .indicator { color: var(--_light-color); background: var(--ray-background); border-color: var(--_filled); }
   .step[data-state="done"] .indicator { color: var(--_contrast); background: var(--_filled); border-color: var(--_filled); }
   .step[data-error] .indicator { color: #fff; background: var(--ray-red-filled); border-color: var(--ray-red-filled); }
-  .spinner { width: 50%; height: 50%; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ray-step-spin 0.8s linear infinite; }
+  .spinner { width: 50%; height: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ray-step-spin 0.8s linear infinite; }
   @keyframes ray-step-spin { to { rotate: 1turn; } }
   .text { display: grid; min-width: 0; }
   .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ray-font-size-sm); font-weight: var(--ray-font-weight-medium); }
@@ -69,7 +69,7 @@ const stepperStyles = css`
   .connector { flex: 1; min-width: var(--ray-space-4); height: 2px; border-radius: 1px; background: var(--ray-border); transition: background-color var(--ray-duration-base); }
   .step[data-state="done"] .connector { background: var(--_filled); }
   .step:last-child .connector { display: none; }
-  :host([orientation="vertical"]) .connector { flex: none; width: 2px; min-width: 0; height: auto; min-height: var(--ray-space-6); margin: var(--ray-space-1) 0 var(--ray-space-1) calc(var(--_icon) / 2 - 1px); }
+  :host([orientation="vertical"]) .connector { flex: none; width: 2px; min-width: 0; height: auto; min-height: var(--ray-space-6); margin-block: var(--ray-space-1); margin-inline-start: calc(var(--_icon) / 2 - 1px); }
   /* Narrow (labels-below or a narrow stepper): the labels under the numbers. */
   :host([icon-position="top"]) .step { align-items: flex-start; }
   :host([icon-position="top"]) .head { flex-direction: column; align-items: center; text-align: center; gap: var(--ray-space-1); }
@@ -91,7 +91,7 @@ export class RayStepper extends RayElement {
   static properties = {
     active: { type: Number, reflect: true, default: 0 },
     orientation: { type: String, reflect: true, default: "horizontal" },
-    iconPosition: { type: String, reflect: true, attribute: "icon-position", default: "left" },
+    iconPosition: { type: String, reflect: true, attribute: "icon-position", default: "start" },
     allowStepSelect: { type: Boolean, reflect: true, attribute: "allow-step-select" },
     linear: { type: Boolean, default: true },
     size: { type: String, reflect: true, default: "md" },

package/components/switch/switch.js

@@ -18,7 +18,7 @@ const styles = css`
   .thumb {
     position: absolute;
     top: 50%;
-    left: 2px;
+    inset-inline-start: 2px;
     width: calc(var(--_s) - 6px);
     height: calc(var(--_s) - 6px);
     background: var(--ray-white);
@@ -26,12 +26,12 @@ const styles = css`
     border-radius: var(--_r);
     box-shadow: var(--ray-shadow-xs);
     transform: translateY(-50%);
-    transition: left var(--ray-duration-base) var(--ray-easing-standard);
+    transition: inset-inline-start var(--ray-duration-base) var(--ray-easing-standard);
   }
   .control:checked + .indicator { background: var(--_filled); border-color: var(--_filled); }
   /* The thumb takes the text color of the filled shade: white on dark fills,
      black on light ones (yellow, or "dark" in the dark scheme). */
-  .control:checked + .indicator .thumb { left: calc(100% - var(--_s) + 4px); border-color: transparent; background: var(--_contrast); }
+  .control:checked + .indicator .thumb { inset-inline-start: calc(100% - var(--_s) + 4px); border-color: transparent; background: var(--_contrast); }
   /* Disabled: a muted track (gray when on, like a disabled checkbox) and a
      plain thumb that stays visible on it, on its side. */
   .control:disabled + .indicator .thumb { background: var(--ray-background); border-color: var(--ray-border); box-shadow: none; }

package/components/table/table.js

@@ -27,14 +27,14 @@ const styles = css`
   .scroll { max-height: var(--ray-table-max-height, none); overflow: auto; }
   :host([with-border]) .scroll { border: 1px solid var(--ray-border); border-radius: var(--ray-radius-default); }
   table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
-  caption { padding: var(--_py) var(--_px); text-align: left; font-weight: var(--ray-font-weight-semibold); }
-  th, td { padding: var(--_py) var(--_px); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ray-border); }
-  :host([with-column-borders]) th + th, :host([with-column-borders]) td + td { border-left: 1px solid var(--ray-border); }
+  caption { padding: var(--_py) var(--_px); text-align: start; font-weight: var(--ray-font-weight-semibold); }
+  th, td { padding: var(--_py) var(--_px); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--ray-border); }
+  :host([with-column-borders]) th + th, :host([with-column-borders]) td + td { border-inline-start: 1px solid var(--ray-border); }
   tbody tr:last-child td { border-bottom: 0; }
   :host(:not([with-border])) tbody tr:last-child td { border-bottom: 1px solid var(--ray-border); }
   th { font-size: var(--ray-font-size-xs); font-weight: var(--ray-font-weight-semibold); color: var(--ray-muted-foreground); white-space: nowrap; background: var(--ray-background); }
   :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--ray-border); }
-  [data-align="right"] { text-align: right; }
+  [data-align="right"] { text-align: right; } /* physical */
   [data-align="center"] { text-align: center; }
   :host([striped]) tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ray-muted) 60%, transparent); }
   tbody tr:hover td { background: var(--ray-default-hover); }
@@ -61,7 +61,7 @@ const styles = css`
   th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--ray-foreground); }
   th[aria-sort="ascending"] .sort svg, th[aria-sort="descending"] .sort svg { opacity: 1; }
   th[aria-sort="descending"] .sort svg { transform: rotate(180deg); }
-  .check { width: 1%; padding-right: 0; }
+  .check { width: 1%; padding-inline-end: 0; }
   .check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ray-primary); cursor: pointer; vertical-align: middle; }
   .empty td { padding: var(--ray-space-8) var(--_px); text-align: center; color: var(--ray-muted-foreground); }
   .empty:hover td { background: inherit; }

package/components/tabs/tabs.js

@@ -3,12 +3,25 @@
 // Tabs and panels are light-DOM children, so their roles, ids,
 // aria-controls and aria-labelledby work as plain attributes. A tab and its
 // panel share a `value`.
+//
+// Too many tabs for the width: the list scrolls sideways, fades the edge that
+// hides tabs (the host carries data-overflow-start / data-overflow-end), turns
+// a vertical wheel into a sideways scroll and keeps the selected tab in view.
 
 import { RayElement, css, define, uid } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
+import { SideScroller, sideScrollerStyles } from "../../core/scroll.js";
 import { applyColor } from "../../core/styles.js";
 
 const tabsStyles = css`
   :host { display: block; }
+  /* The size scale, inherited by the ray-tab children (own names: they reach
+     the panels' content too). */
+  :host { --_tab-h: var(--ray-control-height-sm); --_tab-fs: var(--ray-font-size-sm); --_tab-px: var(--ray-space-4); --_tab-gap: var(--ray-space-2); }
+  :host([size="xs"]) { --_tab-h: var(--ray-control-height-xs); --_tab-fs: var(--ray-font-size-xs); --_tab-px: var(--ray-space-3); --_tab-gap: var(--ray-space-1); }
+  :host([size="md"]) { --_tab-h: var(--ray-control-height-md); --_tab-fs: var(--ray-font-size-md); --_tab-px: var(--ray-space-5); }
+  :host([size="lg"]) { --_tab-h: var(--ray-control-height-lg); --_tab-fs: var(--ray-font-size-lg); --_tab-px: var(--ray-space-6); --_tab-gap: var(--ray-space-3); }
+  :host([size="xl"]) { --_tab-h: var(--ray-control-height-xl); --_tab-fs: var(--ray-font-size-xl); --_tab-px: var(--ray-space-8); --_tab-gap: var(--ray-space-3); }
   :host([orientation="vertical"]) { display: flex; gap: var(--ray-space-4); }
   /* Too many tabs for the width: the list scrolls sideways instead of
      wrapping (a wrapped underline reads as two separate tab bars). The
@@ -24,9 +37,9 @@ const tabsStyles = css`
   }
   .list::-webkit-scrollbar { display: none; }
   .list ::slotted(ray-tab) { flex: none; }
-  :host([orientation="vertical"]) .list { flex-direction: column; overflow-x: visible; box-shadow: none; border-right: 2px solid var(--ray-border); }
+  :host([orientation="vertical"]) .list { flex-direction: column; overflow-x: visible; box-shadow: none; border-inline-end: 2px solid var(--ray-border); }
   :host([variant="outline"]) .list { --_line: 1px; }
-  :host([variant="outline"][orientation="vertical"]) .list { border-right-width: 1px; }
+  :host([variant="outline"][orientation="vertical"]) .list { border-inline-end-width: 1px; }
   :host([variant="pills"]) .list { gap: var(--ray-space-1); border: 0; box-shadow: none; }
   :host([grow]) .list ::slotted(ray-tab) { flex: 1 0 auto; }
   .panels { flex: 1; min-width: 0; padding-top: var(--ray-space-3); }
@@ -41,8 +54,9 @@ export class RayTabs extends RayElement {
     color: { type: String, reflect: true },
     activation: { type: String, default: "auto" },
     grow: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true, default: "sm" },
   };
-  static styles = [tabsStyles];
+  static styles = [sideScrollerStyles, tabsStyles];
   static template = `<div class="list" part="list" role="tablist"><slot name="tab"></slot></div><div class="panels" part="panels"><slot></slot></div>`;
 
   constructor() {
@@ -55,6 +69,20 @@ export class RayTabs extends RayElement {
     for (const slot of this.shadowRoot.querySelectorAll("slot")) {
       slot.addEventListener("slotchange", () => this.requestUpdate());
     }
+    this._scroller = new SideScroller(this, this.$(".list"), {
+      active: () => this.orientation !== "vertical",
+      onResize: () => this.requestUpdate(),
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._scroller.connect();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._scroller.disconnect();
   }
 
   get tabs() {
@@ -98,6 +126,11 @@ export class RayTabs extends RayElement {
       panel.tabIndex = 0;
       panel.hidden = panel.value !== this.value;
     }
+    // Once laid out: a list with no width yet tries again on the next update.
+    if (this.value !== this._revealed && this._scroller.reveal(tabs.find((t) => t.value === this.value))) {
+      this._revealed = this.value;
+    }
+    this._scroller.update();
   }
 
   _select(tab, user) {
@@ -114,9 +147,11 @@ export class RayTabs extends RayElement {
     const vertical = this.orientation === "vertical";
     const next = vertical ? "ArrowDown" : "ArrowRight";
     const prev = vertical ? "ArrowUp" : "ArrowLeft";
+    // Right to left, ArrowLeft is the next tab.
+    const key = vertical ? e.key : inlineKey(e.key, this);
     let target = null;
-    if (e.key === next) target = tabs[(i + 1) % tabs.length];
-    else if (e.key === prev) target = tabs[(i - 1 + tabs.length) % tabs.length];
+    if (key === next) target = tabs[(i + 1) % tabs.length];
+    else if (key === prev) target = tabs[(i - 1 + tabs.length) % tabs.length];
     else if (e.key === "Home") target = tabs[0];
     else if (e.key === "End") target = tabs[tabs.length - 1];
     else if ((e.key === "Enter" || e.key === " ") && this.activation === "manual") {
@@ -136,10 +171,10 @@ const tabStyles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--ray-space-2);
-    min-height: var(--ray-control-height-sm);
-    padding: 0 var(--ray-space-4);
-    font-size: var(--ray-font-size-sm);
+    gap: var(--_tab-gap, var(--ray-space-2));
+    min-height: var(--_tab-h, var(--ray-control-height-sm));
+    padding: 0 var(--_tab-px, var(--ray-space-4));
+    font-size: var(--_tab-fs, var(--ray-font-size-sm));
     font-weight: var(--ray-font-weight-medium);
     color: var(--ray-muted-foreground);
     white-space: nowrap;
@@ -157,14 +192,14 @@ const tabStyles = css`
   :host([data-variant="default"]) { border-bottom: 2px solid transparent; }
   :host([data-variant="default"]:hover:not([data-active])) { border-bottom-color: var(--ray-border); background: var(--ray-muted); }
   :host([data-variant="default"][data-active]) { border-bottom-color: var(--_filled, var(--ray-primary)); }
-  :host([data-variant="default"][data-vertical]) { margin: 0 -2px 0 0; justify-content: flex-start; border-bottom: 0; border-right: 2px solid transparent; }
-  :host([data-variant="default"][data-vertical][data-active]) { border-right-color: var(--_filled, var(--ray-primary)); }
+  :host([data-variant="default"][data-vertical]) { margin: 0; margin-inline-end: -2px; justify-content: flex-start; border-bottom: 0; border-inline-end: 2px solid transparent; }
+  :host([data-variant="default"][data-vertical][data-active]) { border-inline-end-color: var(--_filled, var(--ray-primary)); }
 
   /* outline */
   :host([data-variant="outline"]) { border: 1px solid transparent; border-radius: var(--ray-radius-default) var(--ray-radius-default) 0 0; }
   :host([data-variant="outline"][data-active]) { border-color: var(--ray-border); border-bottom-color: var(--ray-background); background: var(--ray-background); }
-  :host([data-variant="outline"][data-vertical]) { margin: 0 -1px 0 0; justify-content: flex-start; border-radius: var(--ray-radius-default) 0 0 var(--ray-radius-default); }
-  :host([data-variant="outline"][data-vertical][data-active]) { border-bottom-color: var(--ray-border); border-right-color: var(--ray-background); }
+  :host([data-variant="outline"][data-vertical]) { margin: 0; margin-inline-end: -1px; justify-content: flex-start; border-radius: 0; border-start-start-radius: var(--ray-radius-default); border-end-start-radius: var(--ray-radius-default); }
+  :host([data-variant="outline"][data-vertical][data-active]) { border-bottom-color: var(--ray-border); border-inline-end-color: var(--ray-background); }
 
   /* pills */
   :host([data-variant="pills"]) { border-radius: var(--ray-radius-default); }
@@ -174,15 +209,20 @@ const tabStyles = css`
   .section { display: inline-flex; }
   .section:not([data-filled]) { display: none; }
   ::slotted(svg) { width: 1rem; height: 1rem; }
+  /* count: a small number after the label, lighter than a badge. */
+  .count { font-size: 0.85em; font-variant-numeric: tabular-nums; color: var(--ray-muted-foreground); }
+  .count:empty { display: none; }
+  :host([data-active]) .count, :host(:hover) .count { color: inherit; opacity: 0.75; }
 `;
 
 export class RayTab extends RayElement {
   static properties = {
     value: { type: String, reflect: true },
     disabled: { type: Boolean, reflect: true },
+    count: { type: String, reflect: true },
   };
   static styles = [tabStyles];
-  static template = `<span class="section" part="left-section"><slot name="left"></slot></span><slot></slot><span class="section" part="right-section"><slot name="right"></slot></span>`;
+  static template = `<span class="section" part="left-section"><slot name="left"></slot></span><slot></slot><span class="count" part="count"></span><span class="section" part="right-section"><slot name="right"></slot></span>`;
 
   constructor() {
     super();
@@ -198,6 +238,7 @@ export class RayTab extends RayElement {
   }
 
   update(changed) {
+    this.$(".count").textContent = this.count ?? "";
     if (changed.has("value") || changed.has("disabled")) this.closest("ray-tabs")?.requestUpdate();
   }
 }