@svadmin/ui 0.86.0 → 0.88.0

package/README.md

@@ -57,7 +57,9 @@ Use the business page layer as the default customer API:
   `DataState` for the recurring work patterns inside those pages.
 
 `PagePattern` has a shared `state` contract (`ready`, `loading`, `empty`,
-`error`, `forbidden`) and hides page content while a non-ready state is active.
+`filtered-empty`, `error`, `forbidden`) and hides page content while a non-ready
+state is active. Use `filtered-empty` when active filters match no records; keep
+it distinct from an initially empty resource.
 This keeps shadcn-svelte as an implementation source while customers receive a
 stable, Ant Design-like product workflow. Prefer these APIs over composing
 primitive `Button`, `Card`, `Dialog`, and `Table` components directly in every

package/dist/app.css

@@ -5532,7 +5532,6 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --radius-md: calc(var(--radius) - 2px);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
@@ -5763,6 +5762,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-\[var\(--svadmin-space-1\)\] {
+    gap: var(--svadmin-space-1);
+  }
   .gap-\[var\(--svadmin-space-2\)\] {
     gap: var(--svadmin-space-2);
   }
@@ -5802,11 +5804,21 @@
     margin-block-start: calc(var(--svadmin-space-1) * var(--tw-space-y-reverse));
     margin-block-end: calc(var(--svadmin-space-1) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-\[var\(--svadmin-space-2\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-2) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-\[var\(--svadmin-space-3\)\] > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--svadmin-space-3) * var(--tw-space-y-reverse));
     margin-block-end: calc(var(--svadmin-space-3) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-\[var\(--svadmin-space-4\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-4) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-\[var\(--svadmin-space-5\)\] > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--svadmin-space-5) * var(--tw-space-y-reverse));
