tembro 4.0.0 → 4.1.0

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

@@ -52,7 +52,8 @@
 }
 
 :root,
-.light {
+.light,
+[data-theme="light"] {
   /* Edit these first to reshape the whole library. */
   --background: oklch(0.988 0.004 95);
   --foreground: oklch(0.238 0.02 255);
@@ -128,17 +129,17 @@
   --aui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --aui-disabled-opacity: 0.52;
   --aui-shadow-xs: 0 1px 2px oklch(0.24 0.02 255 / 5%);
-  --aui-shadow-sm: 0 1px 3px oklch(0.24 0.02 255 / 7%);
-  --aui-shadow-md: 0 8px 24px oklch(0.24 0.02 255 / 8%);
-  --aui-shadow-lg: 0 16px 36px oklch(0.24 0.02 255 / 10%);
+  --aui-shadow-sm: 0 1px 2px oklch(0.24 0.02 255 / 6%), 0 1px 6px oklch(0.24 0.02 255 / 4%);
+  --aui-shadow-md: 0 10px 28px -12px oklch(0.24 0.02 255 / 18%), 0 2px 8px oklch(0.24 0.02 255 / 5%);
+  --aui-shadow-lg: 0 24px 56px -20px oklch(0.24 0.02 255 / 26%), 0 8px 18px oklch(0.24 0.02 255 / 6%);
   --aui-surface-base: var(--background);
   --aui-surface-raised: color-mix(in oklch, var(--background), white 42%);
   --aui-surface-muted: color-mix(in oklch, var(--muted), var(--background) 52%);
   --aui-border-strong: color-mix(in oklch, var(--border), var(--foreground) 7%);
 
   --aui-control-radius: var(--aui-radius-control);
-  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 44%);
-  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 82%);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 22%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 78%);
   --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 48%);
   --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 86%);
   --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 48%);
@@ -150,13 +151,13 @@
   --aui-control-surface-readonly: color-mix(in oklch, var(--muted), var(--background) 78%);
   --aui-control-shadow: var(--aui-shadow-sm);
   --aui-control-border-strong: var(--aui-border-strong);
-  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 68%);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 42%);
   --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: var(--border);
   --aui-card-shadow: var(--aui-shadow-xs);
-  --aui-card-shadow-hover: var(--aui-shadow-md);
+  --aui-card-shadow-hover: 0 18px 42px -18px oklch(0.24 0.02 255 / 24%), 0 3px 10px oklch(0.24 0.02 255 / 6%);
   --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);
@@ -193,7 +194,8 @@
   --aui-table-footer-bg: linear-gradient(180deg, oklch(0.994 0.002 95), oklch(0.974 0.006 250));
 }
 
-.dark {
+.dark,
+[data-theme="dark"] {
   --background: oklch(0.19 0.01 255);
   --foreground: oklch(0.965 0.004 95);
   --card: oklch(0.235 0.012 255);
@@ -234,8 +236,8 @@
   --aui-danger: var(--destructive);
   --aui-danger-foreground: oklch(0.19 0.012 255);
 
-  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 40%);
-  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 80%);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 18%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 72%);
   --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 46%);
   --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 84%);
   --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 46%);
@@ -243,9 +245,9 @@
   --aui-radius-control: var(--radius-lg);
   --aui-radius-surface: var(--radius-xl);
   --aui-shadow-xs: 0 1px 2px oklch(0 0 0 / 12%);
-  --aui-shadow-sm: 0 1px 3px oklch(0 0 0 / 16%);
-  --aui-shadow-md: 0 12px 30px oklch(0 0 0 / 26%);
-  --aui-shadow-lg: 0 22px 54px oklch(0 0 0 / 36%);
+  --aui-shadow-sm: 0 1px 2px oklch(0 0 0 / 20%), 0 2px 8px oklch(0 0 0 / 12%);
+  --aui-shadow-md: 0 16px 36px -16px oklch(0 0 0 / 62%), 0 3px 12px oklch(0 0 0 / 20%);
+  --aui-shadow-lg: 0 28px 64px -20px oklch(0 0 0 / 72%), 0 10px 24px oklch(0 0 0 / 24%);
   --aui-surface-base: var(--background);
   --aui-surface-raised: oklch(1 0 0 / 4%);
   --aui-surface-muted: oklch(1 0 0 / 6%);
