tembro 3.1.14 → 3.1.16

package/packages/cli/vendor/src/components/notifications/notification-center.tsx

@@ -47,21 +47,21 @@ function NotificationCenter({
           render={<PopoverTrigger />}
           variant="ghost"
           size="icon"
-          className="relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]"
+          className="relative rounded-full border bg-white text-foreground shadow-sm hover:bg-muted dark:bg-neutral-950"
         >
           <BellIcon className="size-5" />
           {unreadCount > 0 && (
-            <span className="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]">
+            <span className="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold leading-none text-primary-foreground shadow-[0_8px_20px_rgba(16,185,129,0.24)]">
               {unreadCount}
               <span className="sr-only">{unreadCount} unread notifications</span>
             </span>
           )}
         </Button>
         <PopoverContent
-          className="w-[24rem] overflow-hidden rounded-3xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] p-0 shadow-[0_24px_60px_rgba(15,23,42,0.18)]"
+          className="isolate w-[24rem] overflow-hidden rounded-3xl border bg-white p-0 text-popover-foreground opacity-100 shadow-[0_24px_60px_rgba(15,23,42,0.18)] dark:bg-neutral-950"
           align="end"
         >
-          <div className="flex items-center justify-between border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-5 py-4">
+          <div className="flex items-center justify-between border-b bg-white px-5 py-4 dark:bg-neutral-950">
             <div className="grid gap-0.5">
               <h4 className="font-semibold tracking-tight text-foreground">{title}</h4>
               <span className="text-xs text-muted-foreground">
@@ -73,7 +73,7 @@ function NotificationCenter({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  className="h-8 rounded-full border px-3 text-xs font-semibold text-muted-foreground hover:bg-background hover:text-foreground"
                   onClick={onMarkAllRead}
                 >
                   Mark all read
@@ -83,7 +83,7 @@ function NotificationCenter({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  className="h-8 rounded-full border px-3 text-xs font-semibold text-muted-foreground hover:bg-background hover:text-foreground"
                   onClick={onClearAll}
                 >
                   Clear all
@@ -91,9 +91,9 @@ function NotificationCenter({
               ) : null}
             </div>
           </div>
-          <div className="max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2">
+          <div className="max-h-[400px] overflow-y-auto bg-white p-2 dark:bg-neutral-950">
             {notifications.length === 0 ? (
-              <div className="rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground">
+              <div className="rounded-2xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
                 {emptyLabel}
               </div>
             ) : (
@@ -105,8 +105,8 @@ function NotificationCenter({
                       <button
                         key={notification.id}
                         className={cn(
-                          "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
-                          !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
+                          "flex flex-col gap-1 rounded-2xl border border-transparent bg-white px-4 py-3 text-left transition hover:border-border hover:bg-muted dark:bg-neutral-950 dark:hover:bg-neutral-900",
+                          !notification.read && "border-primary/20 bg-slate-50 dark:bg-neutral-900"
                         )}
                         onClick={() => onNotificationClick?.(notification)}
                       >
@@ -115,7 +115,7 @@ function NotificationCenter({
                             {notification.title}
                           </span>
                           {!notification.read && (
-                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
+                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-primary shadow-[0_0_0_4px_color-mix(in_srgb,var(--primary)_14%,transparent)]" />
                           )}
                         </div>
                         {notification.description && (

package/packages/cli/vendor/src/components/patterns/detail-layout.tsx

@@ -55,7 +55,7 @@ function DetailLayout({
       {hasContent && (
         <div
           data-slot="detail-layout-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <main data-slot="detail-layout-main" className="min-w-0">
             {children}

package/packages/cli/vendor/src/components/patterns/form-builder.tsx

@@ -22,8 +22,10 @@ import {
 } from "@/components/form/form-date-range-input"
 import { cn } from "@/lib/utils"
 
-export type FormBuilderLayout = "grid" | "stack"
-export type FormBuilderDensity = "compact" | "default" | "comfortable"
+export type FormBuilderLayout = "grid" | "stack"
+export type FormBuilderDensity = "compact" | "default" | "comfortable"
+
+type DistributiveOmit<T, TKey extends PropertyKey> = T extends unknown ? Omit<T, TKey> : never
 
 export type FormBuilderFieldRenderContext<TFieldValues extends FieldValues> = {
   control: Control<TFieldValues>
@@ -48,7 +50,7 @@ export type FormBuilderInputField<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = BaseFormBuilderField & {
   type: "input"
-  props: Omit<FormInputProps<TFieldValues, TName>, "control">
+  props: DistributiveOmit<FormInputProps<TFieldValues, TName>, "control">
 }
 
 export type FormBuilderTextareaField<
@@ -64,7 +66,7 @@ export type FormBuilderSelectField<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = BaseFormBuilderField & {
   type: "select"
-  props: Omit<FormSelectProps<TFieldValues, TName>, "control">
+  props: DistributiveOmit<FormSelectProps<TFieldValues, TName>, "control">
 }
 
 export type FormBuilderAsyncSelectField<
@@ -116,17 +118,14 @@ export type FormBuilderDateRangeField<
   props: Omit<FormDateRangeInputProps<TFieldValues, TFromName, TToName>, "control">
 }
 
-export type FormBuilderField<TFieldValues extends FieldValues> =
-  | FormBuilderCustomField<TFieldValues>
-  | FormBuilderInputField<TFieldValues>
-  | FormBuilderTextareaField<TFieldValues>
-  | FormBuilderSelectField<TFieldValues>
-  | FormBuilderAsyncSelectField<TFieldValues>
-  | FormBuilderSwitchField<TFieldValues>
-  | FormBuilderNumberField<TFieldValues>
-  | FormBuilderPhoneField<TFieldValues>
-  | FormBuilderDateField<TFieldValues>
-  | FormBuilderDateRangeField<TFieldValues>
+type FormBuilderStoredField = BaseFormBuilderField & {
+  type: "input" | "textarea" | "select" | "async-select" | "switch" | "number" | "phone" | "date" | "date-range"
+  props: object
+}
+
+export type FormBuilderField<TFieldValues extends FieldValues> =
+  | FormBuilderCustomField<TFieldValues>
+  | FormBuilderStoredField
 
 export type FormBuilderSection<TFieldValues extends FieldValues> = {
   id: string
@@ -280,8 +279,11 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
   field: FormBuilderField<TFieldValues>,
   context: FormBuilderFieldRenderContext<TFieldValues>
 ) {
-  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
-  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
+  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
+  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
+  const FormTextareaComponent = FormTextarea as unknown as React.ComponentType<Record<string, unknown>>
+  const FormSwitchComponent = FormSwitch as unknown as React.ComponentType<Record<string, unknown>>
+  const FormDateRangeInputComponent = FormDateRangeInput as unknown as React.ComponentType<Record<string, unknown>>
 
   switch (field.type) {
     case "custom":
@@ -293,8 +295,8 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         readOnly: context.readOnly,
         ...(field.props as Omit<FormInputProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
       })
-    case "textarea":
-      return <FormTextarea control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "textarea":
+      return React.createElement(FormTextareaComponent, { control: context.control, disabled: context.disabled, readOnly: context.readOnly, ...field.props })
     case "select":
       return React.createElement(FormSelectComponent, {
         control: context.control,
@@ -308,8 +310,8 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         kind: "async",
         ...field.props,
       })
-    case "switch":
-      return <FormSwitch control={context.control} disabled={context.disabled} {...field.props} />
+    case "switch":
+      return React.createElement(FormSwitchComponent, { control: context.control, disabled: context.disabled, ...field.props })
     case "number":
       return React.createElement(FormInputComponent, {
         control: context.control,
@@ -334,15 +336,13 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         kind: "date",
         ...field.props,
       })
-    case "date-range":
-      return (
-        <FormDateRangeInput
-          control={context.control}
-          fromInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          toInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          {...field.props}
-        />
-      )
+    case "date-range":
+      return React.createElement(FormDateRangeInputComponent, {
+        control: context.control,
+        fromInputProps: { disabled: context.disabled, readOnly: context.readOnly },
+        toInputProps: { disabled: context.disabled, readOnly: context.readOnly },
+        ...field.props,
+      })
     default:
       return null
   }

package/packages/cli/vendor/src/components/patterns/resource-detail-page.tsx

@@ -120,7 +120,7 @@ function ResourceDetailPage({
       {(hasMainContent || aside) && (
         <div
           data-slot="resource-detail-page-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
             {children}

package/packages/cli/vendor/src/components/patterns/resource-page.tsx

@@ -136,7 +136,7 @@ function ResourcePage<TData, TValue = unknown>({
       {(hasMainContent || aside) && (
         <div
           data-slot="resource-page-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <div data-slot="resource-page-main" className="grid min-w-0 gap-4">
             {children}

package/packages/cli/vendor/src/components/ui/card/index.tsx

@@ -181,6 +181,7 @@ function Card({
   return (
     <div
       data-slot="card"
+      data-card=""
       data-surface={surfaceMode || undefined}
       data-size={size ?? "default"}
       data-variant={variant ?? "default"}

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.14"
+export const PACKAGE_LATEST_VERSION = "3.1.16"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -48,7 +48,7 @@ import {
   Avatar,
 } from "@/index"
 import { PreviewFileDropzone as FileDropzone, PreviewStatCard as StatCard } from "@/showcase/preview-compositions"
-import { FormBuilder, customField, formSection } from "@/components/patterns/form-builder"
+import { FormBuilder, customField, formSection, inputField, selectField, switchField, textareaField } from "@/components/patterns/form-builder"
 import { ResourceDetailPage } from "@/components/patterns/resource-detail-page"
 import { ResourcePage, ResourcePageSection } from "@/components/patterns/resource-page"
 import { useForm } from "react-hook-form"
@@ -750,6 +750,7 @@ function FormBuilderPreview() {
     email: string
     notes: string
     marketing: boolean
+    role: string
   }
 
   const form = useForm<FormBuilderDemoValues>({
@@ -758,6 +759,7 @@ function FormBuilderPreview() {
       email: "azamat@example.com",
       notes: "Release gate is ready.",
       marketing: true,
+      role: "admin",
     },
   })
 
@@ -779,6 +781,14 @@ function FormBuilderPreview() {
             </div>
           ),
         }),
+        inputField<FormBuilderDemoValues, "name">({ id: "name", props: { name: "name", label: "Name", required: true } }),
+        inputField<FormBuilderDemoValues, "email">({ id: "email", props: { name: "email", label: "Email", type: "email" } }),
+        selectField<FormBuilderDemoValues, "role">({ id: "role", props: { name: "role", label: "Role", options: [
+          { value: "admin", label: "Administrator" },
+          { value: "member", label: "Member" },
+        ] } }),
+        switchField<FormBuilderDemoValues, "marketing">({ id: "marketing", props: { name: "marketing", label: "Product updates" } }),
+        textareaField<FormBuilderDemoValues, "notes">({ id: "notes", colSpan: "full", props: { name: "notes", label: "Release notes" } }),
       ],
     }),
   ]

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.14",
+  "version": "3.1.16",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@3.1.14 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@3.1.16 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.14" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.16" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@3.1.14",
+          label: "tembro@3.1.16",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/packages/cli/vendor/templates/styles/globals.css

@@ -95,6 +95,27 @@
   --aui-danger: var(--destructive);
   --aui-danger-foreground: oklch(0.985 0.004 95);
 
+  /* Compatibility aliases for components authored against the earlier theme contract. */
+  --aui-brand-strong: var(--primary);
+  --aui-control-bg: var(--aui-control-surface);
+  --aui-control-border: var(--input);
+  --aui-control-fg: var(--foreground);
+  --aui-divider: var(--border);
+  --aui-input-bg: var(--aui-control-surface);
+  --aui-input-border: var(--input);
+  --aui-input-border-hover: var(--aui-control-hover-border);
+  --aui-input-fg: var(--foreground);
+  --aui-page-bg: var(--background);
+  --aui-page-bg-alt: var(--muted);
+  --aui-page-foreground: var(--foreground);
+  --aui-popover-bg: var(--popover);
+  --aui-popover-fg: var(--popover-foreground);
+  --aui-ring: var(--ring);
+  --aui-shadow-card: var(--aui-card-shadow);
+  --aui-surface: var(--card);
+  --aui-surface-border: var(--aui-card-border);
+  --aui-text-muted: var(--muted-foreground);
+
   --aui-radius-control: var(--radius-md);
   --aui-radius-surface: var(--radius-lg);
   --aui-radius-overlay: var(--radius-xl);
@@ -133,9 +154,9 @@
   --aui-control-panel-bg: var(--aui-surface-raised);
   --aui-control-panel-shadow: var(--aui-shadow-md);
   --aui-card-radius: var(--aui-radius-surface);
-  --aui-card-border: color-mix(in oklch, var(--border), white 8%);
-  --aui-card-shadow: var(--aui-shadow-md);
-  --aui-card-shadow-hover: var(--aui-shadow-lg);
+  --aui-card-border: var(--border);
+  --aui-card-shadow: var(--aui-shadow-xs);
+  --aui-card-shadow-hover: var(--aui-shadow-md);
   --aui-card-soft-bg: color-mix(in oklch, var(--muted), var(--background) 34%);
   --aui-card-outline-bg: var(--aui-surface-raised);
   --aui-popover-shadow: var(--aui-shadow-lg);
@@ -860,106 +881,105 @@
     box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
   }
 
-  [data-slot="card"][data-slot="card"],
-  [data-slot="stat-card"][data-slot="stat-card"] {
+  :is([data-slot="card"], [data-card]) {
     border: 1px solid var(--aui-card-border);
     border-radius: var(--aui-card-radius);
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
     box-shadow: var(--aui-card-shadow);
   }
 
-  [data-slot="card"] {
+  :is([data-slot="card"], [data-card]) {
     --card-spacing: 1.25rem;
     color: var(--card-foreground);
     font-size: 0.875rem;
     transition: background-color var(--aui-motion-normal) var(--aui-ease-standard), border-color var(--aui-motion-normal) var(--aui-ease-standard), box-shadow var(--aui-motion-normal) var(--aui-ease-standard), transform var(--aui-motion-normal) var(--aui-ease-standard), opacity var(--aui-motion-normal) var(--aui-ease-standard);
   }
 
-  [data-slot="card"][data-size="sm"] { --card-spacing: 1rem; }
-  [data-slot="card"][data-size="lg"] { --card-spacing: 1.5rem; }
-  [data-slot="card"][data-density="compact"] { font-size: 0.75rem; }
-  [data-slot="card"][data-density="comfortable"] { font-size: 1rem; }
-  [data-slot="card"][data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
-  [data-slot="card"] > img:first-child { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
-  [data-slot="card"] > img:last-child { border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); }
+  :is([data-slot="card"], [data-card])[data-size="sm"] { --card-spacing: 1rem; }
+  :is([data-slot="card"], [data-card])[data-size="lg"] { --card-spacing: 1.5rem; }
+  :is([data-slot="card"], [data-card])[data-density="compact"] { font-size: 0.75rem; }
+  :is([data-slot="card"], [data-card])[data-density="comfortable"] { font-size: 1rem; }
+  :is([data-slot="card"], [data-card])[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
+  :is([data-slot="card"], [data-card]) > img:first-child { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
+  :is([data-slot="card"], [data-card]) > img:last-child { border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); }
 
   [data-slot="card-header"] { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
   [data-slot="card-eyebrow"] { color: color-mix(in oklch, var(--muted-foreground), transparent 20%); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; }
   [data-slot="card-title"] { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.02em; }
-  [data-slot="card"][data-size="sm"] [data-slot="card-title"] { font-size: 0.875rem; }
-  [data-slot="card"][data-size="lg"] [data-slot="card-title"] { font-size: 1.25rem; }
+  :is([data-slot="card"], [data-card])[data-size="sm"] [data-slot="card-title"] { font-size: 0.875rem; }
+  :is([data-slot="card"], [data-card])[data-size="lg"] [data-slot="card-title"] { font-size: 1.25rem; }
   [data-slot="card-description"] { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5rem; }
   [data-slot="card-footer"] { border-top: 1px solid color-mix(in oklch, var(--border), transparent 40%); border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); background: color-mix(in oklch, var(--muted), transparent 78%); }
 
-  [data-slot="card"][data-variant="elevated"] {
+  :is([data-slot="card"], [data-card])[data-variant="elevated"] {
     box-shadow: 0 1px 0 oklch(1 0 0 / 76%), 0 24px 58px oklch(0.24 0.02 255 / 10%);
   }
 
-  [data-slot="card"][data-variant="outline"] {
+  :is([data-slot="card"], [data-card])[data-variant="outline"] {
     background: var(--aui-card-outline-bg);
     box-shadow: none;
   }
 
-  [data-slot="card"][data-variant="soft"] {
+  :is([data-slot="card"], [data-card])[data-variant="soft"] {
     border-color: color-mix(in oklch, var(--border), transparent 28%);
     background: var(--aui-card-soft-bg);
     box-shadow: none;
   }
 
-  [data-slot="card"][data-tone="info"] {
+  :is([data-slot="card"], [data-card])[data-tone="info"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-info) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="success"] {
+  :is([data-slot="card"], [data-card])[data-tone="success"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-success) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="warning"] {
+  :is([data-slot="card"], [data-card])[data-tone="warning"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-warning) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="danger"] {
+  :is([data-slot="card"], [data-card])[data-tone="danger"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--destructive) 10%), var(--card));
   }
 
-  [data-slot="card"][data-interactive="true"]:hover {
+  :is([data-slot="card"], [data-card])[data-interactive="true"]:hover {
     border-color: var(--aui-control-hover-border);
     box-shadow: var(--aui-card-shadow-hover);
   }
 
-  [data-slot="card"][data-interactive="true"]:focus-visible {
+  :is([data-slot="card"], [data-card])[data-interactive="true"]:focus-visible {
     box-shadow: var(--aui-card-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
   }
 
-  [data-slot="card"][data-selected="true"] {
+  :is([data-slot="card"], [data-card])[data-selected="true"] {
     border-color: color-mix(in oklch, var(--primary), transparent 44%);
     box-shadow: var(--aui-card-shadow), 0 0 0 1px color-mix(in oklch, var(--primary), transparent 64%), 0 0 0 6px color-mix(in oklch, var(--primary), transparent 88%);
   }
 
-  [data-slot="card"][data-disabled="true"] {
+  :is([data-slot="card"], [data-card])[data-disabled="true"] {
     box-shadow: none;
     opacity: 0.76;
   }
 
-  [data-slot="card"][data-size="sm"] {
+  :is([data-slot="card"], [data-card])[data-size="sm"] {
     border-radius: var(--radius-xl);
   }
 
-  [data-slot="card"][data-size="lg"] {
+  :is([data-slot="card"], [data-card])[data-size="lg"] {
     border-radius: var(--radius-3xl);
   }
 
-  [data-slot="card"][data-density="compact"] [data-slot="card-description"] {
+  :is([data-slot="card"], [data-card])[data-density="compact"] [data-slot="card-description"] {
     font-size: 0.8125rem;
     line-height: 1.35;
   }
 
-  [data-slot="card"][data-density="comfortable"] [data-slot="card-description"] {
+  :is([data-slot="card"], [data-card])[data-density="comfortable"] [data-slot="card-description"] {
     font-size: 0.975rem;
     line-height: 1.7;
   }
 
-  [data-slot="card"] [data-slot="card"][data-slot="card"] {
+  :is([data-slot="card"], [data-card]) :is([data-slot="card"], [data-card]) {
     box-shadow: none;
     border-color: color-mix(in oklch, var(--border), transparent 18%);
     background: color-mix(in oklch, var(--muted), transparent 74%);
@@ -1724,9 +1744,9 @@
   }
 
   [data-slot="statistic-card"] {
-    border-color: var(--aui-surface-border);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    border-color: var(--aui-card-border, var(--border));
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="statistic-label"],
@@ -1740,10 +1760,10 @@
   [data-slot="statistic-change"][data-trend="down"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
 
   [data-slot="page-state"] {
-    border-color: var(--aui-surface-border);
+    border-color: var(--aui-card-border, var(--border));
     border-radius: var(--aui-radius-panel);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="page-state-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
@@ -1753,9 +1773,9 @@
 
   [data-slot="file-upload-dropzone"],
   [data-slot="file-upload-item"] {
-    border-color: var(--aui-surface-border);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    border-color: var(--aui-card-border, var(--border));
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="file-upload-file-status"][data-status="success"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.14",
+  "version": "3.1.16",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [