@tempots/beatui 1.4.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;
@@ -5766,6 +5642,15 @@ a:focus-visible {
   background-color: var(--color-base-800);
 }
 
+/* Format Components - Locale-aware data formatting display */
+
+/* Tabular figures for numeric format components */
+.bc-format-number,
+.bc-format-bigint,
+.bc-format-file-size {
+  font-variant-numeric: tabular-nums;
+}
+
 .bc-flyout-container {
   z-index: var(--z-index-popover);
 }
@@ -6579,20 +6464,22 @@ a:focus-visible {
   }
 }
 
-/* Input Wrapper Component */
-.bc-input-wrapper {
+/* Field Component */
+.bc-field {
   display: flex;
   flex-direction: column;
+  min-width: 0; /* Prevent overflow in grid/flex containers */
 }
 
-.bc-input-wrapper--full-width {
+.bc-field--full-width {
   width: 100%;
 }
 
 /* Horizontal layout variants - use grid for proper error positioning */
-.bc-input-wrapper--horizontal,
-.bc-input-wrapper--horizontal-label-right,
-.bc-input-wrapper--horizontal-fixed {
+.bc-field--horizontal,
+.bc-field--horizontal-label-right,
+.bc-field--horizontal-fixed,
+.bc-field--horizontal-end {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -6600,25 +6487,39 @@ a:focus-visible {
 }
 
 /* Horizontal with label on right */
-.bc-input-wrapper--horizontal-label-right {
+.bc-field--horizontal-label-right {
   grid-template-columns: 1fr auto;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
+.bc-field--horizontal-label-right .bc-field__header {
   order: 2;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
+.bc-field--horizontal-label-right .bc-field__content {
   order: 1;
 }
 
 /* Horizontal with fixed-width label */
-.bc-input-wrapper--horizontal-fixed {
-  grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
+.bc-field--horizontal-fixed {
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+}
+
+/* Horizontal with fixed-width label, right-aligned (flush with input) */
+.bc-field--horizontal-end {
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+}
+
+.bc-field--horizontal-end .bc-field__header {
+  justify-content: flex-end;
+}
+
+.bc-field--horizontal-end .bc-field__label-section {
+  text-align: right;
+  align-items: flex-end;
 }
 
 /* Label header container */
-.bc-input-wrapper__header {
+.bc-field__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6626,95 +6527,278 @@ a:focus-visible {
 }
 
 /* Label section container */
-.bc-input-wrapper__label-section {
+.bc-field__label-section {
   display: flex;
   flex-direction: column;
 }
 
 /* Label container */
-.bc-input-wrapper__label {
+.bc-field__label {
   display: flex;
   align-items: center;
   gap: var(--spacing-stack-2xs, var(--spacing-xs));
 }
 
 /* Label text styles */
-.bc-input-wrapper__label-text {
+.bc-field__label-text {
   text-wrap: nowrap;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
 /* Label text states */
-.bc-input-wrapper__label-text--default {
+.bc-field__label-text--default {
   color: var(--color-gray-600);
   font-weight: var(--font-weight-semibold);
 }
 
-.bc-input-wrapper__label-text--disabled {
+.bc-field__label-text--disabled {
   color: var(--color-gray-500);
   font-weight: var(--font-weight-normal);
 }
 
-.bc-input-wrapper__label-text--error {
+.bc-field__label-text--error {
   color: var(--color-danger-600);
   font-weight: var(--font-weight-normal);
 }
 
 /* Required symbol */
-.bc-input-wrapper__required {
+.bc-field__required {
   font-size: var(--font-size-xs);
   color: var(--color-danger-600);
   vertical-align: top;
 }
 
 /* Error messages in horizontal mode span full width on their own row */
-.bc-input-wrapper--horizontal .bc-input-wrapper__error,
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
-.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
+.bc-field--horizontal .bc-field__error,
+.bc-field--horizontal-label-right .bc-field__error,
+.bc-field--horizontal-fixed .bc-field__error,
+.bc-field--horizontal-end .bc-field__error {
   grid-column: 1 / -1;
 }
 
-.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
+.bc-field--horizontal-label-right .bc-field__error {
   order: 3;
 }
 
 /* Description text */
-.bc-input-wrapper__description {
+.bc-field__description {
   font-size: var(--font-size-sm);
   color: var(--color-gray-600);
   line-height: var(--line-height-normal);
 }
 
 /* Description under label in horizontal mode */
-.bc-input-wrapper__description--under-label {
+.bc-field__description--under-label {
   font-size: var(--font-size-xs);
 }
 
 /* Error message */
-.bc-input-wrapper__error {
+.bc-field__error {
   font-size: var(--font-size-sm);
   color: var(--color-danger-500);
   line-height: var(--line-height-normal);
 }
 
+/* Compact mode */
+.bc-field--compact {
+  gap: var(--spacing-xs, var(--spacing-sm));
+}
+
+.bc-field--compact .bc-field__label-text {
+  font-size: var(--font-size-xs);
+}
+
+.bc-field--compact .bc-field__description {
+  font-size: var(--font-size-xs);
+}
+
+.bc-field--compact .bc-field__error {
+  font-size: var(--font-size-xs);
+}
+
+/* Responsive layout — matches horizontal-fixed when wide, flips to vertical
+   when the ancestor container (Fieldset) narrows below 480px. */
+.bc-field--responsive {
+  display: grid;
+  grid-template-columns: var(--field-label-width, 7.5rem) 1fr;
+  align-items: center;
+  gap: var(--spacing-sm, var(--spacing-lg));
+}
+
+.bc-field--responsive .bc-field__error {
+  grid-column: 1 / -1;
+}
+
+@container (max-width: 480px) {
+  .bc-field--responsive {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bc-field--responsive .bc-field__error {
+    grid-column: auto;
+  }
+}
+
 /* Dark mode styles */
-.dark .bc-input-wrapper__label-text--default {
+.dark .bc-field__label-text--default {
   color: var(--text-normal);
 }
 
-.dark .bc-input-wrapper__label-text--error {
+.dark .bc-field__label-text--error {
   color: var(--color-danger-300);
 }
 
-.dark .bc-input-wrapper__required {
+.dark .bc-field__required {
   color: var(--color-danger-400);
 }
 
-.dark .bc-input-wrapper__error {
+.dark .bc-field__error {
   color: var(--color-danger-400);
 }
 
+/* Fieldset Component */
+.bc-fieldset {
+  container-type: inline-size;
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0; /* Fix fieldset overflow behaviour */
+  width: 100%;
+}
+
+/* Bordered variant */
+.bc-fieldset--bordered {
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+}
+
+.bc-fieldset--bordered > .bc-fieldset__legend {
+  padding: 0 var(--spacing-sm);
+  margin-left: calc(-1 * var(--spacing-sm));
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  color: var(--text-normal);
+}
+
+/* Plain variant */
+.bc-fieldset--plain > .bc-fieldset__legend {
+  width: 100%;
+  padding-bottom: var(--spacing-sm);
+  border-bottom: var(--border-width-default) solid var(--border-divider);
+  margin-bottom: var(--spacing-md);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  color: var(--text-normal);
+}
+
+/* Card variant */
+.bc-fieldset--card {
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-lg);
+}
+
+.bc-fieldset--card > .bc-fieldset__legend {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-lg);
+  color: var(--text-normal);
+  padding: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Legend */
+.bc-fieldset__legend {
+  display: flex;
+  align-items: center;
+}
+
+.bc-fieldset__legend-toggle {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  width: 100%;
+}
+
+.bc-fieldset__legend-toggle:focus-visible {
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.bc-fieldset__collapse-icon {
+  transition: transform var(--motion-duration-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-fieldset__collapse-icon--collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Description */
+.bc-fieldset__description {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Content grid — defaults to single column. Multi-column is set via
+   inline style by the component when columns > 1. */
+.bc-fieldset__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--fieldset-gap, var(--spacing-md));
+}
+
+/* Disabled state */
+.bc-fieldset:disabled {
+  opacity: 0.6;
+}
+
+.bc-fieldset:disabled .bc-fieldset__legend-toggle {
+  cursor: default;
+}
+
+/* Dark mode */
+.dark .bc-fieldset--bordered {
+  border-color: var(--border-default);
+}
+
+.dark .bc-fieldset--plain > .bc-fieldset__legend {
+  border-bottom-color: var(--border-default);
+}
+
+.dark .bc-fieldset--card {
+  background-color: var(--bg-elevated);
+  box-shadow: var(--shadow-md);
+}
+
+.dark .bc-fieldset__description {
+  color: var(--text-muted);
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .bc-fieldset__collapse-icon {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .bc-fieldset--bordered {
+    border-width: var(--border-width-medium);
+  }
+  .bc-fieldset--card {
+    border: var(--border-width-medium) solid currentColor;
+  }
+}
+
 .bc-json-schema-object {
   border-left: var(--spacing-md) solid var(--color-base-200);
   padding-inline-start: var(--spacing-md);
@@ -7869,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,
@@ -10556,9 +10640,77 @@ a:focus-visible {
   -moz-appearance: textfield;
 }
 
-/* Number Input Steppers */
-.bc-number-input-steppers {
-  display: flex;
+/* 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;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
@@ -10578,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%;
 }
 
@@ -10594,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);
@@ -12746,6 +12922,11 @@ span.bc-sidebar-link {
   background-color: var(--table-stripe-bg);
 }
 
+/* Detail rows inherit the parent row's background instead of zebra striping */
+.bc-table--with-striped-rows > tbody > tr.bc-data-table__detail-row {
+  background-color: inherit;
+}
+
 /* Hoverable striped rows - darker stripe on hover */
 .bc-table--hoverable.bc-table--with-striped-rows
   > tbody
@@ -16265,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);
@@ -16418,6 +16686,45 @@ span.bc-sidebar-link {
   color: var(--text-muted);
 }
 
+/* Markers container */
+.bc-range-slider__markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Individual marker dot */
+.bc-range-slider__marker {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bc-range-slider__marker::before {
+  content: '';
+  display: block;
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+  background-color: var(--color-white);
+  border-radius: var(--radius-full);
+}
+
+/* Marker label */
+.bc-range-slider__marker-label {
+  position: absolute;
+  top: calc(100% + var(--spacing-sm));
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+}
+
 /* ── Size variants ── */
 
 /* xs */
@@ -16425,7 +16732,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-lg) var(--spacing-smh) var(--spacing-md);
 }
 .bc-range-slider--size-xs .bc-range-slider__track {
-  height: var(--spacing-xs);
+  height: var(--spacing-smh);
 }
 .bc-range-slider--size-xs .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 2.5);
@@ -16451,7 +16758,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
 }
 .bc-range-slider--size-sm .bc-range-slider__track {
-  height: calc(var(--spacing-base) * 0.75);
+  height: var(--spacing-sm);
 }
 .bc-range-slider--size-sm .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 3.5);
@@ -16477,7 +16784,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-2xl) calc(var(--spacing-base) * 2.5) var(--spacing-xl);
 }
 .bc-range-slider--size-md .bc-range-slider__track {
-  height: var(--spacing-sm);
+  height: var(--spacing-smh);
 }
 .bc-range-slider--size-md .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 4.5);
@@ -16503,7 +16810,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-3xl) var(--spacing-mdh) var(--spacing-2xl);
 }
 .bc-range-slider--size-lg .bc-range-slider__track {
-  height: var(--spacing-smh);
+  height: var(--spacing-md);
 }
 .bc-range-slider--size-lg .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 5.5);
@@ -16529,7 +16836,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-4xl) calc(var(--spacing-base) * 3.5) var(--spacing-3xl);
 }
 .bc-range-slider--size-xl .bc-range-slider__track {
-  height: var(--spacing-md);
+  height: var(--spacing-mdh);
 }
 .bc-range-slider--size-xl .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 6.5);
@@ -16550,6 +16857,36 @@ span.bc-sidebar-link {
   font-size: var(--font-size-md);
 }
 
+/* Marker size overrides per size */
+.bc-range-slider--size-xs .bc-range-slider__marker::before {
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+}
+.bc-range-slider--size-xs .bc-range-slider__marker-label {
+  font-size: var(--font-size-2xs);
+}
+.bc-range-slider--size-sm .bc-range-slider__marker::before {
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+}
+.bc-range-slider--size-sm .bc-range-slider__marker-label {
+  font-size: var(--font-size-2xs);
+}
+.bc-range-slider--size-lg .bc-range-slider__marker::before {
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
+}
+.bc-range-slider--size-lg .bc-range-slider__marker-label {
+  font-size: var(--font-size-sm);
+}
+.bc-range-slider--size-xl .bc-range-slider__marker::before {
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+}
+.bc-range-slider--size-xl .bc-range-slider__marker-label {
+  font-size: var(--font-size-md);
+}
+
 /* ── Vertical orientation ── */
 
 .bc-range-slider--vertical {
@@ -16622,6 +16959,19 @@ span.bc-sidebar-link {
   left: calc(100% + var(--spacing-sm));
 }
 
+/* Markers: vertical positioning */
+.bc-range-slider--vertical .bc-range-slider__marker {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+  flex-direction: row;
+}
+
+.bc-range-slider--vertical .bc-range-slider__marker-label {
+  top: auto;
+  left: calc(100% + var(--spacing-sm));
+}
+
 /* Vertical size variants — swap track width/height, adjust padding */
 
 /* xs vertical */
@@ -16687,6 +17037,14 @@ span.bc-sidebar-link {
   background-color: var(--rs-color-dark);
 }
 
+.dark .bc-range-slider__marker::before {
+  background-color: var(--color-gray-400);
+}
+
+.dark .bc-range-slider__marker-label {
+  color: var(--text-muted);
+}
+
 .dark .bc-range-slider__tick::before {
   background-color: var(--color-gray-500);
 }
@@ -18028,6 +18386,59 @@ th.bc-data-table__header--drag-over {
   background-color: var(--interactive-hover);
 }
 
+/* Row Details: Toggle column */
+.bc-data-table__toggle-header {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  max-width: 2.5rem;
+  padding: 0 !important;
+}
+
+.bc-table > tbody > tr > td.bc-data-table__toggle-cell {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  max-width: 2.5rem;
+  padding: 0 !important;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.bc-data-table__toggle-cell > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  transition:
+    color var(--motion-transition-fast) var(--motion-easing-standard),
+    background-color var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-data-table__toggle-cell > button:hover {
+  background-color: var(--interactive-hover);
+  color: var(--text-normal);
+}
+
+/* Row Details: Detail row */
+.bc-data-table__detail-row > td {
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.bc-data-table__detail-cell {
+  padding: 0 !important;
+}
+
+.bc-data-table__detail-cell > div {
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .bc-sortable-header,
@@ -18038,11 +18449,1536 @@ th.bc-data-table__header--drag-over {
   .bc-data-toolbar__action,
   .bc-data-toolbar__reset,
   .bc-data-table__column-toggle-btn,
-  .bc-data-table__group-toggle {
+  .bc-data-table__group-toggle,
+  .bc-data-table__toggle-cell > button {
     transition: none;
   }
 }
 
+/* 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 */