@@ -286,7 +288,7 @@
   --aui-table-border: oklch(1 0 0 / 8%);
   --aui-table-selection-surface: oklch(1 0 0 / 4%);
   --aui-control-border-strong: var(--aui-border-strong);
-  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 72%);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 44%);
   --aui-control-panel-bg: var(--aui-surface-raised);
   --aui-control-panel-shadow: var(--aui-shadow-md);
   --aui-button-primary-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 18px 40px color-mix(in oklch, var(--primary), transparent 82%);
@@ -300,6 +302,57 @@
   --aui-table-footer-bg: linear-gradient(180deg, oklch(0.245 0.012 255), oklch(0.215 0.012 255));
 }
 
+/* Optional third preset. Add any custom [data-theme="name"] block with the same semantic tokens. */
+[data-theme="dim"] {
+  --background: oklch(0.245 0.014 250);
+  --foreground: oklch(0.94 0.006 95);
+  --card: oklch(0.285 0.016 250);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.285 0.016 250);
+  --popover-foreground: var(--foreground);
+  --primary: oklch(0.78 0.1 195);
+  --primary-foreground: oklch(0.2 0.018 250);
+  --muted: oklch(0.33 0.014 250);
+  --muted-foreground: oklch(0.76 0.012 245);
+  --accent: oklch(0.35 0.025 205);
+  --accent-foreground: var(--foreground);
+  --border: oklch(1 0 0 / 15%);
+  --input: oklch(1 0 0 / 18%);
+  --ring: oklch(0.72 0.08 195);
+  --sidebar: oklch(0.265 0.016 250);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+:root[data-density="compact"] {
+  --aui-control-height-sm: 1.75rem;
+  --aui-control-height-md: 2.25rem;
+  --aui-control-height-lg: 2.5rem;
+}
+
+:root[data-density="spacious"] {
+  --aui-control-height-sm: 2.25rem;
+  --aui-control-height-md: 2.75rem;
+  --aui-control-height-lg: 3.125rem;
+}
+
+:root[data-contrast="high"] {
+  --border: color-mix(in oklch, var(--foreground), transparent 45%);
+  --input: color-mix(in oklch, var(--foreground), transparent 38%);
+  --ring: var(--foreground);
+  --aui-disabled-opacity: 0.68;
+}
+
+:root[data-motion="reduced"] {
+  --aui-motion-fast: 0ms;
+  --aui-motion-normal: 0ms;
+}
+
 :root[data-radius="none"] { --radius: 0rem; }
 :root[data-radius="sm"] { --radius: 0.375rem; }
 :root[data-radius="md"] { --radius: 0.5rem; }
@@ -317,6 +370,20 @@
 
   body {
     @apply bg-background text-foreground antialiased;
+    margin: 0;
+  }
+
+  html:has([data-slot="workspace-layout"][data-viewport="true"]),
+  body:has([data-slot="workspace-layout"][data-viewport="true"]) {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+
+  body:has([data-slot="workspace-layout"][data-viewport="true"]) > #root {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
   }
 }
 
