@tempots/beatui 0.95.0 → 1.0.1

package/dist/beatui.css

@@ -402,15 +402,15 @@ ol {
   --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
   --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
   --z-index-base: 0;
-  --z-index-raised: 10;
-  --z-index-navigation: 20;
-  --z-index-sidebar: 20;
-  --z-index-overlay: 50;
-  --z-index-modal: 60;
-  --z-index-tooltip: 70;
-  --z-index-popover: 80;
-  --z-index-notification: 90;
-  --z-index-maximum: 100;
+  --z-index-raised: 100;
+  --z-index-navigation: 200;
+  --z-index-sidebar: 200;
+  --z-index-overlay: 500;
+  --z-index-modal: 600;
+  --z-index-tooltip: 700;
+  --z-index-popover: 800;
+  --z-index-notification: 900;
+  --z-index-maximum: 1000;
   --border-width-none: 0;
   --border-width-thin: 1px;
   --border-width-default: 1.5px;
@@ -1227,17 +1227,17 @@ a:focus-visible {
     gap: var(--spacing-xs);
   }
 
-  /* Title */
+  /* Title — fixed font size across all sizes */
   .bc-action-card__title {
-    font-size: var(--font-size-lg);
+    font-size: var(--font-size-md);
     font-weight: var(--font-weight-semibold);
     color: var(--action-card-title-color);
     line-height: var(--line-height-tight);
   }
 
-  /* Description */
+  /* Description — fixed font size across all sizes */
   .bc-action-card__description {
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-sm);
     font-weight: var(--font-weight-normal);
     color: var(--action-card-description-color);
     line-height: var(--line-height-normal);
@@ -1283,59 +1283,27 @@ a:focus-visible {
     pointer-events: none;
   }
 
-  /* Size variants */
+  /* Size variants — padding and gap only */
   .bc-action-card--xs {
     padding: var(--spacing-xs);
     gap: var(--spacing-xs);
   }
 
-  .bc-action-card--xs .bc-action-card__title {
-    font-size: var(--font-size-sm);
-  }
-
-  .bc-action-card--xs .bc-action-card__description {
-    font-size: var(--font-size-xs);
-  }
-
   .bc-action-card--sm {
     padding: var(--spacing-sm);
     gap: var(--spacing-sm);
   }
 
-  .bc-action-card--sm .bc-action-card__title {
-    font-size: var(--font-size-md);
-  }
-
-  .bc-action-card--sm .bc-action-card__description {
-    font-size: var(--font-size-sm);
-  }
-
   .bc-action-card--lg {
-    padding: var(--spacing-xl);
+    padding: var(--spacing-lg);
     gap: var(--spacing-lg);
   }
 
-  .bc-action-card--lg .bc-action-card__title {
-    font-size: var(--font-size-xl);
-  }
-
-  .bc-action-card--lg .bc-action-card__description {
-    font-size: var(--font-size-lg);
-  }
-
   .bc-action-card--xl {
-    padding: var(--spacing-2xl);
+    padding: var(--spacing-xl);
     gap: var(--spacing-xl);
   }
 
-  .bc-action-card--xl .bc-action-card__title {
-    font-size: var(--font-size-2xl);
-  }
-
-  .bc-action-card--xl .bc-action-card__description {
-    font-size: var(--font-size-xl);
-  }
-
   /* Focus styles for accessibility */
   .bc-action-card--clickable:focus-visible {
     outline: var(--outline-width-focus) solid var(--color-primary-500);
@@ -2378,8 +2346,8 @@ a:focus-visible {
 
 /* Bordered variant */
 .bc-avatar--bordered {
-  border: var(--border-width-medium) solid var(--color-white);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border: var(--border-width-medium) solid
+    var(--avatar-border-color, var(--color-white));
 }
 
 /* Avatar Group */
@@ -2389,6 +2357,43 @@ a:focus-visible {
   flex-direction: row;
 }
 
+/* Group size cascades to child avatars */
+.bc-avatar-group--size-xs > .bc-avatar {
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
+  font-size: var(--font-size-xs);
+}
+
+.bc-avatar-group--size-sm > .bc-avatar {
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
+  font-size: var(--font-size-sm);
+}
+
+.bc-avatar-group--size-md > .bc-avatar {
+  width: var(--spacing-2xlh);
+  height: var(--spacing-2xlh);
+  font-size: var(--font-size-md);
+}
+
+.bc-avatar-group--size-lg > .bc-avatar {
+  width: var(--spacing-3xl);
+  height: var(--spacing-3xl);
+  font-size: var(--font-size-lg);
+}
+
+.bc-avatar-group--size-xl > .bc-avatar {
+  width: var(--spacing-4xl);
+  height: var(--spacing-4xl);
+  font-size: var(--font-size-xl);
+}
+
+.bc-avatar-group--size-2xl > .bc-avatar {
+  width: calc(var(--spacing-base) * 24);
+  height: calc(var(--spacing-base) * 24);
+  font-size: var(--font-size-2xl);
+}
+
 /* Tight spacing - avatars overlap */
 .bc-avatar-group--spacing-tight {
   gap: 0;
@@ -2422,8 +2427,10 @@ a:focus-visible {
 }
 
 .dark .bc-avatar--bordered {
-  border-color: var(--bg-background-dark, var(--color-base-950));
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border-color: var(
+    --avatar-border-color-dark,
+    var(--bg-background-dark, var(--color-base-950))
+  );
 }
 
 .dark .bc-avatar-group--spacing-tight > .bc-avatar,
@@ -2465,6 +2472,7 @@ a:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--badge-gap, var(--control-gap-md));
   border: var(--border-width-default) solid var(--badge-border);
   font-family: var(
     --font-family-default-ui,
@@ -2563,49 +2571,40 @@ a:focus-visible {
   width: 100%;
 }
 
-/* Dot variant - small colored circle indicator */
-.bc-badge--dot {
-  width: var(--spacing-md);
-  height: var(--spacing-md);
-  min-width: var(--spacing-md);
-  padding: 0;
-  border-radius: 50%;
-  border: none;
-}
-
-.bc-badge--dot .bc-badge__content {
-  display: none;
-}
-
-/* Dot variant size adjustments */
-.bc-badge--dot.bc-badge--size-xs {
-  width: var(--spacing-smh);
-  height: var(--spacing-smh);
-  min-width: var(--spacing-smh);
+/* Close button — lightweight inline × */
+.bc-badge__close {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: inherit;
+  line-height: var(--line-height-none);
+  opacity: 0.5;
+  transition: opacity var(--motion-transition-fast)
+    var(--motion-easing-standard);
 }
 
-.bc-badge--dot.bc-badge--size-sm {
-  width: var(--spacing-md);
-  height: var(--spacing-md);
-  min-width: var(--spacing-md);
+.bc-badge__close:hover {
+  opacity: 1;
 }
 
-.bc-badge--dot.bc-badge--size-md {
-  width: calc(var(--spacing-base) * 2.5);
-  height: calc(var(--spacing-base) * 2.5);
-  min-width: calc(var(--spacing-base) * 2.5);
+/* Disabled state */
+.bc-badge.bc-badge--disabled {
+  opacity: 0.55;
+  filter: grayscale(0.4) saturate(0.8);
+  cursor: default;
 }
 
-.bc-badge--dot.bc-badge--size-lg {
-  width: var(--spacing-mdh);
-  height: var(--spacing-mdh);
-  min-width: var(--spacing-mdh);
+.bc-badge.bc-badge--disabled .bc-badge__close {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
 }
 
-.bc-badge--dot.bc-badge--size-xl {
-  width: calc(var(--spacing-base) * 3.5);
-  height: calc(var(--spacing-base) * 3.5);
-  min-width: calc(var(--spacing-base) * 3.5);
+.bc-badge.bc-badge--disabled .bc-badge__close:hover {
+  color: inherit;
+  border-color: transparent;
 }
 
 /* Dark mode styles */
@@ -2620,6 +2619,10 @@ a:focus-visible {
   color: var(--badge-text-hover-dark);
 }
 
+.dark .bc-badge__close {
+  color: var(--badge-text-dark);
+}
+
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-badge {
@@ -3047,7 +3050,7 @@ a:focus-visible {
   flex-direction: column;
   border-radius: var(--radius-surface, var(--radius-lg));
   border: var(--border-width-thin) solid var(--card-border);
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
   box-shadow: var(--shadow-surface, var(--shadow-md));
   background-color: var(--card-bg);
   color: var(--card-text);
@@ -3117,6 +3120,68 @@ a:focus-visible {
   border-radius: var(--radius-full);
 }
 
+/* Remove Card padding when structured sub-components are used */
+.bc-card:has(
+  > .bc-card__header,
+  > .bc-card__body,
+  > .bc-card__footer,
+  > .bc-card__cover-image
+) {
+  padding: 0;
+}
+
+/* Card sections */
+.bc-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border-bottom: var(--border-width-thin) solid var(--card-border);
+  background-color: var(
+    --bg-surface-secondary,
+    color-mix(in srgb, var(--card-bg) 90%, var(--card-text) 10%)
+  );
+  flex-shrink: 0;
+}
+
+.bc-card__body {
+  flex: 1;
+  padding: var(--spacing-md);
+}
+
+.bc-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border-top: var(--border-width-thin) solid var(--card-border);
+  background-color: var(
+    --bg-surface-secondary,
+    color-mix(in srgb, var(--card-bg) 90%, var(--card-text) 10%)
+  );
+  flex-shrink: 0;
+  justify-content: flex-end;
+}
+
+/* Cover image */
+.bc-card__cover-image {
+  width: 100%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.bc-card__cover-image:first-child {
+  border-radius: inherit;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.bc-card__cover-image:last-child {
+  border-radius: inherit;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 /* Dark mode styles */
 .dark .bc-card--elevated {
   --card-bg: var(--bg-elevated);
@@ -3201,6 +3266,10 @@ a:focus-visible {
   color: var(--checkbox-checked-color);
 }
 
+.bc-checkbox-input__checkbox--indeterminate {
+  color: var(--checkbox-checked-color);
+}
+
 .bc-checkbox-input__checkbox--unchecked {
   color: var(--color-base-400);
 }
@@ -3231,6 +3300,10 @@ a:focus-visible {
   color: var(--color-primary-400);
 }
 
+.dark .bc-checkbox-input__checkbox--indeterminate {
+  color: var(--color-primary-400);
+}
+
 .dark .bc-checkbox-input__checkbox--unchecked {
   color: var(--color-base-500);
 }
@@ -3284,7 +3357,10 @@ a:focus-visible {
 
 .bc-color-swatch-input__control {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
   border-radius: var(--radius-control, var(--radius-md));
   overflow: visible;
   cursor: pointer;
@@ -3399,13 +3475,6 @@ a:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-danger-400);
 }
 
-/* Responsive styles */
-@media (width >= 40rem) {
-  .bc-color-swatch-input__control {
-    width: calc(var(--spacing-base) * 11);
-    height: calc(var(--spacing-base) * 9);
-  }
-}
 
 .bc-command-palette {
   display: flex;
@@ -3569,7 +3638,6 @@ a:focus-visible {
 
 .bc-dropdown__trigger {
   width: 100%;
-  height: calc(var(--spacing-base) * 4.75);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3590,11 +3658,8 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--spacing-xl);
-  height: var(--spacing-xl);
   flex-shrink: 0;
-  margin-inline-start: var(--spacing-sm);
-  margin-inline-end: calc(var(--spacing-base) * -1.25);
+  margin-inline-start: var(--spacing-xs);
 }
 
 /* Listbox (dropdown) */
@@ -4553,6 +4618,7 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: inherit;
   transition: background-color
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
@@ -4570,6 +4636,12 @@ a:focus-visible {
   background-color: var(--color-gray-200);
 }
 
+/* Scale icon to match text size */
+.bc-editable-text__edit-button .bc-icon {
+  width: 1em;
+  height: 1em;
+}
+
 /* Dark mode styles */
 .dark .bc-editable-text {
   border-bottom-color: var(--border-default);
@@ -5530,19 +5602,19 @@ a:focus-visible {
 }
 
 .bc-group--gap-1 {
-  gap: var(--spacing-stack-xs, var(--spacing-sm));
+  gap: var(--spacing-xs);
 }
 
 .bc-group--gap-2 {
-  gap: var(--spacing-stack-sm, var(--spacing-md));
+  gap: var(--spacing-sm);
 }
 
 .bc-group--gap-4 {
-  gap: var(--spacing-stack-lg, var(--spacing-lg));
+  gap: var(--spacing-lg);
 }
 
 .bc-group--gap-md {
-  gap: var(--spacing-stack-md, var(--spacing-mdh));
+  gap: var(--spacing-md);
 }
 
 .bc-group--grow {
@@ -5723,7 +5795,7 @@ a:focus-visible {
 }
 
 .dark .bc-history-timeline__filter--active {
-  background: rgba(37, 99, 235, 0.15);
+  background: color-mix(in srgb, var(--color-primary-600) 15%, transparent);
   border-color: var(--color-primary-600);
   color: var(--color-primary-300);
 }
@@ -5762,18 +5834,18 @@ a:focus-visible {
 }
 
 .bc-icon--xs {
-  width: var(--spacing-mdh);
-  height: var(--spacing-mdh);
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
 }
 
 .bc-icon--sm {
-  width: var(--spacing-lg);
-  height: var(--spacing-lg);
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
 }
 
 .bc-icon--md {
-  width: calc(var(--spacing-base) * 4.8);
-  height: calc(var(--spacing-base) * 4.8);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
 }
 
 .bc-icon--lg {
@@ -5786,16 +5858,120 @@ a:focus-visible {
   height: var(--spacing-3xl);
 }
 
-.bc-icon-badge {
+/* Indicator Component */
+.bc-indicator {
   position: relative;
   display: inline-flex;
 }
 
-.bc-icon-badge__indicator {
+.bc-indicator__badge {
   position: absolute;
-  top: calc(var(--spacing-base) * -1);
-  right: calc(var(--spacing-base) * -1);
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-family: var(
+    --font-family-default-ui,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-none);
+  white-space: nowrap;
+  background-color: var(--indicator-bg);
+  color: var(--indicator-text);
+}
+
+/* Placement variants */
+.bc-indicator--top-right {
+  top: 0;
+  right: 0;
+  transform: translate(40%, -40%);
+}
+
+.bc-indicator--top-left {
+  top: 0;
+  left: 0;
+  transform: translate(-40%, -40%);
+}
+
+.bc-indicator--bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: translate(40%, 40%);
+}
+
+.bc-indicator--bottom-left {
+  bottom: 0;
+  left: 0;
+  transform: translate(-40%, 40%);
+}
+
+/* Dot variant — small circle with no text */
+.bc-indicator--dot.bc-indicator--size-xs {
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
+}
+
+.bc-indicator--dot.bc-indicator--size-sm {
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+}
+
+.bc-indicator--dot.bc-indicator--size-md {
+  width: calc(var(--spacing-base) * 2.5);
+  height: calc(var(--spacing-base) * 2.5);
+}
+
+.bc-indicator--dot.bc-indicator--size-lg {
+  width: var(--spacing-mdh);
+  height: var(--spacing-mdh);
+}
+
+.bc-indicator--dot.bc-indicator--size-xl {
+  width: calc(var(--spacing-base) * 3.5);
+  height: calc(var(--spacing-base) * 3.5);
+}
+
+/* Count variant — pill badge with text */
+.bc-indicator--count {
+  min-width: 1.25em;
+  height: 1.25em;
+  padding: 0 0.35em;
+  border-radius: 999px;
+}
+
+.bc-indicator--count.bc-indicator--size-xs {
+  font-size: var(--font-size-xs);
+}
+
+.bc-indicator--count.bc-indicator--size-sm {
+  font-size: var(--font-size-xs);
+}
+
+.bc-indicator--count.bc-indicator--size-md {
+  font-size: var(--font-size-sm);
+}
+
+.bc-indicator--count.bc-indicator--size-lg {
+  font-size: var(--font-size-md);
+}
+
+.bc-indicator--count.bc-indicator--size-xl {
+  font-size: var(--font-size-lg);
+}
+
+/* Dark mode */
+.dark .bc-indicator__badge {
+  background-color: var(--indicator-bg-dark);
+  color: var(--indicator-text-dark);
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .bc-indicator__badge {
+    transition: none;
+  }
 }
 
 /* Input Adornment Component */
@@ -5954,8 +6130,6 @@ a:focus-visible {
   flex-direction: row;
   align-items: center;
   min-width: 0;
-  /* Horizontal padding only; vertical padding comes from size classes */
-  padding-inline: var(--spacing-lg);
 }
 
 .bc-input-container__input--grow {
@@ -5973,6 +6147,7 @@ a:focus-visible {
   outline: none;
   font: inherit;
   color: inherit;
+  line-height: 1.1;
 }
 
 /* Normalize native element heights for consistent input container sizing */
@@ -5983,7 +6158,12 @@ a:focus-visible {
   line-height: var(--line-height-none);
 }
 
-/* Password toggle button */
+.bc-input-container textarea {
+  resize: vertical;
+  line-height: var(--line-height-normal);
+}
+
+/* Password toggle button */
 .bc-input-container__password-toggle {
   font-size: var(--font-size-sm);
   fill: var(--color-neutral-400);
@@ -6036,6 +6216,20 @@ a:focus-visible {
   align-items: center;
 }
 
+/* Tags selector (dropdown trigger area in select-tags) */
+.bc-input-container__tags-selector {
+  flex-grow: 1;
+  background-color: transparent;
+  min-width: 100px;
+  min-height: var(--spacing-lg);
+  align-self: stretch;
+  justify-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-stack-sm, var(--spacing-md));
+}
+
 /* Tags input text field */
 .bc-input-container .bc-input-container__tags-input {
   min-width: 8rem;
@@ -9670,6 +9864,8 @@ a:focus-visible {
   overflow: hidden;
   width: 100%;
   height: 100%;
+  outline: none;
+  touch-action: none;
 }
 
 .bc-nine-slice-pane-container {
@@ -9677,18 +9873,27 @@ a:focus-visible {
   overflow: hidden;
   top: 0;
   left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .bc-nine-slice-pane {
   position: absolute;
   overflow: visible;
 }
+
+.bc-nine-slice-pane-content {
+  will-change: transform;
+}
+
+/* Z-index layering: corners > sidebars > header/footer > body */
 .bc-nine-slice-top-start {
   z-index: 60;
 }
 
 .bc-nine-slice-header {
   z-index: 20;
+  overflow: hidden;
 }
 
 .bc-nine-slice-top-end {
@@ -9697,14 +9902,17 @@ a:focus-visible {
 
 .bc-nine-slice-sidebar-start {
   z-index: 30;
+  overflow: hidden;
 }
 
 .bc-nine-slice-body {
   z-index: 10;
+  overflow: hidden;
 }
 
 .bc-nine-slice-sidebar-end {
   z-index: 40;
+  overflow: hidden;
 }
 
 .bc-nine-slice-bottom-start {
@@ -9713,12 +9921,94 @@ a:focus-visible {
 
 .bc-nine-slice-footer {
   z-index: 50;
+  overflow: hidden;
 }
 
 .bc-nine-slice-bottom-end {
   z-index: 90;
 }
 
+/* Scrollbar shared */
+.bc-nine-slice-scrollbar {
+  position: absolute;
+  z-index: 100;
+}
+
+.bc-nine-slice-scrollbar-track {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-base-200);
+  border-radius: 8px;
+}
+
+.bc-nine-slice-scrollbar-thumb {
+  position: absolute;
+  border-radius: 8px;
+  background-color: var(--color-base-400);
+  cursor: grab;
+  transition: background-color 150ms ease;
+}
+
+.bc-nine-slice-scrollbar-thumb:hover {
+  background-color: var(--color-base-500);
+}
+
+.bc-nine-slice-scrollbar-thumb:active,
+.bc-nine-slice-scrollbar-thumb--dragging {
+  background-color: var(--color-base-600);
+  cursor: grabbing;
+}
+
+/* Horizontal scrollbar */
+.bc-nine-slice-scrollbar--horizontal {
+  left: 0;
+  bottom: 0;
+  height: 12px;
+}
+
+.bc-nine-slice-scrollbar--horizontal .bc-nine-slice-scrollbar-thumb {
+  top: 0;
+  height: 100%;
+  min-width: 24px;
+}
+
+/* Vertical scrollbar */
+.bc-nine-slice-scrollbar--vertical {
+  top: 0;
+  right: 0;
+  width: 12px;
+}
+
+.bc-nine-slice-scrollbar--vertical .bc-nine-slice-scrollbar-thumb {
+  left: 0;
+  width: 100%;
+  min-height: 24px;
+}
+
+/* Hidden state */
+.bc-nine-slice-scrollbar--hidden {
+  display: none;
+}
+
+/* Dark mode */
+.dark .bc-nine-slice-scrollbar-track {
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-nine-slice-scrollbar-thumb {
+  background-color: var(--color-base-600);
+}
+
+.dark .bc-nine-slice-scrollbar-thumb:hover {
+  background-color: var(--color-base-500);
+}
+
+.dark .bc-nine-slice-scrollbar-thumb:active,
+.dark .bc-nine-slice-scrollbar-thumb--dragging {
+  background-color: var(--color-base-400);
+}
+
 /* Number Input Component */
 .bc-number-input {
   text-align: end;
@@ -9797,6 +10087,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
     var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
 }
 
+/* When portaled to body, use fixed positioning to avoid layout interference */
+.bc-overlay--container-body {
+  position: fixed;
+}
+
 .bc-overlay[data-status='start-opening'],
 .bc-overlay[data-status='closing'] {
   backdrop-filter: blur(0);
@@ -9904,7 +10199,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 @layer components {
   .bc-announcement-bar {
     --announcement-bar-bg-color: var(--color-primary-600);
-    --announcement-bar-text-color: #ffffff;
+    --announcement-bar-text-color: var(--color-white);
 
     position: absolute;
     top: 0;
@@ -9929,6 +10224,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
     max-width: min(90%, 800px);
   }
 
+  /* When portaled to body, use fixed positioning */
+  body > .bc-announcement-bar {
+    position: fixed;
+  }
+
   .bc-announcement-bar__content {
     display: flex;
     align-items: center;
@@ -9960,7 +10260,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
   .bc-announcement-bar--dismissible .bc-announcement-bar__close button:hover {
     opacity: 1;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
   }
 
   /* Responsive adjustments */
@@ -10040,6 +10340,15 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 /* Pagination Component */
 .bc-pagination {
+  --pagination-active-bg: var(--color-primary-500);
+  --pagination-active-text: var(--color-white);
+  --pagination-active-border: transparent;
+  --pagination-active-bg-dark: var(--color-primary-600);
+  --pagination-active-text-dark: var(--color-white);
+  --pagination-active-border-dark: transparent;
+  --pagination-hover-bg: var(--color-base-100);
+  --pagination-hover-bg-dark: var(--color-base-700);
+
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
@@ -10075,8 +10384,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   user-select: none;
 }
 
-.bc-pagination__item:hover:not(:disabled) {
-  background-color: var(--color-base-100);
+.bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
+  background-color: var(--pagination-hover-bg);
   color: var(--color-base-900);
 }
 
@@ -10086,20 +10395,6 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   z-index: 1;
 }
 
-/* Active Page */
-.bc-pagination__item--active {
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-  border-color: transparent;
-  font-weight: var(--font-weight-semibold);
-  cursor: default;
-}
-
-.bc-pagination__item--active:hover {
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-}
-
 /* Disabled State */
 .bc-pagination__item:disabled {
   opacity: 0.4;
@@ -10123,7 +10418,97 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   user-select: none;
 }
 
-/* Size Variants */
+/* ------------------------------------------------------------------ */
+/* Variant: filled (default)                                          */
+/* ------------------------------------------------------------------ */
+.bc-pagination--variant-filled .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg);
+  color: var(--pagination-active-text);
+  border-color: transparent;
+  font-weight: var(--font-weight-semibold);
+  cursor: default;
+}
+
+/* ------------------------------------------------------------------ */
+/* Variant: outline                                                   */
+/* ------------------------------------------------------------------ */
+.bc-pagination--variant-outline .bc-pagination__item {
+  border-color: var(--pagination-item-border, var(--color-base-300));
+}
+
+.bc-pagination--variant-outline .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg);
+  color: var(--pagination-active-text);
+  border-color: var(--pagination-active-border);
+  border-width: var(--border-width-default);
+  font-weight: var(--font-weight-semibold);
+  cursor: default;
+}
+
+/* ------------------------------------------------------------------ */
+/* Variant: light                                                     */
+/* ------------------------------------------------------------------ */
+.bc-pagination--variant-light .bc-pagination__item {
+  background-color: var(--pagination-item-bg, var(--color-base-100));
+}
+
+.bc-pagination--variant-light .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg);
+  color: var(--pagination-active-text);
+  border-color: transparent;
+  font-weight: var(--font-weight-semibold);
+  cursor: default;
+}
+
+/* ------------------------------------------------------------------ */
+/* Variant: subtle                                                    */
+/* ------------------------------------------------------------------ */
+.bc-pagination--variant-subtle .bc-pagination__item {
+  border-radius: 0;
+  border: none;
+  border-bottom: 2px solid transparent;
+}
+
+.bc-pagination--variant-subtle .bc-pagination__item--active {
+  background-color: transparent;
+  color: var(--pagination-active-text);
+  border-bottom-color: var(--pagination-active-text);
+  font-weight: var(--font-weight-bold);
+  cursor: default;
+}
+
+.bc-pagination--variant-subtle
+  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
+  background-color: transparent;
+  border-bottom-color: var(--color-base-300);
+}
+
+.bc-pagination--variant-subtle .bc-pagination__dots {
+  border-bottom: 2px solid transparent;
+}
+
+/* ------------------------------------------------------------------ */
+/* Variant: pill                                                      */
+/* ------------------------------------------------------------------ */
+.bc-pagination--variant-pill .bc-pagination__item {
+  border-radius: var(--radius-full);
+}
+
+.bc-pagination--variant-pill .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg);
+  color: var(--pagination-active-text);
+  border-color: transparent;
+  font-weight: var(--font-weight-semibold);
+  cursor: default;
+}
+
+.bc-pagination--variant-pill .bc-pagination__dots {
+  border-radius: var(--radius-full);
+}
+
+/* ------------------------------------------------------------------ */
+/* Size Variants                                                      */
+/* ------------------------------------------------------------------ */
 .bc-pagination--size-xs .bc-pagination__item,
 .bc-pagination--size-xs .bc-pagination__dots {
   min-width: var(--spacing-xl);
@@ -10159,24 +10544,63 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   font-size: var(--font-size-xl);
 }
 
-/* Dark Mode Support */
+/* ------------------------------------------------------------------ */
+/* Dark Mode                                                          */
+/* ------------------------------------------------------------------ */
 .dark .bc-pagination__item {
   color: var(--color-base-300);
 }
 
-.dark .bc-pagination__item:hover:not(:disabled) {
-  background-color: var(--color-base-700);
+.dark
+  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
+  background-color: var(--pagination-hover-bg-dark);
   color: var(--color-base-100);
 }
 
-.dark .bc-pagination__item--active {
-  background-color: var(--color-primary-600);
-  color: var(--color-white);
+/* Dark: filled */
+.dark .bc-pagination--variant-filled .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg-dark);
+  color: var(--pagination-active-text-dark);
 }
 
-.dark .bc-pagination__item--active:hover {
-  background-color: var(--color-primary-600);
-  color: var(--color-white);
+/* Dark: outline */
+.dark .bc-pagination--variant-outline .bc-pagination__item {
+  border-color: var(--pagination-item-border-dark, var(--color-base-600));
+}
+
+.dark .bc-pagination--variant-outline .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg-dark);
+  color: var(--pagination-active-text-dark);
+  border-color: var(--pagination-active-border-dark);
+}
+
+/* Dark: light */
+.dark .bc-pagination--variant-light .bc-pagination__item {
+  background-color: var(--pagination-item-bg-dark, var(--color-base-800));
+}
+
+.dark .bc-pagination--variant-light .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg-dark);
+  color: var(--pagination-active-text-dark);
+}
+
+/* Dark: subtle */
+.dark .bc-pagination--variant-subtle .bc-pagination__item--active {
+  color: var(--pagination-active-text-dark);
+  border-bottom-color: var(--pagination-active-text-dark);
+}
+
+.dark
+  .bc-pagination--variant-subtle
+  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
+  background-color: transparent;
+  border-bottom-color: var(--color-base-600);
+}
+
+/* Dark: pill */
+.dark .bc-pagination--variant-pill .bc-pagination__item--active {
+  background-color: var(--pagination-active-bg-dark);
+  color: var(--pagination-active-text-dark);
 }
 
 .dark .bc-pagination__item:disabled:hover {
@@ -10188,21 +10612,22 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--color-base-600);
 }
 
-/* Reduced Motion Support */
+/* ------------------------------------------------------------------ */
+/* Reduced Motion & High Contrast                                     */
+/* ------------------------------------------------------------------ */
 @media (prefers-reduced-motion: reduce) {
   .bc-pagination__item {
     transition: none;
   }
 }
 
-/* High Contrast Mode Support */
 @media (prefers-contrast: high) {
   .bc-pagination__item {
     border-width: var(--border-width-medium);
   }
 
   .bc-pagination__item--active {
-    border-color: var(--color-primary-700);
+    border-color: var(--pagination-active-border, var(--pagination-active-bg));
   }
 
   .bc-pagination__item:focus-visible {
@@ -10448,7 +10873,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-presence-highlight {
   background-color: color-mix(
     in srgb,
-    var(--presence-color, #2563eb) 12%,
+    var(--presence-color, var(--color-primary-600)) 12%,
     transparent
   );
   border-radius: 1px;
@@ -10469,7 +10894,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   left: 0;
   width: 2px;
   height: calc(1em + 4px);
-  background: var(--presence-color, #2563eb);
+  background: var(--presence-color, var(--color-primary-600));
   border-radius: 1px;
 }
 
@@ -10478,8 +10903,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   bottom: calc(100% + 2px);
   left: -1px;
   padding: 1px 6px;
-  background: var(--presence-color, #2563eb);
-  color: #fff;
+  background: var(--presence-color, var(--color-primary-600));
+  color: var(--color-white);
   font-size: 9px;
   font-weight: var(--font-weight-medium, 500);
   white-space: nowrap;
@@ -10531,7 +10956,6 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   position: relative;
   width: 100%;
   overflow: hidden;
-  border-radius: var(--radius-control, var(--radius-full));
 }
 
 .bc-progress-bar__track {
@@ -10555,14 +10979,17 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Size variants */
 .bc-progress-bar--size-sm {
   height: var(--spacing-base);
+  min-width: var(--spacing-2xl);
 }
 
 .bc-progress-bar--size-md {
   height: var(--spacing-md);
+  min-width: var(--spacing-3xl);
 }
 
 .bc-progress-bar--size-lg {
   height: var(--spacing-mdh);
+  min-width: var(--spacing-4xl);
 }
 
 /* Indeterminate state - animated sliding bar */
@@ -10671,18 +11098,14 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   isolation: isolate;
 }
 
-/* Smooth scrolling for better UX */
-.bc-scrollable-panel__body {
-  scroll-behavior: smooth;
-}
-
-.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow,
-.bc-scrollable-panel--scrolled-up .bc-scrollable-panel--footer-shadow {
+/* Shadow containers — always positioned, visibility controlled by opacity */
+.bc-scrollable-panel--header-shadow,
+.bc-scrollable-panel--footer-shadow {
   position: relative;
   width: 100%;
   flex-shrink: 0;
-  height: 0px;
-  z-index: 2;
+  height: 0;
+  z-index: 3;
   pointer-events: none;
 }
 
@@ -10691,26 +11114,30 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   width: 100%;
   height: var(--spacing-lgh);
   position: absolute;
-  transition: box-shadow
-    var(--motion-transition-slow, var(--motion-duration-slow, 0.5s))
+  opacity: 0;
+  transition: opacity
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  box-shadow: var(--shadow-scrollable-panel-idle, 0 0 0 transparent);
-  background-color: transparent;
 }
 
 .bc-scrollable-panel--header-shadow > div {
   bottom: 0;
-}
-
-.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
   box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
 }
 
 .bc-scrollable-panel--footer-shadow > div {
   top: 0;
+  box-shadow: var(--shadow-top-md, 0 -2px 6px rgba(0, 0, 0, 0.08));
+}
+
+/* Show header shadow when scrolled down */
+.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
+  opacity: 1;
 }
+
+/* Show footer shadow when scrolled up (content below) */
 .bc-scrollable-panel--scrolled-up .bc-scrollable-panel--footer-shadow > div {
-  box-shadow: var(--shadow-top-md);
+  opacity: 1;
 }
 
 /* Custom scrollbar styling (webkit browsers) */
@@ -10801,7 +11228,6 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   cursor: pointer;
   white-space: nowrap;
   font-weight: var(--font-weight-semibold);
-  text-transform: capitalize;
   color: var(--color-base-700);
   transition: color
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -10959,10 +11385,35 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--text-normal);
 }
 
-/* Dark background mode - inverted colors */
+/* Dark background mode - override semantic tokens to invert colors */
 .bc-sidebar--dark-bg {
-  background-color: var(--bg-background);
-  color: var(--text-normal);
+  --bg-background: var(--bg-background-dark);
+  --bg-surface: var(--bg-surface-dark);
+  --text-normal: var(--text-normal-dark);
+  --text-muted: var(--text-muted-dark);
+  --text-inverted: var(--text-inverted-dark);
+  --border-default: var(--border-border-dark);
+  --border-divider: var(--border-divider-dark);
+  --border-input: var(--border-input-dark);
+  --border-strong: var(--border-strong-dark);
+  --interactive-hover: var(--interactive-hover-dark);
+  --interactive-active: var(--interactive-active-dark);
+  --interactive-focus: var(--interactive-focus-dark);
+}
+
+.dark .bc-sidebar--dark-bg {
+  --bg-background: var(--bg-background-light);
+  --bg-surface: var(--bg-surface-light);
+  --text-normal: var(--text-normal-light);
+  --text-muted: var(--text-muted-light);
+  --text-inverted: var(--text-inverted-light);
+  --border-default: var(--border-border-light);
+  --border-divider: var(--border-divider-light);
+  --border-input: var(--border-input-light);
+  --border-strong: var(--border-strong-light);
+  --interactive-hover: var(--interactive-hover-light);
+  --interactive-active: var(--interactive-active-light);
+  --interactive-focus: var(--interactive-focus-light);
 }
 
 .bc-sidebar-link {
@@ -10986,6 +11437,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-sidebar-link__content {
   flex: 1;
+  text-align: start;
 }
 
 button.bc-sidebar-link:hover,
@@ -10997,6 +11449,25 @@ a.bc-sidebar-link:hover {
 span.bc-sidebar-link {
   font-weight: var(--font-weight-medium);
   width: 100%;
+  background-color: var(--color-primary-50);
+  color: var(--color-primary-700);
+  border-radius: var(--radius-md);
+}
+
+.dark span.bc-sidebar-link {
+  background-color: var(--color-primary-950);
+  color: var(--color-primary-200);
+}
+
+/* Dark bg inverts the active link colors */
+.bc-sidebar--dark-bg span.bc-sidebar-link {
+  background-color: var(--color-primary-950);
+  color: var(--color-primary-200);
+}
+
+.dark .bc-sidebar--dark-bg span.bc-sidebar-link {
+  background-color: var(--color-primary-50);
+  color: var(--color-primary-700);
 }
 
 .bc-sidebar-link--icon {
@@ -11061,83 +11532,41 @@ span.bc-sidebar-link {
   transform: rotate(-90deg);
 }
 
-/* Dark mode styles */
-.dark span.bc-sidebar-link {
-  color: var(--color-primary-200);
-}
-
-/* Dark background mode styles - inverted colors in light theme */
-.bc-sidebar--dark-bg button.bc-sidebar-link:hover,
-.bc-sidebar--dark-bg a.bc-sidebar-link:hover {
-  background-color: var(--interactive-hover);
+.bc-sidebar-separator {
+  border: none;
+  border-top: var(--border-width-thin) solid var(--border-default);
+  margin: var(--spacing-md) 0;
 }
 
-.bc-sidebar--dark-bg span.bc-sidebar-link {
-  color: var(--color-primary-200);
-}
-
-.bc-sidebar--dark-bg .bc-sidebar-link {
-  color: var(--text-normal);
-}
-
-.bc-sidebar--dark-bg .bc-sidebar-link--icon {
-  color: var(--text-muted);
-}
-
-.bc-sidebar--dark-bg .bc-sidebar-link--action {
-  color: var(--text-normal);
-  border: var(--border-width-thin) solid var(--border-default);
-}
-
-.bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
-  background-color: var(--interactive-hover);
-  border-color: var(--border-divider);
-}
-
-.bc-sidebar--dark-bg .bc-sidebar-group--rail {
-  border-inline-start: var(--border-width-thin) solid var(--border-default);
-}
-
-/* Dark background mode in dark theme - inverted back to light colors */
-.dark .bc-sidebar--dark-bg span.bc-sidebar-link {
-  color: var(--color-primary-700);
-}
-
-.bc-sidebar-separator {
-  border: none;
-  border-top: var(--border-width-thin) solid var(--border-default);
-  margin: var(--spacing-md) 0;
-}
-
-/* Sink Component */
-.bc-sink {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-surface, var(--radius-lg));
-  border: var(--border-width-thin) solid var(--color-base-300);
-  padding: var(--spacing-md);
-  box-shadow: var(
-    --shadow-sink,
-    inset 0 0 0.25rem color-mix(in srgb, var(--color-black) 20%, transparent)
-  );
-  background-color: var(--color-base-50);
-  transition: all
-    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
-    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+/* Sink Component */
+.bc-sink {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-surface, var(--radius-lg));
+  border: var(--border-width-thin) solid var(--color-base-300);
+  padding: var(--spacing-md);
+  box-shadow: var(
+    --shadow-sink,
+    inset 0 1px 3px color-mix(in srgb, var(--color-black) 8%, transparent)
+  );
+  background-color: var(--color-base-50);
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* Sink variants */
 .bc-sink--deep {
   box-shadow: var(
     --shadow-sink-deep,
-    inset 0 0 0.5rem color-mix(in srgb, var(--color-black) 30%, transparent)
+    inset 0 2px 6px color-mix(in srgb, var(--color-black) 12%, transparent)
   );
 }
 
 .bc-sink--shallow {
   box-shadow: var(
     --shadow-sink-shallow,
-    inset 0 0 0.125rem color-mix(in srgb, var(--color-black) 10%, transparent)
+    inset 0 1px 2px color-mix(in srgb, var(--color-black) 5%, transparent)
   );
 }
 
@@ -11228,7 +11657,6 @@ span.bc-sidebar-link {
 
   display: block;
   background-color: var(--skeleton-bg);
-  border-radius: var(--radius-control, var(--radius-sm));
   overflow: hidden;
   position: relative;
 }
@@ -11318,15 +11746,15 @@ span.bc-sidebar-link {
 }
 
 .bc-stack--gap-1 {
-  gap: var(--spacing-stack-xs, var(--spacing-sm));
+  gap: var(--spacing-xs);
 }
 
 .bc-stack--gap-2 {
-  gap: var(--spacing-stack-sm, var(--spacing-md));
+  gap: var(--spacing-sm);
 }
 
 .bc-stack--gap-4 {
-  gap: var(--spacing-stack-lg, var(--spacing-lg));
+  gap: var(--spacing-lg);
 }
 
 .bc-stack--align-center {
@@ -11338,144 +11766,6 @@ span.bc-sidebar-link {
   width: 100%;
 }
 
-/* Tag Component */
-.bc-tag {
-  --tag-bg: var(--bg-subtle);
-  --tag-bg-dark: var(--bg-elevated);
-  --tag-text: var(--text-normal);
-  --tag-text-dark: var(--text-normal);
-  --tag-bg-hover: var(--tag-bg);
-  --tag-bg-hover-dark: var(--tag-bg-dark);
-  --tag-text-hover: var(--tag-text);
-  --tag-text-hover-dark: var(--tag-text-dark);
-  --tag-border: transparent;
-  --tag-border-dark: transparent;
-
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: var(--radius-pill, var(--radius-full));
-  line-height: 1.2;
-  border: var(--border-width-thin) solid var(--tag-border);
-  transition: all
-    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
-    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  font-size: var(--font-size-md);
-  padding: 0 var(--spacing-md);
-  gap: var(--spacing-stack-sm, var(--spacing-md));
-  background-color: var(--tag-bg);
-  color: var(--tag-text);
-  font-family: var(
-    --font-family-default-ui,
-    var(--font-ui, var(--font-body, var(--font-family-sans)))
-  );
-}
-
-.bc-tag:hover {
-  background-color: var(--tag-bg-hover);
-  color: var(--tag-text-hover);
-}
-
-.bc-tag--xs {
-  font-size: var(--font-size-xs);
-  padding: 0 var(--spacing-sm);
-}
-
-.bc-tag--sm {
-  font-size: var(--font-size-sm);
-  padding: 0 var(--spacing-smh);
-}
-
-.bc-tag--lg {
-  font-size: var(--font-size-lg);
-  padding: 0 calc(var(--spacing-base) * 2.5);
-}
-
-.bc-tag--xl {
-  font-size: var(--font-size-xl);
-  padding: 0 var(--spacing-mdh);
-}
-
-.bc-tag:has(.bc-tag__close) {
-  padding-inline-end: calc(var(--spacing-base) * 0.5);
-}
-
-/* Close button */
-.bc-tag__close {
-  background: transparent;
-  color: var(--tag-text);
-  opacity: 0.6;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--spacing-lg);
-  height: var(--spacing-lg);
-  border-radius: var(--radius-full);
-  transition: all
-    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
-    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  border: var(--border-width-thin) solid transparent;
-}
-
-.bc-tag__close:hover {
-  opacity: 1;
-  border-color: color-mix(in srgb, var(--tag-text) 30%, transparent);
-}
-
-/* Disabled state via class */
-.bc-tag.bc-tag--disabled {
-  opacity: 0.55;
-  filter: grayscale(0.4) saturate(0.8);
-  cursor: default;
-}
-
-.bc-tag.bc-tag--disabled .bc-tag__close {
-  cursor: not-allowed;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-/* Neutralize hover on disabled close button */
-.bc-tag.bc-tag--disabled .bc-tag__close:hover {
-  color: inherit;
-  border-color: transparent;
-}
-
-/* Dark mode styles */
-.dark .bc-tag {
-  background-color: var(--tag-bg-dark);
-  color: var(--tag-text-dark);
-  border-color: var(--tag-border-dark);
-}
-
-.dark .bc-tag:hover {
-  background-color: var(--tag-bg-hover-dark);
-  color: var(--tag-text-hover-dark);
-}
-
-.dark .bc-tag__close {
-  color: var(--tag-text-dark);
-}
-
-.dark .bc-tag__close:hover:not(:disabled) {
-  color: var(--tag-text-dark);
-  border-color: color-mix(in srgb, var(--tag-text-dark) 30%, transparent);
-}
-
-.bc-input-container__tags-selector {
-  flex-grow: 1;
-  background-color: transparent;
-  min-width: 100px;
-  min-height: var(--spacing-lg);
-  align-self: stretch;
-  justify-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-stack-sm, var(--spacing-md));
-}
-
 /* Switch Component */
 .bc-switch {
   display: inline-flex;
@@ -11944,6 +12234,7 @@ span.bc-sidebar-link {
 .bc-table--size-lg > tfoot > tr > th,
 .bc-table--size-lg > tfoot > tr > td {
   padding: var(--spacing-lg);
+  font-size: var(--font-size-lg);
 }
 
 .bc-table--size-xl > thead > tr > th,
@@ -12112,13 +12403,14 @@ span.bc-sidebar-link {
 }
 
 .bc-tab:focus-visible {
-  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid
+    var(--tabs-indicator-color, var(--color-primary-500));
   outline-offset: calc(-1 * var(--outline-width-focus));
   z-index: 1;
 }
 
 .bc-tab--active {
-  color: var(--color-primary-600);
+  color: var(--tabs-active-color, var(--color-primary-600));
   background-color: var(--color-white);
   font-weight: var(--font-weight-semibold);
   cursor: default;
@@ -12127,7 +12419,7 @@ span.bc-sidebar-link {
 .bc-tab--active::after {
   content: '';
   position: absolute;
-  background-color: var(--color-primary-500);
+  background-color: var(--tabs-indicator-color, var(--color-primary-500));
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
 }
 
@@ -12182,7 +12474,8 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs__panel:focus-visible {
-  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid
+    var(--tabs-indicator-color, var(--color-primary-500));
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
@@ -12214,7 +12507,7 @@ span.bc-sidebar-link {
 }
 
 .dark .bc-tab--active {
-  color: var(--color-primary-400);
+  color: var(--tabs-active-color-dark, var(--color-primary-400));
   background-color: var(--color-base-900);
 }
 
@@ -12254,28 +12547,6 @@ span.bc-sidebar-link {
 }
 
 /* Variants */
-/* Text variant: minimal, link-like tabs */
-.bc-tabs--variant-text .bc-tabs__list {
-  background-color: transparent;
-  border-bottom: none;
-}
-.bc-tabs--variant-text .bc-tab {
-  background: transparent;
-  color: var(--color-primary-600);
-  border-radius: 0;
-}
-.bc-tabs--variant-text .bc-tab:hover:not(.bc-tab--disabled) {
-  background: transparent;
-  text-decoration: underline;
-}
-.bc-tabs--variant-text .bc-tab--active {
-  background: transparent;
-  color: var(--color-primary-700);
-  font-weight: var(--font-weight-semibold);
-}
-.bc-tabs--variant-text .bc-tab--active::after {
-  display: none;
-}
 
 /* Filled variant: inverted - inactive tabs filled with color, active is white */
 .bc-tabs--variant-filled .bc-tabs__list {
@@ -12326,31 +12597,36 @@ span.bc-sidebar-link {
 .bc-tabs--variant-outline .bc-tab {
   background-color: var(--color-base-50);
   border: var(--border-width-thin) solid var(--color-base-300);
-  border-bottom: var(--border-width-thin) solid var(--color-base-300);
   border-radius: var(--radius-control-sm, var(--radius-sm))
     var(--radius-control-sm, var(--radius-sm)) 0 0;
 }
 .bc-tabs--variant-outline .bc-tab--active {
   background-color: var(--color-white);
-  border-color: var(--color-primary-400);
+  border-color: var(--tabs-outline-active-border, var(--color-primary-400));
   border-bottom-color: var(--color-white);
 }
 .bc-tabs--variant-outline .bc-tab--active::after {
   display: none;
 }
-
-/* Dark mode adjustments for variants */
-.dark .bc-tabs--variant-text .bc-tabs__list {
-  background-color: transparent;
-  border-bottom: none;
+.bc-tabs--vertical.bc-tabs--variant-outline .bc-tabs__list {
+  border-right: none;
 }
-.dark .bc-tabs--variant-text .bc-tab {
-  color: var(--color-primary-300);
+.bc-tabs--vertical.bc-tabs--variant-outline .bc-tab {
+  border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
+    var(--radius-control-sm, var(--radius-sm));
 }
-.dark .bc-tabs--variant-text .bc-tab--active {
-  color: var(--color-primary-200);
+.bc-tabs--variant-outline .bc-tab--active {
+  color: var(--tabs-active-color, var(--color-primary-600));
+}
+.bc-tabs--vertical.bc-tabs--variant-outline .bc-tab--active {
+  border-bottom-color: var(
+    --tabs-outline-active-border,
+    var(--color-primary-400)
+  );
+  border-right-color: var(--color-white);
 }
 
+/* Dark mode adjustments for variants */
 .dark .bc-tabs--variant-filled .bc-tab {
   background-color: var(--tabs-filled-inactive-bg-dark);
   color: var(--tabs-filled-inactive-text-dark);
@@ -12377,9 +12653,20 @@ span.bc-sidebar-link {
 }
 .dark .bc-tabs--variant-outline .bc-tab--active {
   background-color: var(--color-base-900);
-  border-color: var(--color-primary-600);
+  color: var(--tabs-active-color-dark, var(--color-primary-400));
+  border-color: var(
+    --tabs-outline-active-border-dark,
+    var(--color-primary-600)
+  );
   border-bottom-color: var(--color-base-900);
 }
+.dark .bc-tabs--vertical.bc-tabs--variant-outline .bc-tab--active {
+  border-bottom-color: var(
+    --tabs-outline-active-border-dark,
+    var(--color-primary-600)
+  );
+  border-right-color: var(--color-base-900);
+}
 
 /* Underline variant: minimal, clean underline style */
 .bc-tabs--variant-underline .bc-tabs__list {
@@ -12421,16 +12708,29 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs--variant-underline .bc-tab--active {
-  color: var(--color-primary-600);
+  color: var(--tabs-active-color, var(--color-primary-600));
   background-color: transparent;
   font-weight: var(--font-weight-medium);
 }
 
 .bc-tabs--variant-underline .bc-tab--active::after {
-  background-color: var(--color-primary-500);
+  background-color: var(--tabs-indicator-color, var(--color-primary-500));
   bottom: calc(-1 * var(--spacing-px));
   height: var(--spacing-xs);
 }
+.bc-tabs--vertical.bc-tabs--variant-underline .bc-tabs__list {
+  border-bottom: none;
+  border-right: var(--border-width-thin) solid var(--color-base-200);
+}
+.bc-tabs--vertical.bc-tabs--variant-underline .bc-tab--active::after {
+  bottom: auto;
+  left: auto;
+  height: auto;
+  right: calc(-1 * var(--spacing-px));
+  top: 0;
+  bottom: 0;
+  width: var(--spacing-xs);
+}
 
 /* Pill variant: segmented button style with contained tabs */
 .bc-tabs--variant-pill .bc-tabs__list {
@@ -12485,6 +12785,10 @@ span.bc-sidebar-link {
 .bc-tabs--variant-pill .bc-tab--active::after {
   display: none;
 }
+.bc-tabs--vertical.bc-tabs--variant-pill .bc-tabs__list {
+  display: flex;
+  flex-direction: column;
+}
 
 /* Dark mode adjustments for underline variant */
 .dark .bc-tabs--variant-underline .bc-tabs__list {
@@ -12503,11 +12807,15 @@ span.bc-sidebar-link {
 }
 
 .dark .bc-tabs--variant-underline .bc-tab--active {
-  color: var(--color-primary-400);
+  color: var(--tabs-active-color-dark, var(--color-primary-400));
 }
 
 .dark .bc-tabs--variant-underline .bc-tab--active::after {
-  background-color: var(--color-primary-400);
+  background-color: var(--tabs-indicator-color-dark, var(--color-primary-400));
+}
+.dark .bc-tabs--vertical.bc-tabs--variant-underline .bc-tabs__list {
+  border-bottom: none;
+  border-right-color: var(--color-base-700);
 }
 
 /* Dark mode adjustments for pill variant */
@@ -12551,7 +12859,8 @@ span.bc-sidebar-link {
 
 .bc-tag-input:focus-within {
   border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--color-primary-600) 12%, transparent);
 }
 
 .bc-tag-input--error {
@@ -12559,7 +12868,8 @@ span.bc-sidebar-link {
 }
 
 .bc-tag-input--error:focus-within {
-  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--color-danger-600) 12%, transparent);
 }
 
 .bc-tag-input--disabled {
@@ -12603,7 +12913,7 @@ span.bc-sidebar-link {
   padding: var(--spacing-xs) var(--spacing-smh);
   background: var(--color-base-100);
   border-radius: var(--radius-sm, 3px);
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   color: var(--color-base-700);
   white-space: nowrap;
   line-height: 1.4;
@@ -12985,7 +13295,7 @@ span.bc-sidebar-link {
   padding: calc(var(--spacing-base) * 0.75);
   background: var(--color-white);
   border-radius: var(--radius-lg);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-lg);
   border: var(--border-width-thin) solid var(--color-base-200);
   width: auto;
 }
@@ -13082,6 +13392,14 @@ span.bc-sidebar-link {
   color: oklch(0.5 0.15 250);
 }
 
+.bc-tree-item__row--size-xs {
+  padding-top: calc(var(--spacing-xs) / 2);
+  padding-bottom: calc(var(--spacing-xs) / 2);
+  padding-right: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  min-height: var(--spacing-lg);
+}
+
 .bc-tree-item__row--size-sm {
   padding-top: var(--spacing-xs);
   padding-bottom: var(--spacing-xs);
@@ -13106,6 +13424,14 @@ span.bc-sidebar-link {
   min-height: var(--spacing-2xlh);
 }
 
+.bc-tree-item__row--size-xl {
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+  padding-right: var(--spacing-lg);
+  font-size: var(--font-size-xl);
+  min-height: var(--spacing-3xl);
+}
+
 .bc-tree-item__toggle {
   display: inline-flex;
   align-items: center;
@@ -13139,6 +13465,7 @@ span.bc-sidebar-link {
 }
 
 .bc-tree-item__label {
+  text-align: left;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -13638,7 +13965,7 @@ span.bc-sidebar-link {
   .bc-notification {
     --notification-accent-color: var(--color-primary-500);
     --notification-radius: var(--radius-lg);
-    --notification-bg: #fff;
+    --notification-bg: var(--color-white);
     --notification-border-color: var(--color-base-200);
     --notification-text-color: var(--text-normal);
     --notification-muted-color: var(--text-muted);
@@ -13668,7 +13995,7 @@ span.bc-sidebar-link {
     justify-content: center;
     overflow: hidden;
     background-color: var(--notification-accent-color);
-    color: white;
+    color: var(--color-white);
   }
 
   .bc-notification__accent {
@@ -13763,8 +14090,34 @@ span.bc-sidebar-link {
     }
   }
 
+  .bc-notification-item {
+    transition:
+      opacity var(--motion-duration-base, 200ms)
+        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      transform var(--motion-duration-base, 200ms)
+        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .bc-notification-item--entering {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+
+  .bc-notification-item:not(.bc-notification-item--entering):not(
+      .bc-notification-item--exiting
+    ) {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .bc-notification-item--exiting {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .bc-notification {
+    .bc-notification,
+    .bc-notification-item {
       transition: none;
     }
   }
@@ -14655,6 +15008,7 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing-md);
   width: 100%;
   border: none;
   background: none;
@@ -14799,8 +15153,8 @@ span.bc-sidebar-link {
   }
 }
 
-/* Calendar Component */
-.bc-calendar {
+/* DatePicker Component */
+.bc-date-picker {
   display: inline-flex;
   flex-direction: column;
   background-color: var(--bg-background);
@@ -14810,13 +15164,13 @@ span.bc-sidebar-link {
   user-select: none;
 }
 
-.bc-calendar--disabled {
+.bc-date-picker--disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
 /* Navigation header */
-.bc-calendar__nav {
+.bc-date-picker__nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14824,7 +15178,7 @@ span.bc-sidebar-link {
   gap: var(--spacing-xs);
 }
 
-.bc-calendar__nav-btn {
+.bc-date-picker__nav-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -14839,21 +15193,21 @@ span.bc-sidebar-link {
   line-height: var(--line-height-none);
 }
 
-.bc-calendar__nav-btn:hover:not(:disabled) {
+.bc-date-picker__nav-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.bc-calendar__nav-btn:focus-visible {
+.bc-date-picker__nav-btn:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
-.bc-calendar__nav-btn:disabled {
+.bc-date-picker__nav-btn:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.bc-calendar__title {
+.bc-date-picker__title {
   flex: 1;
   text-align: center;
   font-weight: var(--font-weight-semibold);
@@ -14865,7 +15219,7 @@ span.bc-sidebar-link {
   gap: var(--spacing-sm);
 }
 
-.bc-calendar__title-btn {
+.bc-date-picker__title-btn {
   background: none;
   border: none;
   border-radius: var(--radius-sm);
@@ -14879,47 +15233,47 @@ span.bc-sidebar-link {
     var(--motion-easing-standard);
 }
 
-.bc-calendar__title-btn:hover:not(:disabled) {
+.bc-date-picker__title-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.bc-calendar__title-btn:focus-visible {
+.bc-date-picker__title-btn:focus-visible {
   outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
-.bc-calendar__title-btn:disabled {
+.bc-date-picker__title-btn:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
 /* Days view container */
-.bc-calendar__days-view {
+.bc-date-picker__days-view {
   display: flex;
   flex-direction: column;
   min-height: calc(5 * var(--cal-cell-size));
 }
 
 /* Weekday headers */
-.bc-calendar__weekdays {
+.bc-date-picker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
 }
 
-.bc-calendar__weekday {
+.bc-date-picker__weekday {
   text-align: center;
   font-weight: var(--font-weight-semibold);
   color: var(--text-muted);
 }
 
 /* Day grid */
-.bc-calendar__grid {
+.bc-date-picker__grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
 }
 
 /* Day cells */
-.bc-calendar__day {
+.bc-date-picker__day {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -14933,42 +15287,42 @@ span.bc-sidebar-link {
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
 }
 
-.bc-calendar__day:hover:not(:disabled) {
+.bc-date-picker__day:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.bc-calendar__day:focus-visible {
+.bc-date-picker__day:focus-visible {
   outline: var(--outline-width-focus) solid var(--cal-selected-bg);
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
-.bc-calendar__day--outside {
+.bc-date-picker__day--outside {
   color: var(--text-muted);
   opacity: 0.4;
 }
 
-.bc-calendar__day--today {
+.bc-date-picker__day--today {
   background-color: var(--cal-today-bg);
   color: var(--cal-today-text);
   font-weight: var(--font-weight-semibold);
 }
 
-.bc-calendar__day--selected {
+.bc-date-picker__day--selected {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
   font-weight: var(--font-weight-bold);
 }
 
-.bc-calendar__day--selected.bc-calendar__day--today {
+.bc-date-picker__day--selected.bc-date-picker__day--today {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
 }
 
-.bc-calendar__day--selected:hover:not(:disabled) {
+.bc-date-picker__day--selected:hover:not(:disabled) {
   filter: brightness(0.9);
 }
 
-.bc-calendar__day--disabled {
+.bc-date-picker__day--disabled {
   cursor: not-allowed;
   color: var(--text-muted);
   opacity: 0.4;
@@ -14976,23 +15330,23 @@ span.bc-sidebar-link {
 }
 
 /* Month and Year Picker Grid */
-.bc-calendar__picker-grid {
+.bc-date-picker__picker-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--spacing-xs);
   min-height: calc(5 * var(--cal-cell-size));
 }
 
-.bc-calendar__picker-grid--months {
+.bc-date-picker__picker-grid--months {
   grid-template-rows: repeat(3, 1fr);
 }
 
-.bc-calendar__picker-grid--years {
+.bc-date-picker__picker-grid--years {
   grid-template-rows: repeat(5, 1fr);
 }
 
 /* Month cells */
-.bc-calendar__month-cell {
+.bc-date-picker__month-cell {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -15007,38 +15361,38 @@ span.bc-sidebar-link {
   padding: var(--spacing-xs);
 }
 
-.bc-calendar__month-cell:hover:not(:disabled) {
+.bc-date-picker__month-cell:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.bc-calendar__month-cell:focus-visible {
+.bc-date-picker__month-cell:focus-visible {
   outline: var(--outline-width-focus) solid var(--cal-selected-bg);
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
-.bc-calendar__month-cell--current {
+.bc-date-picker__month-cell--current {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
   font-weight: var(--font-weight-bold);
 }
 
-.bc-calendar__month-cell--current:hover:not(:disabled) {
+.bc-date-picker__month-cell--current:hover:not(:disabled) {
   filter: brightness(0.9);
 }
 
-.bc-calendar__month-cell--active {
+.bc-date-picker__month-cell--active {
   background-color: var(--cal-today-bg);
   color: var(--cal-today-text);
   font-weight: var(--font-weight-semibold);
 }
 
-.bc-calendar__month-cell--current.bc-calendar__month-cell--active {
+.bc-date-picker__month-cell--current.bc-date-picker__month-cell--active {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
 }
 
 /* Year cells */
-.bc-calendar__year-cell {
+.bc-date-picker__year-cell {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -15053,113 +15407,113 @@ span.bc-sidebar-link {
   padding: var(--spacing-xs);
 }
 
-.bc-calendar__year-cell:hover:not(:disabled) {
+.bc-date-picker__year-cell:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.bc-calendar__year-cell:focus-visible {
+.bc-date-picker__year-cell:focus-visible {
   outline: var(--outline-width-focus) solid var(--cal-selected-bg);
   outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
-.bc-calendar__year-cell--current {
+.bc-date-picker__year-cell--current {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
   font-weight: var(--font-weight-bold);
 }
 
-.bc-calendar__year-cell--current:hover:not(:disabled) {
+.bc-date-picker__year-cell--current:hover:not(:disabled) {
   filter: brightness(0.9);
 }
 
-.bc-calendar__year-cell--active {
+.bc-date-picker__year-cell--active {
   background-color: var(--cal-today-bg);
   color: var(--cal-today-text);
   font-weight: var(--font-weight-semibold);
 }
 
-.bc-calendar__year-cell--current.bc-calendar__year-cell--active {
+.bc-date-picker__year-cell--current.bc-date-picker__year-cell--active {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
 }
 
 /* Size variants */
-.bc-calendar--size-xs {
+.bc-date-picker--size-xs {
   --cal-cell-size: var(--spacing-xl);
   padding: var(--spacing-xs);
   font-size: var(--font-size-xs);
   width: calc(7 * var(--spacing-xl) + 2 * var(--spacing-xs) + 2px);
 }
-.bc-calendar--size-xs .bc-calendar__nav-btn {
+.bc-date-picker--size-xs .bc-date-picker__nav-btn {
   width: var(--spacing-lgh);
   height: var(--spacing-lgh);
   font-size: var(--font-size-xs);
 }
-.bc-calendar--size-xs .bc-calendar__day {
+.bc-date-picker--size-xs .bc-date-picker__day {
   width: var(--spacing-xl);
   height: var(--spacing-xl);
   font-size: var(--font-size-2xs);
 }
-.bc-calendar--size-xs .bc-calendar__weekday {
+.bc-date-picker--size-xs .bc-date-picker__weekday {
   font-size: var(--font-size-2xs);
   padding: var(--spacing-2xs);
 }
-.bc-calendar--size-xs .bc-calendar__month-cell,
-.bc-calendar--size-xs .bc-calendar__year-cell {
+.bc-date-picker--size-xs .bc-date-picker__month-cell,
+.bc-date-picker--size-xs .bc-date-picker__year-cell {
   font-size: var(--font-size-2xs);
 }
 
-.bc-calendar--size-sm {
+.bc-date-picker--size-sm {
   --cal-cell-size: calc(var(--spacing-base) * 7);
   padding: var(--spacing-sm);
   font-size: var(--font-size-sm);
   width: calc(7 * calc(var(--spacing-base) * 7) + 2 * var(--spacing-sm) + 2px);
 }
-.bc-calendar--size-sm .bc-calendar__nav-btn {
+.bc-date-picker--size-sm .bc-date-picker__nav-btn {
   width: var(--spacing-xl);
   height: var(--spacing-xl);
   font-size: var(--font-size-sm);
 }
-.bc-calendar--size-sm .bc-calendar__day {
+.bc-date-picker--size-sm .bc-date-picker__day {
   width: calc(var(--spacing-base) * 7);
   height: calc(var(--spacing-base) * 7);
   font-size: var(--font-size-xs);
 }
-.bc-calendar--size-sm .bc-calendar__weekday {
+.bc-date-picker--size-sm .bc-date-picker__weekday {
   font-size: var(--font-size-xs);
   padding: var(--spacing-xs);
 }
-.bc-calendar--size-sm .bc-calendar__month-cell,
-.bc-calendar--size-sm .bc-calendar__year-cell {
+.bc-date-picker--size-sm .bc-date-picker__month-cell,
+.bc-date-picker--size-sm .bc-date-picker__year-cell {
   font-size: var(--font-size-xs);
 }
 
-.bc-calendar--size-md {
+.bc-date-picker--size-md {
   --cal-cell-size: calc(var(--spacing-base) * 9);
   padding: var(--spacing-md);
   font-size: var(--font-size-md);
   width: calc(7 * calc(var(--spacing-base) * 9) + 2 * var(--spacing-md) + 2px);
 }
-.bc-calendar--size-md .bc-calendar__nav-btn {
+.bc-date-picker--size-md .bc-date-picker__nav-btn {
   width: calc(var(--spacing-base) * 7);
   height: calc(var(--spacing-base) * 7);
   font-size: var(--font-size-md);
 }
-.bc-calendar--size-md .bc-calendar__day {
+.bc-date-picker--size-md .bc-date-picker__day {
   width: calc(var(--spacing-base) * 9);
   height: calc(var(--spacing-base) * 9);
   font-size: var(--font-size-sm);
 }
-.bc-calendar--size-md .bc-calendar__weekday {
+.bc-date-picker--size-md .bc-date-picker__weekday {
   font-size: var(--font-size-xs);
   padding: var(--spacing-xs);
 }
-.bc-calendar--size-md .bc-calendar__month-cell,
-.bc-calendar--size-md .bc-calendar__year-cell {
+.bc-date-picker--size-md .bc-date-picker__month-cell,
+.bc-date-picker--size-md .bc-date-picker__year-cell {
   font-size: var(--font-size-sm);
 }
 
-.bc-calendar--size-lg {
+.bc-date-picker--size-lg {
   --cal-cell-size: calc(var(--spacing-base) * 10.5);
   padding: var(--spacing-lg);
   font-size: var(--font-size-lg);
@@ -15167,198 +15521,198 @@ span.bc-sidebar-link {
     7 * calc(var(--spacing-base) * 10.5) + 2 * var(--spacing-lg) + 2px
   );
 }
-.bc-calendar--size-lg .bc-calendar__nav-btn {
+.bc-date-picker--size-lg .bc-date-picker__nav-btn {
   width: var(--spacing-2xl);
   height: var(--spacing-2xl);
   font-size: var(--font-size-lg);
 }
-.bc-calendar--size-lg .bc-calendar__day {
+.bc-date-picker--size-lg .bc-date-picker__day {
   width: calc(var(--spacing-base) * 10.5);
   height: calc(var(--spacing-base) * 10.5);
   font-size: var(--font-size-md);
 }
-.bc-calendar--size-lg .bc-calendar__weekday {
+.bc-date-picker--size-lg .bc-date-picker__weekday {
   font-size: var(--font-size-sm);
   padding: var(--spacing-sm);
 }
-.bc-calendar--size-lg .bc-calendar__month-cell,
-.bc-calendar--size-lg .bc-calendar__year-cell {
+.bc-date-picker--size-lg .bc-date-picker__month-cell,
+.bc-date-picker--size-lg .bc-date-picker__year-cell {
   font-size: var(--font-size-md);
 }
 
-.bc-calendar--size-xl {
+.bc-date-picker--size-xl {
   --cal-cell-size: var(--spacing-3xl);
   padding: var(--spacing-xl);
   font-size: var(--font-size-xl);
   width: calc(7 * var(--spacing-3xl) + 2 * var(--spacing-xl) + 2px);
 }
-.bc-calendar--size-xl .bc-calendar__nav-btn {
+.bc-date-picker--size-xl .bc-date-picker__nav-btn {
   width: calc(var(--spacing-base) * 9);
   height: calc(var(--spacing-base) * 9);
   font-size: var(--font-size-xl);
 }
-.bc-calendar--size-xl .bc-calendar__day {
+.bc-date-picker--size-xl .bc-date-picker__day {
   width: var(--spacing-3xl);
   height: var(--spacing-3xl);
   font-size: var(--font-size-lg);
 }
-.bc-calendar--size-xl .bc-calendar__weekday {
+.bc-date-picker--size-xl .bc-date-picker__weekday {
   font-size: var(--font-size-md);
   padding: var(--spacing-sm);
 }
-.bc-calendar--size-xl .bc-calendar__month-cell,
-.bc-calendar--size-xl .bc-calendar__year-cell {
+.bc-date-picker--size-xl .bc-date-picker__month-cell,
+.bc-date-picker--size-xl .bc-date-picker__year-cell {
   font-size: var(--font-size-lg);
 }
 
 /* Dark mode */
-.dark .bc-calendar {
+.dark .bc-date-picker {
   background-color: var(--bg-background);
   border-color: var(--border-default);
 }
 
-.dark .bc-calendar__nav-btn {
+.dark .bc-date-picker__nav-btn {
   color: var(--text-normal);
 }
 
-.dark .bc-calendar__nav-btn:hover:not(:disabled) {
+.dark .bc-date-picker__nav-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.dark .bc-calendar__title {
+.dark .bc-date-picker__title {
   color: var(--text-normal);
 }
 
-.dark .bc-calendar__weekday {
+.dark .bc-date-picker__weekday {
   color: var(--text-muted);
 }
 
-.dark .bc-calendar__day {
+.dark .bc-date-picker__day {
   color: var(--text-normal);
 }
 
-.dark .bc-calendar__day:hover:not(:disabled) {
+.dark .bc-date-picker__day:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.dark .bc-calendar__day--selected {
+.dark .bc-date-picker__day--selected {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.dark .bc-calendar__day--today {
+.dark .bc-date-picker__day--today {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
 
-.dark .bc-calendar__day--selected.bc-calendar__day--today {
+.dark .bc-date-picker__day--selected.bc-date-picker__day--today {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.dark .bc-calendar__title-btn {
+.dark .bc-date-picker__title-btn {
   color: var(--text-normal);
 }
 
-.dark .bc-calendar__title-btn:hover:not(:disabled) {
+.dark .bc-date-picker__title-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.dark .bc-calendar__month-cell,
-.dark .bc-calendar__year-cell {
+.dark .bc-date-picker__month-cell,
+.dark .bc-date-picker__year-cell {
   color: var(--text-normal);
 }
 
-.dark .bc-calendar__month-cell:hover:not(:disabled),
-.dark .bc-calendar__year-cell:hover:not(:disabled) {
+.dark .bc-date-picker__month-cell:hover:not(:disabled),
+.dark .bc-date-picker__year-cell:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.dark .bc-calendar__month-cell--current,
-.dark .bc-calendar__year-cell--current {
+.dark .bc-date-picker__month-cell--current,
+.dark .bc-date-picker__year-cell--current {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.dark .bc-calendar__month-cell--active,
-.dark .bc-calendar__year-cell--active {
+.dark .bc-date-picker__month-cell--active,
+.dark .bc-date-picker__year-cell--active {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
 
-.dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
-.dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
+.dark .bc-date-picker__month-cell--current.bc-date-picker__month-cell--active,
+.dark .bc-date-picker__year-cell--current.bc-date-picker__year-cell--active {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
 /* Range selection */
-.bc-calendar__day--range-start,
-.bc-calendar__day--range-end {
+.bc-date-picker__day--range-start,
+.bc-date-picker__day--range-end {
   background-color: var(--cal-selected-bg);
   color: var(--cal-selected-text);
   font-weight: var(--font-weight-bold);
 }
 
-.bc-calendar__day--range-start {
+.bc-date-picker__day--range-start {
   border-radius: var(--radius-full) 0 0 var(--radius-full);
 }
 
-.bc-calendar__day--range-end {
+.bc-date-picker__day--range-end {
   border-radius: 0 var(--radius-full) var(--radius-full) 0;
 }
 
-.bc-calendar__day--range-start.bc-calendar__day--range-end {
+.bc-date-picker__day--range-start.bc-date-picker__day--range-end {
   border-radius: var(--radius-full);
 }
 
-.bc-calendar__day--in-range {
+.bc-date-picker__day--in-range {
   background-color: var(--cal-today-bg);
   color: var(--cal-today-text);
   border-radius: 0;
 }
 
-.bc-calendar__day--preview.bc-calendar__day--in-range {
+.bc-date-picker__day--preview.bc-date-picker__day--in-range {
   opacity: 0.7;
 }
 
-.bc-calendar__day--preview.bc-calendar__day--range-start,
-.bc-calendar__day--preview.bc-calendar__day--range-end {
+.bc-date-picker__day--preview.bc-date-picker__day--range-start,
+.bc-date-picker__day--preview.bc-date-picker__day--range-end {
   opacity: 0.8;
 }
 
-.bc-calendar__day--range-start:hover:not(:disabled),
-.bc-calendar__day--range-end:hover:not(:disabled) {
+.bc-date-picker__day--range-start:hover:not(:disabled),
+.bc-date-picker__day--range-end:hover:not(:disabled) {
   filter: brightness(0.9);
 }
 
 /* Range selection - dark mode */
-.dark .bc-calendar__day--range-start,
-.dark .bc-calendar__day--range-end {
+.dark .bc-date-picker__day--range-start,
+.dark .bc-date-picker__day--range-end {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.dark .bc-calendar__day--in-range {
+.dark .bc-date-picker__day--in-range {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
 
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .bc-calendar__day {
+  .bc-date-picker__day {
     transition: none;
   }
-  .bc-calendar__nav-btn {
+  .bc-date-picker__nav-btn {
     transition: none;
   }
-  .bc-calendar__title-btn {
+  .bc-date-picker__title-btn {
     transition: none;
   }
-  .bc-calendar__month-cell {
+  .bc-date-picker__month-cell {
     transition: none;
   }
-  .bc-calendar__year-cell {
+  .bc-date-picker__year-cell {
     transition: none;
   }
 }
@@ -15999,6 +16353,735 @@ span.bc-sidebar-link {
   --toggle-group-radius: var(--radius-full);
 }
 
+.bc-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: color-mix(in srgb, var(--bg-surface) 75%, transparent);
+  z-index: var(--z-index-raised);
+  pointer-events: all;
+  border-radius: inherit;
+}
+
+.bc-loading-overlay__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.bc-loading-overlay__message {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+}
+
+/* Sortable Header */
+.bc-sortable-header {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-sortable-header:hover {
+  background-color: var(--interactive-hover);
+}
+
+.bc-sortable-header__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.bc-sortable-header__label {
+  flex: 1;
+}
+
+.bc-sortable-header__icons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  flex-shrink: 0;
+}
+
+.bc-sortable-header__icon {
+  opacity: 0.45;
+  transition: opacity var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-sortable-header__icon--active {
+  opacity: 1;
+}
+
+.bc-sortable-header:hover .bc-sortable-header__icon {
+  opacity: 0.8;
+}
+
+.bc-sortable-header:hover .bc-sortable-header__icon--active {
+  opacity: 1;
+}
+
+/* Column Filter */
+.bc-column-filter {
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--border-input);
+  border-radius: var(--radius-control-sm);
+  background-color: var(--bg-background);
+  color: var(--text-normal);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-column-filter:focus {
+  border-color: var(--interactive-focus);
+  box-shadow: 0 0 0 1px var(--interactive-focus);
+}
+
+.bc-column-filter--size-xs {
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.bc-column-filter--size-sm {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.bc-column-filter--size-lg {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--font-size-md);
+}
+
+/* Selection Checkbox */
+.bc-selection-checkbox {
+  cursor: pointer;
+  accent-color: var(--color-primary-500);
+}
+
+.bc-selection-checkbox--size-xs {
+  width: 14px;
+  height: 14px;
+}
+
+.bc-selection-checkbox--size-sm {
+  width: 16px;
+  height: 16px;
+}
+
+.bc-selection-checkbox--size-md {
+  width: 18px;
+  height: 18px;
+}
+
+.bc-selection-checkbox--size-lg {
+  width: 20px;
+  height: 20px;
+}
+
+.bc-selection-checkbox--size-xl {
+  width: 24px;
+  height: 24px;
+}
+
+/* Data Toolbar */
+.bc-data-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--bg-surface);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-control);
+  margin-bottom: var(--spacing-sm);
+}
+
+.bc-data-toolbar__selection {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.bc-data-toolbar__selection-count {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-muted);
+}
+
+.bc-data-toolbar__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-control-sm);
+  background-color: var(--bg-background);
+  color: var(--text-normal);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-transition-fast);
+}
+
+.bc-data-toolbar__action:hover {
+  background-color: var(--interactive-hover);
+}
+
+.bc-data-toolbar__action--secondary {
+  border: none;
+  background: none;
+  color: var(--text-muted);
+}
+
+.bc-data-toolbar__action--secondary:hover {
+  color: var(--text-normal);
+  background: none;
+}
+
+.bc-data-toolbar__reset {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-left: auto;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: color var(--motion-transition-fast);
+}
+
+.bc-data-toolbar__reset:hover {
+  color: var(--color-danger-600);
+}
+
+/* Data Table */
+.bc-data-table__wrapper {
+  position: relative;
+  min-height: 120px;
+}
+
+.bc-data-table__filter-row > th {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+
+.bc-data-table__selection-header {
+  width: calc(var(--spacing-base) * 10);
+}
+
+.bc-table--size-xl .bc-data-table__selection-header {
+  width: calc(var(--spacing-base) * 18);
+}
+
+.bc-table--size-lg .bc-data-table__selection-header {
+  width: calc(var(--spacing-base) * 14);
+}
+
+.bc-table--size-sm .bc-data-table__selection-header {
+  width: calc(var(--spacing-base) * 8);
+}
+
+.bc-table--size-xs .bc-data-table__selection-header {
+  width: calc(var(--spacing-base) * 6);
+}
+
+.bc-data-table__selection-cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bc-data-table__row--clickable {
+  cursor: pointer;
+}
+
+.bc-data-table__row--selected {
+  background-color: var(--color-primary-50);
+}
+
+.bc-data-table__empty {
+  text-align: center;
+  padding: var(--spacing-xl);
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.bc-data-table__pagination {
+  display: flex;
+  justify-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) 0;
+}
+
+/* Column Filter Panel */
+.bc-column-filter-panel__trigger-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bc-column-filter-panel__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xs);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-control-sm);
+  background-color: var(--bg-background);
+  color: var(--text-muted);
+  cursor: pointer;
+  position: relative;
+  transition:
+    border-color var(--motion-transition-fast) var(--motion-easing-standard),
+    color var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-column-filter-panel__trigger:hover {
+  border-color: var(--interactive-hover);
+  color: var(--text-normal);
+}
+
+.bc-column-filter-panel__trigger--active {
+  border-color: var(--color-primary-500);
+  color: var(--color-primary-600);
+}
+
+.bc-column-filter-panel__active-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-primary-500);
+}
+
+.bc-column-filter-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  width: 320px;
+}
+
+.bc-column-filter-panel__mode {
+  display: flex;
+  justify-content: center;
+}
+
+.bc-column-filter-panel__conditions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.bc-column-filter-panel__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+
+.bc-column-filter-panel__row-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.bc-column-filter-panel__operator {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.bc-column-filter-panel__value-wrap {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+
+.bc-column-filter-panel__value-wrap--hidden {
+  display: none;
+}
+
+.bc-column-filter-panel__value {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bc-column-filter-panel__add {
+  display: flex;
+}
+
+.bc-column-filter-panel__add-btn {
+  border: none;
+  background: none;
+  color: var(--color-primary-600);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  padding: var(--spacing-2xs) 0;
+  transition: color var(--motion-transition-fast);
+}
+
+.bc-column-filter-panel__add-btn:hover {
+  color: var(--color-primary-700);
+}
+
+.bc-column-filter-panel__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  padding-top: var(--spacing-xs);
+  border-top: var(--border-width-thin) solid var(--border-default);
+}
+
+/* Dark mode */
+.dark .bc-column-filter-panel__trigger {
+  background-color: var(--bg-surface);
+}
+
+.dark .bc-column-filter-panel__trigger--active {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-400);
+}
+
+.dark .bc-column-filter-panel__active-dot {
+  background-color: var(--color-primary-400);
+}
+
+.dark .bc-column-filter-panel__add-btn {
+  color: var(--color-primary-400);
+}
+
+.dark .bc-column-filter-panel__add-btn:hover {
+  color: var(--color-primary-300);
+}
+
+.dark .bc-data-table__row--selected {
+  background-color: var(--color-primary-950);
+}
+
+.dark .bc-column-filter {
+  background-color: var(--bg-surface);
+}
+
+/* Column visibility toggle */
+.bc-data-table__column-toggle {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--spacing-xs);
+}
+
+.bc-data-table__column-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-surface);
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  position: relative;
+  transition:
+    border-color var(--motion-transition-fast) var(--motion-easing-standard),
+    color var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-data-table__column-toggle-btn:hover {
+  border-color: var(--interactive-hover);
+  color: var(--text-normal);
+}
+
+.bc-data-table__column-toggle-btn:focus-visible {
+  outline: 2px solid var(--interactive-focus);
+  outline-offset: 2px;
+}
+
+.bc-data-table__column-toggle-btn--active {
+  border-color: var(--color-primary-500);
+  color: var(--color-primary-600);
+}
+
+.bc-data-table__column-toggle-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  min-width: 180px;
+}
+
+.dark .bc-data-table__column-toggle-btn {
+  background-color: var(--bg-surface);
+}
+
+.dark .bc-data-table__column-toggle-btn--active {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-400);
+}
+
+/* Column Header Menu */
+.bc-column-header-menu {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: color var(--motion-transition-fast) var(--motion-easing-standard);
+}
+
+.bc-column-header-menu:hover {
+  color: var(--text-normal);
+}
+
+/* Sortable header menu slot */
+.bc-sortable-header__menu {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Row count footer */
+.bc-data-table__row-count {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+
+/* Column Reorder Drag */
+th.bc-data-table__header--dragging {
+  opacity: 0.5;
+}
+
+th.bc-data-table__header--drag-over {
+  border-left: 2px solid var(--color-primary-500);
+}
+
+/* Footer */
+.bc-data-table__footer-row {
+  background-color: var(--bg-surface);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-muted);
+}
+
+.bc-data-table__footer-row td {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-top: var(--border-width-thin) solid var(--border-default);
+}
+
+.bc-data-table__group-footer-row {
+  font-size: var(--font-size-xs);
+}
+
+.bc-data-table__group-footer-row td {
+  border-top: none;
+  padding-top: var(--spacing-2xs);
+  padding-bottom: var(--spacing-2xs);
+}
+
+/* Group By */
+.bc-data-table__group-header {
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--bg-surface);
+}
+
+.bc-data-table__group-header:hover {
+  background-color: var(--interactive-hover);
+}
+
+.bc-data-table__group-header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) 0;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+}
+
+.bc-data-table__group-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--motion-transition-fast)
+    var(--motion-easing-standard);
+}
+
+.bc-data-table__group-toggle--collapsed {
+  transform: rotate(-90deg);
+}
+
+.bc-data-table__group-label {
+  flex: 0 0 auto;
+}
+
+.bc-data-table__group-count {
+  color: var(--text-muted);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xs);
+}
+
+.bc-data-table__group-footer-summary {
+  margin-left: auto;
+  color: var(--text-muted);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.dark .bc-data-table__group-header {
+  background-color: var(--bg-surface);
+}
+
+.dark .bc-data-table__group-header:hover {
+  background-color: var(--interactive-hover);
+}
+
+/* Tags Filter (inline checkbox list) */
+.bc-column-filter-tags {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.bc-column-filter-tags__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.bc-column-filter-tags__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  cursor: pointer;
+  border-radius: var(--radius-control-sm);
+  font-size: var(--font-size-sm);
+  user-select: none;
+}
+
+.bc-column-filter-tags__item:hover {
+  background-color: var(--interactive-hover);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-sortable-header,
+  .bc-sortable-header__icon,
+  .bc-column-filter,
+  .bc-column-filter-panel__trigger,
+  .bc-column-filter-panel__add-btn,
+  .bc-data-toolbar__action,
+  .bc-data-toolbar__reset,
+  .bc-data-table__column-toggle-btn,
+  .bc-data-table__group-toggle {
+    transition: none;
+  }
+}
+
+/* Shared flex modifiers for Stack and Group */
+
+/* Gap */
+.bc-flex--gap-none {
+  gap: 0;
+}
+
+.bc-flex--gap-xs {
+  gap: var(--spacing-xs);
+}
+
+.bc-flex--gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.bc-flex--gap-md {
+  gap: var(--spacing-md);
+}
+
+.bc-flex--gap-lg {
+  gap: var(--spacing-lg);
+}
+
+.bc-flex--gap-xl {
+  gap: var(--spacing-xl);
+}
+
+/* Align */
+.bc-flex--align-start {
+  align-items: flex-start;
+}
+
+.bc-flex--align-center {
+  align-items: center;
+}
+
+.bc-flex--align-end {
+  align-items: flex-end;
+}
+
+.bc-flex--align-stretch {
+  align-items: stretch;
+}
+
+.bc-flex--align-baseline {
+  align-items: baseline;
+}
+
+/* Justify */
+.bc-flex--justify-start {
+  justify-content: flex-start;
+}
+
+.bc-flex--justify-center {
+  justify-content: center;
+}
+
+.bc-flex--justify-end {
+  justify-content: flex-end;
+}
+
+.bc-flex--justify-between {
+  justify-content: space-between;
+}
+
+.bc-flex--justify-around {
+  justify-content: space-around;
+}
+
+.bc-flex--justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Wrap */
+.bc-flex--wrap {
+  flex-wrap: wrap;
+}
+
+.bc-flex--nowrap {
+  flex-wrap: nowrap;
+}
+
+/* Grow */
+.bc-flex--grow {
+  flex-grow: 1;
+}
+
 
 }