@loworbitstudio/visor 1.5.0 → 1.5.1

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-06-04T00:42:59.549Z",
+  "generated_at": "2026-06-04T02:06:36.190Z",
   "components": {
     "accessibility-specimen": {
       "changeType": "current",

package/dist/registry.json

@@ -146,7 +146,7 @@
         {
           "path": "components/ui/button/button.module.css",
           "type": "registry:ui",
-          "content": "/* Button base styles */\n.base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2, 0.5rem);\n  white-space: nowrap;\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  font-weight: var(--font-weight-medium, 500);\n  line-height: 1;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), transform var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  text-decoration: none;\n  outline: none;\n}\n\n.base:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, currentColor);\n  outline-offset: var(--focus-ring-offset, 2px);\n}\n\n.base:active:not(:disabled) {\n  transform: translateY(1px);\n  transition: none;\n}\n\n.base:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n/* Variants */\n.variantDefault {\n  background-color: var(--interactive-primary-bg, var(--primary, #111827));\n  color: var(--interactive-primary-text, #f9fafb);\n}\n\n.variantSecondary {\n  background-color: var(--interactive-secondary-bg, #f3f4f6);\n  color: var(--interactive-secondary-text, #111827);\n}\n\n.variantOutline {\n  background-color: transparent;\n  color: var(--text-primary, #111827);\n  border-color: var(--border-strong, #e5e7eb);\n}\n\n.variantGhost {\n  background-color: var(--interactive-ghost-bg, transparent);\n  color: var(--text-primary, #111827);\n}\n\n.variantDestructive {\n  background-color: var(--interactive-destructive-bg, #ef4444);\n  color: var(--interactive-destructive-text, #fef2f2);\n}\n\n@media (hover: hover) {\n  .variantDefault:hover {\n    background-color: var(--interactive-primary-bg-hover, #1f2937);\n  }\n\n  .variantSecondary:hover {\n    background-color: var(--interactive-secondary-bg-hover, #e5e7eb);\n  }\n\n  .variantOutline:hover {\n    background-color: var(--surface-muted, #f3f4f6);\n  }\n\n  .variantGhost:hover {\n    background-color: var(--interactive-ghost-bg-hover, var(--surface-muted, #f3f4f6));\n  }\n\n  .variantDestructive:hover {\n    background-color: var(--interactive-destructive-bg-hover, #dc2626);\n  }\n}\n\n/* Gated state — orthogonal to variant, works with all variants */\n.base[data-gated=\"true\"] {\n  opacity: var(--opacity-50, 0.5);\n  cursor: not-allowed;\n  border-color: var(--border-default, #e5e7eb);\n}\n\n/* Suppress active transform when gated */\n.base[data-gated=\"true\"]:active {\n  transform: none;\n  transition: opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n/* Sizes */\n.sizeSm {\n  height: 2rem;\n  padding: 0 var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-xs, 0.75rem);\n}\n\n.sizeMd {\n  height: 2.5rem;\n  padding: 0 var(--spacing-4, 1rem);\n}\n\n.sizeLg {\n  height: 3rem;\n  padding: 0 var(--spacing-6, 1.5rem);\n  font-size: var(--font-size-base, 1rem);\n}\n"
+          "content": "/* Button base styles */\n.base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2, 0.5rem);\n  white-space: nowrap;\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  font-weight: var(--font-weight-medium, 500);\n  line-height: 1;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), transform var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  text-decoration: none;\n  outline: none;\n}\n\n.base:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, currentColor);\n  outline-offset: var(--focus-ring-offset, 2px);\n}\n\n.base:active:not(:disabled) {\n  transform: translateY(1px);\n  transition: none;\n}\n\n.base:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n/* Variants */\n.variantDefault {\n  background-color: var(--interactive-primary-bg, var(--primary, #111827));\n  color: var(--interactive-primary-text, #f9fafb);\n}\n\n.variantSecondary {\n  background-color: var(--interactive-secondary-bg, #f3f4f6);\n  color: var(--interactive-secondary-text, #111827);\n}\n\n.variantOutline {\n  background-color: transparent;\n  color: var(--text-primary, #111827);\n  border-color: var(--border-strong, #e5e7eb);\n}\n\n.variantGhost {\n  background-color: var(--interactive-ghost-bg, transparent);\n  color: var(--text-primary, #111827);\n}\n\n.variantDestructive {\n  background-color: var(--interactive-destructive-bg, #ef4444);\n  color: var(--interactive-destructive-text, #fef2f2);\n}\n\n@media (hover: hover) {\n  .variantDefault:hover {\n    background-color: var(--interactive-primary-bg-hover, #1f2937);\n  }\n\n  .variantSecondary:hover {\n    background-color: var(--interactive-secondary-bg-hover, #e5e7eb);\n  }\n\n  .variantOutline:hover {\n    background-color: var(--surface-muted, #f3f4f6);\n  }\n\n  .variantGhost:hover {\n    background-color: var(--interactive-ghost-bg-hover, var(--surface-muted, #f3f4f6));\n  }\n\n  .variantDestructive:hover {\n    background-color: var(--interactive-destructive-bg-hover, #dc2626);\n  }\n}\n\n/* Gated state — orthogonal to variant, works with all variants */\n.base[data-gated=\"true\"] {\n  opacity: var(--opacity-50, 0.5);\n  cursor: not-allowed;\n  border-color: var(--border-default, #e5e7eb);\n}\n\n/* Suppress active transform when gated */\n.base[data-gated=\"true\"]:active {\n  transform: none;\n  transition: opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n/* Sizes */\n.sizeSm {\n  height: 2rem;\n  padding: 0 var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-xs, 0.75rem);\n}\n\n.sizeMd {\n  height: 2.5rem;\n  padding: 0 var(--spacing-4, 1rem);\n}\n\n.sizeLg {\n  height: 3rem;\n  padding: 0 var(--spacing-6, 1.5rem);\n  font-size: var(--font-size-base, 1rem);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.base {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -172,7 +172,7 @@
         {
           "path": "components/ui/input/input.module.css",
           "type": "registry:ui",
-          "content": "/* Input base styles */\n.base {\n  width: 100%;\n  min-width: 0;\n  border: 1px solid var(--input-border, var(--border-default, #e5e7eb));\n  background-color: var(--input-bg, var(--surface-interactive-default, #f9fafb));\n  line-height: 1.5;\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n}\n\n.base::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .base:hover:not(:focus-visible):not(:disabled):not([aria-invalid=\"true\"]) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.base:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.base:disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.base[aria-invalid=\"true\"] {\n  border-color: transparent;\n  background-color: var(--input-bg-invalid, var(--surface-error-subtle, color-mix(in srgb, var(--border-error, #ef4444) 6%, var(--input-bg, #f9fafb))));\n  box-shadow: inset 0 0 0 1.5px var(--border-error, #ef4444);\n}\n\n.base[aria-invalid=\"true\"]:focus-visible {\n  border-color: transparent;\n  outline-offset: var(--focus-ring-offset, 2px);\n  box-shadow: inset 0 0 0 1.5px var(--border-error, #ef4444),\n    0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-error, #ef4444) 30%, transparent);\n}\n\n/* File input styles */\n.base[type=\"file\"] {\n  font-size: var(--font-size-sm, 0.875rem);\n}\n\n/* Leading-icon wrapper\n *\n * When the consumer passes a leadingIcon node, Input wraps its <input> in a\n * <span> and positions the icon absolutely inside it. The <input> itself\n * picks up .hasLeadingIcon, which adds enough left padding to clear the\n * icon (sized in em so it scales with the field's font-size). */\n.leadingIconWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n}\n\n.leadingIcon {\n  position: absolute;\n  left: var(--spacing-3, 0.75rem);\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-secondary, #9ca3af);\n  pointer-events: none;\n  font-size: 1.125em;\n  line-height: 1;\n}\n\n/* Size variants */\n.sizeSm {\n  height: 2.25rem;\n  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.25rem);\n}\n\n.sizeMd {\n  height: auto;\n  padding: var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.sizeLg {\n  height: auto;\n  padding: var(--spacing-4_5, 1.125rem) var(--spacing-5, 1.25rem);\n  font-size: var(--font-size-base, 1rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n/* Leading-icon left-padding override.\n *\n * Declared AFTER the size variants so the padding-left value wins the\n * cascade against the shorthand `padding` each size sets. Double-class\n * selector bumps specificity above the size classes for good measure. */\n.sizeSm.hasLeadingIcon {\n  padding-left: calc(var(--spacing-3, 0.75rem) * 2 + 1.125em);\n}\n\n.sizeMd.hasLeadingIcon {\n  padding-left: calc(var(--spacing-4, 1rem) + var(--spacing-3, 0.75rem) + 1.125em);\n}\n\n.sizeLg.hasLeadingIcon {\n  padding-left: calc(var(--spacing-5, 1.25rem) + var(--spacing-3, 0.75rem) + 1.125em);\n}\n"
+          "content": "/* Input base styles */\n.base {\n  width: 100%;\n  min-width: 0;\n  border: 1px solid var(--input-border, var(--border-default, #e5e7eb));\n  background-color: var(--input-bg, var(--surface-interactive-default, #f9fafb));\n  line-height: 1.5;\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n}\n\n.base::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .base:hover:not(:focus-visible):not(:disabled):not([aria-invalid=\"true\"]) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.base:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.base:disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.base[aria-invalid=\"true\"] {\n  border-color: transparent;\n  background-color: var(--input-bg-invalid, var(--surface-error-subtle, color-mix(in srgb, var(--border-error, #ef4444) 6%, var(--input-bg, #f9fafb))));\n  box-shadow: inset 0 0 0 1.5px var(--border-error, #ef4444);\n}\n\n.base[aria-invalid=\"true\"]:focus-visible {\n  border-color: transparent;\n  outline-offset: var(--focus-ring-offset, 2px);\n  box-shadow: inset 0 0 0 1.5px var(--border-error, #ef4444),\n    0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-error, #ef4444) 30%, transparent);\n}\n\n/* File input styles */\n.base[type=\"file\"] {\n  font-size: var(--font-size-sm, 0.875rem);\n}\n\n/* Leading-icon wrapper\n *\n * When the consumer passes a leadingIcon node, Input wraps its <input> in a\n * <span> and positions the icon absolutely inside it. The <input> itself\n * picks up .hasLeadingIcon, which adds enough left padding to clear the\n * icon (sized in em so it scales with the field's font-size). */\n.leadingIconWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n}\n\n.leadingIcon {\n  position: absolute;\n  left: var(--spacing-3, 0.75rem);\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-secondary, #9ca3af);\n  pointer-events: none;\n  font-size: 1.125em;\n  line-height: 1;\n}\n\n/* Size variants */\n.sizeSm {\n  height: 2.25rem;\n  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.25rem);\n}\n\n.sizeMd {\n  height: auto;\n  padding: var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.sizeLg {\n  height: auto;\n  padding: var(--spacing-4_5, 1.125rem) var(--spacing-5, 1.25rem);\n  font-size: var(--font-size-base, 1rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n/* Leading-icon left-padding override.\n *\n * Declared AFTER the size variants so the padding-left value wins the\n * cascade against the shorthand `padding` each size sets. Double-class\n * selector bumps specificity above the size classes for good measure. */\n.sizeSm.hasLeadingIcon {\n  padding-left: calc(var(--spacing-3, 0.75rem) * 2 + 1.125em);\n}\n\n.sizeMd.hasLeadingIcon {\n  padding-left: calc(var(--spacing-4, 1rem) + var(--spacing-3, 0.75rem) + 1.125em);\n}\n\n.sizeLg.hasLeadingIcon {\n  padding-left: calc(var(--spacing-5, 1.25rem) + var(--spacing-3, 0.75rem) + 1.125em);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.base {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -275,7 +275,7 @@
         {
           "path": "components/ui/select/select.module.css",
           "type": "registry:ui",
-          "content": "/* Select Trigger */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: calc(var(--spacing-1, 0.25rem) * 1.5);\n  width: fit-content;\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--select-border, var(--border-default, #e5e7eb));\n  background-color: var(--select-bg, var(--surface-interactive-default, #f9fafb));\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  /* Match Input's line-height so the trigger's height tracks the text field at\n     the same size. Without this the trigger inherited line-height 2.0, rendering\n     ~7px taller than a same-size Input. */\n  line-height: 1.5;\n  white-space: nowrap;\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n  cursor: pointer;\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:focus-visible):not(:disabled):not([aria-invalid=\"true\"]) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.trigger:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger[aria-invalid=\"true\"] {\n  border-color: var(--border-error, #ef4444);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-error, #ef4444) 15%, transparent);\n}\n\n.trigger[data-placeholder] {\n  color: var(--text-secondary, #9ca3af);\n}\n\n.triggerSizeSm {\n  height: 2.25rem;\n  border-radius: var(--radius-sm, 0.25rem);\n}\n\n.triggerSizeMd {\n  height: auto;\n  padding: var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.triggerSizeLg {\n  height: auto;\n  padding: var(--spacing-4_5, 1.125rem) var(--spacing-5, 1.25rem);\n  font-size: var(--font-size-base, 1rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.triggerIcon {\n  pointer-events: none;\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Select Content */\n.content {\n  position: relative;\n  z-index: 50;\n  max-height: var(--radix-select-content-available-height, 300px);\n  min-width: 9rem;\n  overflow: hidden;\n  border-radius: var(--radius-lg, 0.5rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n  color: var(--text-primary, #111827);\n  box-shadow: var(--shadow-lg);\n}\n\n/* Select Viewport */\n.viewport {\n  padding: var(--spacing-1, 0.25rem);\n}\n\n.viewportPopper {\n  height: var(--radix-select-trigger-height);\n  width: 100%;\n  min-width: var(--radix-select-trigger-width);\n}\n\n/* Select Label */\n.label {\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Select Item */\n.item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  cursor: default;\n  align-items: center;\n  gap: calc(var(--spacing-2, 0.5rem) + var(--spacing-1, 0.25rem) / 2);\n  border-radius: var(--radius-sm, 0.25rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem) var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  outline: none;\n  user-select: none;\n}\n\n.item:focus,\n.item[data-highlighted] {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  color: var(--text-primary, #111827);\n}\n\n.item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.itemIndicatorWrapper {\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  width: 1rem;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.itemIndicatorIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n  pointer-events: none;\n}\n\n/* Select Separator */\n.separator {\n  pointer-events: none;\n  margin: var(--spacing-1, 0.25rem) calc(-1 * var(--spacing-1, 0.25rem));\n  height: 1px;\n  background-color: var(--border-default, #e5e7eb);\n}\n\n/* Scroll Buttons */\n.scrollButton {\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-1, 0.25rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n}\n\n.scrollButtonIcon {\n  width: 1rem;\n  height: 1rem;\n}\n"
+          "content": "/* Select Trigger */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: calc(var(--spacing-1, 0.25rem) * 1.5);\n  width: fit-content;\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--select-border, var(--border-default, #e5e7eb));\n  background-color: var(--select-bg, var(--surface-interactive-default, #f9fafb));\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  /* Match Input's line-height so the trigger's height tracks the text field at\n     the same size. Without this the trigger inherited line-height 2.0, rendering\n     ~7px taller than a same-size Input. */\n  line-height: 1.5;\n  white-space: nowrap;\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out), box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n  cursor: pointer;\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:focus-visible):not(:disabled):not([aria-invalid=\"true\"]) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.trigger:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger[aria-invalid=\"true\"] {\n  border-color: var(--border-error, #ef4444);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-error, #ef4444) 15%, transparent);\n}\n\n.trigger[data-placeholder] {\n  color: var(--text-secondary, #9ca3af);\n}\n\n.triggerSizeSm {\n  height: 2.25rem;\n  border-radius: var(--radius-sm, 0.25rem);\n}\n\n.triggerSizeMd {\n  height: auto;\n  padding: var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.triggerSizeLg {\n  height: auto;\n  padding: var(--spacing-4_5, 1.125rem) var(--spacing-5, 1.25rem);\n  font-size: var(--font-size-base, 1rem);\n  border-radius: var(--radius-sm, 0.5rem);\n}\n\n.triggerIcon {\n  pointer-events: none;\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Select Content */\n.content {\n  position: relative;\n  z-index: 50;\n  max-height: var(--radix-select-content-available-height, 300px);\n  min-width: 9rem;\n  overflow: hidden;\n  border-radius: var(--radius-lg, 0.5rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n  color: var(--text-primary, #111827);\n  box-shadow: var(--shadow-lg);\n}\n\n/* Select Viewport */\n.viewport {\n  padding: var(--spacing-1, 0.25rem);\n}\n\n.viewportPopper {\n  height: var(--radix-select-trigger-height);\n  width: 100%;\n  min-width: var(--radix-select-trigger-width);\n}\n\n/* Select Label */\n.label {\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Select Item */\n.item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  cursor: default;\n  align-items: center;\n  gap: calc(var(--spacing-2, 0.5rem) + var(--spacing-1, 0.25rem) / 2);\n  border-radius: var(--radius-sm, 0.25rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem) var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  outline: none;\n  user-select: none;\n}\n\n.item:focus,\n.item[data-highlighted] {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  color: var(--text-primary, #111827);\n}\n\n.item[data-disabled] {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.itemIndicatorWrapper {\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  width: 1rem;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.itemIndicatorIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n  pointer-events: none;\n}\n\n/* Select Separator */\n.separator {\n  pointer-events: none;\n  margin: var(--spacing-1, 0.25rem) calc(-1 * var(--spacing-1, 0.25rem));\n  height: 1px;\n  background-color: var(--border-default, #e5e7eb);\n}\n\n/* Scroll Buttons */\n.scrollButton {\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-1, 0.25rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n}\n\n.scrollButtonIcon {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.trigger {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1148,7 +1148,7 @@
         {
           "path": "components/ui/combobox/combobox.module.css",
           "type": "registry:ui",
-          "content": "/* Combobox root */\n.root {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n/* Input wrapper */\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Input */\n.input {\n  width: 100%;\n  height: 2.25rem;\n  padding: var(--spacing-2, 0.5rem) calc(var(--spacing-8, 2rem) + var(--spacing-1, 0.25rem)) var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--combobox-border, var(--border-default, #e5e7eb));\n  background-color: var(--combobox-bg, var(--surface-interactive-default, #f9fafb));\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .input:hover:not(:focus-visible):not(:disabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.input:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Caret icon */\n.icon {\n  position: absolute;\n  right: var(--spacing-3, 0.75rem);\n  top: 50%;\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  pointer-events: none;\n  color: var(--text-secondary, #9ca3af);\n  transition: transform var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.iconOpen {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n/* Content popover */\n.content {\n  z-index: 50;\n  min-width: var(--radix-popover-trigger-width, 12rem);\n  max-height: 18rem;\n  overflow: hidden auto;\n  border-radius: var(--radius-lg, 0.5rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n  color: var(--text-primary, #111827);\n  box-shadow: var(--shadow-lg);\n  padding: var(--spacing-1, 0.25rem);\n}\n\n/* Listbox */\n.listbox {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Item */\n.item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-sm, 0.25rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  cursor: default;\n  outline: none;\n  user-select: none;\n}\n\n.item:focus:not([data-disabled]) {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  cursor: pointer;\n}\n\n@media (hover: hover) {\n  .item:hover:not([data-disabled]) {\n    background-color: var(--surface-interactive-hover, #f3f4f6);\n    cursor: pointer;\n  }\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item[data-selected] {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  font-weight: var(--font-weight-medium, 500);\n}\n\n.itemCheck {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.itemCheckIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n  color: var(--interactive-primary-bg, var(--primary, #111827));\n}\n\n/* Empty */\n.empty {\n  list-style: none;\n  padding: var(--spacing-4, 1rem) var(--spacing-3, 0.75rem);\n  text-align: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Group */\n.group {\n  list-style: none;\n}\n\n.group ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.groupHeading {\n  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem) var(--spacing-1, 0.25rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-secondary, #9ca3af);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Separator */\n.separator {\n  list-style: none;\n  height: 1px;\n  margin: var(--spacing-1, 0.25rem) calc(-1 * var(--spacing-1, 0.25rem));\n  background-color: var(--border-default, #e5e7eb);\n}\n"
+          "content": "/* Combobox root */\n.root {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n/* Input wrapper */\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Input */\n.input {\n  width: 100%;\n  height: 2.25rem;\n  padding: var(--spacing-2, 0.5rem) calc(var(--spacing-8, 2rem) + var(--spacing-1, 0.25rem)) var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--combobox-border, var(--border-default, #e5e7eb));\n  background-color: var(--combobox-bg, var(--surface-interactive-default, #f9fafb));\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .input:hover:not(:focus-visible):not(:disabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.input:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Caret icon */\n.icon {\n  position: absolute;\n  right: var(--spacing-3, 0.75rem);\n  top: 50%;\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  pointer-events: none;\n  color: var(--text-secondary, #9ca3af);\n  transition: transform var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.iconOpen {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n/* Content popover */\n.content {\n  z-index: 50;\n  min-width: var(--radix-popover-trigger-width, 12rem);\n  max-height: 18rem;\n  overflow: hidden auto;\n  border-radius: var(--radius-lg, 0.5rem);\n  background-color: var(--field-menu-bg, var(--surface-popover, var(--surface-card, #ffffff)));\n  color: var(--text-primary, #111827);\n  box-shadow: var(--shadow-lg);\n  padding: var(--spacing-1, 0.25rem);\n}\n\n/* Listbox */\n.listbox {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Item */\n.item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-sm, 0.25rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  cursor: default;\n  outline: none;\n  user-select: none;\n}\n\n.item:focus:not([data-disabled]) {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  cursor: pointer;\n}\n\n@media (hover: hover) {\n  .item:hover:not([data-disabled]) {\n    background-color: var(--surface-interactive-hover, #f3f4f6);\n    cursor: pointer;\n  }\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item[data-selected] {\n  background-color: var(--surface-interactive-hover, #f3f4f6);\n  font-weight: var(--font-weight-medium, 500);\n}\n\n.itemCheck {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.itemCheckIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n  color: var(--interactive-primary-bg, var(--primary, #111827));\n}\n\n/* Empty */\n.empty {\n  list-style: none;\n  padding: var(--spacing-4, 1rem) var(--spacing-3, 0.75rem);\n  text-align: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* Group */\n.group {\n  list-style: none;\n}\n\n.group ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.groupHeading {\n  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem) var(--spacing-1, 0.25rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-secondary, #9ca3af);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Separator */\n.separator {\n  list-style: none;\n  height: 1px;\n  margin: var(--spacing-1, 0.25rem) calc(-1 * var(--spacing-1, 0.25rem));\n  background-color: var(--border-default, #e5e7eb);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.root :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1574,7 +1574,7 @@
         {
           "path": "components/ui/search-input/search-input.module.css",
           "type": "registry:ui",
-          "content": "/* Search input wrapper\n *\n * The leading magnifier is provided by Input's leadingIcon prop; this\n * wrapper only exists to overlay the optional clear button on top of\n * the field when there's a value to clear. */\n.wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n/* Reserve right padding on the input when the clear button is rendered\n * so the text doesn't slide under the button. */\n.inputWithClear {\n  padding-right: var(--spacing-8, 2rem);\n}\n\n/* Hide browser-native search clear button — we ship our own */\n.wrapper input[type=\"search\"]::-webkit-search-cancel-button {\n  display: none;\n}\n\n/* Clear button */\n.clearButton {\n  position: absolute;\n  right: var(--spacing-1, 0.25rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-sm, 0.25rem);\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .clearButton:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.clearButton:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.clearButton svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n"
+          "content": "/* Search input wrapper\n *\n * The leading magnifier is provided by Input's leadingIcon prop; this\n * wrapper only exists to overlay the optional clear button on top of\n * the field when there's a value to clear. */\n.wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n/* Reserve right padding on the input when the clear button is rendered\n * so the text doesn't slide under the button. */\n.inputWithClear {\n  padding-right: var(--spacing-8, 2rem);\n}\n\n/* Hide browser-native search clear button — we ship our own */\n.wrapper input[type=\"search\"]::-webkit-search-cancel-button {\n  display: none;\n}\n\n/* Clear button */\n.clearButton {\n  position: absolute;\n  right: var(--spacing-1, 0.25rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-sm, 0.25rem);\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .clearButton:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.clearButton:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.clearButton svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.wrapper :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1600,7 +1600,7 @@
         {
           "path": "components/ui/password-input/password-input.module.css",
           "type": "registry:ui",
-          "content": "/* Password input wrapper */\n.wrapper {\n  width: 100%;\n}\n\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Input override — pad right for toggle button */\n.input {\n  padding-right: var(--spacing-10, 2.5rem);\n}\n\n/* Toggle visibility button */\n.toggleButton {\n  position: absolute;\n  right: var(--spacing-1, 0.25rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-sm, 0.25rem);\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .toggleButton:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.toggleButton:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.toggleButton svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Strength meter */\n.strengthMeter {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  margin-top: var(--spacing-1, 0.25rem);\n}\n\n.strengthTrack {\n  display: flex;\n  flex: 1;\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.strengthSegment {\n  height: 0.25rem;\n  flex: 1;\n  border-radius: var(--radius-full, 9999px);\n  background-color: var(--border-default, #e5e7eb);\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.strengthWeak {\n  background-color: var(--border-error, #ef4444);\n}\n\n.strengthFair {\n  background-color: var(--surface-warning-default, #f59e0b);\n}\n\n.strengthGood {\n  background-color: var(--surface-success-default, #10b981);\n}\n\n.strengthStrong {\n  background-color: var(--surface-success-default, #10b981);\n}\n\n.strengthLabel {\n  font-size: var(--font-size-xs, 0.75rem);\n  color: var(--text-secondary, #9ca3af);\n  min-width: 3rem;\n}\n"
+          "content": "/* Password input wrapper */\n.wrapper {\n  width: 100%;\n}\n\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Input override — pad right for toggle button */\n.input {\n  padding-right: var(--spacing-10, 2.5rem);\n}\n\n/* Toggle visibility button */\n.toggleButton {\n  position: absolute;\n  right: var(--spacing-1, 0.25rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-sm, 0.25rem);\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .toggleButton:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.toggleButton:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.toggleButton svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Strength meter */\n.strengthMeter {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  margin-top: var(--spacing-1, 0.25rem);\n}\n\n.strengthTrack {\n  display: flex;\n  flex: 1;\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.strengthSegment {\n  height: 0.25rem;\n  flex: 1;\n  border-radius: var(--radius-full, 9999px);\n  background-color: var(--border-default, #e5e7eb);\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.strengthWeak {\n  background-color: var(--border-error, #ef4444);\n}\n\n.strengthFair {\n  background-color: var(--surface-warning-default, #f59e0b);\n}\n\n.strengthGood {\n  background-color: var(--surface-success-default, #10b981);\n}\n\n.strengthStrong {\n  background-color: var(--surface-success-default, #10b981);\n}\n\n.strengthLabel {\n  font-size: var(--font-size-xs, 0.75rem);\n  color: var(--text-secondary, #9ca3af);\n  min-width: 3rem;\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.wrapper :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1649,7 +1649,7 @@
         {
           "path": "components/ui/number-input/number-input.module.css",
           "type": "registry:ui",
-          "content": "/* Number input wrapper */\n.wrapper {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid var(--number-input-border, var(--border-default, #e5e7eb));\n  border-radius: var(--radius-md, 0.375rem);\n  background-color: var(--number-input-bg, var(--surface-interactive-default, #f9fafb));\n  overflow: hidden;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .button:hover {\n    color: var(--text-primary, #111827);\n    background-color: var(--surface-muted, #f3f4f6);\n  }\n}\n\n.wrapper:focus-within {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.wrapperDisabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Stepper buttons */\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.button:active {\n  background-color: var(--surface-interactive-hover, #e5e7eb);\n  transition: none;\n}\n\n.button:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, currentColor);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.buttonIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Input */\n.input {\n  width: 4rem;\n  height: 2.25rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  text-align: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n"
+          "content": "/* Number input wrapper */\n.wrapper {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid var(--number-input-border, var(--border-default, #e5e7eb));\n  border-radius: var(--radius-md, 0.375rem);\n  background-color: var(--number-input-bg, var(--surface-interactive-default, #f9fafb));\n  overflow: hidden;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .button:hover {\n    color: var(--text-primary, #111827);\n    background-color: var(--surface-muted, #f3f4f6);\n  }\n}\n\n.wrapper:focus-within {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.wrapperDisabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Stepper buttons */\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.button:active {\n  background-color: var(--surface-interactive-hover, #e5e7eb);\n  transition: none;\n}\n\n.button:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, currentColor);\n  outline-offset: var(--focus-ring-offset, -2px);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.buttonIcon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Input */\n.input {\n  width: 4rem;\n  height: 2.25rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  text-align: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.wrapper :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1703,7 +1703,7 @@
         {
           "path": "components/ui/otp-input/otp-input.module.css",
           "type": "registry:ui",
-          "content": "/* OTP input wrapper */\n.wrapper {\n  display: inline-flex;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n/* Individual digit cell */\n.cell {\n  width: 2.5rem;\n  height: 2.75rem;\n  border: 1px solid var(--otp-border, var(--border-default, #e5e7eb));\n  border-radius: var(--radius-md, 0.375rem);\n  background-color: var(--otp-bg, var(--surface-interactive-default, #f9fafb));\n  text-align: center;\n  font-size: var(--font-size-lg, 1.125rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-primary, #111827);\n  outline: none;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.cell::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .cell:hover:not(:focus-visible):not(:disabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.cell:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.cell:disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.cellFilled {\n  border-color: var(--border-focus, #111827);\n}\n"
+          "content": "/* OTP input wrapper */\n.wrapper {\n  display: inline-flex;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n/* Individual digit cell */\n.cell {\n  width: 2.5rem;\n  height: 2.75rem;\n  border: 1px solid var(--otp-border, var(--border-default, #e5e7eb));\n  border-radius: var(--radius-md, 0.375rem);\n  background-color: var(--otp-bg, var(--surface-interactive-default, #f9fafb));\n  text-align: center;\n  font-size: var(--font-size-lg, 1.125rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-primary, #111827);\n  outline: none;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n.cell::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n@media (hover: hover) {\n  .cell:hover:not(:focus-visible):not(:disabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.cell:focus-visible {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.cell:disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.cellFilled {\n  border-color: var(--border-focus, #111827);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.wrapper :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },
@@ -1728,7 +1728,7 @@
         {
           "path": "components/ui/tag-input/tag-input.module.css",
           "type": "registry:ui",
-          "content": "/* Tag input wrapper — styled like an Input */\n.wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n  min-height: 2.25rem;\n  width: 100%;\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--tag-input-border, var(--border-default, #e5e7eb));\n  background-color: var(--tag-input-bg, var(--surface-interactive-default, #f9fafb));\n  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);\n  cursor: text;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .wrapper:hover:not(.wrapperFocused):not(.wrapperDisabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.wrapperFocused {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.wrapperDisabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Individual tag chip */\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n  padding: calc(var(--spacing-1, 0.25rem) / 4) var(--spacing-2, 0.5rem);\n  border-radius: var(--radius-full, 9999px);\n  background-color: var(--surface-muted, #f3f4f6);\n  border: 1px solid var(--border-default, #e5e7eb);\n  font-size: var(--font-size-xs, 0.75rem);\n  line-height: 1.5;\n  color: var(--text-primary, #111827);\n}\n\n.tagLabel {\n  white-space: nowrap;\n}\n\n.tagRemove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.875rem;\n  height: 0.875rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  border-radius: var(--radius-full, 9999px);\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .tagRemove:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.tagRemove svg {\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n/* Inline text input */\n.input {\n  flex: 1;\n  min-width: 4rem;\n  height: 1.5rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n"
+          "content": "/* Tag input wrapper — styled like an Input */\n.wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n  min-height: 2.25rem;\n  width: 100%;\n  border-radius: var(--radius-md, 0.375rem);\n  border: 1px solid var(--tag-input-border, var(--border-default, #e5e7eb));\n  background-color: var(--tag-input-bg, var(--surface-interactive-default, #f9fafb));\n  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);\n  cursor: text;\n  transition: border-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .wrapper:hover:not(.wrapperFocused):not(.wrapperDisabled) {\n    border-color: var(--border-strong, #d1d5db);\n  }\n}\n\n.wrapperFocused {\n  border-color: var(--border-focus, #111827);\n  box-shadow: 0 0 0 var(--focus-ring-width, 2px) color-mix(in srgb, var(--border-focus, #111827) 15%, transparent);\n}\n\n.wrapperDisabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Individual tag chip */\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n  padding: calc(var(--spacing-1, 0.25rem) / 4) var(--spacing-2, 0.5rem);\n  border-radius: var(--radius-full, 9999px);\n  background-color: var(--surface-muted, #f3f4f6);\n  border: 1px solid var(--border-default, #e5e7eb);\n  font-size: var(--font-size-xs, 0.75rem);\n  line-height: 1.5;\n  color: var(--text-primary, #111827);\n}\n\n.tagLabel {\n  white-space: nowrap;\n}\n\n.tagRemove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.875rem;\n  height: 0.875rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary, #9ca3af);\n  cursor: pointer;\n  border-radius: var(--radius-full, 9999px);\n  transition: color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n@media (hover: hover) {\n  .tagRemove:hover {\n    color: var(--text-primary, #111827);\n  }\n}\n\n.tagRemove svg {\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n/* Inline text input */\n.input {\n  flex: 1;\n  min-width: 4rem;\n  height: 1.5rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-primary, #111827);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--text-secondary, #9ca3af);\n}\n\n/* VI-510: form controls do not inherit font-family from the page; opt back in (matches textarea). */\n.wrapper :is(input, button, textarea) {\n  font-family: inherit;\n}\n"
         }
       ]
     },

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-06-04T00:42:59.544Z",
+  "generated_at": "2026-06-04T02:06:36.185Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1021.0",
     "@babel/parser": "^7.26.0",
-    "@loworbitstudio/visor-theme-engine": "^0.15.0",
+    "@loworbitstudio/visor-theme-engine": "^0.15.1",
     "commander": "^13.1.0",
     "diff": "^8.0.4",
     "picocolors": "^1.1.1",