@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/components/alert-dialog.ts

@@ -19,6 +19,7 @@
  *   AlertDialogTrigger       → <ui-alert-dialog-trigger>
  *   AlertDialogContent       → <ui-alert-dialog-content size>
  *   AlertDialogHeader        → <div class=${alertDialogHeaderClass()}>
+ *   AlertDialogMedia         → <div data-slot="alert-dialog-media" class=${alertDialogMediaClass()}>
  *   AlertDialogTitle         → <h2 class=${alertDialogTitleClass()}>
  *   AlertDialogDescription   → <p class=${alertDialogDescriptionClass()}>
  *   AlertDialogFooter        → <div class=${alertDialogFooterClass()}>
@@ -93,22 +94,30 @@
  */
 import { WebComponent, html, prop } from '@webjsdev/core';
 import { ref, createRef } from '@webjsdev/core/directives';
-import { ensureId } from '../lib/utils.ts';
+import { cn, ensureId, takeAuthoredClass } from '../lib/utils.ts';
 import { onBeforeCache } from '../lib/dom.ts';
 import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
 
 export const alertDialogContentClass = (): string =>
-  'group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadcn-lg shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg';
+  'cn-alert-dialog-content group/alert-dialog-content fixed z-50 grid w-full';
 
 export const alertDialogHeaderClass = (): string =>
-  'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left';
+  'cn-alert-dialog-header';
 
 export const alertDialogFooterClass = (): string =>
-  'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end';
+  'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end';
 
-export const alertDialogTitleClass = (): string => 'text-lg font-semibold';
+export const alertDialogTitleClass = (): string => 'cn-alert-dialog-title';
 
-export const alertDialogDescriptionClass = (): string => 'text-sm text-muted-foreground';
+export const alertDialogDescriptionClass = (): string => 'cn-alert-dialog-description';
+
+/**
+ * The media slot of the header: an icon or image shown beside (or, in the
+ * small size, above) the title. Mark the element `data-slot="alert-dialog-media"`
+ * so the header's grid makes room for it. Decorative media takes
+ * `aria-hidden="true"`; the dialog's name still comes from its title.
+ */
+export const alertDialogMediaClass = (): string => 'cn-alert-dialog-media';
 
 // Pre-hydration paint fallback (see dialog.ts for the long version).
 const STYLES = `
@@ -119,7 +128,10 @@ ui-alert-dialog-content { display: grid; }
 // Fills the viewport (fixed inset-0), NOT 0x0 (#730): WebKit makes a
 // top-layer <dialog> the containing block for its position:fixed descendants,
 // so a 0x0 host collapsed the fixed content panel to 0x0 (invisible on iOS).
-const NATIVE_DIALOG_CLASS = 'fixed inset-0 border-0 bg-transparent p-0 m-0 max-w-none max-h-none overflow-visible text-inherit backdrop:bg-black/50';
+const NATIVE_DIALOG_CLASS = 'fixed inset-0 border-0 bg-transparent p-0 m-0 max-w-none max-h-none overflow-visible text-inherit backdrop:bg-transparent';
+
+/** The overlay behind the panel, which each style dims in its own way. */
+export const alertDialogOverlayClass = (): string => 'cn-alert-dialog-overlay fixed inset-0 z-50';
 
 function installStyles(): void {
   if (typeof document === 'undefined') return;
@@ -309,10 +321,20 @@ export class UiAlertDialog extends WebComponent({
     if (!changedProperties.has('open')) return;
     // Skip the constructor's initial open=false set so we don't fire
     // teardown for the closed-on-mount state.
-    if (changedProperties.get('open') === undefined) return;
+    // One written `open` still opens on that first update (shadcn's
+    // `defaultOpen`).
+    const initial = changedProperties.get('open') === undefined;
+    if (initial && !this.open) return;
+    // The content renders its data-state from this element's `open`, and
+    // nothing else re-renders it, so ask it to now. Every shadcn style
+    // animates out on data-closed: left closed while the native dialog
+    // opens, the content played its exit animation as it appeared.
+    this._content?.requestUpdate?.();
     // Defer one microtask so the content child has rendered its inner
-    // native <dialog>; that's where showModal() / close() act.
-    queueMicrotask(() => {
+    // native <dialog>; that's where showModal() / close() act. On the first
+    // update the content may not have rendered yet, so that one waits.
+    queueMicrotask(async () => {
+      if (initial) await this._content?.updateComplete;
       if (this.open) this._setup();
       else this._teardown();
     });
@@ -482,6 +504,13 @@ export class UiAlertDialogContent extends WebComponent({
     if (native?.open) native.close();
   }
 
+  // shadcn's className on the content lands on the panel it renders, so the
+  // class written on this host moves there, read once at first render.
+  _authored: string | null = null;
+  _hostClass(): string | null {
+    return (this._authored = takeAuthoredClass(this, null));
+  }
+
   render() {
     const parentOpen = !!this._parent()?.open;
     return html`<dialog