@@ -325,6 +392,13 @@
 }
 
 @layer components {
+  [data-slot="input"][type="search"]::-webkit-search-cancel-button,
+  [data-slot="input"][type="search"]::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
   [data-slot="text"][data-size="sm"] {
     font-size: 0.875rem;
     line-height: 1.45;
@@ -552,7 +626,9 @@
   }
 
   [data-slot="button"][data-slot="button"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    position: relative;
+    z-index: 1;
+    box-shadow: var(--aui-control-shadow), 0 0 0 2px var(--background), 0 0 0 4px var(--aui-focus-ring);
   }
 
   [data-slot="button"][data-slot="button"]:not(:disabled):not([aria-disabled="true"]):hover {
@@ -568,8 +644,9 @@
   }
 
   [data-slot="button"][data-variant="default"]:not(:disabled):not([aria-disabled="true"]):hover {
-    background: color-mix(in oklch, var(--primary), white 10%);
-    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 18%), 0 20px 42px color-mix(in oklch, var(--primary), transparent 74%);
+    border-color: color-mix(in oklch, var(--primary), black 16%);
+    background: color-mix(in oklch, var(--primary), white 7%);
+    box-shadow: 0 8px 20px -10px color-mix(in oklch, var(--primary), transparent 35%);
   }
 
   [data-slot="button"][data-variant="secondary"] {
@@ -585,7 +662,9 @@
   }
 
   [data-slot="button"][data-variant="outline"]:not(:disabled):not([aria-disabled="true"]):hover {
-    background: color-mix(in oklch, var(--background), transparent 14%);
+    border-color: var(--aui-control-hover-border);
+    background: var(--accent);
+    color: var(--accent-foreground);
   }
 
   [data-slot="button"][data-variant="ghost"] {
@@ -596,8 +675,9 @@
   }
 
   [data-slot="button"][data-variant="ghost"]:not(:disabled):not([aria-disabled="true"]):hover {
-    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
-    background: color-mix(in oklch, var(--accent), transparent 22%);
+    border-color: transparent;
+    background: var(--accent);
+    color: var(--accent-foreground);
   }
 
   [data-slot="button"][data-variant="destructive"] {
@@ -688,7 +768,8 @@
   [data-slot="input"][data-slot="input"]:focus-visible,
   [data-slot="textarea"][data-slot="textarea"]:focus-visible,
   [data-slot="select-trigger"][data-slot="select-trigger"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    border-color: var(--ring);
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--background), 0 0 0 3px var(--aui-focus-ring);
   }
 
   [data-slot="input"][data-slot="input"]:disabled,
@@ -745,10 +826,18 @@
   }
 
   [data-slot="badge"][data-slot="badge"] {
+    position: relative;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: var(--aui-radius-pill);
     border-color: color-mix(in oklch, var(--border), var(--foreground) 5%);
     background: color-mix(in oklch, var(--muted), var(--background) 42%);
     color: var(--foreground);
     box-shadow: inset 0 1px 0 color-mix(in oklch, white, transparent 38%);
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0;
+    transition: color var(--aui-motion-fast) var(--aui-ease-standard), background-color var(--aui-motion-fast) var(--aui-ease-standard), border-color var(--aui-motion-fast) var(--aui-ease-standard), box-shadow var(--aui-motion-fast) var(--aui-ease-standard), transform var(--aui-motion-fast) var(--aui-ease-standard);
   }
 
   [data-slot="badge"][data-variant="soft"] {
@@ -758,18 +847,31 @@
     box-shadow: none;
   }
 
