@tempots/beatui 1.5.0 → 1.6.0

package/dist/beatui.css

@@ -330,11 +330,13 @@ ol {
   --color-stone-800: oklch(0.268 0.007 34.298);
   --color-stone-900: oklch(0.216 0.006 56.043);
   --color-stone-950: oklch(0.147 0.004 49.25);
+  --spacing-base-raw: 0.25rem;
+  --spacing-scale: 1;
   --spacing-none: 0;
   --spacing-px: 1px;
-  --spacing-base: 0.25rem;
   --spacing-full: 2000px;
-  --font-size-base: 1rem;
+  --font-size-base-raw: 1rem;
+  --font-size-scale: 1;
   --font-size-5xl-lh: 1;
   --font-size-6xl-lh: 1;
   --font-size-7xl-lh: 1;
@@ -428,6 +430,7 @@ ol {
 }
 
 *, ::before, ::after {
+  --spacing-base: calc(var(--spacing-base-raw) * var(--spacing-scale));
   --spacing-xs: calc(var(--spacing-base) / 2);
   --spacing-sm: var(--spacing-base);
   --spacing-smh: calc(var(--spacing-base) * 1.5);
@@ -440,6 +443,7 @@ ol {
   --spacing-2xlh: calc(var(--spacing-base) * 10);
   --spacing-3xl: calc(var(--spacing-base) * 12);
   --spacing-4xl: calc(var(--spacing-base) * 16);
+  --font-size-base: calc(var(--font-size-base-raw) * var(--font-size-scale));
   --font-size-3xs: calc(var(--font-size-base) * 0.5);
   --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
   --font-size-2xs: calc(var(--font-size-base) * 0.625);
@@ -3740,134 +3744,6 @@ a:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-danger-400);
 }
 
-.bc-command-palette {
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-surface);
-  border: var(--border-width-thin) solid var(--border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  overflow: hidden;
-  margin: 15vh auto 0;
-  width: 90%;
-  max-height: 60vh;
-}
-
-.bc-command-palette--size-sm {
-  max-width: 480px;
-}
-
-.bc-command-palette--size-md {
-  max-width: 600px;
-}
-
-.bc-command-palette--size-lg {
-  max-width: 720px;
-}
-
-.bc-command-palette__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-mdh) var(--spacing-lg);
-  border-bottom: var(--border-width-thin) solid var(--border-default);
-}
-
-.bc-command-palette__search-icon {
-  display: flex;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.bc-command-palette__input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: var(--font-size-md);
-  font-family: inherit;
-  color: inherit;
-}
-
-.bc-command-palette__input::placeholder {
-  color: var(--text-muted);
-}
-
-.bc-command-palette__body {
-  overflow-y: auto;
-  padding: var(--spacing-md);
-}
-
-.bc-command-palette__empty {
-  padding: var(--spacing-xl) var(--spacing-lg);
-  text-align: center;
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-}
-
-.bc-command-palette__section + .bc-command-palette__section {
-  margin-top: var(--spacing-md);
-}
-
-.bc-command-palette__section-title {
-  padding: var(--spacing-base) var(--spacing-md);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.bc-command-palette__item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color var(--motion-transition-fast)
-    var(--motion-easing-standard);
-}
-
-.bc-command-palette__item:hover,
-.bc-command-palette__item--selected {
-  background-color: var(--interactive-hover);
-}
-
-.bc-command-palette__item-icon {
-  display: flex;
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.bc-command-palette__item-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.bc-command-palette__item-label {
-  font-size: var(--font-size-sm);
-}
-
-.bc-command-palette__item-description {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
-}
-
-.bc-command-palette__item-shortcut {
-  display: flex;
-  gap: var(--spacing-base);
-  flex-shrink: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bc-command-palette__item {
-    transition: none;
-  }
-}
-
 .bc-dropdown__search-input {
   width: 100%;
   background: transparent;
@@ -8077,7 +7953,7 @@ a:focus-visible {
 }
 
 .bc-label {
-  font-size: var(--font-size-sm);
+  --font-size-scale: 0.875;
   line-height: var(--line-height-normal);
   font-family: var(
     --font-family-default-ui,
@@ -10764,6 +10640,74 @@ a:focus-visible {
   -moz-appearance: textfield;
 }
 
+/* Number Input Formatted Overlay */
+.bc-number-input--hidden {
+  opacity: 0;
+}
+
+.bc-input-container__input:has(.bc-number-input-formatted) {
+  display: grid;
+}
+
+.bc-input-container__input:has(.bc-number-input-formatted) > * {
+  grid-area: 1 / 1;
+}
+
+.bc-number-input-formatted {
+  text-align: end;
+  font: inherit;
+  color: inherit;
+  line-height: 1.1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Number Input Unit Label */
+.bc-number-input-unit {
+  display: flex;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-left: calc(-1 * var(--spacing-md));
+  padding-inline-end: var(--spacing-md);
+  color: var(--color-neutral-500);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.bc-control--padding-xs ~ .bc-input-container__after .bc-number-input-unit {
+  margin-left: calc(-1 * var(--spacing-xs));
+  padding-inline-end: var(--spacing-xs);
+}
+
+.bc-control--padding-sm ~ .bc-input-container__after .bc-number-input-unit {
+  margin-left: calc(-1 * var(--spacing-sm));
+  padding-inline-end: var(--spacing-sm);
+}
+
+.bc-control--padding-md ~ .bc-input-container__after .bc-number-input-unit {
+  margin-left: calc(-1 * var(--spacing-md));
+  padding-inline-end: var(--spacing-md);
+}
+
+.bc-control--padding-lg ~ .bc-input-container__after .bc-number-input-unit {
+  margin-left: calc(-1 * var(--spacing-lg));
+  padding-inline-end: var(--spacing-lg);
+}
+
+.bc-control--padding-xl ~ .bc-input-container__after .bc-number-input-unit {
+  margin-left: calc(-1 * var(--spacing-xl));
+  padding-inline-end: var(--spacing-xl);
+}
+
+.dark .bc-number-input-unit {
+  color: var(--color-neutral-400);
+}
+
 /* Number Input Steppers */
 .bc-number-input-steppers {
   display: flex;
@@ -10786,7 +10730,7 @@ a:focus-visible {
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 
-  width: var(--spacing-lg);
+  width: var(--spacing-lgh);
   height: 50%;
 }
 
@@ -10802,6 +10746,30 @@ a:focus-visible {
   transform: none;
 }
 
+.bc-control--padding-xs
+  ~ .bc-input-container__after
+  .bc-number-input-steppers-button {
+  width: var(--spacing-mdh);
+}
+
+.bc-control--padding-sm
+  ~ .bc-input-container__after
+  .bc-number-input-steppers-button {
+  width: var(--spacing-lg);
+}
+
+.bc-control--padding-lg
+  ~ .bc-input-container__after
+  .bc-number-input-steppers-button {
+  width: var(--spacing-xl);
+}
+
+.bc-control--padding-xl
+  ~ .bc-input-container__after
+  .bc-number-input-steppers-button {
+  width: var(--spacing-2xl);
+}
+
 /* Dark mode */
 .dark .bc-number-input-steppers-button {
   outline-color: var(--color-base-600);
@@ -16478,6 +16446,93 @@ span.bc-sidebar-link {
   }
 }
 
+/* Date Select / Date Range Select — fit-content sizing like UUID input */
+.bc-date-select {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.bc-date-range-select {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Panel shown in the flyout */
+.bc-date-range-select__panel {
+  background-color: var(--color-white);
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-md);
+}
+
+/* Side-by-side pickers container */
+.bc-date-range-select__pickers {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+/* Individual picker wrapper */
+.bc-date-range-select__picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+/* Header row: label + optional clear button */
+.bc-date-range-select__picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+}
+
+/* Label above each picker */
+.bc-date-range-select__picker-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  padding: 0 var(--spacing-xs);
+}
+
+/* Clear button inside picker header */
+.bc-date-range-select__clear-btn {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border-radius: var(--radius-sm);
+  transition:
+    color var(--motion-transition-fast) var(--motion-easing-standard),
+    background-color var(--motion-transition-fast) var(--motion-easing-standard);
+  white-space: nowrap;
+}
+
+.bc-date-range-select__clear-btn:hover {
+  color: var(--color-danger-600);
+  background-color: var(--color-danger-50);
+}
+
+/* Responsive: stack vertically on narrow screens */
+@media (max-width: 640px) {
+  .bc-date-range-select__pickers {
+    flex-direction: column;
+  }
+}
+
+/* Dark mode */
+.dark .bc-date-range-select__panel {
+  background-color: var(--bg-surface);
+  border-color: var(--border-default);
+}
+
+.dark .bc-date-range-select__clear-btn:hover {
+  color: var(--color-danger-400);
+  background-color: var(--color-danger-950);
+}
+
 /* Range Slider Component */
 .bc-range-slider {
   --rs-color: var(--color-primary-500);
@@ -18400,6 +18455,1530 @@ th.bc-data-table__header--drag-over {
   }
 }
 
+/* DateTimeSelect — fit-content sizing */
+.bc-date-time-select {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.bc-date-time-select__trigger {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Panel shown in the flyout */
+.bc-date-time-select__panel {
+  background-color: var(--color-white);
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-md);
+}
+
+/* Side-by-side date + time pickers */
+.bc-date-time-select__pickers {
+  display: flex;
+  gap: var(--spacing-lg);
+  align-items: flex-start;
+}
+
+/* Vertical divider between date and time pickers */
+.bc-date-time-select__separator {
+  width: var(--border-width-default);
+  align-self: stretch;
+  background-color: var(--border-default);
+  flex-shrink: 0;
+}
+
+/* Responsive: stack vertically on narrow screens */
+@media (max-width: 640px) {
+  .bc-date-time-select__pickers {
+    flex-direction: column;
+  }
+
+  .bc-date-time-select__separator {
+    width: auto;
+    height: var(--border-width-default);
+    align-self: stretch;
+  }
+}
+
+/* Dark mode */
+.dark .bc-date-time-select__panel {
+  background-color: var(--bg-surface);
+  border-color: var(--border-default);
+}
+
+/* TimePicker Component */
+.bc-time-picker {
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--bg-background);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  user-select: none;
+}
+
+.bc-time-picker--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Header row */
+.bc-time-picker__header {
+  display: flex;
+  gap: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
+  margin-bottom: var(--spacing-xs);
+}
+
+.bc-time-picker__header-label {
+  flex: 1;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Body containing columns */
+.bc-time-picker__body {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}
+
+/* Columns */
+.bc-time-picker__columns {
+  display: flex;
+  flex-direction: column;
+}
+
+.bc-time-picker__column {
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-300) transparent;
+  min-width: 44px;
+  gap: 1px;
+}
+
+.bc-time-picker__column::-webkit-scrollbar {
+  width: 4px;
+}
+
+.bc-time-picker__column::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.bc-time-picker__column::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-radius: var(--radius-full);
+}
+
+/* Separator between columns */
+.bc-time-picker__separator {
+  display: flex;
+  align-items: center;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-muted);
+  padding: 0 var(--spacing-2xs);
+  align-self: flex-start;
+  margin-top: var(--spacing-xs);
+}
+
+/* Individual time items */
+.bc-time-picker__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-normal);
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  min-width: 36px;
+}
+
+.bc-time-picker__item:hover:not(:disabled) {
+  background-color: var(--bg-subtle);
+}
+
+.bc-time-picker__item:focus-visible {
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
+}
+
+.bc-time-picker__item--selected {
+  background-color: var(--tp-selected-bg, var(--color-primary-500));
+  color: var(--color-white);
+  font-weight: var(--font-weight-semibold);
+}
+
+.bc-time-picker__item--selected:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.bc-time-picker__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* Footer with Now button */
+.bc-time-picker__footer {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--spacing-xs);
+  border-top: var(--border-width-thin) solid var(--border-default);
+  margin-top: var(--spacing-xs);
+}
+
+.bc-time-picker__now-btn {
+  background: none;
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--color-primary-600);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  padding: var(--spacing-2xs) var(--spacing-md);
+  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-time-picker__now-btn:hover:not(:disabled) {
+  background-color: var(--color-primary-50);
+  border-color: var(--color-primary-300);
+}
+
+.bc-time-picker__now-btn:focus-visible {
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
+}
+
+.bc-time-picker__now-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* Size variants */
+.bc-time-picker--size-xs {
+  padding: var(--spacing-2xs);
+  font-size: var(--font-size-xs);
+}
+.bc-time-picker--size-xs .bc-time-picker__column {
+  max-height: 140px;
+  min-width: 32px;
+}
+.bc-time-picker--size-xs .bc-time-picker__item {
+  padding: 1px var(--spacing-2xs);
+  min-width: 28px;
+  font-size: var(--font-size-2xs);
+}
+
+.bc-time-picker--size-sm {
+  padding: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+}
+.bc-time-picker--size-sm .bc-time-picker__column {
+  max-height: 170px;
+  min-width: 36px;
+}
+.bc-time-picker--size-sm .bc-time-picker__item {
+  padding: var(--spacing-2xs) var(--spacing-2xs);
+  min-width: 32px;
+  font-size: var(--font-size-xs);
+}
+
+.bc-time-picker--size-md {
+  padding: var(--spacing-sm);
+  font-size: var(--font-size-md);
+}
+.bc-time-picker--size-md .bc-time-picker__column {
+  max-height: 200px;
+}
+.bc-time-picker--size-md .bc-time-picker__item {
+  font-size: var(--font-size-sm);
+}
+
+.bc-time-picker--size-lg {
+  padding: var(--spacing-md);
+  font-size: var(--font-size-lg);
+}
+.bc-time-picker--size-lg .bc-time-picker__column {
+  max-height: 240px;
+  min-width: 52px;
+}
+.bc-time-picker--size-lg .bc-time-picker__item {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 44px;
+  font-size: var(--font-size-md);
+}
+
+.bc-time-picker--size-xl {
+  padding: var(--spacing-lg);
+  font-size: var(--font-size-xl);
+}
+.bc-time-picker--size-xl .bc-time-picker__column {
+  max-height: 280px;
+  min-width: 60px;
+}
+.bc-time-picker--size-xl .bc-time-picker__item {
+  padding: var(--spacing-xs) var(--spacing-md);
+  min-width: 52px;
+  font-size: var(--font-size-lg);
+}
+
+/* Dark mode */
+.dark .bc-time-picker {
+  background-color: var(--bg-background);
+  border-color: var(--border-default);
+}
+
+.dark .bc-time-picker__header {
+  border-bottom-color: var(--border-default);
+}
+
+.dark .bc-time-picker__footer {
+  border-top-color: var(--border-default);
+}
+
+.dark .bc-time-picker__now-btn {
+  color: var(--color-primary-400);
+  border-color: var(--border-default);
+}
+
+.dark .bc-time-picker__now-btn:hover:not(:disabled) {
+  background-color: var(--color-primary-950);
+  border-color: var(--color-primary-700);
+}
+
+.dark .bc-time-picker__item {
+  color: var(--text-normal);
+}
+
+.dark .bc-time-picker__item:hover:not(:disabled) {
+  background-color: var(--bg-subtle);
+}
+
+.dark .bc-time-picker__item--selected {
+  color: var(--color-white);
+}
+
+.dark .bc-time-picker__column::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-600);
+}
+
+.dark .bc-time-picker__column {
+  scrollbar-color: var(--color-neutral-600) transparent;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-time-picker__item {
+    transition: none;
+  }
+}
+
+/* Time Select — fit-content sizing like date-select */
+.bc-time-select {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.bc-time-select__trigger {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Panel shown in the flyout */
+.bc-time-select__panel {
+  background-color: var(--color-white);
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-md);
+}
+
+/* Dark mode */
+.dark .bc-time-select__panel {
+  background-color: var(--bg-surface);
+  border-color: var(--border-default);
+}
+
+/* CopyButton Component */
+.bc-copy-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.bc-copy-button--copied .bc-button {
+  color: var(--color-success-600);
+}
+
+.dark .bc-copy-button--copied .bc-button {
+  color: var(--color-success-400);
+}
+
+/* Brief scale animation on copy */
+@keyframes bc-copy-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.bc-copy-button--copied .bc-button {
+  animation: bc-copy-pulse var(--motion-duration-fast)
+    var(--motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bc-copy-button--copied .bc-button {
+    animation: none;
+  }
+}
+
+/* NumberStepper Component */
+.bc-number-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  user-select: none;
+}
+
+.bc-number-stepper--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Vertical orientation */
+.bc-number-stepper--vertical {
+  flex-direction: column;
+}
+
+/* Value display */
+.bc-number-stepper__value {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  text-align: center;
+  color: var(--text-normal);
+  min-width: 2em;
+  line-height: 1;
+}
+
+/* Compact buttons — not full Button, just icon buttons */
+.bc-number-stepper__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-normal);
+  padding: var(--spacing-xs);
+  line-height: 1;
+  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
+  flex-shrink: 0;
+}
+
+.bc-number-stepper__button:hover:not(:disabled) {
+  background-color: var(--bg-subtle);
+  border-color: var(--color-neutral-400);
+}
+
+.bc-number-stepper__button:active:not(:disabled) {
+  background-color: var(--color-neutral-200);
+}
+
+.bc-number-stepper__button:focus-visible {
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
+}
+
+.bc-number-stepper__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* Size variants */
+.bc-number-stepper--size-xs {
+  gap: var(--spacing-2xs);
+}
+.bc-number-stepper--size-xs .bc-number-stepper__value {
+  font-size: var(--font-size-xs);
+  min-width: 1.5em;
+}
+.bc-number-stepper--size-xs .bc-number-stepper__button {
+  padding: var(--spacing-2xs);
+}
+
+.bc-number-stepper--size-sm {
+  gap: var(--spacing-2xs);
+}
+.bc-number-stepper--size-sm .bc-number-stepper__value {
+  font-size: var(--font-size-sm);
+  min-width: 1.8em;
+}
+.bc-number-stepper--size-sm .bc-number-stepper__button {
+  padding: 3px;
+}
+
+.bc-number-stepper--size-md .bc-number-stepper__button {
+  padding: var(--spacing-xs);
+}
+
+.bc-number-stepper--size-lg {
+  gap: var(--spacing-sm);
+}
+.bc-number-stepper--size-lg .bc-number-stepper__value {
+  font-size: var(--font-size-lg);
+  min-width: 2.5em;
+}
+.bc-number-stepper--size-lg .bc-number-stepper__button {
+  padding: var(--spacing-xs);
+}
+
+.bc-number-stepper--size-xl {
+  gap: var(--spacing-sm);
+}
+.bc-number-stepper--size-xl .bc-number-stepper__value {
+  font-size: var(--font-size-xl);
+  min-width: 3em;
+}
+.bc-number-stepper--size-xl .bc-number-stepper__button {
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-md);
+}
+
+/* Vertical: increment on top, value middle, decrement on bottom */
+.bc-number-stepper--vertical .bc-number-stepper__button {
+  width: 100%;
+}
+
+.bc-number-stepper--vertical .bc-number-stepper__button--increment {
+  order: -1;
+}
+
+.bc-number-stepper--vertical .bc-number-stepper__button--decrement {
+  order: 1;
+}
+
+.bc-number-stepper--vertical .bc-number-stepper__value {
+  order: 0;
+}
+
+/* Dark mode */
+.dark .bc-number-stepper__button {
+  border-color: var(--border-default);
+  color: var(--text-normal);
+}
+
+.dark .bc-number-stepper__button:hover:not(:disabled) {
+  background-color: var(--bg-subtle);
+  border-color: var(--color-neutral-500);
+}
+
+.dark .bc-number-stepper__button:active:not(:disabled) {
+  background-color: var(--color-neutral-700);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-number-stepper__button {
+    transition: none;
+  }
+}
+
+/* StatCard Component */
+.bc-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-lg);
+  background-color: var(--color-white);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-lg);
+}
+
+/* Variants */
+.bc-stat-card--elevated {
+  border: none;
+  box-shadow: var(--shadow-md);
+}
+
+.bc-stat-card--outlined {
+  background-color: transparent;
+  border: var(--border-width-default) solid var(--border-default);
+}
+
+/* Padding + font sizes */
+.bc-stat-card--padding-xs {
+  padding: var(--spacing-xs);
+  gap: var(--spacing-xs);
+}
+.bc-stat-card--padding-xs .bc-stat-card__value {
+  font-size: var(--font-size-lg);
+}
+.bc-stat-card--padding-xs .bc-stat-card__label,
+.bc-stat-card--padding-xs .bc-stat-card__trend {
+  font-size: var(--font-size-xs);
+}
+
+.bc-stat-card--padding-sm {
+  padding: var(--spacing-sm);
+  gap: var(--spacing-xs);
+}
+.bc-stat-card--padding-sm .bc-stat-card__value {
+  font-size: var(--font-size-xl);
+}
+.bc-stat-card--padding-sm .bc-stat-card__label,
+.bc-stat-card--padding-sm .bc-stat-card__trend {
+  font-size: var(--font-size-xs);
+}
+
+.bc-stat-card--padding-lg {
+  padding: var(--spacing-xl);
+  gap: var(--spacing-md);
+}
+.bc-stat-card--padding-lg .bc-stat-card__value {
+  font-size: var(--font-size-3xl);
+}
+.bc-stat-card--padding-lg .bc-stat-card__label,
+.bc-stat-card--padding-lg .bc-stat-card__trend {
+  font-size: var(--font-size-md);
+}
+
+.bc-stat-card--padding-xl {
+  padding: var(--spacing-2xl);
+  gap: var(--spacing-lg);
+}
+.bc-stat-card--padding-xl .bc-stat-card__value {
+  font-size: var(--font-size-4xl);
+}
+.bc-stat-card--padding-xl .bc-stat-card__label,
+.bc-stat-card--padding-xl .bc-stat-card__trend {
+  font-size: var(--font-size-lg);
+}
+
+/* Value */
+.bc-stat-card__value {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-normal);
+  line-height: var(--line-height-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Label */
+.bc-stat-card__label {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Trend */
+.bc-stat-card__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--stat-card-trend-color, var(--text-muted));
+}
+
+.bc-stat-card__trend-value {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Icon */
+.bc-stat-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stat-card-accent, var(--color-primary-500));
+}
+
+/* Sparkline slot */
+.bc-stat-card__sparkline {
+  margin-top: var(--spacing-sm);
+  min-height: 32px;
+  border-top: var(--border-width-thin) solid
+    var(--border-subtle, var(--border-default));
+  padding-top: var(--spacing-sm);
+}
+
+/* Dark mode */
+.dark .bc-stat-card {
+  background-color: var(--bg-surface);
+}
+
+.dark .bc-stat-card--outlined {
+  background-color: transparent;
+}
+
+.dark .bc-stat-card--elevated {
+  box-shadow: var(--shadow-lg);
+}
+
+.dark .bc-stat-card__trend {
+  color: var(--stat-card-trend-color-dark, var(--text-muted));
+}
+
+.dark .bc-stat-card__icon {
+  color: var(--stat-card-accent, var(--color-primary-400));
+}
+
+/* Stepper Component */
+.bc-stepper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.bc-stepper--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Indicators row */
+.bc-stepper__indicators {
+  display: flex;
+  align-items: center;
+}
+
+.bc-stepper--vertical .bc-stepper__indicators {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+}
+
+/* Individual step */
+.bc-stepper__step {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  padding-right: var(--spacing-md);
+}
+
+.bc-stepper__step:focus-visible {
+  outline: var(--outline-width-focus) solid
+    var(--stepper-color, var(--color-primary-500));
+  outline-offset: var(--spacing-2xs);
+  border-radius: var(--radius-sm);
+}
+
+/* Step circle */
+.bc-stepper__circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  border: var(--border-width-default) solid var(--border-default);
+  background-color: var(--bg-background);
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
+  flex-shrink: 0;
+}
+
+.bc-stepper__step--active .bc-stepper__circle {
+  border-color: var(--stepper-color, var(--color-primary-500));
+  background-color: var(--stepper-color, var(--color-primary-500));
+  color: var(--color-white);
+}
+
+.bc-stepper__step--completed .bc-stepper__circle {
+  border-color: var(--stepper-color, var(--color-primary-500));
+  background-color: var(--stepper-color, var(--color-primary-500));
+  color: var(--color-white);
+}
+
+.bc-stepper__step--error .bc-stepper__circle {
+  border-color: var(--color-danger-500);
+  background-color: var(--color-danger-500);
+  color: var(--color-white);
+}
+
+/* Step label */
+.bc-stepper__label {
+  display: flex;
+  flex-direction: column;
+}
+
+.bc-stepper__label-text {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-normal);
+}
+
+.bc-stepper__step--pending .bc-stepper__label-text {
+  color: var(--text-muted);
+}
+
+.bc-stepper__label-description {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+
+/* Connector line */
+.bc-stepper__connector {
+  flex: 1;
+  height: 2px;
+  min-width: var(--spacing-lg);
+  background-color: var(--border-default);
+  transition: background-color var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-stepper__connector--completed {
+  background-color: var(--stepper-color, var(--color-primary-500));
+}
+
+.bc-stepper--vertical .bc-stepper__connector {
+  width: 2px;
+  height: var(--spacing-lg);
+  min-width: 0;
+  margin-left: 15px; /* center under the 32px circle */
+  flex: 0;
+}
+
+/* Content area */
+.bc-stepper__content {
+  min-height: 0;
+}
+
+/* Navigation buttons */
+.bc-stepper__navigation {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.bc-stepper__spacer {
+  flex: 1;
+}
+
+/* Size variants */
+.bc-stepper--size-xs .bc-stepper__circle {
+  width: 24px;
+  height: 24px;
+  font-size: var(--font-size-xs);
+}
+.bc-stepper--size-xs .bc-stepper__label-text {
+  font-size: var(--font-size-xs);
+}
+.bc-stepper--size-xs .bc-stepper__label-description {
+  font-size: var(--font-size-2xs);
+}
+.bc-stepper--size-xs.bc-stepper--vertical .bc-stepper__connector {
+  margin-left: 11px;
+}
+
+.bc-stepper--size-sm .bc-stepper__circle {
+  width: 28px;
+  height: 28px;
+  font-size: var(--font-size-xs);
+}
+.bc-stepper--size-sm .bc-stepper__label-text {
+  font-size: var(--font-size-xs);
+}
+
+.bc-stepper--size-lg .bc-stepper__circle {
+  width: 40px;
+  height: 40px;
+  font-size: var(--font-size-md);
+}
+.bc-stepper--size-lg .bc-stepper__label-text {
+  font-size: var(--font-size-md);
+}
+
+.bc-stepper--size-xl .bc-stepper__circle {
+  width: 48px;
+  height: 48px;
+  font-size: var(--font-size-lg);
+}
+.bc-stepper--size-xl .bc-stepper__label-text {
+  font-size: var(--font-size-lg);
+}
+
+/* Compact variant */
+.bc-stepper--compact .bc-stepper__label {
+  display: none;
+}
+
+/* Dark mode */
+.dark .bc-stepper__circle {
+  background-color: var(--bg-background);
+  border-color: var(--border-default);
+  color: var(--text-muted);
+}
+
+.dark .bc-stepper__step--active .bc-stepper__circle {
+  border-color: var(--stepper-color-dark, var(--color-primary-400));
+  background-color: var(--stepper-color-dark, var(--color-primary-400));
+}
+
+.dark .bc-stepper__step--completed .bc-stepper__circle {
+  border-color: var(--stepper-color-dark, var(--color-primary-400));
+  background-color: var(--stepper-color-dark, var(--color-primary-400));
+}
+
+.dark .bc-stepper__step--error .bc-stepper__circle {
+  border-color: var(--color-danger-400);
+  background-color: var(--color-danger-400);
+}
+
+.dark .bc-stepper__connector--completed {
+  background-color: var(--stepper-color-dark, var(--color-primary-400));
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-stepper__circle,
+  .bc-stepper__connector {
+    transition: none;
+  }
+}
+
+/* SortableList Component */
+.bc-sortable-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.bc-sortable-list--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Gap variants */
+.bc-sortable-list--gap-xs {
+  gap: var(--spacing-2xs);
+}
+.bc-sortable-list--gap-sm {
+  gap: var(--spacing-xs);
+}
+.bc-sortable-list--gap-md {
+  gap: var(--spacing-sm);
+}
+.bc-sortable-list--gap-lg {
+  gap: var(--spacing-md);
+}
+.bc-sortable-list--gap-xl {
+  gap: var(--spacing-lg);
+}
+
+/* Items — base */
+.bc-sortable-list__item {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-sortable-list__item--dragging {
+  opacity: 0.4;
+}
+
+.bc-sortable-list__item--drop-target {
+  border-color: var(--color-primary-400);
+  box-shadow: 0 -2px 0 0 var(--color-primary-500);
+}
+
+/* Variant: bordered (default) */
+.bc-sortable-list--variant-bordered .bc-sortable-list__item {
+  background-color: white;
+  border: var(--border-width-thin) solid var(--border-default);
+}
+
+/* Variant: card */
+.bc-sortable-list--variant-card .bc-sortable-list__item {
+  background-color: var(--bg-background);
+  border: var(--border-width-thin) solid var(--border-muted);
+  box-shadow: var(--shadow-sm);
+}
+
+.bc-sortable-list--variant-card .bc-sortable-list__item--drop-target {
+  border-color: var(--color-primary-400);
+  box-shadow:
+    var(--shadow-sm),
+    0 -2px 0 0 var(--color-primary-500);
+}
+
+/* Variant: plain */
+.bc-sortable-list--variant-plain .bc-sortable-list__item {
+  background-color: transparent;
+  border: var(--border-width-thin) solid transparent;
+}
+
+.bc-sortable-list--variant-plain .bc-sortable-list__item:hover {
+  background-color: var(--bg-muted);
+}
+
+/* Handle */
+.bc-sortable-list__handle {
+  display: flex;
+  align-items: center;
+  cursor: grab;
+  color: var(--color-base-300);
+  flex-shrink: 0;
+  margin-right: var(--spacing-xs);
+}
+
+.bc-sortable-list__handle:active {
+  cursor: grabbing;
+}
+
+/* Size variants */
+.bc-sortable-list--size-xs .bc-sortable-list__item {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.bc-sortable-list--size-sm .bc-sortable-list__item {
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+.bc-sortable-list--size-lg .bc-sortable-list__item {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--font-size-lg);
+}
+.bc-sortable-list--size-xl .bc-sortable-list__item {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-xl);
+}
+
+/* Dark mode */
+.dark .bc-sortable-list--variant-bordered .bc-sortable-list__item {
+  background-color: var(--color-neutral-900);
+  border-color: var(--border-default);
+}
+
+.dark .bc-sortable-list--variant-card .bc-sortable-list__item {
+  background-color: var(--bg-background);
+}
+
+.dark .bc-sortable-list--variant-plain .bc-sortable-list__item:hover {
+  background-color: var(--bg-muted);
+}
+
+.dark .bc-sortable-list__handle {
+  color: var(--color-base-600);
+}
+
+.dark .bc-sortable-list__item--drop-target {
+  border-color: var(--color-primary-400);
+  box-shadow: 0 -2px 0 0 var(--color-primary-400);
+}
+
+.dark .bc-sortable-list--variant-card .bc-sortable-list__item--drop-target {
+  box-shadow:
+    var(--shadow-sm),
+    0 -2px 0 0 var(--color-primary-400);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-sortable-list__item {
+    transition: none;
+  }
+}
+
+/* TransferList Component */
+.bc-transfer-list {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-sm);
+}
+
+.bc-transfer-list--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Panels */
+.bc-transfer-list__panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-background);
+  min-width: 180px;
+  overflow: hidden;
+}
+
+.bc-transfer-list__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
+  background-color: var(--bg-subtle);
+}
+
+.bc-transfer-list__panel-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Search */
+.bc-transfer-list__search {
+  padding: var(--spacing-xs);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
+}
+
+/* Items list */
+.bc-transfer-list__items {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 240px;
+  scrollbar-width: thin;
+}
+
+/* Individual item */
+.bc-transfer-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-transfer-list__item:hover {
+  background-color: var(--bg-subtle);
+}
+
+.bc-transfer-list__item--selected {
+  background-color: var(--color-primary-50);
+}
+
+.bc-transfer-list__item-check {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.bc-transfer-list__item--selected .bc-transfer-list__item-check {
+  color: var(--color-primary-500);
+}
+
+.bc-transfer-list__item-content {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  color: var(--text-normal);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Action buttons column */
+.bc-transfer-list__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+}
+
+/* Size variants */
+.bc-transfer-list--size-xs .bc-transfer-list__items {
+  max-height: 160px;
+}
+.bc-transfer-list--size-xs .bc-transfer-list__item {
+  padding: 1px var(--spacing-xs);
+}
+.bc-transfer-list--size-xs .bc-transfer-list__item-content {
+  font-size: var(--font-size-xs);
+}
+.bc-transfer-list--size-xs .bc-transfer-list__panel {
+  min-width: 140px;
+}
+
+.bc-transfer-list--size-sm .bc-transfer-list__items {
+  max-height: 200px;
+}
+.bc-transfer-list--size-sm .bc-transfer-list__item-content {
+  font-size: var(--font-size-xs);
+}
+.bc-transfer-list--size-sm .bc-transfer-list__panel {
+  min-width: 160px;
+}
+
+.bc-transfer-list--size-lg .bc-transfer-list__items {
+  max-height: 320px;
+}
+.bc-transfer-list--size-lg .bc-transfer-list__item {
+  padding: var(--spacing-xs) var(--spacing-md);
+}
+.bc-transfer-list--size-lg .bc-transfer-list__item-content {
+  font-size: var(--font-size-md);
+}
+
+.bc-transfer-list--size-xl .bc-transfer-list__items {
+  max-height: 400px;
+}
+.bc-transfer-list--size-xl .bc-transfer-list__item {
+  padding: var(--spacing-sm) var(--spacing-lg);
+}
+.bc-transfer-list--size-xl .bc-transfer-list__item-content {
+  font-size: var(--font-size-lg);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .bc-transfer-list {
+    flex-direction: column;
+  }
+
+  .bc-transfer-list__actions {
+    flex-direction: row;
+  }
+
+  .bc-transfer-list__panel {
+    min-width: 0;
+  }
+}
+
+/* Dark mode */
+.dark .bc-transfer-list__panel {
+  background-color: var(--bg-background);
+  border-color: var(--border-default);
+}
+
+.dark .bc-transfer-list__panel-header {
+  background-color: var(--bg-subtle);
+  border-bottom-color: var(--border-default);
+}
+
+.dark .bc-transfer-list__item:hover {
+  background-color: var(--bg-subtle);
+}
+
+.dark .bc-transfer-list__item--selected {
+  background-color: var(--color-primary-950);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-transfer-list__item {
+    transition: none;
+  }
+}
+
+/* ColorPicker Component */
+
+.bc-color-picker__container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.bc-color-picker__field-container {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  contain: size layout;
+}
+
+.bc-color-picker__field {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-sm);
+  overflow: clip;
+}
+
+.bc-color-picker__field-interactive {
+  cursor: crosshair;
+}
+
+/* Cursor on the 2D color field */
+.bc-color-picker__cursor {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: var(--radius-full);
+  border: 2px solid white;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* Strip wrap (hue / alpha / channel strips) */
+.bc-color-picker__strip-wrap {
+  position: relative;
+  width: 100%;
+  height: var(--spacing-lg);
+  cursor: pointer;
+}
+
+.bc-color-picker__strip-wrap .bc-color-picker__canvas {
+  border-radius: var(--radius-md);
+}
+
+.bc-color-picker__canvas-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+/* Handle on strips */
+.bc-color-picker__handle {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
+  border-radius: var(--radius-full);
+  border: 2px solid white;
+  outline: 1px solid black;
+  transform: translate(-50%, -50%);
+}
+
+/* Label for channels */
+.bc-color-picker__label {
+  text-align: right;
+  font-size: var(--font-size-sm);
+}
+
+/* Channel grid layout (label | strip | input) */
+.bc-color-picker__channels {
+  width: 100%;
+  display: grid;
+  grid-template-columns:
+    calc(var(--spacing-md) * 10)
+    1fr
+    calc(var(--spacing-md) * 8);
+  gap: var(--spacing-xs) var(--spacing-mdh);
+  align-items: center;
+}
+
+.bc-color-picker__compact.bc-color-picker__channels {
+  grid-template-columns:
+    calc(var(--spacing-md) * 2)
+    1fr
+    calc(var(--spacing-md) * 8);
+}
+
+.bc-color-picker__channels-container {
+  min-width: 0;
+}
+
+.bc-color-picker__channel__strip {
+  width: 100%;
+}
+
+.bc-color-picker__channel__input {
+  flex-shrink: 0;
+  --spacing-scale: 0.6;
+  --font-size-scale: 0.8;
+}
+
+/* Controls: channels + swatch side by side */
+.bc-color-picker__controls {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-md);
+  align-items: stretch;
+}
+
+/* Color swatch preview */
+.bc-color-picker__swatch-container {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+}
+
+.bc-color-picker__swatch {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-md);
+}
+
+.bc-spotlight {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+  margin: 15vh auto 0;
+  width: 90%;
+  max-height: 60vh;
+}
+
+.bc-spotlight--size-sm {
+  max-width: 480px;
+}
+
+.bc-spotlight--size-md {
+  max-width: 600px;
+}
+
+.bc-spotlight--size-lg {
+  max-width: 720px;
+}
+
+.bc-spotlight__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-mdh) var(--spacing-lg);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
+}
+
+.bc-spotlight__search-icon {
+  display: flex;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.bc-spotlight__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--font-size-md);
+  font-family: inherit;
+  color: inherit;
+}
+
+.bc-spotlight__input::placeholder {
+  color: var(--text-muted);
+}
+
+.bc-spotlight__close-hint {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.bc-spotlight__results {
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.bc-spotlight__empty {
+  padding: var(--spacing-xl) var(--spacing-lg);
+  text-align: center;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.bc-spotlight__section + .bc-spotlight__section {
+  margin-top: var(--spacing-md);
+}
+
+.bc-spotlight__section-title {
+  padding: var(--spacing-base) var(--spacing-md);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.bc-spotlight__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-spotlight__item:hover,
+.bc-spotlight__item--active {
+  background-color: var(--interactive-hover);
+}
+
+.bc-spotlight__item-icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.bc-spotlight__item-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.bc-spotlight__item-label {
+  font-size: var(--font-size-sm);
+}
+
+.bc-spotlight__item-description {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+
+.bc-spotlight__item-shortcut {
+  display: flex;
+  gap: var(--spacing-base);
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bc-spotlight__item {
+    transition: none;
+  }
+}
+
+.bc-virtual-list {
+  position: relative;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.bc-virtual-list__spacer {
+  position: relative;
+  width: 100%;
+  pointer-events: none;
+}
+
+.bc-virtual-list__viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  will-change: transform;
+}
+
 /* Shared flex modifiers for Stack and Group */
 
 /* Gap */