@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/components/switch.ts

@@ -5,8 +5,21 @@
  * thumb (positioned via the `peer-checked:` variant).
  *
  * shadcn parity:
- *   Switch (size: default | sm)  → switchInputClass() on a hidden <input> +
- *                                   switchTrackClass({ size }) on a sibling <span>
+ *   Switch (size: default | sm)  → <ui-switch size checked name value disabled
+ *                                   required aria-label input-id>, which renders
+ *                                   shadcn's switch (a `data-slot="switch"` root
+ *                                   and a `switch-thumb`) around a real checkbox,
+ *                                   so every shadcn style draws it
+ *                                 → or, as plain markup, switchInputClass() on a
+ *                                   hidden <input> + switchTrackClass({ size }) on
+ *                                   a sibling <span> (the default style only)
+ *
+ * <ui-switch> renders on the server too: its checkbox is a real form control
+ * laid transparent over the track, so it submits, takes a <label>, and toggles
+ * with JavaScript off. `data-state` follows it, and the data-checked variant
+ * also reads the native state (a switch root whose own checkbox is checked, a
+ * thumb after a checked checkbox), so the look follows the control without
+ * script too. `ui-checked-change` reports a change ({ detail: { checked } }).
  *
  * Design tokens used: --primary, --input, --background, --foreground, --ring,
  * --primary-foreground.
@@ -29,6 +42,14 @@
  *
  * @example
  * ```html
+ * <ui-switch name="airplane" aria-label="Airplane mode" checked></ui-switch>
+ *
+ * <!-- With a visible label, which names the switch. -->
+ * <label class="inline-flex items-center gap-2">
+ *   <ui-switch name="notify"></ui-switch> Notifications
+ * </label>
+ *
+ * <!-- The helpers, for a plain-markup switch. -->
  * <label class="inline-flex items-center gap-2">
  *   <input type="checkbox" role="switch" name="notify" class=${switchInputClass()}>
  *   <span class=${switchTrackClass()}></span>
@@ -46,27 +67,27 @@
  * <span class=${switchTrackClass({ size: 'sm' })}></span>
  * ```
  */
+import { WebComponent, html, prop, nothing } from '@webjsdev/core';
 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';
+  'cn-switch peer group/switch inline-flex items-center transition-all outline-none relative';
 
 const TRACK_SIZES = {
-  default: 'h-[1.15rem] w-8',
-  sm: 'h-3.5 w-6',
+  default: 'cn-switch-size-default',
+  sm: 'cn-switch-size-sm',
 } 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)]",
+  default: 'cn-switch-thumb-size-default',
+  sm: 'cn-switch-thumb-size-sm',
 } 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';
+  'cn-switch-thumb';
 
 export type SwitchSize = keyof typeof TRACK_SIZES;
 
@@ -74,3 +95,90 @@ export function switchTrackClass(opts: { size?: SwitchSize } = {}): string {
   const size = opts.size ?? 'default';
   return cn(TRACK_BASE, TRACK_SIZES[size], THUMB_BASE, THUMB_SIZES[size]);
 }
