@svadmin/ui 0.76.0 → 0.78.0

package/dist/app.theme.css

@@ -5530,6 +5530,8 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
@@ -5542,6 +5544,7 @@
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --shadow-surface: var(--svadmin-shadow-surface);
   }
 }
 @layer utilities.svadmin-ui {
@@ -5617,6 +5620,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -5764,6 +5770,11 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
@@ -5931,6 +5942,10 @@
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -5946,6 +5961,10 @@
   .text-\[0\.8125rem\] {
     font-size: 0.8125rem;
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -6559,7 +6578,7 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    left: 0.75rem;
+    inset-inline-start: 0.75rem;
     width: var(--svadmin-filter-search-icon-size);
     height: var(--svadmin-filter-search-icon-size);
     color: var(--muted-foreground);
@@ -6575,7 +6594,7 @@
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
-    right: 0.25rem;
+    inset-inline-end: 0.25rem;
     transform: translateY(-50%);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
@@ -6597,14 +6616,14 @@
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
     width: 0.75rem;
     height: 0.75rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     color: var(--muted-foreground);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
     height: 1rem;
     min-height: 1rem;
     min-width: 1rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     padding: 0 0.25rem;
     font-size: 0.625rem;
     font-weight: 600;
@@ -6684,7 +6703,8 @@
     --card-foreground: oklch(0.205 0.012 264);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.205 0.012 264);
-    --primary: oklch(0.558 0.22 278);
+    /* Stripe is the default when no persisted or explicit preset exists. */
+    --primary: oklch(0.54 0.24 293);
     --primary-foreground: oklch(0.99 0 0);
     --secondary: oklch(0.95 0.006 264);
     --secondary-foreground: oklch(0.265 0.014 264);
@@ -6696,8 +6716,8 @@
     --destructive-foreground: oklch(0.99 0 0);
     --border: oklch(0.925 0.003 264);
     --input: oklch(0.84 0.01 264);
-    --ring: oklch(0.558 0.22 278);
-    --chart-1: oklch(0.558 0.22 278);
+    --ring: oklch(0.54 0.24 293);
+    --chart-1: oklch(0.54 0.24 293);
     --chart-2: oklch(0.57 0.12 196);
     --chart-3: oklch(0.56 0.13 244);
     --chart-4: oklch(0.72 0.15 78);
@@ -6710,12 +6730,12 @@
     --info-foreground: oklch(0.99 0 0);
     --sidebar: oklch(1 0 0);
     --sidebar-foreground: oklch(0.265 0.014 264);
-    --sidebar-primary: oklch(0.558 0.22 278);
+    --sidebar-primary: oklch(0.54 0.24 293);
     --sidebar-primary-foreground: oklch(0.99 0 0);
     --sidebar-accent: oklch(0.962 0.012 278);
     --sidebar-accent-foreground: oklch(0.34 0.105 278);
     --sidebar-border: var(--border);
-    --sidebar-ring: oklch(0.558 0.22 278);
+    --sidebar-ring: oklch(0.54 0.24 293);
     --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.04);
     --svadmin-shadow-surface: 0 1px 2px rgb(15 23 42 / 0.035);
     --svadmin-shadow-surface-hover: 0 2px 5px rgb(15 23 42 / 0.06);
@@ -6729,8 +6749,8 @@
     --card-foreground: oklch(0.96 0.004 264);
     --popover: oklch(0.195 0.012 264);
     --popover-foreground: oklch(0.96 0.004 264);
-    --primary: oklch(0.68 0.18 278);
-    --primary-foreground: oklch(0.15 0.03 278);
+    --primary: oklch(0.72 0.19 293);
+    --primary-foreground: oklch(0.16 0.02 270);
     --secondary: oklch(0.235 0.012 264);
     --secondary-foreground: oklch(0.94 0.004 264);
     --muted: oklch(0.235 0.012 264);
@@ -6741,8 +6761,8 @@
     --destructive-foreground: oklch(0.98 0 0);
     --border: oklch(0.3 0.012 264);
     --input: oklch(0.335 0.014 264);
-    --ring: oklch(0.68 0.18 278);
-    --chart-1: oklch(0.68 0.18 278);
+    --ring: oklch(0.72 0.19 293);
+    --chart-1: oklch(0.72 0.19 293);
     --chart-2: oklch(0.7 0.13 177);
     --chart-3: oklch(0.72 0.13 230);
     --chart-4: oklch(0.78 0.14 83);
