@tempots/beatui 1.2.3 → 1.3.0

package/dist/beatui.css

@@ -3184,6 +3184,228 @@ a:focus-visible {
   --card-bg: var(--bg-elevated);
 }
 
+/* Carousel Component */
+.bc-carousel {
+  --carousel-arrow-size: 36px;
+  --carousel-arrow-bg: rgba(255, 255, 255, 0.85);
+  --carousel-arrow-bg-hover: rgba(255, 255, 255, 1);
+  --carousel-arrow-color: var(--color-neutral-800, #1f2937);
+  --carousel-arrow-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  --carousel-dot-size: 8px;
+  --carousel-dot-gap: 6px;
+  --carousel-dot-color: var(--color-neutral-300, #d1d5db);
+  --carousel-dot-active-color: var(--color-primary-500, #6366f1);
+  --carousel-radius: var(--radius-lg, 12px);
+  --carousel-peek: 0px;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--carousel-radius);
+  outline: none;
+}
+
+.bc-carousel:focus-visible {
+  outline: 2px solid var(--color-primary-500, #6366f1);
+  outline-offset: 2px;
+}
+
+/* Viewport */
+.bc-carousel__viewport {
+  overflow: hidden;
+  width: 100%;
+  cursor: grab;
+}
+
+.bc-carousel--dragging .bc-carousel__viewport,
+.bc-carousel__viewport:active {
+  cursor: grabbing;
+}
+
+/* Track */
+.bc-carousel__track {
+  display: flex;
+  will-change: transform;
+  transition-property: transform;
+  transition-timing-function: var(
+    --motion-easing-standard,
+    cubic-bezier(0.2, 0, 0, 1)
+  );
+}
+
+/* Fade transition */
+.bc-carousel--fade .bc-carousel__track {
+  transition-property: none;
+}
+
+.bc-carousel--fade .bc-carousel__slide {
+  transition: opacity var(--motion-transition-slow, 0.4s)
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Slides */
+.bc-carousel__slide {
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.bc-carousel__slide img {
+  pointer-events: none;
+  -webkit-user-drag: none;
+}
+
+/* Navigation arrows */
+.bc-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--carousel-arrow-size);
+  height: var(--carousel-arrow-size);
+  border-radius: 50%;
+  border: none;
+  background: var(--carousel-arrow-bg);
+  color: var(--carousel-arrow-color);
+  box-shadow: var(--carousel-arrow-shadow);
+  cursor: pointer;
+  padding: 0;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.bc-carousel__arrow:hover:not(:disabled) {
+  background: var(--carousel-arrow-bg-hover);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  transform: translateY(-50%) scale(1.08);
+}
+
+.bc-carousel__arrow:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.96);
+}
+
+.bc-carousel__arrow .bc-icon {
+  pointer-events: none;
+}
+
+.bc-carousel__arrow--prev {
+  left: calc(var(--carousel-peek) + 8px);
+}
+
+.bc-carousel__arrow--next {
+  right: calc(var(--carousel-peek) + 8px);
+}
+
+/* Disabled arrow state */
+.bc-carousel__arrow--disabled,
+.bc-carousel__arrow:disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Dot indicators */
+.bc-carousel__dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--carousel-dot-gap);
+  padding: 10px 0;
+}
+
+.bc-carousel__dot {
+  width: var(--carousel-dot-size);
+  height: var(--carousel-dot-size);
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  background: var(--carousel-dot-color);
+  cursor: pointer;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.bc-carousel__dot:hover {
+  background: var(--color-neutral-400, #9ca3af);
+  transform: scale(1.3);
+}
+
+.bc-carousel__dot--active {
+  background: var(--carousel-dot-active-color);
+  transform: scale(1.25);
+}
+
+.bc-carousel__dot--active:hover {
+  background: var(--carousel-dot-active-color);
+}
+
+/* Progress bar indicator */
+.bc-carousel__progress {
+  height: 3px;
+  background: var(--carousel-dot-color);
+  border-radius: 2px;
+  margin: 10px 16px;
+  overflow: hidden;
+}
+
+.bc-carousel__progress-fill {
+  height: 100%;
+  background: var(--carousel-dot-active-color);
+  border-radius: 2px;
+  transition: width
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Fraction indicator */
+.bc-carousel__fraction {
+  text-align: center;
+  padding: 8px 0;
+  font-size: 0.875rem;
+  color: var(--color-neutral-500, #6b7280);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Dark mode */
+.dark .bc-carousel {
+  --carousel-arrow-bg: rgba(30, 30, 30, 0.85);
+  --carousel-arrow-bg-hover: rgba(40, 40, 40, 1);
+  --carousel-arrow-color: var(--color-neutral-200, #e5e7eb);
+  --carousel-arrow-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --carousel-dot-color: var(--color-neutral-600, #4b5563);
+  --carousel-dot-active-color: var(--color-primary-400, #818cf8);
+}
+
+.dark .bc-carousel__dot:hover {
+  background: var(--color-neutral-500, #6b7280);
+}
+
+.dark .bc-carousel__fraction {
+  color: var(--color-neutral-400, #9ca3af);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-carousel__track {
+    transition-duration: 0.01ms !important;
+  }
+
+  .bc-carousel--fade .bc-carousel__slide {
+    transition: none !important;
+  }
+
+  .bc-carousel__arrow,
+  .bc-carousel__dot,
+  .bc-carousel__progress-fill {
+    transition: none !important;
+  }
+}
+
 /* Center Component */
 .bc-center {
   display: flex;
@@ -3656,20 +3878,10 @@ a:focus-visible {
 .bc-dropdown__display {
   flex: 1;
   text-align: left;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* Arrow indicator */
-.bc-dropdown__arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-inline-start: var(--spacing-xs);
-}
-
 /* Listbox (dropdown) */
 .bc-dropdown__listbox {
   background-color: var(--color-white);
@@ -9230,14 +9442,16 @@ a:focus-visible {
   cursor: pointer;
 }
 
-.bc-multi-select__tags {
-  position: relative;
+/* Placeholder when no items selected */
+.bc-multi-select__placeholder {
+  color: var(--color-neutral-400);
 }
 
-.bc-multi-select__arrow {
-  flex-shrink: 0;
-  margin-left: auto;
-  opacity: 0.5;
+.bc-multi-select__badge-container {
+  flex-grow: 1;
+  display: flex;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
 }
 
 /* Dropdown panel */
@@ -9417,6 +9631,10 @@ a:focus-visible {
 }
 
 /* Dark mode */
+.dark .bc-multi-select__placeholder {
+  color: var(--color-neutral-500);
+}
+
 .dark .bc-multi-select__dropdown {
   background: var(--color-base-800);
   border-color: var(--color-base-600);
@@ -16013,10 +16231,10 @@ span.bc-sidebar-link {
   }
 }
 
-/* Advanced Slider Component */
-.bc-advanced-slider {
-  --slider-color: var(--color-primary-500);
-  --slider-color-dark: var(--color-primary-600);
+/* Range Slider Component */
+.bc-range-slider {
+  --rs-color: var(--color-primary-500);
+  --rs-color-dark: var(--color-primary-600);
 
   position: relative;
   display: flex;
@@ -16027,14 +16245,18 @@ span.bc-sidebar-link {
   user-select: none;
 }
 
-.bc-advanced-slider--disabled {
+.bc-range-slider--disabled {
   opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
 
+.bc-range-slider--readonly {
+  pointer-events: none;
+}
+
 /* Track */
-.bc-advanced-slider__track {
+.bc-range-slider__track {
   position: relative;
   width: 100%;
   background-color: var(--color-gray-200);
@@ -16042,17 +16264,25 @@ span.bc-sidebar-link {
 }
 
 /* Filled portion */
-.bc-advanced-slider__fill {
+.bc-range-slider__fill {
   position: absolute;
   top: 0;
   height: 100%;
-  background-color: var(--slider-color);
+  background-color: var(--rs-color);
   border-radius: var(--radius-full);
   pointer-events: none;
 }
 
-/* Thumb container (for positioning value label + thumb) */
-.bc-advanced-slider__thumb-container {
+/* Segment overrides */
+.bc-range-slider__segment {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: var(--radius-full);
+}
+
+/* Thumb container */
+.bc-range-slider__thumb-container {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -16063,9 +16293,9 @@ span.bc-sidebar-link {
 }
 
 /* Thumb */
-.bc-advanced-slider__thumb {
+.bc-range-slider__thumb {
   background-color: var(--color-white);
-  border: var(--border-width-medium) solid var(--slider-color);
+  border: var(--border-width-medium) solid var(--rs-color);
   border-radius: var(--radius-full);
   cursor: grab;
   box-shadow: var(--shadow-sm);
@@ -16074,23 +16304,23 @@ span.bc-sidebar-link {
     transform var(--motion-transition-fast) var(--motion-easing-standard);
 }
 
-.bc-advanced-slider__thumb:hover {
+.bc-range-slider__thumb:hover {
   box-shadow: var(--shadow-md);
   transform: scale(1.15);
 }
 
-.bc-advanced-slider__thumb:active {
+.bc-range-slider__thumb:active {
   cursor: grabbing;
   transform: scale(1.2);
 }
 
-.bc-advanced-slider__thumb:focus-visible {
+.bc-range-slider__thumb:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
-/* Custom thumb wrapper — no default visual styling */
-.bc-advanced-slider__thumb-custom {
+/* Custom thumb wrapper */
+.bc-range-slider__thumb-custom {
   cursor: grab;
   display: flex;
   align-items: center;
@@ -16098,20 +16328,20 @@ span.bc-sidebar-link {
   outline: none;
 }
 
-.bc-advanced-slider__thumb-custom:active {
+.bc-range-slider__thumb-custom:active {
   cursor: grabbing;
 }
 
-.bc-advanced-slider__thumb-custom:focus-visible {
+.bc-range-slider__thumb-custom:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
 /* Value label */
-.bc-advanced-slider__value-label {
+.bc-range-slider__value-label {
   position: absolute;
   white-space: nowrap;
-  background-color: var(--slider-color);
+  background-color: var(--rs-color);
   color: var(--color-white);
   border-radius: var(--radius-sm);
   font-weight: var(--font-weight-semibold);
@@ -16121,7 +16351,7 @@ span.bc-sidebar-link {
 }
 
 /* Ticks container */
-.bc-advanced-slider__ticks {
+.bc-range-slider__ticks {
   position: absolute;
   top: 0;
   left: 0;
@@ -16131,7 +16361,7 @@ span.bc-sidebar-link {
 }
 
 /* Individual tick */
-.bc-advanced-slider__tick {
+.bc-range-slider__tick {
   position: absolute;
   top: 50%;
   transform: translateX(-50%);
@@ -16140,7 +16370,7 @@ span.bc-sidebar-link {
   align-items: center;
 }
 
-.bc-advanced-slider__tick::before {
+.bc-range-slider__tick::before {
   content: '';
   display: block;
   background-color: var(--color-gray-400);
@@ -16148,7 +16378,7 @@ span.bc-sidebar-link {
 }
 
 /* Tick label */
-.bc-advanced-slider__tick-label {
+.bc-range-slider__tick-label {
   position: absolute;
   white-space: nowrap;
   color: var(--text-muted);
@@ -16157,164 +16387,283 @@ span.bc-sidebar-link {
 /* ── Size variants ── */
 
 /* xs */
-.bc-advanced-slider--size-xs {
+.bc-range-slider--size-xs {
   padding: var(--spacing-lg) var(--spacing-smh) var(--spacing-md);
 }
-.bc-advanced-slider--size-xs .bc-advanced-slider__track {
+.bc-range-slider--size-xs .bc-range-slider__track {
   height: var(--spacing-xs);
 }
-.bc-advanced-slider--size-xs .bc-advanced-slider__thumb {
+.bc-range-slider--size-xs .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 2.5);
   height: calc(var(--spacing-base) * 2.5);
 }
-.bc-advanced-slider--size-xs .bc-advanced-slider__value-label {
+.bc-range-slider--size-xs .bc-range-slider__value-label {
   font-size: var(--font-size-2xs);
   padding: var(--spacing-px) var(--spacing-sm);
   bottom: calc(100% + var(--spacing-sm));
 }
-.bc-advanced-slider--size-xs .bc-advanced-slider__tick::before {
+.bc-range-slider--size-xs .bc-range-slider__tick::before {
   width: var(--spacing-px);
   height: var(--spacing-smh);
   margin-top: var(--spacing-sm);
 }
-.bc-advanced-slider--size-xs .bc-advanced-slider__tick-label {
+.bc-range-slider--size-xs .bc-range-slider__tick-label {
   top: calc(var(--spacing-base) * 2.5);
   font-size: var(--font-size-2xs);
 }
 
 /* sm */
-.bc-advanced-slider--size-sm {
+.bc-range-slider--size-sm {
   padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
 }
-.bc-advanced-slider--size-sm .bc-advanced-slider__track {
+.bc-range-slider--size-sm .bc-range-slider__track {
   height: calc(var(--spacing-base) * 0.75);
 }
-.bc-advanced-slider--size-sm .bc-advanced-slider__thumb {
+.bc-range-slider--size-sm .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 3.5);
   height: calc(var(--spacing-base) * 3.5);
 }
-.bc-advanced-slider--size-sm .bc-advanced-slider__value-label {
+.bc-range-slider--size-sm .bc-range-slider__value-label {
   font-size: var(--font-size-xs);
   padding: var(--spacing-xs) calc(var(--spacing-base) * 1.25);
   bottom: calc(100% + calc(var(--spacing-base) * 1.25));
 }
-.bc-advanced-slider--size-sm .bc-advanced-slider__tick::before {
+.bc-range-slider--size-sm .bc-range-slider__tick::before {
   width: var(--spacing-px);
   height: var(--spacing-md);
   margin-top: calc(var(--spacing-base) * 1.25);
 }
-.bc-advanced-slider--size-sm .bc-advanced-slider__tick-label {
+.bc-range-slider--size-sm .bc-range-slider__tick-label {
   top: calc(var(--spacing-base) * 3.5);
   font-size: var(--font-size-2xs);
 }
 
 /* md (default) */
-.bc-advanced-slider--size-md {
+.bc-range-slider--size-md {
   padding: var(--spacing-2xl) calc(var(--spacing-base) * 2.5) var(--spacing-xl);
 }
-.bc-advanced-slider--size-md .bc-advanced-slider__track {
+.bc-range-slider--size-md .bc-range-slider__track {
   height: var(--spacing-sm);
 }
-.bc-advanced-slider--size-md .bc-advanced-slider__thumb {
+.bc-range-slider--size-md .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 4.5);
   height: calc(var(--spacing-base) * 4.5);
 }
-.bc-advanced-slider--size-md .bc-advanced-slider__value-label {
+.bc-range-slider--size-md .bc-range-slider__value-label {
   font-size: var(--font-size-sm);
   padding: var(--spacing-xs) var(--spacing-smh);
   bottom: calc(100% + var(--spacing-smh));
 }
-.bc-advanced-slider--size-md .bc-advanced-slider__tick::before {
+.bc-range-slider--size-md .bc-range-slider__tick::before {
   width: var(--spacing-xs);
   height: calc(var(--spacing-base) * 2.5);
   margin-top: var(--spacing-smh);
 }
-.bc-advanced-slider--size-md .bc-advanced-slider__tick-label {
+.bc-range-slider--size-md .bc-range-slider__tick-label {
   top: calc(var(--spacing-base) * 4.5);
   font-size: var(--font-size-xs);
 }
 
 /* lg */
-.bc-advanced-slider--size-lg {
+.bc-range-slider--size-lg {
   padding: var(--spacing-3xl) var(--spacing-mdh) var(--spacing-2xl);
 }
-.bc-advanced-slider--size-lg .bc-advanced-slider__track {
+.bc-range-slider--size-lg .bc-range-slider__track {
   height: var(--spacing-smh);
 }
-.bc-advanced-slider--size-lg .bc-advanced-slider__thumb {
+.bc-range-slider--size-lg .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 5.5);
   height: calc(var(--spacing-base) * 5.5);
 }
-.bc-advanced-slider--size-lg .bc-advanced-slider__value-label {
+.bc-range-slider--size-lg .bc-range-slider__value-label {
   font-size: var(--font-size-md);
   padding: calc(var(--spacing-base) * 0.75) var(--spacing-md);
   bottom: calc(100% + var(--spacing-md));
 }
-.bc-advanced-slider--size-lg .bc-advanced-slider__tick::before {
+.bc-range-slider--size-lg .bc-range-slider__tick::before {
   width: var(--spacing-xs);
   height: var(--spacing-mdh);
   margin-top: var(--spacing-md);
 }
-.bc-advanced-slider--size-lg .bc-advanced-slider__tick-label {
+.bc-range-slider--size-lg .bc-range-slider__tick-label {
   top: calc(var(--spacing-base) * 5.5);
   font-size: var(--font-size-sm);
 }
 
 /* xl */
-.bc-advanced-slider--size-xl {
+.bc-range-slider--size-xl {
   padding: var(--spacing-4xl) calc(var(--spacing-base) * 3.5) var(--spacing-3xl);
 }
-.bc-advanced-slider--size-xl .bc-advanced-slider__track {
+.bc-range-slider--size-xl .bc-range-slider__track {
   height: var(--spacing-md);
 }
-.bc-advanced-slider--size-xl .bc-advanced-slider__thumb {
+.bc-range-slider--size-xl .bc-range-slider__thumb {
   width: calc(var(--spacing-base) * 6.5);
   height: calc(var(--spacing-base) * 6.5);
 }
-.bc-advanced-slider--size-xl .bc-advanced-slider__value-label {
+.bc-range-slider--size-xl .bc-range-slider__value-label {
   font-size: var(--font-size-lg);
   padding: var(--spacing-sm) calc(var(--spacing-base) * 2.5);
   bottom: calc(100% + calc(var(--spacing-base) * 2.5));
 }
-.bc-advanced-slider--size-xl .bc-advanced-slider__tick::before {
+.bc-range-slider--size-xl .bc-range-slider__tick::before {
   width: var(--spacing-xs);
   height: calc(var(--spacing-base) * 3.5);
   margin-top: calc(var(--spacing-base) * 2.5);
 }
-.bc-advanced-slider--size-xl .bc-advanced-slider__tick-label {
+.bc-range-slider--size-xl .bc-range-slider__tick-label {
   top: calc(var(--spacing-base) * 6.5);
   font-size: var(--font-size-md);
 }
 
+/* ── Vertical orientation ── */
+
+.bc-range-slider--vertical {
+  width: auto;
+  height: 100%;
+  min-height: 120px;
+  touch-action: none;
+}
+
+.bc-range-slider--vertical .bc-range-slider__track {
+  width: auto;
+  flex: 1;
+  min-height: 60px;
+}
+
+/* Fill: runs from bottom upward */
+.bc-range-slider--vertical .bc-range-slider__fill {
+  left: 0;
+  width: 100%;
+  top: auto;
+  bottom: 0;
+  height: auto;
+}
+
+/* Segments: vertical positioning, override horizontal transform */
+.bc-range-slider--vertical .bc-range-slider__segment {
+  left: 0;
+  width: 100%;
+  top: auto;
+  transform: none;
+}
+
+/* Thumb container: centered horizontally, positioned via bottom */
+.bc-range-slider--vertical .bc-range-slider__thumb-container {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}
+
+/* Value label: to the right of thumb in vertical mode */
+.bc-range-slider--vertical .bc-range-slider__value-label {
+  bottom: auto;
+  left: calc(100% + var(--spacing-sm));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Ticks: full height */
+.bc-range-slider--vertical .bc-range-slider__ticks {
+  width: 100%;
+  height: 100%;
+}
+
+/* Tick: positioned via bottom, centered vertically */
+.bc-range-slider--vertical .bc-range-slider__tick {
+  left: 50%;
+  top: auto;
+  transform: translateY(50%);
+  flex-direction: row;
+}
+
+.bc-range-slider--vertical .bc-range-slider__tick::before {
+  margin-top: 0;
+  margin-left: var(--spacing-sm);
+}
+
+/* Tick label: to the right in vertical mode */
+.bc-range-slider--vertical .bc-range-slider__tick-label {
+  top: auto;
+  left: calc(100% + var(--spacing-sm));
+}
+
+/* Vertical size variants — swap track width/height, adjust padding */
+
+/* xs vertical */
+.bc-range-slider--vertical.bc-range-slider--size-xs {
+  padding: var(--spacing-smh) var(--spacing-lg) var(--spacing-smh)
+    var(--spacing-md);
+}
+.bc-range-slider--vertical.bc-range-slider--size-xs .bc-range-slider__track {
+  width: var(--spacing-xs);
+}
+
+/* sm vertical */
+.bc-range-slider--vertical.bc-range-slider--size-sm {
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg)
+    var(--spacing-lg);
+}
+.bc-range-slider--vertical.bc-range-slider--size-sm .bc-range-slider__track {
+  width: calc(var(--spacing-base) * 0.75);
+}
+
+/* md vertical */
+.bc-range-slider--vertical.bc-range-slider--size-md {
+  padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-xl)
+    calc(var(--spacing-base) * 2.5);
+}
+.bc-range-slider--vertical.bc-range-slider--size-md .bc-range-slider__track {
+  width: var(--spacing-sm);
+}
+
+/* lg vertical */
+.bc-range-slider--vertical.bc-range-slider--size-lg {
+  padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-2xl)
+    var(--spacing-mdh);
+}
+.bc-range-slider--vertical.bc-range-slider--size-lg .bc-range-slider__track {
+  width: var(--spacing-smh);
+}
+
+/* xl vertical */
+.bc-range-slider--vertical.bc-range-slider--size-xl {
+  padding: var(--spacing-3xl) var(--spacing-4xl) var(--spacing-3xl)
+    calc(var(--spacing-base) * 3.5);
+}
+.bc-range-slider--vertical.bc-range-slider--size-xl .bc-range-slider__track {
+  width: var(--spacing-md);
+}
+
 /* Dark mode */
-.dark .bc-advanced-slider__track {
+.dark .bc-range-slider__track {
   background-color: var(--bg-subtle);
 }
 
-.dark .bc-advanced-slider__fill {
-  background-color: var(--slider-color-dark);
+.dark .bc-range-slider__fill {
+  background-color: var(--rs-color-dark);
 }
 
-.dark .bc-advanced-slider__thumb {
+.dark .bc-range-slider__thumb {
   background-color: var(--text-normal);
-  border-color: var(--slider-color-dark);
+  border-color: var(--rs-color-dark);
 }
 
-.dark .bc-advanced-slider__value-label {
-  background-color: var(--slider-color-dark);
+.dark .bc-range-slider__value-label {
+  background-color: var(--rs-color-dark);
 }
 
-.dark .bc-advanced-slider__tick::before {
+.dark .bc-range-slider__tick::before {
   background-color: var(--color-gray-500);
 }
 
-.dark .bc-advanced-slider__tick-label {
+.dark .bc-range-slider__tick-label {
   color: var(--text-muted);
 }
 
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .bc-advanced-slider__thumb {
+  .bc-range-slider__thumb {
     transition: none;
   }
 }
@@ -16686,6 +17035,341 @@ span.bc-sidebar-link {
   color: var(--text-muted);
 }
 
+/* NavigationProgress Component - Top/bottom viewport progress bar for navigation/loading */
+
+.bc-navigation-progress {
+  --nav-progress-fill: var(--color-primary-500);
+  --nav-progress-fill-dark: var(--color-primary-600);
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 3px;
+  z-index: var(--z-index-maximum, 1000);
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.bc-navigation-progress--top {
+  top: 0;
+}
+
+.bc-navigation-progress--bottom {
+  bottom: 0;
+}
+
+/* Progress bar fill */
+.bc-navigation-progress__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nav-progress-fill);
+  will-change: transform;
+}
+
+.bc-navigation-progress__bar--done {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+/* Peg - the glowing leading edge */
+.bc-navigation-progress__peg {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px var(--nav-progress-fill),
+    0 0 5px var(--nav-progress-fill);
+  opacity: 1;
+  transform: rotate(3deg) translateY(-4px);
+}
+
+/* Spinner */
+.bc-navigation-progress__spinner {
+  position: fixed;
+  top: 15px;
+  right: 15px;
+  z-index: calc(var(--z-index-maximum, 1000) + 1);
+  pointer-events: none;
+}
+
+.bc-navigation-progress__spinner--bottom {
+  top: auto;
+  bottom: 15px;
+}
+
+.bc-navigation-progress__spinner-icon {
+  width: 18px;
+  height: 18px;
+  border: 2px solid transparent;
+  border-top-color: var(--nav-progress-fill);
+  border-left-color: var(--nav-progress-fill);
+  border-radius: 50%;
+  animation: bc-nav-progress-spin 0.4s linear infinite;
+}
+
+@keyframes bc-nav-progress-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Dark mode */
+.dark .bc-navigation-progress__bar {
+  background-color: var(--nav-progress-fill-dark);
+}
+
+.dark .bc-navigation-progress__peg {
+  box-shadow:
+    0 0 10px var(--nav-progress-fill-dark),
+    0 0 5px var(--nav-progress-fill-dark);
+}
+
+.dark .bc-navigation-progress__spinner-icon {
+  border-top-color: var(--nav-progress-fill-dark);
+  border-left-color: var(--nav-progress-fill-dark);
+}
+
+/* Accessibility: respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .bc-navigation-progress__bar {
+    transition: none !important;
+  }
+
+  .bc-navigation-progress__bar--done {
+    transition: none;
+  }
+
+  .bc-navigation-progress__spinner-icon {
+    animation: none;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .bc-navigation-progress__bar {
+    outline: var(--outline-width-default, 2px) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-default, 2px));
+  }
+}
+
+/* OnboardingTour Component - Step-by-step guided tour with spotlight overlay */
+
+.bc-onboarding-tour {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-modal, 600);
+  pointer-events: none;
+  transition: opacity 0.2s
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* SVG backdrop with spotlight cutout */
+.bc-onboarding-tour__backdrop {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: all;
+  cursor: default;
+}
+
+.bc-onboarding-tour__backdrop--interactive {
+  pointer-events: none;
+}
+
+.bc-onboarding-tour__mask {
+  fill: rgba(0, 0, 0, 0.5);
+  transition: d 0.3s var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Tooltip */
+.bc-onboarding-tour__tooltip {
+  position: fixed;
+  width: 320px;
+  max-width: calc(100vw - 16px);
+  background-color: var(--bg-surface, #fff);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(
+    --shadow-xl,
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1)
+  );
+  pointer-events: all;
+  z-index: 1;
+  transition:
+    top 0.3s var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+    left 0.3s var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Arrow indicator */
+.bc-onboarding-tour__arrow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: var(--bg-surface, #fff);
+  transform: rotate(45deg);
+}
+
+.bc-onboarding-tour__tooltip--top .bc-onboarding-tour__arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.bc-onboarding-tour__tooltip--bottom .bc-onboarding-tour__arrow {
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.bc-onboarding-tour__tooltip--left .bc-onboarding-tour__arrow {
+  right: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+
+.bc-onboarding-tour__tooltip--right .bc-onboarding-tour__arrow {
+  left: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+
+/* Content area */
+.bc-onboarding-tour__content {
+  padding: var(--spacing-lg, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 8px);
+}
+
+/* Step indicator */
+.bc-onboarding-tour__step-indicator {
+  font-family: var(
+    --font-family-default-ui,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
+  font-size: var(--font-size-xs, 12px);
+  color: var(--text-muted, #6b7280);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Title */
+.bc-onboarding-tour__title {
+  font-family: var(
+    --font-family-default-ui,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
+  font-size: var(--font-size-lg, 18px);
+  font-weight: 600;
+  color: var(--text-default, #111827);
+  margin: 0;
+  line-height: var(--line-height-tight, 1.25);
+}
+
+/* Description */
+.bc-onboarding-tour__description {
+  font-family: var(
+    --font-family-default-ui,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
+  font-size: var(--font-size-sm, 14px);
+  color: var(--text-muted, #6b7280);
+  margin: 0;
+  line-height: var(--line-height-normal, 1.5);
+}
+
+/* Body (custom content) */
+.bc-onboarding-tour__body {
+  font-size: var(--font-size-sm, 14px);
+  color: var(--text-default, #111827);
+}
+
+/* Navigation */
+.bc-onboarding-tour__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--spacing-sm, 8px);
+}
+
+.bc-onboarding-tour__nav-left {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+}
+
+.bc-onboarding-tour__nav-right {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+}
+
+/* Dark mode */
+.dark .bc-onboarding-tour__mask {
+  fill: rgba(0, 0, 0, 0.7);
+}
+
+.dark .bc-onboarding-tour__tooltip {
+  background-color: var(--bg-surface-dark, #1f2937);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.3),
+    0 8px 10px -6px rgba(0, 0, 0, 0.3);
+}
+
+.dark .bc-onboarding-tour__arrow {
+  background-color: var(--bg-surface-dark, #1f2937);
+}
+
+.dark .bc-onboarding-tour__title {
+  color: var(--text-default-dark, #f9fafb);
+}
+
+.dark .bc-onboarding-tour__description {
+  color: var(--text-muted-dark, #9ca3af);
+}
+
+.dark .bc-onboarding-tour__step-indicator {
+  color: var(--text-muted-dark, #9ca3af);
+}
+
+.dark .bc-onboarding-tour__body {
+  color: var(--text-default-dark, #f9fafb);
+}
+
+/* Accessibility: respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .bc-onboarding-tour {
+    transition: none;
+  }
+
+  .bc-onboarding-tour__mask {
+    transition: none;
+  }
+
+  .bc-onboarding-tour__tooltip {
+    transition: none;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .bc-onboarding-tour__tooltip {
+    outline: var(--outline-width-default, 2px) solid currentColor;
+  }
+
+  .bc-onboarding-tour__mask {
+    fill: rgba(0, 0, 0, 0.8);
+  }
+}
+
 /* Sortable Header */
 .bc-sortable-header {
   cursor: pointer;