+
+// --------------------------------------------------------------------------
+// <ui-switch>
+// --------------------------------------------------------------------------
+
+/**
+ * shadcn's Switch: a root and a thumb around a real checkbox. The authored
+ * attributes that belong to the control (`name`, `value`, `checked`,
+ * `disabled`, `required`, `aria-label`, `aria-labelledby`,
+ * `aria-describedby`, `aria-invalid`, and `input-id` for a `<label for>`) are
+ * passed to it. `aria-invalid` also lands on the root, where every style draws
+ * the error ring (shadcn's root is the control itself).
+ */
+export class UiSwitch extends WebComponent({
+  size: prop<SwitchSize>(String, { reflect: true }),
+  checked: prop(Boolean),
+  disabled: prop(Boolean),
+  required: prop(Boolean),
+  name: prop(String),
+  value: prop(String),
+  inputId: prop(String, { attribute: 'input-id' }),
+  // Observed so a re-validation that sets or clears it re-renders the switch.
+  invalid: prop(String, { attribute: 'aria-invalid' }),
+}) {
+  constructor() {
+    super();
+    this.size = 'default';
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.name = '';
+    this.value = '';
+    this.inputId = '';
+    this.invalid = '';
+  }
+
+  _attr(name: string): string | null {
+    return typeof this.getAttribute === 'function' ? this.getAttribute(name) : null;
+  }
+
+  _onChange = (e: Event): void => {
+    const input = e.target as HTMLInputElement;
+    this.checked = input.checked;
+    this.dispatchEvent(new CustomEvent('ui-checked-change', { detail: { checked: input.checked }, bubbles: true }));
+  };
+
+  // The focus ring sits on the root and keys on the checkbox inside having
+  // keyboard focus: in shadcn the focused element IS the root (a Radix
+  // button), here it is the real checkbox the root contains.
+  // The root is the box, as shadcn's root (a Radix button) is: a flex item
+  // its row centres. A block host around it added a line box of its own and
+  // sat the switch a few pixels high, so the host is display: contents,
+  // through its style, which the server serves.
+  render() {
+    if (typeof this.getAttribute === 'function' && !this.getAttribute('style')) this.setAttribute('style', 'display: contents');
+    const size = this.size === 'sm' ? 'sm' : 'default';
+    const state = this.checked ? 'checked' : 'unchecked';
+    return html`<span
+      data-slot="switch"
+      data-size=${size}
+      data-state=${state}
+      aria-invalid=${this.invalid === 'true' ? 'true' : nothing}
+      ?data-disabled=${this.disabled}
+      class=${cn('cn-switch peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 has-[>input:focus-visible]:ring-[3px] has-[>input:focus-visible]:ring-ring/50', TRACK_SIZES[size])}
+    ><input
+      type="checkbox"
+      role="switch"
+      id=${this.inputId || nothing}
+      name=${this.name || nothing}
+      value=${this.value || nothing}
+      ?checked=${this.checked}
+      ?disabled=${this.disabled}
+      ?required=${this.required}
+      aria-label=${this._attr('aria-label') ?? nothing}
+      aria-labelledby=${this._attr('aria-labelledby') ?? nothing}
+      aria-describedby=${this._attr('aria-describedby') ?? nothing}
+      aria-invalid=${this.invalid === 'true' ? 'true' : nothing}
+      class="peer absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed"
+      @change=${this._onChange}
+    ><span
+      data-slot="switch-thumb"
+      data-state=${state}
+      class=${cn('cn-switch-thumb cn-switch-knob pointer-events-none block ring-0 transition-transform', THUMB_SIZES[size])}
+    ></span></span>`;
+  }
+}
+UiSwitch.register('ui-switch');

package/packages/registry/components/table.ts

@@ -42,24 +42,26 @@
  * ```
  */
 
-export const tableContainerClass = (): string => 'relative w-full overflow-x-auto';
+export const tableContainerClass = (): string => 'cn-table-container';
 
-export const tableClass = (): string => 'w-full caption-bottom text-sm';
+export const tableClass = (): string => 'cn-table';
 
-export const tableHeaderClass = (): string => '[&_tr]:border-b';
+export const tableHeaderClass = (): string => 'cn-table-header';
 
-export const tableBodyClass = (): string => '[&_tr:last-child]:border-0';
+export const tableBodyClass = (): string => 'cn-table-body';
 
 export const tableFooterClass = (): string =>
-  'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0';
+  'cn-table-footer';
 
 export const tableRowClass = (): string =>
-  'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted';
+  'cn-table-row has-aria-expanded:bg-muted/50';
 
+// The ported styles write a physical text-left; the logical one here keeps an
+// RTL table's headings at its start, as shadcn's RTL install does.
 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]';
+  'cn-table-head text-start';
 
 export const tableCellClass = (): string =>
-  'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]';
+  'cn-table-cell';
 
-export const tableCaptionClass = (): string => 'mt-4 text-sm text-muted-foreground';
+export const tableCaptionClass = (): string => 'cn-table-caption';

package/packages/registry/components/tabs.ts

@@ -8,7 +8,7 @@
  * shadcn parity:
  *   Tabs           → <ui-tabs value orientation>
  *   TabsList       → <ui-tabs-list variant>
- *   TabsTrigger    → <ui-tabs-trigger value>
+ *   TabsTrigger    → <ui-tabs-trigger value disabled>
  *   TabsContent    → <ui-tabs-content value>
  *
  * Attributes on <ui-tabs>:
@@ -16,11 +16,18 @@
  *   `orientation`: "horizontal" (default) | "vertical".
  *
  * Attributes on <ui-tabs-list>:
- *   `variant`: "default" (default, pill-on-muted) | "underline".
+ *   `variant`: "default" (default, pill-on-muted) | "line" (shadcn's name;
+ *   "underline", the kit's earlier name, is an alias). The list is served
+ *   `data-variant="line"` for either, which is what every style keys on.
  *
  * Attributes on <ui-tabs-trigger> / <ui-tabs-content>:
  *   `value`: string. Identifier this trigger / panel pair shares.
  *
+ * Attributes on <ui-tabs-trigger>:
+ *   `disabled`: boolean (reflected). The rendered `<button>` is disabled, so it
+ *   takes the `disabled:` styles and `data-disabled`, a click never selects its
+ *   tab, and Arrow / Home / End skip it.
+ *
  * Events:
  *   `ui-value-change` on <ui-tabs>: `{ detail: { value } }` after a change.
  *
@@ -28,6 +35,7 @@
  *   ArrowRight / ArrowLeft   next / previous (horizontal)
  *   ArrowDown / ArrowUp      next / previous (vertical)
  *   Home / End               first / last
+ *   (a `disabled` trigger is skipped by all four)
  *   Enter / Space            activate (native button activation)
  *
  * A11y (owned by the element, nothing to supply beyond trigger names):
@@ -65,7 +73,7 @@
  * ```
  */
 import { WebComponent, html, prop } from '@webjsdev/core';