@@ -492,10 +521,15 @@ export class UiAlertDialogContent extends WebComponent({
       @cancel=${this._onNativeCancel}
       @close=${this._onNativeClose}
     ><div
+      data-slot="alert-dialog-overlay"
+      data-state=${parentOpen ? 'open' : 'closed'}
+      aria-hidden="true"
+      class=${alertDialogOverlayClass()}
+    ></div><div
       data-slot="alert-dialog-content"
       data-size=${this.size}
       data-state=${parentOpen ? 'open' : 'closed'}
-      class=${alertDialogContentClass()}
+      class=${cn(alertDialogContentClass(), this._hostClass())}
     ><slot></slot></div></dialog>`;
   }
 
@@ -542,6 +576,15 @@ UiAlertDialogContent.register('ui-alert-dialog-content');
 
 const ALERT_DIALOG_ACTION_GRID_STRETCH = 'group-data-[size=sm]/alert-dialog-content:w-full';
 
+// The action and the cancel render the button shadcn's AlertDialogAction /
+// AlertDialogCancel are, so the BUTTON is the footer's flex or grid item: on a
+// phone the column footer stretches it full width. The host draws no box of
+// its own, turned off through its style, which the server serves, and a class
+// written on it lands on the button, as shadcn's className does.
+function boxless(host: HTMLElement): void {
+  if (typeof host.getAttribute === 'function' && !host.getAttribute('style')) host.setAttribute('style', 'display: contents');
+}
+
 export class UiAlertDialogCancel extends WebComponent({
   variant: prop<ButtonVariant>(String, { reflect: true }),
   size: prop<ButtonSize>(String, { reflect: true }),
@@ -553,10 +596,11 @@ export class UiAlertDialogCancel extends WebComponent({
   }
 
   render() {
+    boxless(this);
     return html`<button
       type="button"
       data-slot="alert-dialog-cancel"
-      class="${buttonClass({ variant: this.variant, size: this.size })} ${ALERT_DIALOG_ACTION_GRID_STRETCH}"
+      class=${cn(buttonClass({ variant: this.variant, size: this.size }), ALERT_DIALOG_ACTION_GRID_STRETCH, takeAuthoredClass(this, null))}
       @click=${this._onClick}
     ><slot></slot></button>`;
   }
@@ -576,10 +620,11 @@ export class UiAlertDialogAction extends WebComponent({
   }
 
   render() {
+    boxless(this);
     return html`<button
       type="button"
       data-slot="alert-dialog-action"
-      class="${buttonClass({ variant: this.variant, size: this.size })} ${ALERT_DIALOG_ACTION_GRID_STRETCH}"
+      class=${cn(buttonClass({ variant: this.variant, size: this.size }), ALERT_DIALOG_ACTION_GRID_STRETCH, takeAuthoredClass(this, null))}
       @click=${this._onClick}
     ><slot></slot></button>`;
   }

package/packages/registry/components/alert.ts

@@ -6,6 +6,8 @@
  *   Alert (variant: default | destructive)  → alertClass({ variant })
  *   AlertTitle                              → alertTitleClass()
  *   AlertDescription                        → alertDescriptionClass()
+ *   AlertAction                             → alertActionClass() with data-slot="alert-action"
+ *                                             (a button or link in the alert's corner)
  *
  * A11y (required for accessible output): put role="alert" on the container
  * for an urgent, interrupting message, or role="status" for a polite,
@@ -37,12 +39,11 @@
 import { cn } from '../lib/utils.ts';
 
 const BASE =
-  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current';
+  'cn-alert group/alert relative w-full';
 
 const VARIANTS = {
-  default: 'bg-card text-card-foreground',
-  destructive:
-    'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
+  default: 'cn-alert-variant-default',
+  destructive: 'cn-alert-variant-destructive',
 } as const;
 
 export type AlertVariant = keyof typeof VARIANTS;
@@ -52,7 +53,11 @@ export function alertClass(opts: { variant?: AlertVariant } = {}): string {
 }
 
 export const alertTitleClass = (): string =>
-  'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight';
+  'cn-alert-title';
 
 export const alertDescriptionClass = (): string =>
-  'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed';
+  'cn-alert-description';
+
+/** The alert's action, in its corner. Set `data-slot="alert-action"`, which the alert reserves room for. */
+export const alertActionClass = (): string =>
+  'cn-alert-action';

package/packages/registry/components/attachment.ts

@@ -0,0 +1,119 @@
+/**
+ * Attachment: a file or image attached to a message or a form, as a compact
+ * card with its media, name, details and actions. Tier-1 class helper;
+ * compose with plain elements.
+ *
+ * shadcn parity:
+ *   AttachmentGroup            → attachmentGroupClass()
+ *   Attachment (variant, size) → attachmentClass({ ... }), alias attachmentVariants
+ *   AttachmentMedia            → attachmentMediaClass({ ... }), alias attachmentMediaVariants
+ *   AttachmentContent / AttachmentTitle / AttachmentDescription
+ *                              → attachmentContentClass() / attachmentTitleClass() / attachmentDescriptionClass()
+ *   AttachmentActions / AttachmentAction / AttachmentTrigger
+ *                              → attachmentActionsClass() / attachmentActionClass() / attachmentTriggerClass()
+ *
+ * Every part takes its `data-slot`, which the styles key on.
+ *
+ * A11y (required for accessible output): the file name is the attachment's
+ * accessible name, so keep it in real text (the title), not only in an image.
+ * An image preview needs `alt` (or `alt=""` when the title already names it).
+ * Each icon-only action (remove, download) is a `<button>` with an
+ * `aria-label` naming the file ("Remove report.pdf"), and a trigger that opens
+ * the file is a real link or button.
+ *
+ * Design tokens used: --border, --muted, --muted-foreground, --background.
+ *
+ * @example
+ * ```html
+ * <div class=${attachmentClass()} data-slot="attachment">
+ *   <div class=${attachmentContentClass()} data-slot="attachment-content">
+ *     <span class=${attachmentTitleClass()} data-slot="attachment-title">report.pdf</span>
+ *     <span class=${attachmentDescriptionClass()} data-slot="attachment-description">2.4 MB</span>
+ *   </div>
+ * </div>
+ * ```
+ */
+import { cn } from '../lib/utils.ts';
+
+const ATTACHMENT_BASE =
+  'cn-attachment group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed';
+
+const ATTACHMENT_SIZES = {
+  default: 'cn-attachment-size-default',
+  sm: 'cn-attachment-size-sm',
+  xs: 'cn-attachment-size-xs',
+} as const;
+
+const ATTACHMENT_ORIENTATIONS = {
+  horizontal: 'cn-attachment-orientation-horizontal items-center',
+  vertical: 'cn-attachment-orientation-vertical flex-col',
+} as const;
+
+/** The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match. */
+export function attachmentClass(opts: { size?: keyof typeof ATTACHMENT_SIZES; orientation?: keyof typeof ATTACHMENT_ORIENTATIONS } = {}): string {
+  return cn(ATTACHMENT_BASE, ATTACHMENT_SIZES[opts.size ?? 'default'], ATTACHMENT_ORIENTATIONS[opts.orientation ?? 'horizontal']);
+}
+
+/**
+ * shadcn's name for {@link attachmentClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function attachmentVariants(opts: { size?: keyof typeof ATTACHMENT_SIZES; orientation?: keyof typeof ATTACHMENT_ORIENTATIONS } & { className?: string } = {}): string {
+  return cn(attachmentClass(opts), opts.className);
+}
+
+const ATTACHMENT_MEDIA_BASE =
+  'cn-attachment-media relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none';
+
+const ATTACHMENT_MEDIA_VARIANTS = {
+  icon: 'cn-attachment-media-variant-icon',
+  image: 'cn-attachment-media-variant-image *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
+} as const;
+
+/** The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match. */
+export function attachmentMediaClass(opts: { variant?: keyof typeof ATTACHMENT_MEDIA_VARIANTS } = {}): string {
+  return cn(ATTACHMENT_MEDIA_BASE, ATTACHMENT_MEDIA_VARIANTS[opts.variant ?? 'icon']);
+}
+
+/**
+ * shadcn's name for {@link attachmentMediaClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function attachmentMediaVariants(opts: { variant?: keyof typeof ATTACHMENT_MEDIA_VARIANTS } & { className?: string } = {}): string {
+  return cn(attachmentMediaClass(opts), opts.className);
+}
+
+/** Set `data-slot="attachment-content"` on the element. */
+export function attachmentContentClass(): string {
+  return 'cn-attachment-content max-w-full min-w-0 flex-1';
+}
+
+/** Set `data-slot="attachment-title"` on the element. */
+export function attachmentTitleClass(): string {
+  return 'cn-attachment-title block max-w-full min-w-0 truncate group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer';
+}
+
+/** Set `data-slot="attachment-description"` on the element. */
+export function attachmentDescriptionClass(): string {
+  return 'cn-attachment-description block min-w-0 truncate text-muted-foreground group-data-[state=error]/attachment:text-destructive/80';
+}
+
+/** Set `data-slot="attachment-actions"` on the element. */
+export function attachmentActionsClass(): string {
+  return 'cn-attachment-actions flex shrink-0 items-center';
+}
+
+/** Set `data-slot="attachment-action"` on the element. */
+export function attachmentActionClass(): string {
+  return 'cn-attachment-action';
+}
+
+/** Set `data-slot="attachment-trigger"` on the element. */
+export function attachmentTriggerClass(): string {
+  return 'cn-attachment-trigger absolute inset-0 z-10 outline-none';
+}
+
+/** Set `data-slot="attachment-group"` on the element. */
+export function attachmentGroupClass(): string {
+  return 'cn-attachment-group flex min-w-0 scroll-fade-x snap-x snap-mandatory scrollbar-none overflow-x-auto overscroll-x-contain *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start';
+}

package/packages/registry/components/avatar.ts

@@ -1,7 +1,15 @@
 /**
  * Avatar: circular user image with fallback. Tier-1 class helpers;
- * compose with a native `<span>` or `<img>`. The fallback shows when the
- * `<img>` is missing or fails to load (`onerror`).
+ * compose with a native `<span>` or `<img>`. As in shadcn, one of the two
+ * shows, never both, and with no script: the image is laid over the fallback
+ * (`absolute inset-0` inside the `relative` root), so a loaded image covers
+ * it, and a missing or broken one leaves the fallback showing. A broken
+ * image paints neither its alt text (`text-transparent`) nor, in Chromium,
+ * its broken-image glyph: a broken `<img>` renders a `::before` box (a loaded
+ * one never does), and the full-height block it gets here pushes the glyph
+ * out of the clipped box. Safari ignores that box and draws its glyph over
+ * the initials (Firefox can too at larger sizes), so where that matters hide
+ * the image on failure with script (`onerror`).
  *
  * shadcn parity:
  *   Avatar (size: default | sm | lg)  → avatarClass({ size }) with `data-size`
@@ -43,23 +51,24 @@ import { cn } from '../lib/utils.ts';
 export type AvatarSize = 'default' | 'sm' | 'lg';
 
 const AVATAR_BASE =
-  'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6';
+  'cn-avatar group/avatar relative flex shrink-0 select-none';
 
 export function avatarClass(_opts: { size?: AvatarSize } = {}): string {
   // Size driven by data-size attribute on the element (matches shadcn).
   return cn(AVATAR_BASE);
 }
 
-export const avatarImageClass = (): string => 'aspect-square size-full';
+export const avatarImageClass = (): string =>
+  'cn-avatar-image absolute inset-0 aspect-square size-full object-cover overflow-hidden text-transparent before:block before:h-full';
 
 export const avatarFallbackClass = (): string =>
-  'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs';
+  'cn-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs';
 
 export const avatarBadgeClass = (): string =>
-  'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2';
+  'cn-avatar-badge absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2';
 
 export const avatarGroupClass = (): string =>
-  'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background';
+  'cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background';
 
 export const avatarGroupCountClass = (): string =>
-  'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3';
+  'cn-avatar-group-count relative flex shrink-0 items-center justify-center ring-2 ring-background';

package/packages/registry/components/badge.ts

@@ -26,17 +26,15 @@
 import { cn } from '../lib/utils.ts';
 
 const BASE =
-  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3';
+  'cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none';
 
 const VARIANTS = {
-  default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-  secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-  destructive:
-    'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
-  outline:
-    'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-  ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-  link: 'text-primary underline-offset-4 [a&]:hover:underline',
+  default: 'cn-badge-variant-default',
+  secondary: 'cn-badge-variant-secondary',
+  destructive: 'cn-badge-variant-destructive',
+  outline: 'cn-badge-variant-outline',
+  ghost: 'cn-badge-variant-ghost',
+  link: 'cn-badge-variant-link',
 } as const;
 
 export type BadgeVariant = keyof typeof VARIANTS;
@@ -44,3 +42,12 @@ export type BadgeVariant = keyof typeof VARIANTS;
 export function badgeClass(opts: { variant?: BadgeVariant } = {}): string {
   return cn(BASE, VARIANTS[opts.variant ?? 'default']);
 }
+
+/**
+ * shadcn's name for {@link badgeClass}, so shadcn code ports verbatim
+ * (`badgeVariants({ ... })` is shadcn's `cva` export for `Badge`). Like cva, it
+ * merges a `className` into the result.
+ */
+export function badgeVariants(opts: { variant?: BadgeVariant } & { className?: string } = {}): string {
+  return cn(badgeClass(opts), opts.className);
+}

package/packages/registry/components/breadcrumb.ts

@@ -37,14 +37,14 @@
  */
 
 export const breadcrumbListClass = (): string =>
-  'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5';
+  'cn-breadcrumb-list flex flex-wrap items-center wrap-break-word';
 
-export const breadcrumbItemClass = (): string => 'inline-flex items-center gap-1.5';
+export const breadcrumbItemClass = (): string => 'cn-breadcrumb-item inline-flex items-center';
 
-export const breadcrumbLinkClass = (): string => 'transition-colors hover:text-foreground';
+export const breadcrumbLinkClass = (): string => 'cn-breadcrumb-link';
 
-export const breadcrumbPageClass = (): string => 'font-normal text-foreground';
+export const breadcrumbPageClass = (): string => 'cn-breadcrumb-page';
 
-export const breadcrumbSeparatorClass = (): string => '[&>svg]:size-3.5';
+export const breadcrumbSeparatorClass = (): string => 'cn-breadcrumb-separator';
 
-export const breadcrumbEllipsisClass = (): string => 'flex size-9 items-center justify-center';
+export const breadcrumbEllipsisClass = (): string => 'cn-breadcrumb-ellipsis flex items-center justify-center';

package/packages/registry/components/bubble.ts

@@ -0,0 +1,95 @@
+/**
+ * Bubble: a chat speech bubble, the group that stacks several from one sender,
+ * and the emoji reactions pinned to its corner. Tier-1 class helper; pair with
+ * the message helpers for the row, avatar and header around it.
+ *
+ * shadcn parity:
+ *   BubbleGroup                → bubbleGroupClass()
+ *   Bubble (variant: default | secondary | muted | tinted | outline | ghost | destructive)
+ *                              → bubbleClass({ variant }), alias bubbleVariants
+ *   BubbleContent              → bubbleContentClass()
+ *   BubbleReactions (side: top | bottom, align: start | end)
+ *                              → bubbleReactionsClass({ side, align }), alias bubbleReactionsVariants
+ *
+ * The variant colours the content, so put `data-slot="bubble-content"` on the
+ * inner element and `data-variant` on the bubble. Inside a message with
+ * `data-align="end"` the bubble follows to the inline end.
+ *
+ * A11y (required for accessible output): the bubble is text inside a message,
+ * so it needs no role of its own. Reactions are buttons when they act (with an
+ * `aria-label` such as "2 people reacted with thumbs up", since an emoji alone
+ * reads poorly) and plain text when they only show a count.
+ *
+ * Design tokens used: --primary, --secondary, --muted, --accent, --border,
+ * --destructive.
+ *
+ * @example
+ * ```html
+ * <div class=${bubbleClass()} data-slot="bubble" data-variant="default">
+ *   <div class=${bubbleContentClass()} data-slot="bubble-content">Shipping it now.</div>
+ * </div>
+ * ```
+ */
+import { cn } from '../lib/utils.ts';
+
+/** Set `data-slot="bubble-group"` on the element. */
+export function bubbleGroupClass(): string {
+  return 'cn-bubble-group flex min-w-0 flex-col';
+}
+
+const BUBBLE_BASE =
+  'cn-bubble group/bubble relative flex w-fit min-w-0 flex-col';
+
+const BUBBLE_VARIANTS = {
+  default: 'cn-bubble-variant-default',
+  secondary: 'cn-bubble-variant-secondary',
+  muted: 'cn-bubble-variant-muted',
+  tinted: 'cn-bubble-variant-tinted',
+  outline: 'cn-bubble-variant-outline',
+  ghost: 'cn-bubble-variant-ghost',
+  destructive: 'cn-bubble-variant-destructive',
+} as const;
+
+/** The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match. */
+export function bubbleClass(opts: { variant?: keyof typeof BUBBLE_VARIANTS } = {}): string {
+  return cn(BUBBLE_BASE, BUBBLE_VARIANTS[opts.variant ?? 'default']);
+}
+
+/**
+ * shadcn's name for {@link bubbleClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function bubbleVariants(opts: { variant?: keyof typeof BUBBLE_VARIANTS } & { className?: string } = {}): string {
+  return cn(bubbleClass(opts), opts.className);
+}
+
+/** Set `data-slot="bubble-content"` on the element. */
+export function bubbleContentClass(): string {
+  return 'cn-bubble-content w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-start [button,a]:transition-colors';
+}
+
+const BUBBLE_REACTIONS_BASE =
+  'cn-bubble-reactions absolute z-10 flex w-fit items-center justify-center';
+
+const BUBBLE_REACTIONS_SIDES = {
+  top: 'cn-bubble-reactions-side-top',
+  bottom: 'cn-bubble-reactions-side-bottom',
+} as const;
+
+const BUBBLE_REACTIONS_ALIGNS = {
+  start: 'cn-bubble-reactions-align-start',
+  end: 'cn-bubble-reactions-align-end',
+} as const;
+
+/** The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match. */
+export function bubbleReactionsClass(opts: { side?: keyof typeof BUBBLE_REACTIONS_SIDES; align?: keyof typeof BUBBLE_REACTIONS_ALIGNS } = {}): string {
+  return cn(BUBBLE_REACTIONS_BASE, BUBBLE_REACTIONS_SIDES[opts.side ?? 'bottom'], BUBBLE_REACTIONS_ALIGNS[opts.align ?? 'end']);
+}
+
+/**
+ * shadcn's name for {@link bubbleReactionsClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function bubbleReactionsVariants(opts: { side?: keyof typeof BUBBLE_REACTIONS_SIDES; align?: keyof typeof BUBBLE_REACTIONS_ALIGNS } & { className?: string } = {}): string {
+  return cn(bubbleReactionsClass(opts), opts.className);
+}

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

@@ -0,0 +1,73 @@
+/**
+ * Button group: a row (or column) of buttons that share their borders, so
+ * they read as one control. Tier-1 class helper; compose with a real
+ * container element and real buttons.
+ *
+ * shadcn parity:
+ *   ButtonGroup (orientation: horizontal | vertical)
+ *                          → buttonGroupClass({ orientation }), alias buttonGroupVariants
+ *   ButtonGroupText        → buttonGroupTextClass()
+ *   ButtonGroupSeparator   → buttonGroupSeparatorClass() with separatorClass({ orientation })
+ *
+ * The group flattens the inner corners and drops the doubled border between
+ * neighbours, by logical side, so it reads correctly under `dir="rtl"`. A
+ * nested group (a group of groups) keeps its own gap.
+ *
+ * A11y (required for accessible output): put `role="group"` on the container
+ * and name it with `aria-label` (or `aria-labelledby`) when the buttons share
+ * a purpose a screen-reader user needs to hear ("Text alignment"). Each button
+ * keeps its own accessible name; an icon-only one needs `aria-label`. Set
+ * `data-orientation` to match the orientation you pass, and a separator inside
+ * the group is decorative, so give it `role="none"` or `aria-hidden="true"`.
+ *
+ * Design tokens used: --border, --input, --muted.
+ *
+ * @example
+ * ```html
+ * <div class=${buttonGroupClass()} role="group" aria-label="Text alignment" data-orientation="horizontal">
+ *   <button class=${buttonClass({ variant: 'outline' })} type="button">Left</button>
+ *   <button class=${buttonClass({ variant: 'outline' })} type="button">Center</button>
+ *   <button class=${buttonClass({ variant: 'outline' })} type="button">Right</button>
+ * </div>
+ * ```
+ */
+import { cn } from '../lib/utils.ts';
+
+const BASE =
+  "cn-button-group group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1";
+
+const ORIENTATIONS = {
+  horizontal:
+    'cn-button-group-orientation-horizontal [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none',
+  vertical:
+    'cn-button-group-orientation-vertical flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+} as const;
+
+export type ButtonGroupOrientation = keyof typeof ORIENTATIONS;
+
+/** The group container. Pair with `role="group"` and `data-orientation`. */
+export function buttonGroupClass(opts: { orientation?: ButtonGroupOrientation } = {}): string {
+  return cn(BASE, ORIENTATIONS[opts.orientation ?? 'horizontal']);
+}
+
+/**
+ * shadcn's name for {@link buttonGroupClass}, so shadcn code ports verbatim
+ * (`buttonGroupVariants({ ... })` is shadcn's `cva` export for `ButtonGroup`).
+ * Like cva, it merges a `className` into the result.
+ */
+export function buttonGroupVariants(opts: { orientation?: ButtonGroupOrientation } & { className?: string } = {}): string {
+  return cn(buttonGroupClass(opts), opts.className);
+}
+
+/** A non-interactive label or value sitting inside the group. */
+export function buttonGroupTextClass(): string {
+  return 'cn-button-group-text flex items-center [&_svg]:pointer-events-none';
+}
+
+/**
+ * A divider between buttons. Compose with the separator helper:
+ * `cn(separatorClass({ orientation: 'vertical' }), buttonGroupSeparatorClass())`.
+ */
+export function buttonGroupSeparatorClass(): string {
+  return 'cn-button-group-separator relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto';
+}