@@ -6755,12 +6775,12 @@
     --info-foreground: oklch(0.15 0.03 244);
     --sidebar: oklch(0.17 0.01 264);
     --sidebar-foreground: oklch(0.9 0.006 264);
-    --sidebar-primary: oklch(0.68 0.18 278);
-    --sidebar-primary-foreground: oklch(0.15 0.03 278);
+    --sidebar-primary: oklch(0.72 0.19 293);
+    --sidebar-primary-foreground: oklch(0.16 0.02 270);
     --sidebar-accent: oklch(0.245 0.035 278);
     --sidebar-accent-foreground: oklch(0.84 0.09 278);
     --sidebar-border: oklch(0.3 0.012 264);
-    --sidebar-ring: oklch(0.68 0.18 278);
+    --sidebar-ring: oklch(0.72 0.19 293);
     --svadmin-shadow-control: 0 1px 2px rgb(0 0 0 / 0.24), 0 0 0 1px rgb(255 255 255 / 0.025);
     --svadmin-shadow-surface: 0 1px 2px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.16);
     --svadmin-shadow-surface-hover: 0 2px 5px rgb(0 0 0 / 0.28), 0 1px 2px rgb(0 0 0 / 0.2);
@@ -6795,7 +6815,7 @@
     --chart-1: oklch(0.68 0.18 278);
   }
 
-  /* Indigo (default) */
+  /* Indigo (compatibility preset) */
   [data-theme="indigo"] {
     --primary: oklch(0.558 0.22 278);
     --primary-foreground: oklch(0.985 0 0);
@@ -6816,6 +6836,28 @@
     --chart-1: oklch(0.68 0.18 278);
   }
 