-import { cn, ensureId } from '../lib/utils.ts';
+import { cn, ensureId, takeAuthoredClass } from '../lib/utils.ts';
 
 // A tab `value` becomes part of an id, so reduce it to id-safe characters.
 const idSafe = (s: string): string => s.replace(/[^A-Za-z0-9_-]/g, '-');
@@ -74,39 +82,66 @@ const idSafe = (s: string): string => s.replace(/[^A-Za-z0-9_-]/g, '-');
 // Class helpers
 // --------------------------------------------------------------------------
 
-const TABS_BASE = 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col';
+const TABS_BASE = 'cn-tabs group/tabs flex';
 
 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';
+  'cn-tabs-list group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground';
 
 const TABS_LIST_VARIANTS = {
-  default: 'bg-muted',
-  underline: 'gap-1 bg-transparent',
+  default: 'cn-tabs-list-variant-default bg-muted',
+  line: 'cn-tabs-list-variant-line gap-1 bg-transparent',
 } as const;
 
-export type TabsListVariant = keyof typeof TABS_LIST_VARIANTS;
+/** The list's look: `line` is shadcn's name, and `underline` an alias for it. */
+export type TabsListVariant = keyof typeof TABS_LIST_VARIANTS | 'underline';
+
+/** The variant every style keys on, with `underline` read as `line`. */
+export function tabsListVariant(variant: TabsListVariant | string | null | undefined): keyof typeof TABS_LIST_VARIANTS {
+  return variant === 'line' || variant === 'underline' ? 'line' : 'default';
+}
 
 /** 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]);
+  return cn(TABS_LIST_BASE, TABS_LIST_VARIANTS[tabsListVariant(opts.variant)]);
+}
+
+/**
+ * shadcn's name for {@link tabsListClass}, so shadcn code ports verbatim
+ * (`tabsListVariants({ ... })` is shadcn's `cva` export for `TabsList`). Like cva, it
+ * merges a `className` into the result.
+ */
+export function tabsListVariants(opts: { variant?: TabsListVariant } & { className?: string } = {}): string {
+  return cn(tabsListClass(opts), opts.className);
 }
 
 // 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).
+  'cn-tabs-trigger relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all 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 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  // These mirror shadcn's tabs.tsx.
   // 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',
+  // shadcn keeps all three inline in every style; the part names carry the
+  // new-york spelling of the same rules.
+  'cn-tabs-trigger-part-2 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+  'cn-tabs-trigger-part-3 data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+  'cn-tabs-trigger-part-4 after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
 ].join(' ');
 