@@ -5902,6 +5914,9 @@
   .p-0 {
     padding: 0px;
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -5914,6 +5929,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-\[var\(--svadmin-space-3\)\] {
+    padding-inline: var(--svadmin-space-3);
+  }
   .px-\[var\(--svadmin-space-4\)\] {
     padding-inline: var(--svadmin-space-4);
   }
@@ -6111,12 +6129,18 @@
   .\[--svadmin-metric-state-border-width\:3px\] {
     --svadmin-metric-state-border-width: 3px;
   }
+  .\[--svadmin-metric-state-height\:4\.5rem\] {
+    --svadmin-metric-state-height: 4.5rem;
+  }
   .\[--svadmin-metric-state-height\:6rem\] {
     --svadmin-metric-state-height: 6rem;
   }
   .\[--svadmin-metric-state-padding\:1\.25rem\] {
     --svadmin-metric-state-padding: 1.25rem;
   }
+  .\[--svadmin-metric-state-padding\:var\(--svadmin-space-3\)\] {
+    --svadmin-metric-state-padding: var(--svadmin-space-3);
+  }
   .\[--svadmin-status-color\:var\(--destructive\)\] {
     --svadmin-status-color: var(--destructive);
   }
@@ -6135,6 +6159,9 @@
   .\[--svadmin-table-state-height\:var\(--svadmin-table-state-min-h\)\] {
     --svadmin-table-state-height: var(--svadmin-table-state-min-h);
   }
+  .\[--svadmin-table-state-height\:var\(--svadmin-table-state-min-h-compact\)\] {
+    --svadmin-table-state-height: var(--svadmin-table-state-min-h-compact);
+  }
   .\[writing-mode\:vertical-rl\] {
     writing-mode: vertical-rl;
   }
@@ -6214,18 +6241,30 @@
   .\[\&_\[data-command-group-heading\]\]\:uppercase [data-command-group-heading] {
     text-transform: uppercase;
   }
+  .\[\&\[data-slot\=table-cell\]\]\:py-\[var\(--svadmin-space-1\)\][data-slot=table-cell] {
+    padding-block: var(--svadmin-space-1);
+  }
   .\[\&\[data-slot\=table-cell\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-cell] {
     padding-block: var(--svadmin-space-2);
   }
   .\[\&\[data-slot\=table-cell\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-cell] {
     font-size: var(--svadmin-text-body);
   }
+  .\[\&\[data-slot\=table-cell\]\]\:text-\[length\:var\(--svadmin-text-caption\)\][data-slot=table-cell] {
+    font-size: var(--svadmin-text-caption);
+  }
+  .\[\&\[data-slot\=table-head\]\]\:py-\[var\(--svadmin-space-1\)\][data-slot=table-head] {
+    padding-block: var(--svadmin-space-1);
+  }
   .\[\&\[data-slot\=table-head\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-head] {
     padding-block: var(--svadmin-space-2);
   }
   .\[\&\[data-slot\=table-head\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-head] {
     font-size: var(--svadmin-text-body);
   }
+  .\[\&\[data-slot\=table-head\]\]\:text-\[length\:var\(--svadmin-text-caption\)\][data-slot=table-head] {
+    font-size: var(--svadmin-text-caption);
+  }
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -6571,7 +6610,7 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  .svadmin-filter-toolbar .svadmin-filter-toolbar__input {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input[data-slot="input"] {
     height: var(--svadmin-filter-control-height);
     padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
@@ -6579,9 +6618,9 @@
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
-    top: 50%;
+    inset-block: 0;
     inset-inline-end: var(--svadmin-space-1);
-    transform: translateY(-50%);
+    margin-block: auto;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
@@ -7037,6 +7076,7 @@
     --svadmin-row-h: 3rem; /* 48px */
     --svadmin-table-head-h: 2.75rem; /* 44px */
     --svadmin-table-state-min-h: 8rem; /* 128px */
+    --svadmin-table-state-min-h-compact: 6rem; /* 96px */
     --svadmin-space-1: 0.25rem; /* 4px */
     --svadmin-space-2: 0.5rem; /* 8px */
     --svadmin-space-3: 0.75rem; /* 12px */
@@ -10449,6 +10489,28 @@ details[data-svadmin-filter][open] > :not(summary),
 .svadmin-stats-card__footer { margin-top: 0.5rem; }
 
 /* Auth form compatibility for existing consumers. */
+[data-svadmin-auth-page] {
+  overflow-wrap: anywhere;
+}
+
+[data-svadmin-login-form] :is(input, button) {
+  scroll-margin-block: 0.5rem;
+}
+
+[data-svadmin-auth-aside],
+[data-svadmin-auth-main],
+[data-svadmin-auth-main] > div,
+[data-svadmin-auth-card],
+[data-svadmin-auth-card] form,
+[data-svadmin-auth-brand],
+[data-svadmin-auth-brand] > :last-child {
+  min-width: 0;
+}
+
+[data-svadmin-auth-brand] > :not(:last-child) {
+  flex-shrink: 0;
+}
+
 .layout-clean-flat [data-svadmin-auth-page] > main > div {
   display: flex;
   width: min(100%, 28.75rem);
@@ -10538,7 +10600,8 @@ details[data-svadmin-filter][open] > :not(summary),
   gap: 0.5rem;
 }
 
-.layout-clean-flat [data-svadmin-auth-page] form > div > div:first-child {
+/* 标签操作行保持横排，嵌套密码控件仍使用自己的纵向布局。 */
+.layout-clean-flat [data-svadmin-auth-page] form > div > div:first-child:not(.svadmin-password-input):not([data-svadmin-password-input]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -10551,6 +10614,28 @@ details[data-svadmin-filter][open] > :not(summary),
   font-weight: 600;
 }
 
+.svadmin-auth-input-field {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.svadmin-auth-input-field .svadmin-auth-input-control.svadmin-input {
+  padding-inline-start: 2.25rem;
+}
+
+.svadmin-auth-input-icon {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0.75rem;
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+  transform: translateY(-50%);
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
 .layout-clean-flat [data-svadmin-auth-page] form input {
   width: 100%;
   min-height: 2.75rem;
@@ -10591,6 +10676,104 @@ details[data-svadmin-filter][open] > :not(summary),
   }
 }
 
+/* Password field anatomy. These stable classes do not depend on host Tailwind,
+ * and the logical padding keeps both the lock and reveal control clear of text
+ * in empty, filled, and plain-text states. */
+.svadmin-password-input {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.svadmin-password-input__label {
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.svadmin-password-input__field {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.svadmin-password-input__field .svadmin-password-input__control.svadmin-input {
+  padding-inline-start: 2.25rem;
+  padding-inline-end: 2.5rem;
+}
+
+.svadmin-password-input__icon,
+.svadmin-password-input__toggle {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  translate: 0 -50%;
+}
+
+.svadmin-password-input__icon {
+  inset-inline-start: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+.svadmin-password-input .svadmin-password-input__toggle {
+  inset-inline-end: 0.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  min-height: 0;
+  padding: 0;
+}
+
+.svadmin-password-input__glyph {
+  width: 1rem;
+  height: 1rem;
+}
+
+.svadmin-password-input__strength {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.svadmin-password-input__strength-track {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--muted);
+}
+
+.svadmin-password-input__strength-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--destructive);
+  transition: width var(--svadmin-motion-standard) var(--svadmin-motion-easing);
+}
+
+.svadmin-password-input__strength-fill[data-tone="warning"] {
+  background: var(--warning);
+}
+
+.svadmin-password-input__strength-fill[data-tone="info"] {
+  background: var(--info);
+}
+
+.svadmin-password-input__strength-fill[data-tone="success"] {
+  background: var(--success);
+}
+
+.svadmin-password-input__strength-label {
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
 /* --- 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,

package/dist/app.theme.css

@@ -5532,7 +5532,6 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --radius-md: calc(var(--radius) - 2px);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
@@ -5763,6 +5762,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-\[var\(--svadmin-space-1\)\] {
+    gap: var(--svadmin-space-1);
+  }
   .gap-\[var\(--svadmin-space-2\)\] {
     gap: var(--svadmin-space-2);
   }
@@ -5802,11 +5804,21 @@
     margin-block-start: calc(var(--svadmin-space-1) * var(--tw-space-y-reverse));
     margin-block-end: calc(var(--svadmin-space-1) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-\[var\(--svadmin-space-2\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-2) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-\[var\(--svadmin-space-3\)\] > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--svadmin-space-3) * var(--tw-space-y-reverse));
     margin-block-end: calc(var(--svadmin-space-3) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-\[var\(--svadmin-space-4\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-4) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-\[var\(--svadmin-space-5\)\] > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--svadmin-space-5) * var(--tw-space-y-reverse));
@@ -5902,6 +5914,9 @@
   .p-0 {
     padding: 0px;
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -5914,6 +5929,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-\[var\(--svadmin-space-3\)\] {
+    padding-inline: var(--svadmin-space-3);
+  }
   .px-\[var\(--svadmin-space-4\)\] {
     padding-inline: var(--svadmin-space-4);
   }
@@ -6111,12 +6129,18 @@
   .\[--svadmin-metric-state-border-width\:3px\] {
     --svadmin-metric-state-border-width: 3px;
   }
+  .\[--svadmin-metric-state-height\:4\.5rem\] {
+    --svadmin-metric-state-height: 4.5rem;
+  }
   .\[--svadmin-metric-state-height\:6rem\] {
     --svadmin-metric-state-height: 6rem;
   }
   .\[--svadmin-metric-state-padding\:1\.25rem\] {
     --svadmin-metric-state-padding: 1.25rem;
   }
+  .\[--svadmin-metric-state-padding\:var\(--svadmin-space-3\)\] {
+    --svadmin-metric-state-padding: var(--svadmin-space-3);
+  }
   .\[--svadmin-status-color\:var\(--destructive\)\] {
     --svadmin-status-color: var(--destructive);
   }
@@ -6135,6 +6159,9 @@
   .\[--svadmin-table-state-height\:var\(--svadmin-table-state-min-h\)\] {
     --svadmin-table-state-height: var(--svadmin-table-state-min-h);
   }
+  .\[--svadmin-table-state-height\:var\(--svadmin-table-state-min-h-compact\)\] {
+    --svadmin-table-state-height: var(--svadmin-table-state-min-h-compact);
+  }
   .\[writing-mode\:vertical-rl\] {
     writing-mode: vertical-rl;
   }
@@ -6214,18 +6241,30 @@
   .\[\&_\[data-command-group-heading\]\]\:uppercase [data-command-group-heading] {
     text-transform: uppercase;
   }
+  .\[\&\[data-slot\=table-cell\]\]\:py-\[var\(--svadmin-space-1\)\][data-slot=table-cell] {
+    padding-block: var(--svadmin-space-1);
+  }
   .\[\&\[data-slot\=table-cell\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-cell] {
     padding-block: var(--svadmin-space-2);
   }
   .\[\&\[data-slot\=table-cell\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-cell] {
     font-size: var(--svadmin-text-body);
   }
+  .\[\&\[data-slot\=table-cell\]\]\:text-\[length\:var\(--svadmin-text-caption\)\][data-slot=table-cell] {
+    font-size: var(--svadmin-text-caption);
+  }
+  .\[\&\[data-slot\=table-head\]\]\:py-\[var\(--svadmin-space-1\)\][data-slot=table-head] {
+    padding-block: var(--svadmin-space-1);
+  }
   .\[\&\[data-slot\=table-head\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-head] {
     padding-block: var(--svadmin-space-2);
   }
   .\[\&\[data-slot\=table-head\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-head] {
     font-size: var(--svadmin-text-body);
   }
+  .\[\&\[data-slot\=table-head\]\]\:text-\[length\:var\(--svadmin-text-caption\)\][data-slot=table-head] {
+    font-size: var(--svadmin-text-caption);
+  }
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -6571,7 +6610,7 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  .svadmin-filter-toolbar .svadmin-filter-toolbar__input {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input[data-slot="input"] {
     height: var(--svadmin-filter-control-height);
     padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
@@ -6579,9 +6618,9 @@
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
-    top: 50%;
+    inset-block: 0;
     inset-inline-end: var(--svadmin-space-1);
-    transform: translateY(-50%);
+    margin-block: auto;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
@@ -7037,6 +7076,7 @@
     --svadmin-row-h: 3rem; /* 48px */
     --svadmin-table-head-h: 2.75rem; /* 44px */
     --svadmin-table-state-min-h: 8rem; /* 128px */
+    --svadmin-table-state-min-h-compact: 6rem; /* 96px */
     --svadmin-space-1: 0.25rem; /* 4px */
     --svadmin-space-2: 0.5rem; /* 8px */
     --svadmin-space-3: 0.75rem; /* 12px */
@@ -10449,6 +10489,28 @@ details[data-svadmin-filter][open] > :not(summary),
 .svadmin-stats-card__footer { margin-top: 0.5rem; }
 
 /* Auth form compatibility for existing consumers. */
+[data-svadmin-auth-page] {
+  overflow-wrap: anywhere;
+}
+
+[data-svadmin-login-form] :is(input, button) {
+  scroll-margin-block: 0.5rem;
+}
+
+[data-svadmin-auth-aside],
+[data-svadmin-auth-main],
+[data-svadmin-auth-main] > div,
+[data-svadmin-auth-card],
+[data-svadmin-auth-card] form,
+[data-svadmin-auth-brand],
+[data-svadmin-auth-brand] > :last-child {
+  min-width: 0;
+}
+
+[data-svadmin-auth-brand] > :not(:last-child) {
+  flex-shrink: 0;
+}
+
 .layout-clean-flat [data-svadmin-auth-page] > main > div {
   display: flex;
   width: min(100%, 28.75rem);
@@ -10538,7 +10600,8 @@ details[data-svadmin-filter][open] > :not(summary),
   gap: 0.5rem;
 }
 
-.layout-clean-flat [data-svadmin-auth-page] form > div > div:first-child {
+/* 标签操作行保持横排，嵌套密码控件仍使用自己的纵向布局。 */
+.layout-clean-flat [data-svadmin-auth-page] form > div > div:first-child:not(.svadmin-password-input):not([data-svadmin-password-input]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -10551,6 +10614,28 @@ details[data-svadmin-filter][open] > :not(summary),
   font-weight: 600;
 }
 
+.svadmin-auth-input-field {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.svadmin-auth-input-field .svadmin-auth-input-control.svadmin-input {
+  padding-inline-start: 2.25rem;
+}
+
+.svadmin-auth-input-icon {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0.75rem;
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+  transform: translateY(-50%);
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
 .layout-clean-flat [data-svadmin-auth-page] form input {
   width: 100%;
   min-height: 2.75rem;
@@ -10591,6 +10676,104 @@ details[data-svadmin-filter][open] > :not(summary),
   }
 }
 
+/* Password field anatomy. These stable classes do not depend on host Tailwind,
+ * and the logical padding keeps both the lock and reveal control clear of text
+ * in empty, filled, and plain-text states. */
+.svadmin-password-input {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.svadmin-password-input__label {
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.svadmin-password-input__field {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.svadmin-password-input__field .svadmin-password-input__control.svadmin-input {
+  padding-inline-start: 2.25rem;
+  padding-inline-end: 2.5rem;
+}
+
+.svadmin-password-input__icon,
+.svadmin-password-input__toggle {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  translate: 0 -50%;
+}
+
+.svadmin-password-input__icon {
+  inset-inline-start: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+.svadmin-password-input .svadmin-password-input__toggle {
+  inset-inline-end: 0.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  min-height: 0;
+  padding: 0;
+}
+
+.svadmin-password-input__glyph {
+  width: 1rem;
+  height: 1rem;
+}
+
+.svadmin-password-input__strength {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.svadmin-password-input__strength-track {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--muted);
+}
+
+.svadmin-password-input__strength-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--destructive);
+  transition: width var(--svadmin-motion-standard) var(--svadmin-motion-easing);
+}
+
+.svadmin-password-input__strength-fill[data-tone="warning"] {
+  background: var(--warning);
+}
+
+.svadmin-password-input__strength-fill[data-tone="info"] {
+  background: var(--info);
+}
+
+.svadmin-password-input__strength-fill[data-tone="success"] {
+  background: var(--success);
+}
+
+.svadmin-password-input__strength-label {
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
 /* --- 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,

package/dist/component-registry.d.ts

@@ -11528,7 +11528,7 @@ export declare function createComponentRegistryManifest(): {
             readonly density: readonly ["comfortable", "compact"];
         };
         readonly pageFamilies: readonly ["list", "form", "detail", "workspace", "dashboard"];
-        readonly pageStates: readonly ["ready", "loading", "empty", "error", "forbidden"];
+        readonly pageStates: readonly ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"];
         readonly composition: {
             readonly maxPrimaryActions: 1;
             readonly secondaryActions: "overflow";

package/dist/component-registry.js

@@ -24,7 +24,7 @@ const registryEntries = [
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
             density: { kind: "enum", values: ["comfortable", "compact"], default: "comfortable", description: "Deprecated compatibility prop; use the shared baseline." },
-            state: { kind: "enum", values: ["ready", "loading", "empty", "error", "forbidden"], default: "ready" },
+            state: { kind: "enum", values: ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"], default: "ready" },
             stateTitle: { kind: "string" },
             stateDescription: { kind: "string" },
             retry: { kind: "callback", description: "Use an error-state retry callback." },
@@ -40,7 +40,7 @@ const registryEntries = [
             stateAction: { kind: "snippet" },
         },
         tokens: semanticTokens,
-        states: ["ready", "loading", "empty", "error", "forbidden"],
+        states: ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"],
     },
     {
         id: "content-page-shell",