@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/components/radio-group.ts

@@ -12,11 +12,10 @@
  * Design tokens used: --input, --primary, --ring, --destructive.
  *
  * A11y (required for accessible output):
- *   `data-slot="radio"` is REQUIRED, not decoration. The injected stylesheet
- *   keys the indicator dot on it, and `radioClass()` carries no checked
- *   background fill, so without the attribute a SELECTED radio differs from an
- *   unselected one by border colour alone. That is both easy to miss and a
- *   WCAG 1.4.1 problem (state by colour only). Every example here carries it.
+ *   The dot is drawn by the class itself, so a selected radio never differs
+ *   from an unselected one by colour alone (WCAG 1.4.1), with or without
+ *   JavaScript. Keep `data-slot="radio"` on the input, as every example here
+ *   does, since the styles' field rules select on it.
  *   NAME THE GROUP. A bare `<div role="radiogroup">` has no accessible name, so
  *   a screen reader announces "radio group" with no idea what is being chosen.
  *   Point `aria-labelledby` at the visible group label, as below, or use a
@@ -48,68 +47,17 @@
  */
 import { cn } from '../lib/utils.ts';
 
-// Two SVGs, one per theme. The dot needs to contrast with the radio's
-// inner surface: and that surface flips between themes:
-//
-//   light: input bg is `bg-transparent` (so the page bg shows through;
-//          page bg is near-white) → dot must be DARK to be visible.
-//   dark : input bg is `dark:bg-input/30` (a translucent white over the
-//          near-black page bg; resolves to near-black) → dot must be
-//          LIGHT to be visible.
-//
-// Hardcoding a single dark-coloured dot (the original implementation)
-// painted invisibly on the near-black dark-mode surface, making the
-// :checked state indistinguishable from unchecked. Same pattern the
-// checkbox fix uses (CHECKMARK_LIGHT / CHECKMARK_DARK): `currentColor`
-// in a data:url SVG used as background-image does not inherit from the
-// host element, so we ship two SVGs and toggle them via a theme
-// selector.
-const DOT_LIGHT =
-  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='5' fill='oklch(0.205 0 0)'/></svg>\")";
-const DOT_DARK =
-  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='5' fill='oklch(0.985 0 0)'/></svg>\")";
-
+// The dot is a radial gradient in `currentColor`, the radio's own text colour,
+// which the style chooses. shadcn's styles fill a checked radio with the
+// primary colour and set `data-checked:text-primary-foreground`, so the dot is
+// the light one on the fill; the default style keeps a transparent ring and
+// sets `checked:text-primary`, so the dot is the primary one. A fixed colour
+// (the SVG this replaced, one per theme) could only match one of the two, and
+// disappeared into the fill under every shadcn style. Half the box across,
+// as shadcn's indicator is. It rides the class itself, so a checked radio
+// paints in the first paint and with JavaScript off.
 const RADIO_CLASS =