+  /* Stripe-inspired preset (matches @svadmin/core builtinPresets.stripe). */
+  [data-theme="stripe"] {
+    --primary: oklch(0.54 0.24 293);
+    --primary-foreground: oklch(0.99 0 0);
+    --ring: oklch(0.54 0.24 293);
+    --sidebar-primary: oklch(0.54 0.24 293);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-ring: oklch(0.54 0.24 293);
+    --chart-1: oklch(0.54 0.24 293);
+  }
+  .dark[data-theme="stripe"],
+  .dark [data-theme="stripe"],
+  [data-theme="stripe"][data-theme-mode="dark"] {
+    --primary: oklch(0.72 0.19 293);
+    --primary-foreground: oklch(0.16 0.02 270);
+    --ring: oklch(0.72 0.19 293);
+    --sidebar-primary: oklch(0.72 0.19 293);
+    --sidebar-primary-foreground: oklch(0.16 0.02 270);
+    --sidebar-ring: oklch(0.72 0.19 293);
+    --chart-1: oklch(0.72 0.19 293);
+  }
+
   /* Blue */
   [data-theme="blue"] {
     --primary: oklch(0.546 0.245 262.881);
@@ -6947,7 +6989,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -6972,10 +7014,10 @@ h6,
 [data-slot="textarea"] {
   box-shadow: var(--shadow-control);
   transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    box-shadow 140ms ease;
+    background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 [data-slot="input"],
@@ -6988,8 +7030,8 @@ h6,
 [data-slot="card"] {
   box-shadow: var(--shadow-surface);
   transition:
-    border-color 160ms ease,
-    box-shadow 160ms ease;
+    border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 [data-slot="card"][data-interactive="true"]:hover {
@@ -7037,11 +7079,11 @@ h6,
   user-select: none;
   outline: none;
   transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    box-shadow 140ms ease,
-    transform 140ms ease;
+    background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    transform var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 :is([data-slot="button"], .svadmin-button) > svg,
@@ -7052,8 +7094,8 @@ h6,
   pointer-events: none;
 }
 
-:is([data-slot="button"], .svadmin-button):active,
-:is([data-svadmin-button], .svadmin-button):active {
+:is([data-slot="button"], .svadmin-button):not(:disabled, [aria-disabled="true"], [data-disabled]):active,
+:is([data-svadmin-button], .svadmin-button):not(:disabled, [aria-disabled="true"], [data-disabled]):active {
   transform: translateY(1px);
 }
 
@@ -7224,7 +7266,7 @@ h6,
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
-  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 :is([data-slot="badge"], .svadmin-badge).svadmin-badge > svg {
@@ -7324,7 +7366,7 @@ h6,
 }
 
 [data-slot="table-row"] {
-  transition: background-color 140ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 [data-slot="table-row"]:hover {
@@ -7357,7 +7399,7 @@ h6,
 }
 
 [data-sonner-toaster] [data-sonner-toast] {
-  transition-duration: 180ms;
+  transition-duration: var(--svadmin-motion-fast);
   transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -7548,10 +7590,10 @@ main {
   color: var(--muted-foreground);
   pointer-events: none;
   transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    box-shadow 140ms ease;
+    background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-file-input__button {
@@ -7588,7 +7630,7 @@ main {
   background: transparent;
   color: var(--foreground);
   outline: none;
-  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+  transition: border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing), background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-input:not([data-input-type="file"]) {
@@ -7714,14 +7756,14 @@ main {
   width: 100%;
   max-width: min(32rem, calc(100% - 2rem));
   gap: 1rem;
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   padding: 1.5rem;
   background: var(--background);
   color: var(--foreground);
   outline: none;
   box-shadow: var(--svadmin-shadow-overlay);
   transform: translate(-50%, -50%);
-  transition: opacity 300ms ease, transform 300ms ease;
+  transition: opacity var(--svadmin-motion-standard) var(--svadmin-motion-easing), transform var(--svadmin-motion-standard) var(--svadmin-motion-easing);
 }
 
 .svadmin-dialog-content[data-state="closed"] {
@@ -7813,7 +7855,7 @@ main {
   color: inherit;
   opacity: 0.7;
   cursor: pointer;
-  transition: opacity 120ms ease, box-shadow 120ms ease;
+  transition: opacity var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-sheet-close:hover {
@@ -7870,7 +7912,7 @@ main {
   font: inherit;
   font-size: 0.875rem;
   outline: none;
-  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+  transition: border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing), background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-textarea:focus-visible {
@@ -7918,7 +7960,7 @@ main {
   height: 100%;
   flex: 1;
   background: var(--primary);
-  transition: transform 200ms ease;
+  transition: transform var(--svadmin-motion-standard) var(--svadmin-motion-easing);
 }
 
 .svadmin-separator {
@@ -7971,7 +8013,7 @@ main {
 .svadmin-card-footer {
   display: flex;
   align-items: center;
-  border-radius: 0 0 0.75rem 0.75rem;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   padding: 1rem;
   background: color-mix(in srgb, var(--muted) 50%, transparent);
 }
@@ -8033,7 +8075,7 @@ main {
 }
 
 .svadmin-breadcrumb-link {
-  transition: color 120ms ease;
+  transition: color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-breadcrumb-link:hover {
@@ -8112,7 +8154,7 @@ main {
   gap: 0.5rem;
   margin: 0 -1.5rem -1.5rem;
   border-top: 1px solid var(--border);
-  border-radius: 0 0 0.75rem 0.75rem;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   padding: 1rem;
   background: color-mix(in srgb, var(--muted) 50%, transparent);
 }
@@ -8174,7 +8216,7 @@ main {
   font: inherit;
   font-size: 0.875rem;
   outline: none;
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  transition: border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-select:focus-visible {
@@ -8228,7 +8270,7 @@ main {
   font-weight: 500;
   outline: none;
   cursor: pointer;
-  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+  transition: color var(--svadmin-motion-fast) var(--svadmin-motion-easing), background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-tabs-trigger[data-state="active"] {
@@ -8366,7 +8408,7 @@ main {
   outline: none;
   cursor: pointer;
   user-select: none;
-  transition: background-color 120ms ease, color 120ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-dropdown-item[data-inset="true"] {
@@ -8439,7 +8481,7 @@ main {
   color: var(--primary-foreground);
   outline: none;
   cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), border-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-checkbox[data-state="checked"],
@@ -8488,7 +8530,7 @@ main {
   outline: none;
   cursor: pointer;
   box-shadow: var(--svadmin-shadow-control);
-  transition: background-color 160ms ease, box-shadow 160ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-switch[data-state="checked"] {
@@ -8512,7 +8554,7 @@ main {
   background: var(--background);
   box-shadow: var(--svadmin-shadow-overlay);
   transform: translateX(0);
-  transition: transform 160ms ease;
+  transition: transform var(--svadmin-motion-fast) var(--svadmin-motion-easing);
   pointer-events: none;
 }
 
@@ -8563,7 +8605,7 @@ main {
   font-weight: 500;
   outline: none;
   cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-navigation-link:hover,
@@ -8590,7 +8632,7 @@ main {
   width: 0.75rem;
   height: 0.75rem;
   margin-left: 0.25rem;
-  transition: transform 160ms ease;
+  transition: transform var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-navigation-trigger[data-state="open"] .svadmin-navigation-trigger-icon {
@@ -8643,7 +8685,7 @@ main {
   color: var(--popover-foreground);
   box-shadow: var(--svadmin-shadow-overlay);
   backdrop-filter: blur(12px);
-  transition: width 300ms ease, height 300ms ease;
+  transition: width var(--svadmin-motion-standard) var(--svadmin-motion-easing), height var(--svadmin-motion-standard) var(--svadmin-motion-easing);
 }
 
 .svadmin-popover-content {
@@ -8779,7 +8821,7 @@ main {
   color: var(--foreground);
   text-align: left;
   text-decoration: none;
-  transition: background-color 150ms ease;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .svadmin-metric-item[data-interactive="true"] {
@@ -9107,6 +9149,10 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   --svadmin-surface-shadow: var(--shadow-surface);
   --svadmin-surface-hover-shadow: var(--shadow-surface-hover);
   --svadmin-floating-shadow: var(--shadow-overlay);
+  --svadmin-motion-fast: 150ms;
+  --svadmin-motion-standard: 200ms;
+  --svadmin-motion-slow: 900ms;
+  --svadmin-focus-offset: 2px;
 }
 
 .layout-clean-flat [data-svadmin-main] {
@@ -9136,8 +9182,8 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   color: color-mix(in oklch, var(--sidebar-foreground) 80%, var(--sidebar));
   box-shadow: none;
   transition:
-    background-color 140ms ease,
-    color 140ms ease;
+    background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing),
+    color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
 }
 
 .layout-clean-flat .sidebar-menu-item:hover {
@@ -9239,7 +9285,7 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
-  height: 3rem;
+  height: 2.75rem;
   border-bottom-color: var(--svadmin-border);
   background: var(--svadmin-surface-muted);
   color: var(--svadmin-text-muted);
@@ -9254,12 +9300,19 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
-  height: 3.5rem;
+  height: 3rem;
   border-bottom-color: var(--svadmin-border);
   color: var(--svadmin-text);
   font-size: 0.8125rem;
 }
 
+.layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"][data-density="compact"],
+.layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"][data-density="compact"] {
+  height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
 .layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
   background: var(--svadmin-surface-hover);
 }
@@ -9447,14 +9500,6 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   min-height: 4.25rem;
 }
 
-.layout-clean-flat [data-svadmin-content-page] > :is(div, section, form) {
-  margin-bottom: 1.25rem;
-}
-
-.layout-clean-flat [data-svadmin-content-page] > :is(div, section, form):last-child {
-  margin-bottom: 0;
-}
-
 .layout-clean-flat [data-svadmin-content-page] > div:first-child,
 .layout-clean-flat [data-svadmin-content-page] > .flex:first-child,
 .layout-clean-flat [data-svadmin-content-page] > .relative:first-child {
@@ -9558,7 +9603,7 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   flex-direction: column;
   gap: 1rem;
   border: 1px solid var(--border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   background: var(--card);
   padding: 1rem;
   color: var(--foreground);
@@ -9747,7 +9792,7 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   flex-direction: column;
   gap: 0.75rem;
   border: 1px solid var(--border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   background: var(--card);
   padding: 1rem;
   color: var(--foreground);
@@ -9798,7 +9843,7 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 .svadmin-anomaly-badge:is([data-slot="badge"], .svadmin-badge)[data-good="true"]:hover { background: color-mix(in oklch, var(--success) 90%, transparent); }
 
 .svadmin-stats-card { gap: 1rem; border-radius: 0.5rem; padding: 1.25rem; }
-.svadmin-stats-card[data-variant="default"] { background: var(--card); box-shadow: var(--shadow-surface); transition: box-shadow 300ms; }
+.svadmin-stats-card[data-variant="default"] { background: var(--card); box-shadow: var(--shadow-surface); transition: box-shadow var(--svadmin-motion-standard); }
 .svadmin-stats-card[data-variant="default"]:hover { box-shadow: var(--shadow-surface-hover); }
 .svadmin-stats-card[data-variant="outline"] { border: 2px solid var(--border); background: transparent; }
 .svadmin-stats-card[data-variant="filled"] { border: 0; background: color-mix(in srgb, var(--muted) 50%, transparent); box-shadow: var(--shadow-surface); }
@@ -9955,6 +10000,328 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   }
 }
 
+/* --- Stripe-inspired visual refinement ---------------------
+ * The existing clean-flat preset owns the shell geometry. This layer keeps
+ * that contract intact while giving the example a single neutral canvas,
+ * restrained elevation, and one deliberate interaction accent.
+ */
+.layout-clean-flat[data-theme="stripe"] {
+  --background: #f6f9fc;
+  --foreground: #0a2540;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.5rem;
+  --card: #ffffff;
+  --card-foreground: #0a2540;
+  --popover: #ffffff;
+  --popover-foreground: #0a2540;
+  --secondary: #eef2f7;
+  --secondary-foreground: #425466;
+  --muted: #f1f4f8;
+  --muted-foreground: #425466;
+  --accent: #eef0ff;
+  --accent-foreground: #5147d9;
+  --border: #e6ebf1;
+  --input: #cbd5e1;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #425466;
+  --sidebar-accent: #f3f5ff;
+  --sidebar-accent-foreground: #0a2540;
+  --sidebar-border: #e6ebf1;
+  --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.04), 0 0 0 1px rgb(15 23 42 / 0.02);
+  --svadmin-shadow-surface: 0 1px 3px rgb(15 23 42 / 0.04), 0 4px 8px rgb(15 23 42 / 0.04);
+  --svadmin-shadow-surface-hover: 0 2px 4px rgb(15 23 42 / 0.06), 0 6px 12px rgb(15 23 42 / 0.06);
+  --svadmin-control-shadow: var(--svadmin-shadow-control);
+  --svadmin-surface-shadow: var(--svadmin-shadow-surface);
+  --svadmin-surface-hover-shadow: var(--svadmin-shadow-surface-hover);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  letter-spacing: 0;
+}
+
+.layout-clean-flat[data-theme="stripe"].svadmin-theme-dark,
+.dark.layout-clean-flat[data-theme="stripe"] {
+  --background: #0f172a;
+  --foreground: #f1f5f9;
+  --card: #111c2e;
+  --card-foreground: #f1f5f9;
+  --popover: #111c2e;
+  --popover-foreground: #f1f5f9;
+  --secondary: #1e293b;
+  --secondary-foreground: #cbd5e1;
+  --muted: #18263b;
+  --muted-foreground: #9aa9bd;
+  --accent: #25224f;
+  --accent-foreground: #c6c2ff;
+  --border: #26364c;
+  --input: #3a4a60;
+  --sidebar: #101b2d;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-accent: #1a2740;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: #26364c;
+  --svadmin-shadow-control: 0 1px 2px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(255 255 255 / 0.02);
+  --svadmin-shadow-surface: 0 2px 4px rgb(0 0 0 / 0.22), 0 8px 18px rgb(0 0 0 / 0.18);
+  --svadmin-shadow-surface-hover: 0 4px 10px rgb(0 0 0 / 0.3), 0 16px 32px rgb(0 0 0 / 0.22);
+  --svadmin-control-shadow: var(--svadmin-shadow-control);
+  --svadmin-surface-shadow: var(--svadmin-shadow-surface);
+  --svadmin-surface-hover-shadow: var(--svadmin-shadow-surface-hover);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-main] {
+  background: var(--background);
+  color: var(--foreground);
+  background-image:
+    linear-gradient(to right, color-mix(in oklch, var(--primary) 2%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in oklch, var(--primary) 2%, transparent) 1px, transparent 1px);
+  background-size: var(--svadmin-grid-size) var(--svadmin-grid-size);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] {
+  border-inline-end: 1px solid var(--sidebar-border);
+  background: var(--sidebar);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] > div:first-child {
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item {
+  min-height: 2.25rem;
+  margin-block: 0.125rem;
+  border-radius: 0.375rem;
+  color: var(--sidebar-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing), color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active {
+  background: color-mix(in oklch, var(--primary) 9%, var(--sidebar));
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
+  content: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {
+  color: var(--primary);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] nav > * > button:not(.sidebar-menu-item) {
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] {
+  min-height: 4rem;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in oklch, var(--card) 96%, transparent);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] .svadmin-header-search {
+  min-width: 10rem;
+  border-color: var(--border);
+  border-radius: 0.5rem;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-content-page] {
+  padding-block: 1.5rem 3rem;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-auth-page] {
+  background: var(--background);
+  background-image:
+    linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
+  background-size: var(--svadmin-grid-size) var(--svadmin-grid-size);
+  color: var(--foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-page-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-list-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-resource-operations] h1 {
+  color: var(--foreground);
+  letter-spacing: 0;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-page-header] p,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-list-header] p,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-header] p {
+  color: var(--muted-foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"] {
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"][data-interactive="true"] {
+  transition: box-shadow var(--svadmin-motion-standard) var(--svadmin-motion-easing), border-color var(--svadmin-motion-standard) var(--svadmin-motion-easing);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"][data-interactive="true"]:hover {
+  box-shadow: var(--svadmin-surface-hover-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] {
+  min-height: 7rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] [data-svadmin-metric-value] {
+  font-variant-numeric: tabular-nums;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button) {
+  border-radius: 0.5rem;
+  box-shadow: var(--svadmin-control-shadow);
+  font-weight: 600;
+  transition: transform var(--svadmin-motion-standard) var(--svadmin-motion-easing), box-shadow var(--svadmin-motion-standard) var(--svadmin-motion-easing), background-color var(--svadmin-motion-standard) var(--svadmin-motion-easing), border-color var(--svadmin-motion-standard) var(--svadmin-motion-easing);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="ghost"], [data-variant="link"], .svadmin-button--ghost, .svadmin-button--link) {
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button)[data-variant="default"],
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button).svadmin-button--default {
+  box-shadow:
+    0 2px 5px color-mix(in oklch, var(--primary) 40%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 0.2);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):not(:disabled, [aria-disabled="true"], [data-disabled]):active {
+  transform: translateY(0) scale(0.98);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="default"], [data-variant="outline"], .svadmin-button--default, .svadmin-button--outline):not(:disabled, [aria-disabled="true"], [data-disabled]):active {
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.18);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="input"]:focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="textarea"]:focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="select"]:focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="select-trigger"]:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: var(--svadmin-focus-offset);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is(.transition, .transition-all, .transition-colors, .transition-transform, .transition-opacity) {
+  transition-duration: var(--svadmin-motion-standard);
+  transition-timing-function: var(--svadmin-motion-easing);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="input"],
+.layout-clean-flat[data-theme="stripe"] [data-slot="textarea"],
+.layout-clean-flat[data-theme="stripe"] [data-slot="select"],
+.layout-clean-flat[data-theme="stripe"] [data-slot="select-trigger"] {
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-control-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-head] [data-slot="table-head"] {
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row] [data-slot="table-cell"] {
+  background: var(--card);
+  color: var(--foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row] {
+  transition: background-color var(--svadmin-motion-fast) var(--svadmin-motion-easing);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row]:hover [data-slot="table-cell"] {
+  background: color-mix(in oklch, var(--primary) 3%, var(--card));
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row][data-state="selected"] [data-slot="table-cell"] {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"], [data-slot="select-trigger"])[aria-invalid="true"] {
+  border-color: var(--destructive);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"], [data-slot="select-trigger"])[aria-invalid="true"]:focus-visible {
+  outline-color: var(--destructive);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-toolbar] {
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-actions] {
+  border-top: 1px solid var(--border);
+  background: color-mix(in oklch, var(--card) 96%, var(--background));
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-auth-page] > main > div > section {
+  border-radius: 0.5rem;
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+@media (max-width: 48rem) {
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-content-page] {
+    padding-block: 1rem 2rem;
+  }
+
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] .svadmin-header-search {
+    min-width: 0;
+  }
+
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] {
+    min-height: 6.25rem;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  .layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="default"], [data-variant="outline"], .svadmin-button--default, .svadmin-button--outline):not(:disabled, [aria-disabled="true"], [data-disabled]):hover:not(:active) {
+    transform: translateY(-0.125rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is([data-slot="button"], [data-svadmin-button], .svadmin-button):not(:disabled, [aria-disabled="true"], [data-disabled]):active,
+  .layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):not(:disabled, [aria-disabled="true"], [data-disabled]):active {
+    transform: none;
+  }
+}
+
 :root,
 .svadmin-theme{
   --color-background: var(--background);