-  [data-slot="badge"][data-size="sm"] { min-height: 1.25rem; gap: 0.3rem; padding: 0.125rem 0.625rem; font-size: 0.64rem; }
-  [data-slot="badge"][data-size="default"] { min-height: 1.5rem; gap: 0.375rem; padding: 0.25rem 0.75rem; font-size: 0.7rem; }
-  [data-slot="badge"][data-size="lg"] { min-height: 1.75rem; gap: 0.375rem; padding: 0.25rem 0.875rem; font-size: 0.78rem; }
+  [data-slot="badge"][data-size="sm"] { min-height: 1.375rem; gap: 0.3rem; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; }
+  [data-slot="badge"][data-size="default"] { min-height: 1.625rem; gap: 0.375rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; }
+  [data-slot="badge"][data-size="lg"] { min-height: 2rem; gap: 0.4375rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
 
-  [data-slot="badge-dot"] { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: var(--aui-radius-pill); background: currentColor; opacity: 0.75; }
-  [data-slot="badge-icon"] { display: inline-flex; flex-shrink: 0; align-items: center; }
-  [data-slot="badge-icon"] svg { width: 0.75rem; height: 0.75rem; }
+  [data-slot="badge-dot"] { position: relative; display: grid; width: 0.5rem; height: 0.5rem; flex-shrink: 0; place-items: center; border-radius: var(--aui-radius-pill); background: currentColor; opacity: 0.78; }
+  [data-slot="badge-dot"] > * { width: 100%; height: 100%; border-radius: inherit; }
+  [data-slot="badge-dot"][data-pulse="true"]::after { position: absolute; inset: -0.1875rem; border: 1px solid currentColor; border-radius: inherit; content: ""; animation: aui-badge-pulse 1.8s var(--aui-ease-standard) infinite; }
+  [data-slot="badge-avatar"] { width: 1rem; height: 1rem; margin-inline-start: -0.1875rem; }
+  [data-slot="badge-avatar"] img { width: 100%; height: 100%; object-fit: cover; }
+  [data-slot="badge"][data-size="sm"] [data-slot="badge-avatar"] { width: 0.875rem; height: 0.875rem; }
+  [data-slot="badge"][data-size="lg"] [data-slot="badge-avatar"] { width: 1.25rem; height: 1.25rem; }
+  [data-slot="badge-icon"] { display: grid; flex-shrink: 0; place-items: center; }
+  [data-slot="badge-icon"] svg { width: 0.875rem; height: 0.875rem; }
   [data-slot="badge-count"] { display: inline-flex; min-width: 1.25rem; align-items: center; justify-content: center; border-radius: var(--aui-radius-pill); background: color-mix(in oklch, currentColor, transparent 88%); padding: 0.125rem 0.375rem; font-size: 0.72em; font-weight: 650; }
-  [data-slot="badge-remove"] { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--aui-radius-pill); background: color-mix(in oklch, currentColor, transparent 90%); opacity: 0.8; transition: opacity var(--aui-motion-fast) var(--aui-ease-standard), box-shadow var(--aui-motion-fast) var(--aui-ease-standard); }
-  [data-slot="badge-remove"]:hover { opacity: 1; }
+  [data-slot="badge-remove"] { display: grid; width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-inline-end: -0.25rem; padding: 0; place-items: center; border: 0; border-radius: var(--aui-radius-pill); background: color-mix(in oklch, currentColor, transparent 90%); color: inherit; line-height: 1; opacity: 0.76; transition: opacity var(--aui-motion-fast) var(--aui-ease-standard), background-color var(--aui-motion-fast) var(--aui-ease-standard), box-shadow var(--aui-motion-fast) var(--aui-ease-standard); }
+  [data-slot="badge-remove"]:hover { background: color-mix(in oklch, currentColor, transparent 82%); opacity: 1; }
   [data-slot="badge-remove"]:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, currentColor, transparent 65%); }
   [data-slot="badge-remove"] svg { width: 0.75rem; height: 0.75rem; }
+  [data-slot="badge"][data-interactive="true"]:hover { border-color: color-mix(in oklch, var(--ring), transparent 55%); background: color-mix(in oklch, var(--muted), var(--background) 20%); transform: translateY(-1px); }
+  [data-slot="badge"][data-interactive="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 74%); }
+
+  @keyframes aui-badge-pulse {
+    0% { opacity: 0.55; transform: scale(0.7); }
+    70%, 100% { opacity: 0; transform: scale(1.35); }
+  }
 
   [data-slot="badge"][data-variant="default"] {
     border-color: color-mix(in oklch, var(--primary), transparent 64%);
@@ -867,7 +969,7 @@
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:hover {
     color: var(--foreground);
-    background: color-mix(in oklch, var(--background), transparent 18%);
+    background: var(--accent);
   }
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"][data-selected] {
@@ -878,13 +980,13 @@
   }
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--aui-focus-ring);
   }
 
   :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));
+    background: var(--card);
     box-shadow: var(--aui-card-shadow);
   }
 
@@ -945,6 +1047,7 @@
   :is([data-slot="card"], [data-card])[data-interactive="true"]:hover {
     border-color: var(--aui-control-hover-border);
     box-shadow: var(--aui-card-shadow-hover);
+    transform: translateY(-1px);
   }
 
   :is([data-slot="card"], [data-card])[data-interactive="true"]:focus-visible {

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [
@@ -71,6 +71,7 @@
       "activity-feed",
       "avatar",
       "code-block",
+      "chat",
       "description-list",
       "data-state",
       "info-card",
@@ -285,6 +286,7 @@
       "code-block",
       "data-state",
       "kanban",
+      "chat",
       "list",
       "description-list",
       "statistic",