-const TABS_CONTENT_CLASS = 'flex-1 outline-none';
+const TABS_CONTENT_CLASS = 'cn-tabs-content flex-1 outline-none';
+
+/**
+ * The class an author wrote on a tabs part, as shadcn's `className`: it
+ * belongs on the element the part RENDERS (the tablist, the tab button, the
+ * panel), which is what shadcn's styles and an author's utilities target. It
+ * is read once from the host, before the part re-renders, and the host then
+ * carries `hostClass` instead (or nothing).
+ */
+function takeAuthored(part: HTMLElement, hostClass: string | null): string | null {
+  return takeAuthoredClass(part, hostClass);
+}
 
 // --------------------------------------------------------------------------
 // <ui-tabs> owns active `value` + `orientation`. Children read its state
@@ -149,11 +184,13 @@ export class UiTabs extends WebComponent({
     return { trigger: `${this.scopeId}-trigger-${v}`, panel: `${this.scopeId}-panel-${v}` };
   }
 
+
   render() {
+    const authored = takeAuthored(this, null);
     return html`<div
       data-slot="tabs"
       data-orientation=${this.orientation}
-      class=${TABS_BASE}
+      class=${cn(TABS_BASE, authored)}
     ><slot></slot></div>`;
   }
 
@@ -196,14 +233,16 @@ export class UiTabsList extends WebComponent({
     return this.closest('ui-tabs') as UiTabs | null;
   }
 
+
   render() {
+    const authored = takeAuthored(this, 'contents');
     const orientation = this._tabs?.orientation ?? 'horizontal';
     return html`<div
       data-slot="tabs-list"
       role="tablist"
       aria-orientation=${orientation}
-      data-variant=${this.variant}
-      class=${tabsListClass({ variant: this.variant })}
+      data-variant=${tabsListVariant(this.variant)}
+      class=${cn(tabsListClass({ variant: this.variant }), authored)}
     ><slot></slot></div>`;
   }
 }
@@ -215,10 +254,12 @@ UiTabsList.register('ui-tabs-list');
 
 export class UiTabsTrigger extends WebComponent({
   value: prop(String, { reflect: true }),
+  disabled: prop(Boolean, { reflect: true }),
 }) {
   constructor() {
     super();
     this.value = '';
+    this.disabled = false;
   }
 
   // render() runs server-side too. webjs resolves closest() at SSR against
@@ -229,7 +270,9 @@ export class UiTabsTrigger extends WebComponent({
     return this.closest('ui-tabs') as UiTabs | null;
   }
 
+
   render() {
+    const authored = takeAuthored(this, 'contents');
     const tabs = this._tabs;
     const active = !!tabs && tabs.value === this.value && this.value !== '';
     const ids = tabs && this.value ? tabs.idsFor(this.value) : null;
@@ -242,14 +285,16 @@ export class UiTabsTrigger extends WebComponent({
       data-state=${active ? 'active' : 'inactive'}
       aria-selected=${String(active)}
       tabindex=${active ? '0' : '-1'}
-      class=${TABS_TRIGGER_CLASS}
+      ?disabled=${this.disabled}
+      ?data-disabled=${this.disabled}
+      class=${cn(TABS_TRIGGER_CLASS, authored)}
       @click=${this._onClick}
       @keydown=${this._onKeyDown}
     ><slot></slot></button>`;
   }
 
   _onClick = (): void => {
-    if (this.value) this._tabs?.setAttribute('value', this.value);
+    if (this.value && !this.disabled) this._tabs?.setAttribute('value', this.value);
   };
 
   _onKeyDown = (e: KeyboardEvent): void => {
@@ -260,8 +305,10 @@ export class UiTabsTrigger extends WebComponent({
     // a nested <ui-tabs> inside a panel, and arrow nav at the boundary would
     // jump into the inner group and set this group's value to an inner-only
     // value (hiding every panel). Same scoping dropdown-menu applies to items.
+    // A disabled trigger is skipped by every key, as Radix's roving focus
+    // skips an item that is not focusable.
     const triggers = Array.from(tabs.querySelectorAll<UiTabsTrigger>('ui-tabs-trigger')).filter(
-      (t) => t._tabs === tabs,
+      (t) => t._tabs === tabs && (!t.disabled || t === this),
     );
     const idx = triggers.indexOf(this);
     const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
@@ -270,8 +317,8 @@ export class UiTabsTrigger extends WebComponent({
     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;
+    else if (e.key === 'Home') target = triggers.find((t) => !t.disabled) ?? null;
+    else if (e.key === 'End') target = [...triggers].reverse().find((t) => !t.disabled) ?? null;
     // Enter/Space already handled natively by <button>; no preventDefault needed.
 
     if (target) {
@@ -307,7 +354,11 @@ export class UiTabsContent extends WebComponent({
     return this.closest('ui-tabs') as UiTabs | null;
   }
 
+
   render() {
+    // The panel's host keeps no class of its own (it toggles `hidden`, which a
+    // `display` utility would override), so the authored class moves whole.
+    const authored = takeAuthored(this, null);
     const tabs = this._tabs;
     const active = !!tabs && tabs.value === this.value && this.value !== '';
     const ids = tabs && this.value ? tabs.idsFor(this.value) : null;
@@ -326,7 +377,7 @@ export class UiTabsContent extends WebComponent({
       aria-labelledby=${ids ? ids.trigger : ''}
       tabindex="0"
       data-state=${active ? 'active' : 'inactive'}
-      class=${TABS_CONTENT_CLASS}
+      class=${cn(TABS_CONTENT_CLASS, authored)}
     ><slot></slot></section>`;
   }
 }

package/packages/registry/components/textarea.ts

@@ -40,7 +40,7 @@
 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';
+  'cn-textarea flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50';
 
 /** Compose Tailwind classes for a native `<textarea>`. */
 export function textareaClass(): string {

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

@@ -18,7 +18,11 @@
  *                  multiple: comma-separated values.
  *   `variant`:     "default" (default) | "outline".
  *   `size`:        "default" (default) | "sm" | "lg".
- *   `spacing`:     "0" (default, joined corners) | "default" (gapped).
+ *   `spacing`:     shadcn's number: "0" joins the items' corners, and N gaps
+ *                  them by N spacing units. Left out, the style decides:
+ *                  shadcn's styles gap by 2, as shadcn's default does, and
+ *                  new-york joins them. "default" is the kit's earlier name
+ *                  for a gap, read as 1.
  *   `orientation`: "horizontal" (default) | "vertical".
  *
  * Attributes on <ui-toggle-group-item>:
@@ -72,20 +76,33 @@
  * </ui-toggle-group>
  * ```
  */
-import { WebComponent, html, prop } from '@webjsdev/core';
+import { WebComponent, html, prop, nothing } from '@webjsdev/core';
 import { cn } from '../lib/utils.ts';
 import { toggleClass, type ToggleVariant, type ToggleSize } from './toggle.ts';
 
 const ROOT_BASE =
-  'group/toggle-group flex w-fit items-center rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch';
+  'cn-toggle-group group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch';
+
+/**
+ * The spacing a group renders: the author's number, `default` read as 1, or
+ * null when the author set none, which leaves `data-spacing` off so the style
+ * decides (a gap of 2 in shadcn's styles, joined items in new-york).
+ */
+export function toggleGroupSpacing(raw: string | null | undefined): string | null {
+  if (raw === null || raw === undefined || raw === '') return null;
+  return raw === 'default' ? '1' : raw;
+}
 
 // The `disabled:` variants inside toggleClass() key on the :disabled pseudo,
 // which only ever matches a real form control. An item's host IS the button
 // here (a custom element), so `disabled` on it is inert as far as CSS and the
 // browser are concerned, and the disabled look has to come from the
-// aria-disabled variant instead.
+// aria-disabled variant instead. The same goes for the non-text cursor and
+// unselectable label a native button gets from the browser. All of those live
+// on `.cn-toggle-group-item` in each style (styles/supplement.json for the
+// ported ones), so a style that sets its own cursor keeps it.
 const ITEM_EXTRA =
-  'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l';
+  'cn-toggle-group-item shrink-0 focus:z-10 focus-visible:z-10';
 
 // --------------------------------------------------------------------------
 // <ui-toggle-group>
@@ -111,7 +128,7 @@ export class UiToggleGroup extends WebComponent({
     this.type = 'single';
     this.variant = 'default';
     this.size = 'default';
-    this.spacing = '0';
+    this.spacing = '';
     this.orientation = 'horizontal';
   }
 
@@ -121,14 +138,15 @@ export class UiToggleGroup extends WebComponent({
   }
 
   render() {
-    const gap = this.spacing === '0' ? '' : 'gap-1';
+    const spacing = toggleGroupSpacing(this.spacing);
     return html`<div
       data-slot="toggle-group"
       role="group"
-      class=${cn(ROOT_BASE, gap)}
+      class=${ROOT_BASE}
+      style=${`--gap: ${spacing ?? 2}`}
       data-variant=${this.variant}
       data-size=${this.size}
-      data-spacing=${this.spacing}
+      data-spacing=${spacing ?? nothing}
       data-orientation=${this.orientation}
       @ui-toggle-item-click=${this._onItemClick}
     ><slot></slot></div>`;
@@ -283,10 +301,11 @@ export class UiToggleGroupItem extends WebComponent({
     const group = this._group;
     const variant = (group?.variant ?? 'default') as ToggleVariant;
     const size = (group?.size ?? 'default') as ToggleSize;
-    const spacing = group?.spacing ?? '0';
+    const spacing = toggleGroupSpacing(group?.spacing);
     this.dataset.variant = variant;
     this.dataset.size = size;
-    this.dataset.spacing = spacing;
+    if (spacing === null) this.removeAttribute('data-spacing');
+    else this.dataset.spacing = spacing;
     this.dataset.state = this.pressed ? 'on' : 'off';
     // role and data-slot are set HERE as well as in connectedCallback, because
     // SSR runs render() but NOT connectedCallback. Without this the served item

package/packages/registry/components/toggle.ts

@@ -70,25 +70,23 @@
 import { WebComponent, html, prop } from '@webjsdev/core';
 import { cn } from '../lib/utils.ts';
 
-// cursor-pointer + select-none on BASE for both call sites: the
-// class-helper applied to a native <button> (where shadcn's upstream
-// also omits it; see the same convention the button fix applies) and
-// the <ui-toggle> custom element. select-none prevents drag-selecting
-// icon/label glyphs that aren't meant to be selectable. disabled:
-// pointer-events-none below already suppresses cursor for disabled buttons.
+// shadcn's base form, verbatim, so it sets no cursor. On a native <button> the
+// browser supplies one (the default arrow), and new-york adds cursor-pointer
+// plus select-none on `.cn-toggle` as the kit's own convention.
+// <ui-toggle-group-item>, whose host is the button, gets no browser default, so
+// it takes its cursor from `.cn-toggle-group-item` (styles/supplement.json).
 const BASE =
-  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap select-none transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+  'cn-toggle group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0';
 
 const VARIANTS = {
-  default: 'bg-transparent',
-  outline:
-    'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+  default: 'cn-toggle-variant-default',
+  outline: 'cn-toggle-variant-outline',
 } as const;
 
 const SIZES = {
-  default: 'h-9 min-w-9 px-2',
-  sm: 'h-8 min-w-8 px-1.5',
-  lg: 'h-10 min-w-10 px-2.5',
+  default: 'cn-toggle-size-default',
+  sm: 'cn-toggle-size-sm',
+  lg: 'cn-toggle-size-lg',
 } as const;
 
 export type ToggleVariant = keyof typeof VARIANTS;
@@ -98,6 +96,15 @@ export function toggleClass(opts: { variant?: ToggleVariant; size?: ToggleSize }
   return cn(BASE, VARIANTS[opts.variant ?? 'default'], SIZES[opts.size ?? 'default']);
 }
 
+/**
+ * shadcn's name for {@link toggleClass}, so shadcn code ports verbatim
+ * (`toggleVariants({ ... })` is shadcn's `cva` export for `Toggle`). Like cva, it
+ * merges a `className` into the result.
+ */
+export function toggleVariants(opts: { variant?: ToggleVariant; size?: ToggleSize } & { className?: string } = {}): string {
+  return cn(toggleClass(opts), opts.className);
+}
+
 // --------------------------------------------------------------------------
 // <ui-toggle> wraps a native <button> and tracks pressed state. Native
 // <button> handles Enter/Space → click + focus + disabled semantics for