@raylang/elements 0.8.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/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;
@@ -76,11 +86,35 @@ const styles = css`
   @keyframes ray-sidebar-in { from { transform: translateX(var(--_from)); } }
   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: "start" },
     variant: { type: String, reflect: true, default: "sidebar" },
@@ -88,6 +122,11 @@ export class RaySidebar extends RayElement {
     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 = `
@@ -96,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;
@@ -128,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() {
@@ -176,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();
@@ -195,6 +259,77 @@ 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");
@@ -217,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/split/split.js

@@ -4,7 +4,8 @@
 //
 // 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";
@@ -88,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.
       }
@@ -109,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;

package/components/tabs/tabs.js

@@ -3,13 +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
@@ -42,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() {
@@ -56,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() {
@@ -99,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) {
@@ -139,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;
@@ -177,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();
@@ -201,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();
   }
 }

package/components/textarea/textarea.js

@@ -3,6 +3,8 @@
 import { css, define } from "../../core/core.js";
 import { sizeStyles, radiusStyles } from "../../core/styles.js";
 import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+import { syncHighlight, textLayerStyles } from "../../core/textlayer.js";
+import { syncComplete, completeStyles } from "../../core/complete.js";
 
 const styles = css`
   .box { align-items: stretch; }
@@ -26,8 +28,11 @@ export class RayTextarea extends FieldControl {
     autosize: { type: Boolean, reflect: true },
     maxRows: { type: Number },
     readonly: { type: Boolean, reflect: true },
+    highlight: { attribute: false },
+    complete: { attribute: false },
+    suggestionsLabel: { type: String, default: "Suggestions" },
   };
-  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, textLayerStyles, completeStyles, styles];
   static template = fieldTemplate(`<textarea id="control" class="control" part="textarea"></textarea>`, { sections: false });
 
   static get observedAttributes() {
@@ -68,6 +73,13 @@ export class RayTextarea extends FieldControl {
     this.syncField();
     this._commit();
     this._fit();
+    syncHighlight(this);
+    syncComplete(this);
+  }
+
+  /** Runs `highlight` again (what it marks changed, not the text). */
+  refreshHighlight() {
+    syncHighlight(this);
   }
 
   _commit() {