-  'aspect-square size-4 shrink-0 appearance-none rounded-full border border-input bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 checked:border-primary checked:bg-no-repeat checked:bg-center dark:bg-input/30 dark:aria-invalid:ring-destructive/40';
-
-// Three sibling rule blocks for theme selection: mirrors the
-// checkbox.ts pattern in this same registry:
-//   - prefers-color-scheme: dark (OS preference, gated by
-//     :not([data-theme='light']):not(.light) so an explicit-light
-//     toggle still wins over the OS)
-//   - :root[data-theme='dark'] (explicit data-attribute toggle)
-//   - :root.dark (explicit class toggle, shadcn convention)
-const STYLES = `
-input[type="radio"][data-slot="radio"]:checked {
-  background-image: ${DOT_LIGHT};
-  background-size: 100%;
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']):not(.light) input[type="radio"][data-slot="radio"]:checked {
-    background-image: ${DOT_DARK};
-  }
-}
-:root[data-theme='dark'] input[type="radio"][data-slot="radio"]:checked,
-:root.dark input[type="radio"][data-slot="radio"]:checked {
-  background-image: ${DOT_DARK};
-}
-`;
-
-let installed = false;
-export function installRadioStyles(): void {
-  if (installed || typeof document === 'undefined') return;
-  if (document.getElementById('ui-radio-styles')) {
-    installed = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = 'ui-radio-styles';
-  style.textContent = STYLES;
-  document.head.appendChild(style);
-  installed = true;
-}
-
-if (typeof document !== 'undefined') installRadioStyles();
+  'cn-radio-group-item group/radio-group-item peer aspect-square shrink-0 appearance-none border outline-none disabled:cursor-not-allowed disabled:opacity-50 checked:bg-[image:radial-gradient(circle_closest-side,currentColor_50%,transparent_calc(50%+0.5px))]';
 
 /** Tailwind classes for a `<div role="radiogroup">` container. */
 export type RadioGroupOrientation = 'vertical' | 'horizontal';
@@ -127,16 +75,13 @@ export function radioGroupClass(opts: { orientation?: RadioGroupOrientation } =
   const orientation = opts.orientation ?? 'vertical';
   return orientation === 'horizontal'
     ? 'flex flex-wrap gap-x-6 gap-y-3'
-    : 'grid gap-3';
+    : 'cn-radio-group';
 }
 
 /**
- * Tailwind classes for a styled `<input type="radio">`.
- *
- * PAIR THIS WITH `data-slot="radio"` ON THE SAME INPUT. The injected stylesheet
- * keys the indicator dot on that attribute, and this class deliberately carries
- * no checked background fill, so the class alone leaves a selected radio
- * differing from an unselected one by border colour and nothing else.
+ * Tailwind classes for a styled `<input type="radio">`. The class draws the
+ * checked dot itself, so a selected radio paints with JavaScript off. Keep
+ * `data-slot="radio"` on the input as shadcn does.
  */
 export function radioClass(): string {
   return cn(RADIO_CLASS);

package/packages/registry/components/resizable.ts

@@ -0,0 +1,330 @@
+/**
+ * Resizable: panels in a row or a column with draggable handles between
+ * them. Tier-2. shadcn's is react-resizable-panels; this is the same layout
+ * on flex shares and Pointer Events, with no dependency. The server renders
+ * the default sizes, so the layout is in the first paint; resizing needs
+ * JavaScript.
+ *
+ * shadcn parity:
+ *   ResizablePanelGroup orientation
+ *                            → <ui-resizable-panel-group orientation="horizontal" | "vertical">
+ *   ResizablePanel (defaultSize, minSize, maxSize)
+ *                            → <ui-resizable-panel default-size min-size max-size> (percentages)
+ *   ResizableHandle withHandle
+ *                            → <ui-resizable-handle with-handle>
+ *   onLayout                 → `ui-layout-change` ({ detail: { sizes } }), percentages in order
+ *
+ * A panel with no `default-size` shares what the sized panels leave (give
+ * every panel a size for an exact server-rendered first paint). A drag
+ * or a key moves the boundary between the two panels around a handle, each
+ * kept within its `min-size` and `max-size`.
+ *
+ * Keyboard (the WAI-ARIA window splitter): a handle is a focusable
+ * separator; the arrows across the group (Left / Right in a row, Up / Down in
+ * a column; Left / Right swap under `dir="rtl"`) move it 10 points, Home and
+ * End move it as far as the panel before it allows.
+ *
+ * A11y (handled by the element): each handle is a `role="separator"` with
+ * `aria-orientation`, `aria-controls` naming the panel before it, and that
+ * panel's size as `aria-valuenow` within its `aria-valuemin` / `aria-valuemax`.
+ * Give the panels' content its own headings or labels, since a separator says
+ * only how big the panel is.
+ *
+ * @example
+ * ```html
+ * <ui-resizable-panel-group orientation="horizontal" class="max-w-md rounded-lg border">
+ *   <ui-resizable-panel default-size="50"><div class="flex h-[200px] items-center justify-center p-6">One</div></ui-resizable-panel>
+ *   <ui-resizable-handle with-handle></ui-resizable-handle>
+ *   <ui-resizable-panel default-size="50" min-size="20"><div class="flex h-full items-center justify-center p-6">Two</div></ui-resizable-panel>
+ * </ui-resizable-panel-group>
+ * ```
+ */
+import { WebComponent, html, prop } from '@webjsdev/core';
+import { cn, takeAuthoredClass } from '../lib/utils.ts';
+
+/** The group's classes (the element applies them). */
+export const resizablePanelGroupClass = (): string =>
+  'cn-resizable-panel-group flex h-full w-full aria-[orientation=vertical]:flex-col';
+/** A handle's classes (the element puts them on the handle itself). */
+export const resizableHandleClass = (): string =>
+  'cn-resizable-handle relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90';
+/** A handle's grip. */
+export const resizableHandleIconClass = (): string => 'cn-resizable-handle-icon z-10 flex shrink-0';
+
+const GROUP = 'ui-resizable-panel-group';
+const STEP = 10;
+let uid = 0;
+
+function groupOf(el: Element): UiResizablePanelGroup | null {
+  return (typeof el.closest === 'function' ? el.closest(GROUP) : null) as UiResizablePanelGroup | null;
+}
+
+function num(v: string | null | undefined, fallback: number): number {
+  const n = Number(v);
+  return v !== null && v !== undefined && v !== '' && Number.isFinite(n) ? n : fallback;
+}
+
+// --------------------------------------------------------------------------
+// <ui-resizable-panel-group>
+// --------------------------------------------------------------------------
+
+export class UiResizablePanelGroup extends WebComponent({
+  orientation: prop<'horizontal' | 'vertical'>(String, { reflect: true }),
+}) {
+  // The current sizes, in percent, panel by panel; empty until first laid out.
+  sizes: number[] = [];
+  _authored: string | null = null;
+
+  constructor() {
+    super();
+    this.orientation = 'horizontal';
+  }
+
+  // shadcn's className on ResizablePanelGroup lands on the group box, which
+  // is the flex item of whatever holds it (a `max-w-sm` on the group, the
+  // `h-full` that lets a nested group fill its panel). So the class written
+  // on this host moves to the box it renders, read once at first render, and
+  // the host becomes `display: contents`, leaving the box to size itself
+  // against the host's parent as shadcn's does. The host's box is turned off
+  // through its style rather than a class: the server serves the class the
+  // tag was written with, but it does serve a style the element adds, so the
+  // first paint already has one box, not two.
+  render() {
+    this._authored = takeAuthoredClass(this, null);
+    if (!this.getAttribute?.('style')) this.setAttribute?.('style', 'display: contents');
+    return html`<div
+      data-slot="resizable-panel-group"
+      data-panel-group-direction=${this.orientation}
+      aria-orientation=${this.orientation}
+      class=${cn(resizablePanelGroupClass(), this._authored)}
+    ><slot></slot></div>`;
+  }
+
+  /** The panels in this group, in order. */
+  panels(): UiResizablePanel[] {
+    if (typeof this.querySelectorAll !== 'function') return [];
+    return Array.from(this.querySelectorAll<UiResizablePanel>('ui-resizable-panel')).filter((p) => groupOf(p) === this);
+  }
+
+  /** The handles in this group, in order. */
+  handles(): UiResizableHandle[] {
+    if (typeof this.querySelectorAll !== 'function') return [];
+    return Array.from(this.querySelectorAll<UiResizableHandle>('ui-resizable-handle')).filter((h) => groupOf(h) === this);
+  }
+
+  /** The default layout: sized panels keep their size, the rest share what is left. */
+  initialSizes(panels = this.panels()): number[] {
+    const given = panels.map((p) => num(p.getAttribute?.('default-size'), NaN));
+    const used = given.filter((n) => !Number.isNaN(n)).reduce((a, b) => a + b, 0);
+    const free = given.filter((n) => Number.isNaN(n)).length;
+    const share = free ? Math.max(0, 100 - used) / free : 0;
+    return given.map((n) => (Number.isNaN(n) ? share : n));
+  }
+
+  /** The size a panel is drawn at: its live size once laid out, else its default. */
+  sizeOf(panel: UiResizablePanel): number {
+    const panels = this.panels();
+    const i = panels.indexOf(panel);
+    // The server cannot list the panels, so there a panel draws at its own
+    // default size: give every panel one for an exact first paint.
+    if (i < 0) return num(panel.getAttribute?.('default-size'), 50);
+    return (this.sizes.length === panels.length ? this.sizes : this.initialSizes(panels))[i];
+  }
+
+  /**
+   * Move the boundary after panel `i` by `delta` points, keeping both panels
+   * within their limits. Returns whether anything moved.
+   */
+  resize(i: number, delta: number): boolean {
+    const panels = this.panels();
+    if (i < 0 || i >= panels.length - 1) return false;
+    if (this.sizes.length !== panels.length) this.sizes = this.initialSizes(panels);
+    const a = panels[i];
+    const b = panels[i + 1];
+    const sa = this.sizes[i];
+    const sb = this.sizes[i + 1];
+    // The move lies between the most either panel can give and take.
+    const lo = Math.max(a.min - sa, sb - b.max);
+    const hi = Math.min(a.max - sa, sb - b.min);
+    const d = Math.min(Math.max(delta, lo), hi);
+    if (!Number.isFinite(d) || Math.abs(d) < 1e-9) return false;
+    const next = [...this.sizes];
+    next[i] = Number((sa + d).toFixed(4));
+    next[i + 1] = Number((sb - d).toFixed(4));
+    this.sizes = next;
+    this._apply();
+    this.dispatchEvent(new CustomEvent('ui-layout-change', { bubbles: true, detail: { sizes: [...next] } }));
+    return true;
+  }
+
+  // Redraw every panel and handle at the current sizes.
+  _apply(): void {
+    for (const p of this.panels()) p.requestUpdate?.();
+    for (const h of this.handles()) h.requestUpdate?.();
+  }
+
+  _rtl(): boolean {
+    return typeof getComputedStyle === 'function' && getComputedStyle(this).direction === 'rtl';
+  }
+
+  /** The group's length along its axis, in pixels. */
+  extent(): number {
+    const box = this.querySelector?.<HTMLElement>('[data-slot="resizable-panel-group"]');
+    const r = box?.getBoundingClientRect();
+    if (!r) return 0;
+    return this.orientation === 'vertical' ? r.height : r.width;
+  }
+}
+UiResizablePanelGroup.register('ui-resizable-panel-group');
+
+// --------------------------------------------------------------------------
+// <ui-resizable-panel>
+// --------------------------------------------------------------------------
+
+export class UiResizablePanel extends WebComponent {
+  _id = '';
+
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    this._id ||= `ui-resizable-panel-${++uid}`;
+  }
+
+  get min(): number {
+    return num(this.getAttribute?.('min-size'), 0);
+  }
+
+  get max(): number {
+    return num(this.getAttribute?.('max-size'), 100);
+  }
+
+  // A panel is the flex child itself, so it carries its own share.
+  render() {
+    const size = groupOf(this)?.sizeOf(this) ?? 100;
+    if (typeof this.setAttribute === 'function') {
+      if (this._id) this.setAttribute('id', this._id);
+      this.setAttribute('data-slot', 'resizable-panel');
+      this.setAttribute('data-panel-size', String(Number(size.toFixed(1))));
+      this.setAttribute('style', `flex: ${size} 1 0px; overflow: hidden;`);
+    }
+    return html`<slot></slot>`;
+  }
+}
+UiResizablePanel.register('ui-resizable-panel');
+
+// --------------------------------------------------------------------------
+// <ui-resizable-handle>
+// --------------------------------------------------------------------------
+
+export class UiResizableHandle extends WebComponent({
+  withHandle: prop(Boolean, { attribute: 'with-handle' }),
+}) {
+  _authored: string | null = null;
+  _drag: { at: number; extent: number } | null = null;
+
+  constructor() {
+    super();
+    this.withHandle = false;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    this.addEventListener('keydown', this._onKeyDown);
+    this.addEventListener('pointerdown', this._onPointerDown);
+    this.addEventListener('pointermove', this._onPointerMove);
+    this.addEventListener('pointerup', this._onPointerUp);
+    this.addEventListener('pointercancel', this._onPointerUp);
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('keydown', this._onKeyDown);
+    this.removeEventListener('pointerdown', this._onPointerDown);
+    this.removeEventListener('pointermove', this._onPointerMove);
+    this.removeEventListener('pointerup', this._onPointerUp);
+    this.removeEventListener('pointercancel', this._onPointerUp);
+    super.disconnectedCallback?.();
+  }
+
+  // The panel before this handle, whose size the handle reports.
+  _index(): number {
+    const group = groupOf(this);
+    if (!group) return -1;
+    const panels = group.panels();
+    let before = -1;
+    for (let i = 0; i < panels.length; i++) {
+      if (panels[i].compareDocumentPosition?.(this) & 4) before = i;
+    }
+    return before;
+  }
+
+  // The handle is the separator itself: a flex child that takes focus.
+  render() {
+    this._authored = takeAuthoredClass(this);
+    const group = groupOf(this);
+    const vertical = group?.orientation === 'vertical';
+    const i = typeof this.compareDocumentPosition === 'function' ? this._index() : -1;
+    const panel = i >= 0 ? group?.panels()[i] : null;
+    if (typeof this.setAttribute === 'function') {
+      this.setAttribute('class', cn(resizableHandleClass(), this._authored));
+      this.setAttribute('data-slot', 'resizable-handle');
+      this.setAttribute('role', 'separator');
+      this.setAttribute('tabindex', '0');
+      // A row of panels has upright separators, and a column flat ones.
+      this.setAttribute('aria-orientation', vertical ? 'horizontal' : 'vertical');
+      if (panel && group) {
+        this.setAttribute('aria-controls', panel.id);
+        this.setAttribute('aria-valuenow', String(Math.round(group.sizeOf(panel))));
+        this.setAttribute('aria-valuemin', String(panel.min));
+        this.setAttribute('aria-valuemax', String(panel.max));
+      }
+    }
+    return this.withHandle
+      ? html`<div class=${resizableHandleIconClass()}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="size-2.5"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></div>`
+      : html``;
+  }
+
+  _onKeyDown = (e: KeyboardEvent): void => {
+    const group = groupOf(this);
+    if (!group) return;
+    const i = this._index();
+    const vertical = group.orientation === 'vertical';
+    const flip = !vertical && group._rtl() ? -1 : 1;
+    let delta: number | null = null;
+    if (!vertical && e.key === 'ArrowLeft') delta = -STEP * flip;
+    else if (!vertical && e.key === 'ArrowRight') delta = STEP * flip;
+    else if (vertical && e.key === 'ArrowUp') delta = -STEP;
+    else if (vertical && e.key === 'ArrowDown') delta = STEP;
+    else if (e.key === 'Home') delta = -100;
+    else if (e.key === 'End') delta = 100;
+    if (delta === null) return;
+    e.preventDefault();
+    group.resize(i, delta);
+  };
+
+  _onPointerDown = (e: PointerEvent): void => {
+    const group = groupOf(this);
+    if (!group || e.button !== 0) return;
+    e.preventDefault();
+    this.focus();
+    const vertical = group.orientation === 'vertical';
+    this._drag = { at: vertical ? e.clientY : e.clientX, extent: group.extent() };
+    try { this.setPointerCapture(e.pointerId); } catch { /* a pointer the engine does not track */ }
+    this.setAttribute('data-resize-handle-state', 'drag');
+  };
+
+  _onPointerMove = (e: PointerEvent): void => {
+    const group = groupOf(this);
+    if (!this._drag || !group || !this._drag.extent) return;
+    const vertical = group.orientation === 'vertical';
+    const now = vertical ? e.clientY : e.clientX;
+    const px = (now - this._drag.at) * (!vertical && group._rtl() ? -1 : 1);
+    if (group.resize(this._index(), (px / this._drag.extent) * 100)) this._drag.at = now;
+  };
+
+  _onPointerUp = (e: PointerEvent): void => {
+    if (!this._drag) return;
+    this._drag = null;
+    try { this.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+    this.removeAttribute('data-resize-handle-state');
+  };
+}
+UiResizableHandle.register('ui-resizable-handle');

package/packages/registry/components/scroll-area.ts

@@ -0,0 +1,46 @@
+/**
+ * Scroll area: a region that scrolls inside a fixed size, with a thin,
+ * theme-coloured scrollbar. Tier-1 class helper on native overflow; no
+ * script, no custom scrollbar element.
+ *
+ * shadcn parity:
+ *   ScrollArea (+ its viewport)  → scrollAreaClass({ orientation })
+ *   ScrollBar                    → the native scrollbar, styled through
+ *                                  scrollbar-width and scrollbar-color
+ *
+ * shadcn draws its own scrollbar with Radix. The platform's scrollbar is
+ * styled instead here, which keeps native scrolling, momentum, keyboard
+ * scrolling and the browser's own overlay behaviour intact. Give the element
+ * a size (`h-72`, `max-h-96`, `w-96`) so it has something to scroll inside.
+ *
+ * A11y (required for accessible output): a region that scrolls must be
+ * reachable by keyboard, so give it `tabindex="0"`, and because a focusable
+ * region needs a name, add `role="region"` with an `aria-label` that says what
+ * scrolls ("Release notes"). The focus ring is part of the class.
+ *
+ * Design tokens used: --border, --ring.
+ *
+ * @example
+ * ```html
+ * <div class=${cn(scrollAreaClass(), 'h-72 w-48 rounded-md border')} tabindex="0" role="region" aria-label="Tags">
+ *   <ul class="p-4">${tags.map((t) => html`<li>${t}</li>`)}</ul>
+ * </div>
+ * ```
+ */
+import { cn } from '../lib/utils.ts';
+
+const BASE =
+  'cn-scroll-area relative rounded-[inherit] [scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50';
+
+const ORIENTATIONS = {
+  vertical: 'overflow-y-auto overflow-x-hidden',
+  horizontal: 'overflow-x-auto overflow-y-hidden',
+  both: 'overflow-auto',
+} as const;
+
+export type ScrollAreaOrientation = keyof typeof ORIENTATIONS;
+
+/** The scrolling region. `orientation` picks the axis (default vertical). */
+export function scrollAreaClass(opts: { orientation?: ScrollAreaOrientation } = {}): string {
+  return cn(BASE, ORIENTATIONS[opts.orientation ?? 'vertical']);
+}