@webjsdev/ui 0.3.1 → 0.3.2

package/packages/registry/components/sonner.ts

@@ -0,0 +1,240 @@
+/**
+ * Sonner: toast notification queue. Tier-2. Hand-rolled (no `sonner`
+ * npm dependency); ships as a single `<ui-sonner>` viewport you mount
+ * once + an imperative `toast()` API published as a module export. A
+ * singleton bus routes new toasts to the most recently connected
+ * viewport; multiple `<ui-sonner>` instances are supported with
+ * explicit per-instance dispatch.
+ *
+ * shadcn parity:
+ *   <Toaster />     → <ui-sonner position>
+ *   toast(msg, opts)
+ *                   → toast()  (plus toast.success / .error / .info / .warning /
+ *                     .loading / .promise / .dismiss)
+ *
+ * Usage:
+ *   <!-- Mount once at the root of your app (typically in layout.ts): -->
+ *   <ui-sonner position="bottom-right"></ui-sonner>
+ *
+ *   // Then from anywhere (server or client component):
+ *   import { toast } from '@/components/ui/sonner.ts';
+ *   toast('Saved!');
+ *   toast.success('Account created');
+ *   toast.error('Failed to save', { description: 'Try again' });
+ *   toast.promise(savePost(), { loading: 'Saving…', success: 'Saved', error: 'Failed' });
+ *   toast.dismiss(id);
+ *
+ * Attributes on <ui-sonner>:
+ *   `position`: "top-left" | "top-center" | "top-right" |
+ *               "bottom-left" | "bottom-center" | "bottom-right" (default).
+ *
+ * Per-toast options (passed as the second arg to `toast(msg, opts)`):
+ *   `id`:          string | number. Stable id so repeated calls update in place.
+ *   `description`: string. Secondary line under the title.
+ *   `duration`:    ms, default 4000 (loading toasts default to 0, no auto-dismiss).
+ *   `action`:      { label, onClick } | undefined. Renders an action button.
+ *   `cancel`:      { label, onClick } | undefined. Renders a cancel button.
+ *
+ * Events: none dispatched (consumers act on the id returned by `toast()`).
+ *
+ * Programmatic API on <ui-sonner>: `.addToast(message, opts, type)` for
+ * per-instance dispatch (bypasses the singleton router that `toast()`
+ * uses); typically only needed when mounting multiple viewports.
+ *
+ * Design tokens used: --popover, --popover-foreground, --border, --radius.
+ */
+import { WebComponent, html, repeat, unsafeHTML, signal } from '@webjsdev/core';
+
+type ToastType = 'default' | 'success' | 'error' | 'info' | 'warning' | 'loading';
+
+interface ToastOptions {
+  id?: string | number;
+  description?: string;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+interface ToastItem extends ToastOptions {
+  id: string | number;
+  type: ToastType;
+  message: string;
+}
+
+let nextId = 1;
+const toaster: { add(t: ToastItem): void; remove(id: string | number): void } = {
+  add() {},
+  remove() {},
+};
+
+function publish(item: ToastItem): string | number {
+  toaster.add(item);
+  return item.id;
+}
+
+function makeToast(message: string, opts: ToastOptions = {}, type: ToastType = 'default'): string | number {
+  return publish({
+    id: opts.id ?? nextId++,
+    type,
+    message,
+    description: opts.description,
+    duration: opts.duration ?? (type === 'loading' ? 0 : 4000),
+    action: opts.action,
+  });
+}
+
+export function toast(message: string, opts?: ToastOptions): string | number {
+  return makeToast(message, opts, 'default');
+}
+toast.success = (msg: string, o?: ToastOptions) => makeToast(msg, o, 'success');
+toast.error = (msg: string, o?: ToastOptions) => makeToast(msg, o, 'error');
+toast.info = (msg: string, o?: ToastOptions) => makeToast(msg, o, 'info');
+toast.warning = (msg: string, o?: ToastOptions) => makeToast(msg, o, 'warning');
+toast.loading = (msg: string, o?: ToastOptions) => makeToast(msg, o, 'loading');
+toast.dismiss = (id?: string | number) => {
+  if (id == null) return;
+  toaster.remove(id);
+};
+toast.promise = <T,>(p: Promise<T>, opts: { loading: string; success: string; error: string }) => {
+  const id = toast.loading(opts.loading);
+  p.then(() => {
+    toast.dismiss(id);
+    toast.success(opts.success);
+  }).catch(() => {
+    toast.dismiss(id);
+    toast.error(opts.error);
+  });
+  return id;
+};
+
+// --------------------------------------------------------------------------
+// <ui-sonner> renders pending toasts. No user-projected children, so no
+// <slot>: the toaster owns its content entirely via render().
+// --------------------------------------------------------------------------
+
+const POSITIONS = {
+  'top-right': 'top-4 right-4',
+  'top-left': 'top-4 left-4',
+  'top-center': 'top-4 left-1/2 -translate-x-1/2',
+  'bottom-right': 'bottom-4 right-4',
+  'bottom-left': 'bottom-4 left-4',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+} as const;
+
+export type SonnerPosition = keyof typeof POSITIONS;
+
+const TOAST_ITEM_BASE =
+  'pointer-events-auto flex w-80 items-start gap-3 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md transition-all';
+
+const TYPE_ICON_COLOR: Record<ToastType, string> = {
+  default: 'text-foreground',
+  success: 'text-emerald-500',
+  error: 'text-destructive',
+  info: 'text-sky-500',
+  warning: 'text-amber-500',
+  loading: 'text-muted-foreground',
+};
+
+export class UiSonner extends WebComponent {
+  static properties = {
+    position: { type: String, reflect: true },
+  };
+  declare position: SonnerPosition;
+  items = signal<ToastItem[]>([]);
+
+  constructor() {
+    super();
+    this.position = 'bottom-right';
+  }
+
+  // Routing the global toast() function to this viewport. Runs in
+  // firstUpdated rather than the constructor because tests can mount
+  // multiple <ui-sonner> instances and the most recently mounted wins
+  // (matches the existing semantics).
+  firstUpdated(): void {
+    toaster.add = (t) => this._add(t);
+    toaster.remove = (id) => this._remove(id);
+  }
+
+  /**
+   * Publish a toast directly to THIS viewport. Use when you have a
+   * specific <ui-sonner> reference and want to bypass the singleton
+   * `toaster.add` routing (which always points to the last-mounted
+   * viewport). Primary use case: docs demos that mount one viewport
+   * per position and want each demo button to fire into its own
+   * viewport. App code should normally call the global `toast()` /
+   * `toast.success()` / etc., which route via the singleton.
+   */
+  addToast(message: string, opts: ToastOptions = {}, type: ToastType = 'default'): string | number {
+    const id = opts.id ?? nextId++;
+    this._add({
+      id,
+      type,
+      message,
+      description: opts.description,
+      duration: opts.duration ?? (type === 'loading' ? 0 : 4000),
+      action: opts.action,
+    });
+    return id;
+  }
+
+  _add(item: ToastItem): void {
+    this.items.set([...this.items.get(), item]);
+    if (item.duration && item.duration > 0) {
+      setTimeout(() => this._remove(item.id), item.duration);
+    }
+  }
+
+  _remove(id: string | number): void {
+    this.items.set(this.items.get().filter((i) => i.id !== id));
+  }
+
+  render() {
+    const pos = POSITIONS[this.position] ?? POSITIONS['bottom-right'];
+    return html`<div
+      data-slot="sonner"
+      class=${`pointer-events-none fixed z-[100] flex flex-col gap-2 ${pos}`}
+    >
+      ${repeat(
+        this.items.get(),
+        (item) => item.id,
+        (item) => html`<div
+          class=${TOAST_ITEM_BASE}
+          data-type=${item.type}
+          role=${item.type === 'error' ? 'alert' : 'status'}
+        >
+          <div class=${`${TYPE_ICON_COLOR[item.type]} pt-0.5`}>${unsafeHTML(ICONS[item.type])}</div>
+          <div class="flex-1">
+            <div class="font-medium">${item.message}</div>
+            ${item.description
+              ? html`<div class="mt-1 text-xs text-muted-foreground">${item.description}</div>`
+              : ''}
+          </div>
+          ${item.action
+            ? html`<button
+                type="button"
+                class="rounded-md px-2 py-1 text-xs font-medium hover:bg-accent"
+                @click=${() => {
+                  item.action!.onClick();
+                  this._remove(item.id);
+                }}
+              >${item.action.label}</button>`
+            : ''}
+        </div>`,
+      )}
+    </div>`;
+  }
+}
+UiSonner.register('ui-sonner');
+
+const ICONS: Record<ToastType, string> = {
+  default: '',
+  success:
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+  error:
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+  info: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+  warning:
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+  loading:
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>',
+};

package/packages/registry/components/switch.ts

@@ -0,0 +1,52 @@
+/**
+ * Switch: toggle styled as a sliding pill. Tier-1 class helpers. A
+ * hidden native `<input type="checkbox" role="switch">` handles form
+ * submission + keyboard; a sibling `<span>` provides the visual track +
+ * thumb (positioned via the `peer-checked:` variant).
+ *
+ * shadcn parity:
+ *   Switch (size: default | sm)  → switchInputClass() on a hidden <input> +
+ *                                   switchTrackClass({ size }) on a sibling <span>
+ *
+ * Usage:
+ *   <label class="inline-flex items-center gap-2">
+ *     <input type="checkbox" role="switch" name="notify" class=${switchInputClass()}>
+ *     <span class=${switchTrackClass()}></span>
+ *     <span class=${labelClass()}>Notifications</span>
+ *   </label>
+ *
+ *   <!-- Small size: -->
+ *   <input type="checkbox" role="switch" name="x" class=${cn(switchInputClass(), 'peer/sm')}>
+ *   <span class=${switchTrackClass({ size: 'sm' })}></span>
+ *
+ * Design tokens used: --primary, --input, --background, --foreground, --ring,
+ * --primary-foreground.
+ */
+import { cn } from '../lib/utils.ts';
+
+/** Hidden native checkbox: handles form value + keyboard activation. */
+export const switchInputClass = (): string => 'peer sr-only';
+
+const TRACK_BASE =
+  'inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 bg-input dark:bg-input/80 peer-checked:bg-primary relative';
+
+const TRACK_SIZES = {
+  default: 'h-[1.15rem] w-8',
+  sm: 'h-3.5 w-6',
+} as const;
+
+const THUMB_SIZES = {
+  default:
+    "after:size-4 after:translate-x-px peer-checked:after:translate-x-[calc(100%-2px)]",
+  sm: "after:size-3 after:translate-x-px peer-checked:after:translate-x-[calc(100%-1px)]",
+} as const;
+
+const THUMB_BASE =
+  'after:pointer-events-none after:absolute after:left-0 after:rounded-full after:bg-background after:transition-transform peer-checked:after:bg-primary-foreground dark:after:bg-foreground';
+
+export type SwitchSize = keyof typeof TRACK_SIZES;
+
+export function switchTrackClass(opts: { size?: SwitchSize } = {}): string {
+  const size = opts.size ?? 'default';
+  return cn(TRACK_BASE, TRACK_SIZES[size], THUMB_BASE, THUMB_SIZES[size]);
+}

package/packages/registry/components/table.ts

@@ -0,0 +1,58 @@
+/**
+ * Table: semantic data table with shadcn styling. Tier-1 class helpers;
+ * compose with native `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`,
+ * `<th>`, `<td>`, `<caption>`. Native semantics + accessibility tree
+ * work out of the box.
+ *
+ * shadcn parity:
+ *   Table container (scroll wrapper)  → tableContainerClass()
+ *   Table                             → tableClass()
+ *   TableHeader / TableBody / TableFooter
+ *                                     → tableHeaderClass() / tableBodyClass() / tableFooterClass()
+ *   TableRow                          → tableRowClass()
+ *   TableHead / TableCell / TableCaption
+ *                                     → tableHeadClass() / tableCellClass() / tableCaptionClass()
+ *
+ * Usage:
+ *   <div class=${tableContainerClass()}>
+ *     <table class=${tableClass()}>
+ *       <thead class=${tableHeaderClass()}>
+ *         <tr class=${tableRowClass()}>
+ *           <th class=${tableHeadClass()}>Name</th>
+ *           <th class=${tableHeadClass()}>Status</th>
+ *         </tr>
+ *       </thead>
+ *       <tbody class=${tableBodyClass()}>
+ *         <tr class=${tableRowClass()}>
+ *           <td class=${tableCellClass()}>Vivek</td>
+ *           <td class=${tableCellClass()}>Active</td>
+ *         </tr>
+ *       </tbody>
+ *       <caption class=${tableCaptionClass()}>Users</caption>
+ *     </table>
+ *   </div>
+ *
+ * Design tokens used: --muted, --muted-foreground, --foreground.
+ */
+
+export const tableContainerClass = (): string => 'relative w-full overflow-x-auto';
+
+export const tableClass = (): string => 'w-full caption-bottom text-sm';
+
+export const tableHeaderClass = (): string => '[&_tr]:border-b';
+
+export const tableBodyClass = (): string => '[&_tr:last-child]:border-0';
+
+export const tableFooterClass = (): string =>
+  'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0';
+
+export const tableRowClass = (): string =>
+  'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted';
+
+export const tableHeadClass = (): string =>
+  'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]';
+
+export const tableCellClass = (): string =>
+  'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]';
+
+export const tableCaptionClass = (): string => 'mt-4 text-sm text-muted-foreground';

package/packages/registry/components/tabs.ts

@@ -0,0 +1,271 @@
+/**
+ * Tabs: sectioned content with keyboard navigation. Tier-2. The parent
+ * <ui-tabs> owns `value` + `orientation`; triggers and panels read from
+ * it via `closest('ui-tabs')` and re-render when value changes.
+ *
+ * APG pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ *
+ * shadcn parity:
+ *   Tabs           → <ui-tabs value orientation>
+ *   TabsList       → <ui-tabs-list variant>
+ *   TabsTrigger    → <ui-tabs-trigger value>
+ *   TabsContent    → <ui-tabs-content value>
+ *
+ * Usage:
+ *   <ui-tabs value="account">
+ *     <ui-tabs-list>
+ *       <ui-tabs-trigger value="account">Account</ui-tabs-trigger>
+ *       <ui-tabs-trigger value="password">Password</ui-tabs-trigger>
+ *     </ui-tabs-list>
+ *     <ui-tabs-content value="account">…</ui-tabs-content>
+ *     <ui-tabs-content value="password">…</ui-tabs-content>
+ *   </ui-tabs>
+ *
+ * Attributes on <ui-tabs>:
+ *   `value`:       string (reflected, controlled). Active tab value.
+ *   `orientation`: "horizontal" (default) | "vertical".
+ *
+ * Attributes on <ui-tabs-list>:
+ *   `variant`: "default" (default, pill-on-muted) | "underline".
+ *
+ * Attributes on <ui-tabs-trigger> / <ui-tabs-content>:
+ *   `value`: string. Identifier this trigger / panel pair shares.
+ *
+ * Events:
+ *   `ui-value-change` on <ui-tabs>: `{ detail: { value } }` after a change.
+ *
+ * Keyboard (on focused trigger):
+ *   ArrowRight / ArrowLeft   next / previous (horizontal)
+ *   ArrowDown / ArrowUp      next / previous (vertical)
+ *   Home / End               first / last
+ *   Enter / Space            activate (native button activation)
+ *
+ * Design tokens used: --muted, --muted-foreground, --foreground, --background,
+ * --input, --ring.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import { cn } from '../lib/utils.ts';
+
+// --------------------------------------------------------------------------
+// Class helpers
+// --------------------------------------------------------------------------
+
+const TABS_BASE = 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col';
+
+const TABS_LIST_BASE =
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=underline]:rounded-none';
+
+const TABS_LIST_VARIANTS = {
+  default: 'bg-muted',
+  underline: 'gap-1 bg-transparent',
+} as const;
+
+export type TabsListVariant = keyof typeof TABS_LIST_VARIANTS;
+
+/** Optional helper exposing the tabs-list class for advanced overrides. */
+export function tabsListClass(opts: { variant?: TabsListVariant } = {}): string {
+  const variant = opts.variant ?? 'default';
+  return cn(TABS_LIST_BASE, TABS_LIST_VARIANTS[variant]);
+}
+
+// The trigger is rendered as a native <button role="tab">, which gives
+// us cursor-pointer + Enter/Space activation + focus for free. The class
+// here is essentially shadcn's tabs.tsx trigger output.
+const TABS_TRIGGER_CLASS = [
+  "relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer select-none items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=underline]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  // These mirror shadcn's tabs.tsx (modulo variant=line → variant=underline).
+  // Light-mode active state uses bg-background + shadow only; dark mode
+  // additionally borders. Adding light-mode border made the underline
+  // variant look like outline and made default look like two buttons.
+  'group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=underline]/tabs-list:data-[state=active]:bg-transparent',
+  'data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
+  'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=underline]/tabs-list:data-[state=active]:after:opacity-100',
+].join(' ');
+
+const TABS_CONTENT_CLASS = 'flex-1 outline-none';
+
+// --------------------------------------------------------------------------
+// <ui-tabs> owns active `value` + `orientation`. Children read its state
+// via closest('ui-tabs'); when value changes, the parent fires a
+// `tabs-value-change-internal` event that descendants listen for via
+// the bubbling event on their own host. Each descendant then calls
+// requestUpdate() to re-render against the new parent value.
+// --------------------------------------------------------------------------
+
+export class UiTabs extends WebComponent {
+  static properties = {
+    value: { type: String, reflect: true },
+    orientation: { type: String, reflect: true },
+  };
+  declare value: string;
+  declare orientation: 'horizontal' | 'vertical';
+
+  constructor() {
+    super();
+    this.value = '';
+    this.orientation = 'horizontal';
+  }
+
+  render() {
+    return html`<div
+      data-slot="tabs"
+      data-orientation=${this.orientation}
+      class=${TABS_BASE}
+    ><slot></slot></div>`;
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (!changedProperties.has('value')) return;
+    const prev = (changedProperties.get('value') ?? '') as string;
+    // Skip the initial undefined -> '' (or '' -> '') no-op set; only
+    // dispatch + broadcast on real value transitions.
+    if (prev === '' && this.value === '') return;
+    queueMicrotask(() => {
+      this.dispatchEvent(
+        new CustomEvent('ui-value-change', { detail: { value: this.value }, bubbles: true }),
+      );
+      this._broadcast();
+    });
+  }
+
+  _broadcast(): void {
+    this.querySelectorAll<WebComponent>(
+      'ui-tabs-trigger, ui-tabs-content',
+    ).forEach((el) => el.requestUpdate?.());
+  }
+}
+UiTabs.register('ui-tabs');
+
+// --------------------------------------------------------------------------
+// <ui-tabs-list>
+// --------------------------------------------------------------------------
+
+export class UiTabsList extends WebComponent {
+  static properties = {
+    variant: { type: String, reflect: true },
+  };
+  declare variant: TabsListVariant;
+
+  constructor() {
+    super();
+    this.variant = 'default';
+  }
+
+  render() {
+    return html`<div
+      data-slot="tabs-list"
+      role="tablist"
+      data-variant=${this.variant}
+      class=${tabsListClass({ variant: this.variant })}
+    ><slot></slot></div>`;
+  }
+}
+UiTabsList.register('ui-tabs-list');
+
+// --------------------------------------------------------------------------
+// <ui-tabs-trigger value="...">
+// --------------------------------------------------------------------------
+
+export class UiTabsTrigger extends WebComponent {
+  static properties = {
+    value: { type: String, reflect: true },
+  };
+  declare value: string;
+
+  constructor() {
+    super();
+    this.value = '';
+  }
+
+  // render() runs server-side too; linkedom doesn't implement closest()
+  // on custom elements. Return null during SSR; the client re-renders
+  // with the parent reference after hydration.
+  get _tabs(): UiTabs | null {
+    if (typeof this.closest !== 'function') return null;
+    return this.closest('ui-tabs') as UiTabs | null;
+  }
+
+  render() {
+    const tabs = this._tabs;
+    const active = !!tabs && tabs.value === this.value && this.value !== '';
+    return html`<button
+      type="button"
+      role="tab"
+      data-slot="tabs-trigger"
+      data-state=${active ? 'active' : 'inactive'}
+      aria-selected=${String(active)}
+      tabindex=${active ? '0' : '-1'}
+      class=${TABS_TRIGGER_CLASS}
+      @click=${this._onClick}
+      @keydown=${this._onKeyDown}
+    ><slot></slot></button>`;
+  }
+
+  _onClick = (): void => {
+    if (this.value) this._tabs?.setAttribute('value', this.value);
+  };
+
+  _onKeyDown = (e: KeyboardEvent): void => {
+    const tabs = this._tabs;
+    if (!tabs) return;
+    const orientation = tabs.orientation;
+    const triggers = Array.from(tabs.querySelectorAll<UiTabsTrigger>('ui-tabs-trigger'));
+    const idx = triggers.indexOf(this);
+    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+    let target: UiTabsTrigger | null = null;
+    if (e.key === nextKey) target = triggers[(idx + 1) % triggers.length] ?? null;
+    else if (e.key === prevKey) target = triggers[(idx - 1 + triggers.length) % triggers.length] ?? null;
+    else if (e.key === 'Home') target = triggers[0] ?? null;
+    else if (e.key === 'End') target = triggers[triggers.length - 1] ?? null;
+    // Enter/Space already handled natively by <button>; no preventDefault needed.
+
+    if (target) {
+      e.preventDefault();
+      const v = target.value;
+      if (v) tabs.setAttribute('value', v);
+      target.focus();
+    }
+  };
+}
+UiTabsTrigger.register('ui-tabs-trigger');
+
+// --------------------------------------------------------------------------
+// <ui-tabs-content value="...">
+// --------------------------------------------------------------------------
+
+export class UiTabsContent extends WebComponent {
+  static properties = {
+    value: { type: String, reflect: true },
+  };
+  declare value: string;
+
+  constructor() {
+    super();
+    this.value = '';
+  }
+
+  get _tabs(): UiTabs | null {
+    if (typeof this.closest !== 'function') return null;
+    return this.closest('ui-tabs') as UiTabs | null;
+  }
+
+  render() {
+    const tabs = this._tabs;
+    const active = !!tabs && tabs.value === this.value && this.value !== '';
+    // The host needs to be hidden when inactive so its rendered <section>
+    // is removed from layout (light DOM has no :host CSS to scope this).
+    // Use the native `hidden` IDL property rather than imperative
+    // setAttribute, so it reads as a property assignment.
+    this.hidden = !active;
+    return html`<section
+      data-slot="tabs-content"
+      role="tabpanel"
+      tabindex="0"
+      data-state=${active ? 'active' : 'inactive'}
+      class=${TABS_CONTENT_CLASS}
+    ><slot></slot></section>`;
+  }
+}
+UiTabsContent.register('ui-tabs-content');

package/packages/registry/components/textarea.ts

@@ -0,0 +1,27 @@
+/**
+ * Textarea: styled native `<textarea>`. Tier-1 class helper. Real
+ * multi-line input: form submission, autosize via `field-sizing:
+ * content`, and native validation all work.
+ *
+ * shadcn parity:
+ *   Textarea  → textareaClass()
+ *
+ * Usage:
+ *   <textarea class=${textareaClass()} name="message" rows="4" placeholder="Your message…">
+ *   </textarea>
+ *
+ * Pair with `<label class=${labelClass()} for="...">` and wrap in
+ * `<div class=${fieldClass()}>` for the canonical field rhythm.
+ *
+ * Design tokens used: --input, --background, --muted-foreground, --ring,
+ * --destructive.
+ */
+import { cn } from '../lib/utils.ts';
+
+const TEXTAREA_BASE =
+  'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40';
+
+/** Compose Tailwind classes for a native `<textarea>`. */
+export function textareaClass(): string {
+  return cn(TEXTAREA_BASE);
+}