@tempots/beatui 0.83.5 → 0.86.0

package/dist/beatui.css

@@ -398,23 +398,12 @@ ol {
   --letter-spacing-wide: 0.025em;
   --letter-spacing-wider: 0.05em;
   --letter-spacing-widest: 0.1em;
-  --font-family-sans:
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-sans:
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-family-serif:
-    ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-family-mono:
-    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
-    monospace;
-  --font-mono:
-    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
-    monospace;
+  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
@@ -432,21 +421,15 @@ ol {
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl:
-    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --shadow-top-2xs: 0 -1px rgb(0 0 0 / 0.05);
   --shadow-top-xs: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-top-sm:
-    0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-top-md:
-    0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-top-lg:
-    0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-top-xl:
-    0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-top-sm: 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-top-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-top-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-top-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
   --motion-duration-instant: 0s;
   --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
@@ -460,15 +443,9 @@ ol {
   --text-shadow-none: none;
   --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
   --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
-  --text-shadow-sm:
-    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
-    0px 2px 2px rgb(0 0 0 / 0.075);
-  --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);
+  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --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;
@@ -628,10 +605,7 @@ ol {
   --motion-transition-slow: var(--motion-duration-slow);
   --motion-transition-overlay: var(--motion-duration-relaxed);
   --motion-transition-emphasis: var(--motion-duration-fast);
-  --motion-easing-standard: var(--motion-easing-standard);
   --motion-easing-emphasis: var(--motion-easing-emphasized);
-  --motion-easing-entrance: var(--motion-easing-entrance);
-  --motion-easing-exit: var(--motion-easing-exit);
   --spacing-stack-2xs: calc(var(--spacing-base) / 2);
   --spacing-stack-xs: calc(var(--spacing-base) * 1);
   --spacing-stack-sm: calc(var(--spacing-base) * 2);
@@ -902,7 +876,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
 }
 
 /* BeatUI theme helpers */
-.b-dark {
+.dark {
   color-scheme: dark;
   --text-normal: var(--text-normal-dark);
   --text-muted: var(--text-muted-dark);
@@ -927,7 +901,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
   background-color: var(--bg-background);
 }
 
-.b-light {
+.light {
   color-scheme: light;
   --text-normal: var(--text-normal-light);
   --text-muted: var(--text-muted-light);
@@ -952,11 +926,11 @@ input:where([type='button'], [type='reset'], [type='submit']),
   background-color: var(--bg-background);
 }
 
-.b-dark *:focus-visible {
+.dark *:focus-visible {
   outline-color: var(--interactive-focus);
 }
 
-.b-light *:focus-visible {
+.light *:focus-visible {
   outline-color: var(--interactive-focus);
 }
 
@@ -1024,7 +998,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
 }
 
 /* Dark mode focus styles */
-.b-dark *:focus-visible {
+.dark *:focus-visible {
   outline-color: var(--interactive-focus-dark);
 }
 
@@ -1071,7 +1045,7 @@ a:focus-visible {
   border-radius: var(--radius-pill, var(--radius-full));
 }
 
-.b-dark .bc-switch:focus-visible .bc-switch__track {
+.dark .bc-switch:focus-visible .bc-switch__track {
   outline-color: var(--interactive-focus-dark);
 }
 
@@ -1083,8 +1057,8 @@ a:focus-visible {
   border-radius: var(--radius-focus, var(--radius-sm));
 }
 
-.b-dark .bc-checkbox-input__checkbox:focus-visible,
-.b-dark .bc-radio-input__radio:focus-visible {
+.dark .bc-checkbox-input__checkbox:focus-visible,
+.dark .bc-radio-input__radio:focus-visible {
   outline-color: var(--interactive-focus-dark);
 }
 
@@ -1221,11 +1195,11 @@ a:focus-visible {
     --action-card-border: var(--color-primary-600);
   }
 
-  .b-dark .bc-action-card--active {
+  .dark .bc-action-card--active {
     --action-card-border: var(--color-primary-400);
   }
 
-  .b-dark .bc-action-card--active:hover {
+  .dark .bc-action-card--active:hover {
     --action-card-border: var(--color-primary-300);
   }
 
@@ -1600,7 +1574,7 @@ a:focus-visible {
 }
 
 /* Dark mode */
-.b-dark .bc-auth-container--styled {
+.dark .bc-auth-container--styled {
   background-color: var(--bg-surface);
 }
 
@@ -1636,7 +1610,7 @@ a:focus-visible {
     border: 2px solid var(--border-default);
   }
 
-  .b-dark .bc-auth-container--styled {
+  .dark .bc-auth-container--styled {
     border-color: var(--border-default);
   }
 }
@@ -1665,7 +1639,7 @@ a:focus-visible {
   border-radius: var(--radius-full);
 }
 
-.b-dark .bc-auth-divider__text {
+.dark .bc-auth-divider__text {
   color: var(--color-white);
 }
 
@@ -1753,7 +1727,7 @@ a:focus-visible {
   margin-top: var(--spacing-xs);
 }
 
-.b-dark .bc-auth-form__field-error {
+.dark .bc-auth-form__field-error {
   color: var(--color-danger-400);
 }
 
@@ -1797,11 +1771,11 @@ a:focus-visible {
   outline-offset: 2px;
 }
 
-.b-dark .bc-auth-form__link {
+.dark .bc-auth-form__link {
   color: var(--color-primary-400);
 }
 
-.b-dark .bc-auth-form__link:hover {
+.dark .bc-auth-form__link:hover {
   color: var(--color-primary-300);
   background-color: var(--color-primary-950);
 }
@@ -1863,7 +1837,7 @@ a:focus-visible {
   padding: calc(var(--spacing-base) * 1);
 }
 
-.b-dark .bc-social-login-button__icon {
+.dark .bc-social-login-button__icon {
   background-color: var(--bg-elevated);
 }
 
@@ -1871,7 +1845,7 @@ a:focus-visible {
   color: var(--color-base-900);
 }
 
-.b-dark .bc-social-login-button__icon-inner {
+.dark .bc-social-login-button__icon-inner {
   color: var(--text-normal);
 }
 
@@ -2046,7 +2020,7 @@ a:focus-visible {
   padding-bottom: var(--spacing-sm);
 }
 
-.b-dark .bc-two-factor__methods {
+.dark .bc-two-factor__methods {
   border-bottom-color: var(--color-neutral-700);
 }
 
@@ -2074,12 +2048,12 @@ a:focus-visible {
   border-bottom: 2px solid var(--color-primary-600);
 }
 
-.b-dark .bc-two-factor__method-button:hover {
+.dark .bc-two-factor__method-button:hover {
   color: var(--text-normal);
   background-color: var(--color-neutral-800);
 }
 
-.b-dark .bc-two-factor__method-button--active {
+.dark .bc-two-factor__method-button--active {
   color: var(--color-primary-400);
   border-bottom-color: var(--color-primary-400);
 }
@@ -2103,7 +2077,7 @@ a:focus-visible {
   text-align: center;
 }
 
-.b-dark .bc-two-factor__code-display {
+.dark .bc-two-factor__code-display {
   background-color: var(--color-neutral-800);
 }
 
@@ -2132,7 +2106,7 @@ a:focus-visible {
   text-align: center;
 }
 
-.b-dark .bc-two-factor__backup-codes li {
+.dark .bc-two-factor__backup-codes li {
   background-color: var(--color-neutral-800);
 }
 
@@ -2184,7 +2158,7 @@ a:focus-visible {
   border: 1px solid var(--color-neutral-200);
 }
 
-.b-dark .bc-passkey-item {
+.dark .bc-passkey-item {
   background-color: var(--color-neutral-900);
   border-color: var(--color-neutral-700);
 }
@@ -2369,18 +2343,18 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-avatar {
+.dark .bc-avatar {
   background-color: var(--avatar-bg-dark);
   color: var(--avatar-text-dark);
 }
 
-.b-dark .bc-avatar--bordered {
+.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);
 }
 
-.b-dark .bc-avatar-group--spacing-tight > .bc-avatar,
-.b-dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
+.dark .bc-avatar-group--spacing-tight > .bc-avatar,
+.dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
   border-color: var(--bg-background-dark, var(--color-base-950));
 }
 
@@ -2553,13 +2527,13 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-badge {
+.dark .bc-badge {
   background-color: var(--badge-bg-dark);
   color: var(--badge-text-dark);
   border-color: var(--badge-border-dark);
 }
 
-.b-dark .bc-badge:hover {
+.dark .bc-badge:hover {
   background-color: var(--badge-bg-hover-dark);
   color: var(--badge-text-hover-dark);
 }
@@ -2696,25 +2670,25 @@ a:focus-visible {
 }
 
 /* Dark mode */
-.b-dark .bc-block-command-palette {
+.dark .bc-block-command-palette {
   background: var(--color-base-800);
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-block-command-palette__search {
+.dark .bc-block-command-palette__search {
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-block-command-palette__search-input {
+.dark .bc-block-command-palette__search-input {
   color: var(--color-base-100);
 }
 
-.b-dark .bc-block-command-palette__item:hover,
-.b-dark .bc-block-command-palette__item--selected {
+.dark .bc-block-command-palette__item:hover,
+.dark .bc-block-command-palette__item--selected {
   background: var(--color-base-700);
 }
 
-.b-dark .bc-block-command-palette__item-label {
+.dark .bc-block-command-palette__item-label {
   color: var(--color-base-100);
 }
 
@@ -2781,8 +2755,8 @@ a:focus-visible {
   outline-offset: 2px;
 }
 
-.b-dark .bc-breadcrumbs__link:focus-visible,
-.b-dark .bc-breadcrumbs__button:focus-visible {
+.dark .bc-breadcrumbs__link:focus-visible,
+.dark .bc-breadcrumbs__button:focus-visible {
   outline-color: var(--color-primary-400);
 }
 
@@ -2927,6 +2901,11 @@ a:focus-visible {
   opacity: 0.5;
 }
 
+.bc-button--loading .bc-icon {
+  width: 1em;
+  height: 1em;
+}
+
 .bc-button--size-xs {
   font-size: var(--font-size-xs);
 }
@@ -2948,7 +2927,7 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-button {
+.dark .bc-button {
   background-color: var(--button-bg-dark);
   color: var(--button-text-dark);
   border-color: var(--button-border-dark);
@@ -2958,7 +2937,7 @@ a:focus-visible {
   );
 }
 
-.b-dark .bc-button:hover:not(:disabled) {
+.dark .bc-button:hover:not(:disabled) {
   background-color: var(--button-bg-hover-dark);
   color: var(--button-text-hover-dark);
 }
@@ -3056,7 +3035,7 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-card--elevated {
+.dark .bc-card--elevated {
   --card-bg: var(--bg-elevated);
 }
 
@@ -3161,25 +3140,25 @@ a:focus-visible {
   user-select: none;
 }
 
-.b-dark .bc-checkbox-input__checkbox {
+.dark .bc-checkbox-input__checkbox {
   color: var(--color-base-500);
 }
 
-.b-dark .bc-checkbox-input__checkbox--checked {
+.dark .bc-checkbox-input__checkbox--checked {
   color: var(--color-primary-400);
 }
 
-.b-dark .bc-checkbox-input__checkbox--unchecked {
+.dark .bc-checkbox-input__checkbox--unchecked {
   color: var(--color-base-500);
 }
 
-.b-dark .bc-checkbox-input__checkbox:focus-visible,
-.b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
+.dark .bc-checkbox-input__checkbox:focus-visible,
+.dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
   outline: 2px solid var(--interactive-focus);
   outline-offset: 2px;
 }
 
-.b-dark .bc-checkbox-input__label {
+.dark .bc-checkbox-input__label {
   color: var(--text-normal);
 }
 
@@ -3333,9 +3312,7 @@ a:focus-visible {
 }
 
 /* Dark mode */
-.b-dark
-  .bc-input-container--error
-  .bc-color-swatch-input__control:focus-within {
+.dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
   outline: 2px solid var(--color-danger-400);
 }
 
@@ -3489,6 +3466,12 @@ a:focus-visible {
   border-bottom: 1px solid var(--color-gray-300);
 }
 
+/* Dark mode */
+.dark .bc-dropdown__search-input {
+  background-color: var(--color-base-800);
+  border-bottom-color: var(--color-base-600);
+}
+
 /* Dropdown Component */
 .bc-dropdown {
   position: relative;
@@ -3568,8 +3551,9 @@ a:focus-visible {
 }
 
 .bc-dropdown__option--selected {
-  background-color: var(--color-primary-600);
-  color: var(--color-white);
+  background-color: var(--color-primary-50);
+  color: var(--color-primary-700);
+  font-weight: var(--font-weight-semibold);
 }
 
 .bc-dropdown__option--disabled {
@@ -3627,31 +3611,32 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-dropdown__listbox {
+.dark .bc-dropdown__listbox {
   background-color: var(--bg-surface);
   border-color: var(--border-default);
   color: var(--text-normal);
 }
 
-.b-dark .bc-dropdown__option {
+.dark .bc-dropdown__option {
   color: var(--text-normal);
 }
 
-.b-dark .bc-dropdown__option:hover {
+.dark .bc-dropdown__option:hover {
   background-color: var(--interactive-hover);
 }
 
-.b-dark .bc-dropdown__option--focused {
+.dark .bc-dropdown__option--focused {
   background-color: var(--color-primary-900);
   color: var(--color-primary-100);
 }
 
-.b-dark .bc-dropdown__option--selected {
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
+.dark .bc-dropdown__option--selected {
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-200);
+  font-weight: var(--font-weight-semibold);
 }
 
-.b-dark .bc-dropdown__separator {
+.dark .bc-dropdown__separator {
   border-color: var(--border-divider);
 }
 
@@ -3868,19 +3853,19 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-control-input-wrapper__label-text--default {
+.dark .bc-control-input-wrapper__label-text--default {
   color: var(--text-normal);
 }
 
-.b-dark .bc-control-input-wrapper__label-text--error {
+.dark .bc-control-input-wrapper__label-text--error {
   color: var(--color-danger-300);
 }
 
-.b-dark .bc-control-input-wrapper__required {
+.dark .bc-control-input-wrapper__required {
   color: var(--color-danger-400);
 }
 
-.b-dark .bc-control-input-wrapper__error {
+.dark .bc-control-input-wrapper__error {
   color: var(--color-danger-400);
 }
 
@@ -4043,11 +4028,11 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
+.dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
   color: var(--color-base-500);
 }
 
-.b-dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
+.dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
   color: var(--text-normal);
 }
 
@@ -4353,18 +4338,18 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-drawer {
+.dark .bc-drawer {
   background-color: var(--bg-surface);
   color: var(--text-normal);
   border: 1px solid var(--border-default);
 }
 
-.b-dark .bc-drawer__header {
+.dark .bc-drawer__header {
   border-bottom: 1px solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
-.b-dark .bc-drawer__footer {
+.dark .bc-drawer__footer {
   border-top: 1px solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
@@ -4493,21 +4478,21 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-editable-text {
+.dark .bc-editable-text {
   border-bottom-color: var(--border-default);
   color: var(--text-normal);
 }
 
-.b-dark .bc-editable-text__edit-button {
+.dark .bc-editable-text__edit-button {
   color: var(--color-yellow-400);
 }
 
-.b-dark .bc-editable-text__edit-button:hover {
+.dark .bc-editable-text__edit-button:hover {
   background-color: var(--interactive-hover);
   color: var(--color-yellow-300);
 }
 
-.b-dark .bc-editable-text__edit-button:active {
+.dark .bc-editable-text__edit-button:active {
   background-color: var(--interactive-active);
 }
 
@@ -5150,6 +5135,218 @@ a:focus-visible {
   opacity: 0.6;
 }
 
+/* Dark mode */
+.dark .bc-file-input__drop-zone {
+  border-color: var(--color-base-600);
+}
+
+.dark .bc-file-input__drop-zone:hover {
+  border-color: var(--color-primary-400);
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-500) 10%,
+    transparent
+  );
+}
+
+.dark .bc-file-input__drop-zone-content--empty {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__drop-zone-content--drag-over {
+  color: var(--color-primary-300);
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-500) 10%,
+    transparent
+  );
+}
+
+.dark .bc-file-input__drop-zone-content--has-files {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__file-list {
+  border-top-color: var(--color-base-700);
+}
+
+.dark .bc-file-input__file-item {
+  border-color: var(--color-base-700);
+  background-color: var(--bg-surface);
+}
+
+.dark .bc-file-input__file-item:hover {
+  border-color: var(--color-base-600);
+}
+
+.dark .bc-file-input__file-name {
+  color: var(--text-normal);
+}
+
+.dark .bc-file-input__file-meta {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__thumbnail-container {
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-file-input__remove-button {
+  color: var(--color-base-500);
+}
+
+.dark .bc-file-input__remove-button:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 15%,
+    transparent
+  );
+  color: var(--color-danger-400);
+}
+
+.dark .bc-file-input__clear-all-button {
+  border-color: var(--color-base-600);
+  background-color: var(--bg-surface);
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__clear-all-button:hover {
+  border-color: var(--color-danger-600);
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 15%,
+    transparent
+  );
+  color: var(--color-danger-400);
+}
+
+.dark .bc-base-input-container--error .bc-file-input__drop-zone {
+  border-color: var(--color-danger-600);
+}
+
+.dark .bc-base-input-container--error .bc-file-input__drop-zone:hover {
+  border-color: var(--color-danger-500);
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 10%,
+    transparent
+  );
+}
+
+.dark .bc-base-input-container--disabled .bc-file-input__drop-zone {
+  border-color: var(--color-base-700);
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
+  border-color: var(--color-base-700);
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-base-input-container--disabled .bc-file-input__drop-zone-content {
+  color: var(--color-base-600);
+}
+
+.dark .bc-file-input__compact-placeholder {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__compact-value {
+  color: var(--text-normal);
+}
+
+.dark .bc-file-input__compact-value-item {
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-file-input__compact-clear {
+  color: var(--color-base-500);
+}
+
+.dark .bc-file-input__compact-clear:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 15%,
+    transparent
+  );
+  color: var(--color-danger-400);
+}
+
+.dark .bc-file-input__compact-preview {
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-file-input__compact-drop-zone {
+  border-color: var(--color-base-600);
+}
+
+.dark .bc-file-input__compact-drop-zone:hover {
+  border-color: var(--color-primary-400);
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-500) 10%,
+    transparent
+  );
+}
+
+.dark .bc-file-input__compact-drop-zone .bc-file-input__compact-placeholder {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__compact-file-item {
+  background-color: var(--color-base-800);
+}
+
+.dark .bc-file-input__compact-file-item:hover {
+  background-color: var(--color-base-700);
+}
+
+.dark .bc-file-input__compact-file-name {
+  color: var(--text-normal);
+}
+
+.dark .bc-file-input__compact-file-meta {
+  color: var(--color-base-400);
+}
+
+.dark .bc-file-input__compact-remove-button {
+  color: var(--color-base-500);
+}
+
+.dark .bc-file-input__compact-remove-button:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 15%,
+    transparent
+  );
+  color: var(--color-danger-400);
+}
+
+.dark .bc-base-input-container--error .bc-file-input__compact-drop-zone {
+  border-color: var(--color-danger-600);
+}
+
+.dark .bc-base-input-container--error .bc-file-input__compact-drop-zone:hover {
+  border-color: var(--color-danger-500);
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 10%,
+    transparent
+  );
+}
+
+.dark .bc-base-input-container--disabled .bc-file-input__compact-drop-zone {
+  border-color: var(--color-base-700);
+  background-color: var(--color-base-800);
+}
+
+.dark
+  .bc-base-input-container--disabled
+  .bc-file-input__compact-drop-zone:hover {
+  border-color: var(--color-base-700);
+  background-color: var(--color-base-800);
+}
+
 .bc-flyout-container {
   z-index: var(--z-index-popover);
 }
@@ -5191,6 +5388,12 @@ a:focus-visible {
   pointer-events: auto;
 }
 
+/* Dark mode */
+.dark .bc-flyout {
+  background-color: var(--color-base-800);
+  border-color: var(--color-base-700);
+}
+
 .bc-group {
   display: flex;
   flex-direction: row;
@@ -5417,30 +5620,30 @@ a:focus-visible {
 }
 
 /* Dark mode */
-.b-dark .bc-history-timeline__filter {
+.dark .bc-history-timeline__filter {
   border-color: var(--color-base-600);
   color: var(--color-base-400);
 }
 
-.b-dark .bc-history-timeline__filter:hover {
+.dark .bc-history-timeline__filter:hover {
   background: var(--color-base-700);
 }
 
-.b-dark .bc-history-timeline__filter--active {
+.dark .bc-history-timeline__filter--active {
   background: rgba(37, 99, 235, 0.15);
   border-color: var(--color-primary-600);
   color: var(--color-primary-300);
 }
 
-.b-dark .bc-history-timeline__line::after {
+.dark .bc-history-timeline__line::after {
   background: var(--color-base-700);
 }
 
-.b-dark .bc-history-timeline__target {
+.dark .bc-history-timeline__target {
   color: var(--color-base-100);
 }
 
-.b-dark .bc-history-timeline__avatar {
+.dark .bc-history-timeline__avatar {
   background: var(--color-primary-800);
   color: var(--color-primary-200);
 }
@@ -5455,7 +5658,7 @@ a:focus-visible {
   color: var(--icon-color, currentColor);
 }
 
-.b-dark .bc-icon {
+.dark .bc-icon {
   color: var(--icon-color-dark, var(--icon-color, currentColor));
 }
 
@@ -5571,7 +5774,7 @@ a:focus-visible {
 }
 
 /* Dark mode */
-.b-dark .bc-input-adornment--filled {
+.dark .bc-input-adornment--filled {
   background-color: var(--bg-subtle);
 }
 
@@ -5759,58 +5962,58 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-input-container--default {
+.dark .bc-input-container--default {
   background-color: var(--bg-surface);
   color: var(--text-normal);
   outline: 2px solid var(--border-default);
 }
 
-.b-dark .bc-input-container--default:focus-within {
+.dark .bc-input-container--default:focus-within {
   outline: 2px solid var(--interactive-focus);
   background-color: var(--bg-elevated);
 }
 
-.b-dark .bc-input-container::placeholder,
-.b-dark .bc-base-input-container::placeholder {
+.dark .bc-input-container::placeholder,
+.dark .bc-base-input-container::placeholder {
   color: var(--color-gray-500);
 }
 
-.b-dark .bc-input-container--disabled {
+.dark .bc-input-container--disabled {
   background-color: var(--bg-subtle);
   outline: 2px solid var(--border-divider);
   opacity: 0.6;
 }
 
-.b-dark .bc-input-container--error {
+.dark .bc-input-container--error {
   outline: 2px solid var(--color-danger-400);
   background-color: var(--color-danger-950);
 }
 
-.b-dark .bc-input-container--error:focus-within {
+.dark .bc-input-container--error:focus-within {
   outline: 2px solid var(--color-danger-400);
   background-color: var(--color-danger-900);
 }
 
-.b-dark .bc-input-container__password-toggle {
+.dark .bc-input-container__password-toggle {
   fill: var(--text-muted);
 }
 
-.b-dark .bc-input-container__password-toggle:hover {
+.dark .bc-input-container__password-toggle:hover {
   background-color: var(--interactive-hover);
   fill: var(--text-normal);
 }
 
 /* Dark mode for nullable reset */
-.b-dark .bc-input-container__reset {
+.dark .bc-input-container__reset {
   fill: var(--text-muted);
 }
 
-.b-dark .bc-input-container__reset:hover:not(:disabled) {
+.dark .bc-input-container__reset:hover:not(:disabled) {
   background-color: var(--interactive-hover);
   fill: var(--text-normal);
 }
 
-.b-dark .bc-input-container__reset:disabled {
+.dark .bc-input-container__reset:disabled {
   opacity: 0.3;
 }
 
@@ -5957,19 +6160,19 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-input-wrapper__label-text--default {
+.dark .bc-input-wrapper__label-text--default {
   color: var(--text-normal);
 }
 
-.b-dark .bc-input-wrapper__label-text--error {
+.dark .bc-input-wrapper__label-text--error {
   color: var(--color-danger-300);
 }
 
-.b-dark .bc-input-wrapper__required {
+.dark .bc-input-wrapper__required {
   color: var(--color-danger-400);
 }
 
-.b-dark .bc-input-wrapper__error {
+.dark .bc-input-wrapper__error {
   color: var(--color-danger-400);
 }
 
@@ -5978,6 +6181,10 @@ a:focus-visible {
   padding-inline-start: calc(var(--spacing-base) * 2);
 }
 
+.dark .bc-json-schema-object {
+  border-left-color: var(--color-base-700);
+}
+
 .bc-schema-grid {
   display: grid;
 }
@@ -6121,7 +6328,7 @@ a:focus-visible {
   color: var(--color-neutral-700);
 }
 
-.b-dark .bc-array-control__item-label {
+.dark .bc-array-control__item-label {
   color: var(--color-neutral-200);
 }
 
@@ -6138,11 +6345,11 @@ a:focus-visible {
   color: var(--color-success-600);
 }
 
-.b-dark .bc-array-control__indicator--error {
+.dark .bc-array-control__indicator--error {
   color: var(--color-danger-400);
 }
 
-.b-dark .bc-array-control__indicator--success {
+.dark .bc-array-control__indicator--success {
   color: var(--color-success-400);
 }
 
@@ -6159,11 +6366,11 @@ a:focus-visible {
   font-weight: var(--font-weight-medium);
 }
 
-.b-dark .bc-array-control__summary--success {
+.dark .bc-array-control__summary--success {
   color: var(--color-success-300);
 }
 
-.b-dark .bc-array-control__summary--error {
+.dark .bc-array-control__summary--error {
   color: var(--color-danger-300);
 }
 
@@ -6188,7 +6395,7 @@ a:focus-visible {
   flex-shrink: 1;
 }
 
-.b-dark .bc-object-helpers__error {
+.dark .bc-object-helpers__error {
   color: var(--color-danger-400);
 }
 
@@ -6197,7 +6404,7 @@ a:focus-visible {
   font-size: var(--font-size-sm);
 }
 
-.b-dark .bc-json-schema-form__error {
+.dark .bc-json-schema-form__error {
   color: var(--color-danger-400);
 }
 
@@ -6250,7 +6457,7 @@ a:focus-visible {
   color: var(--color-neutral-500);
 }
 
-.b-dark .bc-json-schema-display__label {
+.dark .bc-json-schema-display__label {
   color: var(--color-neutral-400);
 }
 
@@ -6260,7 +6467,7 @@ a:focus-visible {
   font-weight: var(--font-weight-bold);
 }
 
-.b-dark .bc-json-schema-display__required {
+.dark .bc-json-schema-display__required {
   color: var(--color-danger-400);
 }
 
@@ -6273,7 +6480,7 @@ a:focus-visible {
   font-weight: var(--font-weight-medium);
 }
 
-.b-dark .bc-json-schema-display__deprecated {
+.dark .bc-json-schema-display__deprecated {
   color: var(--color-warning-300);
   background-color: var(--color-warning-900);
 }
@@ -6289,7 +6496,7 @@ a:focus-visible {
   color: var(--color-neutral-900);
 }
 
-.b-dark .bc-json-schema-display__value {
+.dark .bc-json-schema-display__value {
   color: var(--color-neutral-100);
 }
 
@@ -6299,7 +6506,7 @@ a:focus-visible {
   font-style: italic;
 }
 
-.b-dark .bc-json-schema-display__value--null {
+.dark .bc-json-schema-display__value--null {
   color: var(--color-neutral-500);
 }
 
@@ -6309,7 +6516,7 @@ a:focus-visible {
   font-style: italic;
 }
 
-.b-dark .bc-json-schema-display__value--missing {
+.dark .bc-json-schema-display__value--missing {
   color: var(--color-danger-400);
 }
 
@@ -6319,7 +6526,7 @@ a:focus-visible {
   margin-left: calc(var(--spacing-base) * 1);
 }
 
-.b-dark .bc-json-schema-display__value-context {
+.dark .bc-json-schema-display__value-context {
   color: var(--color-neutral-500);
 }
 
@@ -6334,11 +6541,11 @@ a:focus-visible {
   color: var(--color-primary-700);
 }
 
-.b-dark .bc-json-schema-display__link {
+.dark .bc-json-schema-display__link {
   color: var(--color-primary-400);
 }
 
-.b-dark .bc-json-schema-display__link:hover {
+.dark .bc-json-schema-display__link:hover {
   color: var(--color-primary-300);
 }
 
@@ -6358,7 +6565,7 @@ a:focus-visible {
   vertical-align: middle;
 }
 
-.b-dark .bc-json-schema-display__color-swatch {
+.dark .bc-json-schema-display__color-swatch {
   border-color: var(--color-neutral-600);
 }
 
@@ -6382,7 +6589,7 @@ a:focus-visible {
   overflow-x: auto;
 }
 
-.b-dark .bc-json-schema-display__pre {
+.dark .bc-json-schema-display__pre {
   background-color: var(--color-neutral-800);
   border-color: var(--color-neutral-700);
 }
@@ -6407,12 +6614,12 @@ a:focus-visible {
   background-color: var(--color-danger-100);
 }
 
-.b-dark .bc-json-schema-display__boolean--true {
+.dark .bc-json-schema-display__boolean--true {
   color: var(--color-success-300);
   background-color: var(--color-success-900);
 }
 
-.b-dark .bc-json-schema-display__boolean--false {
+.dark .bc-json-schema-display__boolean--false {
   color: var(--color-danger-300);
   background-color: var(--color-danger-900);
 }
@@ -6423,7 +6630,7 @@ a:focus-visible {
   padding-inline-start: calc(var(--spacing-base) * 2);
 }
 
-.b-dark .bc-json-schema-display__object {
+.dark .bc-json-schema-display__object {
   border-left-color: var(--color-neutral-700);
 }
 
@@ -6434,7 +6641,7 @@ a:focus-visible {
   padding-inline-start: calc(var(--spacing-base) * 2);
 }
 
-.b-dark .bc-json-schema-display__extra-property {
+.dark .bc-json-schema-display__extra-property {
   border-left-color: var(--color-warning-600);
 }
 
@@ -6465,7 +6672,7 @@ a:focus-visible {
   flex-shrink: 0;
 }
 
-.b-dark .bc-json-schema-display__array-index {
+.dark .bc-json-schema-display__array-index {
   color: var(--color-neutral-500);
 }
 
@@ -6475,7 +6682,7 @@ a:focus-visible {
   font-style: italic;
 }
 
-.b-dark .bc-json-schema-display__empty {
+.dark .bc-json-schema-display__empty {
   color: var(--color-neutral-500);
 }
 
@@ -6491,7 +6698,7 @@ a:focus-visible {
   margin-bottom: calc(var(--spacing-base) * 1);
 }
 
-.b-dark .bc-json-schema-display__branch-label {
+.dark .bc-json-schema-display__branch-label {
   color: var(--color-primary-300);
   background-color: var(--color-primary-900);
 }
@@ -6501,7 +6708,7 @@ a:focus-visible {
   background-color: var(--color-warning-100);
 }
 
-.b-dark .bc-json-schema-display__branch-label--ambiguous {
+.dark .bc-json-schema-display__branch-label--ambiguous {
   color: var(--color-warning-300);
   background-color: var(--color-warning-900);
 }
@@ -6511,7 +6718,7 @@ a:focus-visible {
   background-color: var(--color-danger-100);
 }
 
-.b-dark .bc-json-schema-display__branch-label--no-match {
+.dark .bc-json-schema-display__branch-label--no-match {
   color: var(--color-danger-300);
   background-color: var(--color-danger-900);
 }
@@ -6568,25 +6775,25 @@ a:focus-visible {
   margin-left: calc(var(--spacing-base) * 1);
 }
 
-.b-dark .bc-json-schema-display__mismatch--type-mismatch,
-.b-dark .bc-json-schema-display__mismatch--missing-required {
+.dark .bc-json-schema-display__mismatch--type-mismatch,
+.dark .bc-json-schema-display__mismatch--missing-required {
   color: var(--color-danger-300);
   background-color: var(--color-danger-900);
 }
 
-.b-dark .bc-json-schema-display__mismatch--extra-property,
-.b-dark .bc-json-schema-display__mismatch--enum-mismatch,
-.b-dark .bc-json-schema-display__mismatch--const-mismatch {
+.dark .bc-json-schema-display__mismatch--extra-property,
+.dark .bc-json-schema-display__mismatch--enum-mismatch,
+.dark .bc-json-schema-display__mismatch--const-mismatch {
   color: var(--color-warning-300);
   background-color: var(--color-warning-900);
 }
 
-.b-dark .bc-json-schema-display__mismatch--constraint-violation {
+.dark .bc-json-schema-display__mismatch--constraint-violation {
   color: var(--color-danger-300);
   background-color: var(--color-danger-900);
 }
 
-.b-dark .bc-json-schema-display__mismatch-indicator {
+.dark .bc-json-schema-display__mismatch-indicator {
   color: var(--color-danger-400);
 }
 
@@ -6991,6 +7198,76 @@ a:focus-visible {
   color: var(--color-warning-700);
 }
 
+/* Dark mode */
+.dark .bc-json-structure-object {
+  border-left-color: var(--color-base-700);
+}
+
+.dark .bc-json-structure-additional-property {
+  border-color: var(--color-base-700);
+  background: var(--color-base-800);
+}
+
+.dark .bc-json-structure-map-entry-key {
+  color: var(--color-base-300);
+}
+
+.dark .bc-json-structure-tuple-label {
+  color: var(--color-base-300);
+}
+
+.dark .bc-json-structure-tuple-description {
+  color: var(--color-base-400);
+}
+
+.dark .bc-json-structure-tuple-element-header {
+  color: var(--color-base-400);
+}
+
+.dark .bc-json-structure-tuple-position {
+  color: var(--color-base-400);
+}
+
+.dark .bc-json-structure-description {
+  color: var(--color-base-400);
+}
+
+.dark .bc-json-structure-deprecated::before {
+  color: var(--color-warning-400);
+  background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
+}
+
+.dark .bc-json-structure-deprecated-badge {
+  color: var(--color-warning-300);
+  background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
+}
+
+.dark .bc-json-structure-const {
+  background: var(--color-base-800);
+  color: var(--color-base-300);
+}
+
+.dark .bc-json-structure-readonly input,
+.dark .bc-json-structure-readonly select,
+.dark .bc-json-structure-readonly textarea {
+  background: var(--color-base-800);
+}
+
+.dark .bc-json-structure-placeholder {
+  border-color: var(--color-base-600);
+  background: var(--color-base-800);
+}
+
+.dark .bc-json-structure-placeholder > span:first-child {
+  color: var(--color-base-500);
+}
+
+.dark .bc-json-structure-unknown {
+  border-color: var(--color-warning-700);
+  background: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
+  color: var(--color-warning-300);
+}
+
 /* Kbd (Keyboard Key) Component */
 .bc-kbd {
   display: inline-flex;
@@ -7000,13 +7277,10 @@ a:focus-visible {
   font-weight: var(--font-weight-medium);
   line-height: 1;
   border-radius: var(--radius-xs);
-  background-color: var(--bg-subtle);
+  background-color: var(--bg-surface);
   color: var(--text-muted);
-  border: 1px solid var(--border-muted);
-  /* box-shadow:
-    0 1px 0 0 var(--border-default),
-    0 2px 3px 0 rgba(0, 0, 0, 0.08),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06); */
+  border: 1px solid var(--border-subtle);
+  box-shadow: rgb(229, 229, 229) 0px 1px 0px;
   white-space: nowrap;
   vertical-align: middle;
   transition:
@@ -7034,7 +7308,7 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-kbd {
+.dark .bc-kbd {
   border-color: var(--border-default);
   box-shadow:
     0 1px 0 0 var(--border-default),
@@ -7083,11 +7357,11 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-label {
+.dark .bc-label {
   color: var(--text-normal);
 }
 
-.b-dark .bc-label--danger {
+.dark .bc-label--danger {
   color: var(--color-danger-400);
 }
 
@@ -7356,7 +7630,7 @@ a:focus-visible {
     border-radius: var(--radius-xs, 0.25rem);
   }
 
-  .b-dark .bc-lexical-code {
+  .dark .bc-lexical-code {
     background-color: var(--color-neutral-800);
     color: var(--color-neutral-200);
   }
@@ -7405,71 +7679,71 @@ a:focus-visible {
     color: var(--color-neutral-500);
   }
 
-  .b-dark .bc-lexical-li-checked::before {
+  .dark .bc-lexical-li-checked::before {
     background-color: var(--color-primary-400);
     border-color: var(--color-primary-400);
   }
 
-  .b-dark .bc-lexical-li-unchecked::before {
+  .dark .bc-lexical-li-unchecked::before {
     border-color: var(--color-neutral-600);
   }
 
   /* Dark mode styles */
-  .b-dark .bc-lexical-editor-container {
+  .dark .bc-lexical-editor-container {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-lexical-editor {
+  .dark .bc-lexical-editor {
     background-color: var(--bg-surface);
     color: var(--text-normal);
   }
 
-  .b-dark .bc-lexical-editor-container:focus-within {
+  .dark .bc-lexical-editor-container:focus-within {
     border-color: var(--color-primary-400);
     box-shadow: 0 0 0 2px var(--color-primary-900);
   }
 
-  .b-dark .bc-lexical-editor-container--error {
+  .dark .bc-lexical-editor-container--error {
     border-color: var(--color-danger-400);
   }
 
-  .b-dark .bc-lexical-editor-container--error:focus-within {
+  .dark .bc-lexical-editor-container--error:focus-within {
     border-color: var(--color-danger-400);
     box-shadow: 0 0 0 2px var(--color-danger-900);
   }
 
-  .b-dark .bc-lexical-editor--readonly {
+  .dark .bc-lexical-editor--readonly {
     background-color: var(--color-neutral-900);
   }
 
-  .b-dark .bc-lexical-editor [data-lexical-placeholder] {
+  .dark .bc-lexical-editor [data-lexical-placeholder] {
     color: var(--color-neutral-500);
   }
 
-  .b-dark .bc-lexical-editor blockquote {
+  .dark .bc-lexical-editor blockquote {
     border-left-color: var(--color-neutral-600);
   }
 
-  .b-dark .bc-lexical-editor code {
+  .dark .bc-lexical-editor code {
     background-color: var(--color-neutral-800);
     color: var(--color-neutral-200);
   }
 
-  .b-dark .bc-lexical-editor pre {
+  .dark .bc-lexical-editor pre {
     background-color: var(--color-neutral-900);
     border-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-lexical-editor a {
+  .dark .bc-lexical-editor a {
     color: var(--color-primary-400);
   }
 
-  .b-dark .bc-lexical-editor a:hover {
+  .dark .bc-lexical-editor a:hover {
     color: var(--color-primary-300);
   }
 
-  .b-dark .bc-lexical-editor hr {
+  .dark .bc-lexical-editor hr {
     border-top-color: var(--color-neutral-700);
   }
 
@@ -7542,7 +7816,7 @@ a:focus-visible {
       box-shadow: 0 0 0 3px var(--color-primary-100);
     }
 
-    .b-dark .bc-lexical-editor-container:focus-within {
+    .dark .bc-lexical-editor-container:focus-within {
       box-shadow: 0 0 0 3px var(--color-primary-900);
     }
   }
@@ -7561,7 +7835,7 @@ a:focus-visible {
     flex-wrap: wrap;
   }
 
-  .b-dark .bc-lexical-toolbar {
+  .dark .bc-lexical-toolbar {
     background-color: var(--color-neutral-800);
   }
 
@@ -7570,7 +7844,7 @@ a:focus-visible {
     border-bottom: 1px solid var(--color-neutral-200);
   }
 
-  .b-dark .bc-lexical-editor-container > .bc-lexical-toolbar {
+  .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
     border-bottom-color: var(--color-neutral-700);
   }
 
@@ -7580,7 +7854,7 @@ a:focus-visible {
     border-top: 1px solid var(--color-neutral-200);
   }
 
-  .b-dark .bc-lexical-toolbar--bottom {
+  .dark .bc-lexical-toolbar--bottom {
     border-top-color: var(--color-neutral-700);
   }
 
@@ -7601,7 +7875,7 @@ a:focus-visible {
     cursor: pointer;
   }
 
-  .b-dark .bc-lexical-toolbar-select {
+  .dark .bc-lexical-toolbar-select {
     border-color: var(--color-neutral-600);
     background-color: var(--color-neutral-700);
     color: var(--color-neutral-100);
@@ -7623,7 +7897,7 @@ a:focus-visible {
     background-color: var(--color-neutral-200);
   }
 
-  .b-dark .bc-lexical-toolbar-color:hover {
+  .dark .bc-lexical-toolbar-color:hover {
     background-color: var(--color-neutral-600);
   }
 
@@ -7680,7 +7954,7 @@ a:focus-visible {
     animation: bc-floating-toolbar-enter 0.15s ease-out;
   }
 
-  .b-dark .bc-floating-toolbar {
+  .dark .bc-floating-toolbar {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -7713,7 +7987,7 @@ a:focus-visible {
     animation: bc-slash-palette-enter 0.12s ease-out;
   }
 
-  .b-dark .bc-slash-command-palette {
+  .dark .bc-slash-command-palette {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -7745,8 +8019,8 @@ a:focus-visible {
     background-color: var(--color-primary-50);
   }
 
-  .b-dark .bc-slash-command-palette__item:hover,
-  .b-dark .bc-slash-command-palette__item[aria-selected='true'] {
+  .dark .bc-slash-command-palette__item:hover,
+  .dark .bc-slash-command-palette__item[aria-selected='true'] {
     background-color: var(--color-primary-900);
   }
 
@@ -7771,7 +8045,7 @@ a:focus-visible {
     margin-bottom: 2px;
   }
 
-  .b-dark .bc-slash-command-palette__label {
+  .dark .bc-slash-command-palette__label {
     color: var(--color-neutral-100);
   }
 
@@ -7792,7 +8066,7 @@ a:focus-visible {
     flex-shrink: 0;
   }
 
-  .b-dark .bc-slash-command-palette__category {
+  .dark .bc-slash-command-palette__category {
     background-color: var(--color-neutral-700);
     color: var(--color-neutral-400);
   }
@@ -7846,13 +8120,13 @@ a:focus-visible {
     cursor: not-allowed;
   }
 
-  .b-dark .bc-block-handle__button {
+  .dark .bc-block-handle__button {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
     color: var(--color-neutral-500);
   }
 
-  .b-dark .bc-block-handle__button:hover {
+  .dark .bc-block-handle__button:hover {
     background-color: var(--color-neutral-700);
     color: var(--color-neutral-300);
     border-color: var(--color-neutral-600);
@@ -7928,42 +8202,42 @@ a:focus-visible {
   }
 
   /* Dark mode styles */
-  .b-dark .bc-lexical-table-cell,
-  .b-dark .bc-lexical-table-cell-header {
+  .dark .bc-lexical-table-cell,
+  .dark .bc-lexical-table-cell-header {
     border-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-lexical-table-row {
+  .dark .bc-lexical-table-row {
     border-bottom-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-lexical-table-cell-header {
+  .dark .bc-lexical-table-cell-header {
     background-color: var(--color-neutral-800);
   }
 
-  .b-dark .bc-lexical-table-cell--selected {
+  .dark .bc-lexical-table-cell--selected {
     background-color: var(--color-primary-900);
     outline-color: var(--color-primary-400);
   }
 
-  .b-dark .bc-table-context-menu {
+  .dark .bc-table-context-menu {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-table-menu-button {
+  .dark .bc-table-menu-button {
     color: var(--color-neutral-100);
   }
 
-  .b-dark .bc-table-menu-button:hover:not(:disabled) {
+  .dark .bc-table-menu-button:hover:not(:disabled) {
     background-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-table-menu-button:active:not(:disabled) {
+  .dark .bc-table-menu-button:active:not(:disabled) {
     background-color: var(--color-neutral-600);
   }
 
-  .b-dark .bc-table-menu-separator {
+  .dark .bc-table-menu-separator {
     background-color: var(--color-neutral-700);
   }
 
@@ -8104,97 +8378,97 @@ a:focus-visible {
   }
 
   /* Dark mode styles */
-  .b-dark .bc-lexical-code-block {
+  .dark .bc-lexical-code-block {
     background-color: var(--color-neutral-900);
     border-color: var(--color-neutral-700);
     color: var(--color-neutral-100);
   }
 
-  .b-dark .bc-code-language-button {
+  .dark .bc-code-language-button {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-600);
     color: var(--color-neutral-200);
   }
 
-  .b-dark .bc-code-language-button:hover:not(:disabled) {
+  .dark .bc-code-language-button:hover:not(:disabled) {
     background-color: var(--color-neutral-700);
     border-color: var(--color-neutral-500);
   }
 
-  .b-dark .bc-code-language-dropdown {
+  .dark .bc-code-language-dropdown {
     background-color: var(--color-neutral-800);
     border-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-code-language-option {
+  .dark .bc-code-language-option {
     color: var(--color-neutral-100);
   }
 
-  .b-dark .bc-code-language-option:hover {
+  .dark .bc-code-language-option:hover {
     background-color: var(--color-neutral-700);
   }
 
-  .b-dark .bc-code-language-option:active {
+  .dark .bc-code-language-option:active {
     background-color: var(--color-neutral-600);
   }
 
   /* Syntax highlighting token colors (dark theme) */
-  .b-dark .bc-lexical-code-block .token.comment,
-  .b-dark .bc-lexical-code-block .token.prolog,
-  .b-dark .bc-lexical-code-block .token.doctype,
-  .b-dark .bc-lexical-code-block .token.cdata {
+  .dark .bc-lexical-code-block .token.comment,
+  .dark .bc-lexical-code-block .token.prolog,
+  .dark .bc-lexical-code-block .token.doctype,
+  .dark .bc-lexical-code-block .token.cdata {
     color: #8b949e;
   }
 
-  .b-dark .bc-lexical-code-block .token.punctuation {
+  .dark .bc-lexical-code-block .token.punctuation {
     color: #c9d1d9;
   }
 
-  .b-dark .bc-lexical-code-block .token.property,
-  .b-dark .bc-lexical-code-block .token.tag,
-  .b-dark .bc-lexical-code-block .token.boolean,
-  .b-dark .bc-lexical-code-block .token.number,
-  .b-dark .bc-lexical-code-block .token.constant,
-  .b-dark .bc-lexical-code-block .token.symbol,
-  .b-dark .bc-lexical-code-block .token.deleted {
+  .dark .bc-lexical-code-block .token.property,
+  .dark .bc-lexical-code-block .token.tag,
+  .dark .bc-lexical-code-block .token.boolean,
+  .dark .bc-lexical-code-block .token.number,
+  .dark .bc-lexical-code-block .token.constant,
+  .dark .bc-lexical-code-block .token.symbol,
+  .dark .bc-lexical-code-block .token.deleted {
     color: #79c0ff;
   }
 
-  .b-dark .bc-lexical-code-block .token.selector,
-  .b-dark .bc-lexical-code-block .token.attr-name,
-  .b-dark .bc-lexical-code-block .token.string,
-  .b-dark .bc-lexical-code-block .token.char,
-  .b-dark .bc-lexical-code-block .token.builtin,
-  .b-dark .bc-lexical-code-block .token.inserted {
+  .dark .bc-lexical-code-block .token.selector,
+  .dark .bc-lexical-code-block .token.attr-name,
+  .dark .bc-lexical-code-block .token.string,
+  .dark .bc-lexical-code-block .token.char,
+  .dark .bc-lexical-code-block .token.builtin,
+  .dark .bc-lexical-code-block .token.inserted {
     color: #a5d6ff;
   }
 
-  .b-dark .bc-lexical-code-block .token.operator,
-  .b-dark .bc-lexical-code-block .token.entity,
-  .b-dark .bc-lexical-code-block .token.url,
-  .b-dark .bc-lexical-code-block .language-css .token.string,
-  .b-dark .bc-lexical-code-block .style .token.string {
+  .dark .bc-lexical-code-block .token.operator,
+  .dark .bc-lexical-code-block .token.entity,
+  .dark .bc-lexical-code-block .token.url,
+  .dark .bc-lexical-code-block .language-css .token.string,
+  .dark .bc-lexical-code-block .style .token.string {
     color: #ff7b72;
   }
 
-  .b-dark .bc-lexical-code-block .token.atrule,
-  .b-dark .bc-lexical-code-block .token.attr-value,
-  .b-dark .bc-lexical-code-block .token.keyword {
+  .dark .bc-lexical-code-block .token.atrule,
+  .dark .bc-lexical-code-block .token.attr-value,
+  .dark .bc-lexical-code-block .token.keyword {
     color: #ff7b72;
   }
 
-  .b-dark .bc-lexical-code-block .token.function,
-  .b-dark .bc-lexical-code-block .token.class-name {
+  .dark .bc-lexical-code-block .token.function,
+  .dark .bc-lexical-code-block .token.class-name {
     color: #d2a8ff;
   }
 
-  .b-dark .bc-lexical-code-block .token.regex,
-  .b-dark .bc-lexical-code-block .token.important,
-  .b-dark .bc-lexical-code-block .token.variable {
+  .dark .bc-lexical-code-block .token.regex,
+  .dark .bc-lexical-code-block .token.important,
+  .dark .bc-lexical-code-block .token.variable {
     color: #ffa657;
   }
 
-  .b-dark .bc-lexical-code-block .line-number {
+  .dark .bc-lexical-code-block .line-number {
     color: var(--color-neutral-600);
   }
 
@@ -8284,11 +8558,11 @@ a:focus-visible {
   color: var(--link-hover-color);
 }
 
-.b-dark .bc-link {
+.dark .bc-link {
   color: var(--link-color-dark);
 }
 
-.b-dark .bc-link:hover {
+.dark .bc-link:hover {
   color: var(--link-hover-color-dark);
 }
 
@@ -8376,7 +8650,7 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-menu {
+.dark .bc-menu {
   background-color: var(--bg-surface);
   border-color: var(--border-default);
 }
@@ -8446,16 +8720,16 @@ a:focus-visible {
 }
 
 /* Dark mode menu item styles */
-.b-dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
+.dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
   background-color: var(--interactive-hover);
 }
 
-.b-dark .bc-menu-item--focused {
+.dark .bc-menu-item--focused {
   background-color: var(--color-primary-900);
   color: var(--color-primary-100);
 }
 
-.b-dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
+.dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
   background-color: var(--interactive-active);
 }
 
@@ -8500,11 +8774,11 @@ a:focus-visible {
 }
 
 /* Dark mode separator styles */
-.b-dark .bc-menu-separator {
+.dark .bc-menu-separator {
   border-color: var(--border-divider);
 }
 
-.b-dark .bc-menu-separator__label {
+.dark .bc-menu-separator__label {
   background-color: var(--bg-surface);
 }
 
@@ -8627,7 +8901,7 @@ a:focus-visible {
     background-color: var(--color-base-200);
   }
 
-  .b-dark .bc-menu-item:active {
+  .dark .bc-menu-item:active {
     background-color: var(--interactive-active);
   }
 }
@@ -9080,41 +9354,41 @@ a:focus-visible {
 }
 
 /* Dark mode styles */
-.b-dark .bc-modal {
+.dark .bc-modal {
   background-color: var(--bg-surface);
   border: 1px solid var(--border-default);
   color: var(--text-normal);
 }
 
-.b-dark .bc-modal__header {
+.dark .bc-modal__header {
   border-bottom: 1px solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
-.b-dark .bc-modal__body {
+.dark .bc-modal__body {
   color: var(--text-normal);
   background-color: var(--bg-surface);
 }
 
-.b-dark .bc-modal__footer {
+.dark .bc-modal__footer {
   border-top: 1px solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
-.b-dark .bc-modal__confirm-body {
+.dark .bc-modal__confirm-body {
   color: var(--color-base-400);
 }
 
-.b-dark .bc-modal__confirm-consequences {
+.dark .bc-modal__confirm-consequences {
   background: var(--color-base-800);
   color: var(--color-base-400);
 }
 
-.b-dark .bc-modal__confirm-consequences li::before {
+.dark .bc-modal__confirm-consequences li::before {
   color: var(--color-base-600);
 }
 
-.b-dark .bc-modal--confirm .bc-modal__footer {
+.dark .bc-modal--confirm .bc-modal__footer {
   border-top: 1px solid var(--color-base-700);
   background: var(--color-base-800);
 }
@@ -9198,7 +9472,7 @@ a:focus-visible {
   color: var(--color-gray-700);
 }
 
-.b-dark .bc-modal__title {
+.dark .bc-modal__title {
   color: var(--color-gray-200);
 }
 
@@ -9399,6 +9673,15 @@ a:focus-visible {
   transform: none;
 }
 
+/* Dark mode */
+.dark .bc-number-input-steppers-button {
+  outline-color: var(--color-base-600);
+}
+
+.dark .bc-number-input-steppers-button:hover {
+  background-color: var(--color-base-700);
+}
+
 /* export type OverlayEffect = 'transparent' | 'opaque'
 export type OverlayMode = 'capturing' | 'non-capturing' */
 
@@ -9439,12 +9722,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark mode styles */
-.b-dark .bc-overlay--effect-transparent {
+.dark .bc-overlay--effect-transparent {
   background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
 }
 
-.b-dark .bc-overlay--effect-opaque[data-status='opened'],
-.b-dark .bc-overlay--effect-opaque[data-status='opening'] {
+.dark .bc-overlay--effect-opaque[data-status='opened'],
+.dark .bc-overlay--effect-opaque[data-status='opening'] {
   background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
   backdrop-filter: blur(4px);
 }
@@ -9461,7 +9744,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark mode */
-.b-dark .bc-popover {
+.dark .bc-popover {
   background: var(--color-base-800);
   border-color: var(--color-base-700);
   color: var(--color-base-200);
@@ -9493,6 +9776,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--color-gray-900);
 }
 
+.dark .bc-lightbox__close {
+  background-color: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
+  color: var(--color-gray-100);
+}
+
 .bc-lightbox__viewport {
   position: absolute;
   inset: 0;
@@ -9600,7 +9888,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   overflow: hidden;
 }
 
-.b-dark .bc-panel {
+.dark .bc-panel {
   background-color: var(--panel-bg-dark);
   color: var(--panel-text-dark);
 }
@@ -9772,31 +10060,31 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark Mode Support */
-.b-dark .bc-pagination__item {
+.dark .bc-pagination__item {
   color: var(--color-base-300);
 }
 
-.b-dark .bc-pagination__item:hover:not(:disabled) {
+.dark .bc-pagination__item:hover:not(:disabled) {
   background-color: var(--color-base-700);
   color: var(--color-base-100);
 }
 
-.b-dark .bc-pagination__item--active {
+.dark .bc-pagination__item--active {
   background-color: var(--color-primary-600);
   color: var(--color-white);
 }
 
-.b-dark .bc-pagination__item--active:hover {
+.dark .bc-pagination__item--active:hover {
   background-color: var(--color-primary-600);
   color: var(--color-white);
 }
 
-.b-dark .bc-pagination__item:disabled:hover {
+.dark .bc-pagination__item:disabled:hover {
   background: transparent;
   color: var(--color-base-300);
 }
 
-.b-dark .bc-pagination__dots {
+.dark .bc-pagination__dots {
   color: var(--color-base-600);
 }
 
@@ -9839,7 +10127,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   overflow: hidden;
 }
 
-.b-dark .bc-password-strength__bar {
+.dark .bc-password-strength__bar {
   background-color: var(--color-gray-700);
 }
 
@@ -9895,19 +10183,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--color-success-600);
 }
 
-.b-dark .bc-password-strength--weak .bc-password-strength__label {
+.dark .bc-password-strength--weak .bc-password-strength__label {
   color: var(--color-danger-400);
 }
 
-.b-dark .bc-password-strength--fair .bc-password-strength__label {
+.dark .bc-password-strength--fair .bc-password-strength__label {
   color: var(--color-warning-400);
 }
 
-.b-dark .bc-password-strength--good .bc-password-strength__label {
+.dark .bc-password-strength--good .bc-password-strength__label {
   color: var(--color-info-400);
 }
 
-.b-dark .bc-password-strength--strong .bc-password-strength__label {
+.dark .bc-password-strength--strong .bc-password-strength__label {
   color: var(--color-success-400);
 }
 
@@ -9933,7 +10221,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--color-success-600);
 }
 
-.b-dark .bc-password-strength__requirement--met {
+.dark .bc-password-strength__requirement--met {
   color: var(--color-success-400);
 }
 
@@ -9957,7 +10245,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   overflow: hidden;
 }
 
-.b-dark .bc-password-strength-bar {
+.dark .bc-password-strength-bar {
   background-color: var(--color-gray-700);
 }
 
@@ -10008,19 +10296,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   color: var(--color-success-600);
 }
 
-.b-dark .bc-password-strength-text--weak {
+.dark .bc-password-strength-text--weak {
   color: var(--color-danger-400);
 }
 
-.b-dark .bc-password-strength-text--fair {
+.dark .bc-password-strength-text--fair {
   color: var(--color-warning-400);
 }
 
-.b-dark .bc-password-strength-text--good {
+.dark .bc-password-strength-text--good {
   color: var(--color-info-400);
 }
 
-.b-dark .bc-password-strength-text--strong {
+.dark .bc-password-strength-text--strong {
   color: var(--color-success-400);
 }
 
@@ -10031,8 +10319,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
     border: 1px solid var(--border-default);
   }
 
-  .b-dark .bc-password-strength__bar,
-  .b-dark .bc-password-strength-bar {
+  .dark .bc-password-strength__bar,
+  .dark .bc-password-strength-bar {
     border-color: var(--border-default);
   }
 }
@@ -10210,11 +10498,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark mode styles */
-.b-dark .bc-progress-bar__track {
+.dark .bc-progress-bar__track {
   background-color: var(--progress-track-dark);
 }
 
-.b-dark .bc-progress-bar__fill {
+.dark .bc-progress-bar__fill {
   background-color: var(--progress-fill-dark);
 }
 
@@ -10354,20 +10642,20 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark mode styles */
-.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
+.dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
   background: var(--bg-subtle);
 }
 
-.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
+.dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
   background: var(--bg-raised);
   border-radius: var(--radius-sm);
 }
 
-.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
+.dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
   background: var(--bg-overlay);
 }
 
-.b-dark .bc-scrollable-panel__body {
+.dark .bc-scrollable-panel__body {
   scrollbar-color: var(--bg-raised) var(--bg-subtle);
 }
 
@@ -10500,12 +10788,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 /* Dark mode styles */
-.b-dark .bc-segmented-input {
+.dark .bc-segmented-input {
   background-color: var(--bg-subtle);
   border: 1px solid var(--border-default);
 }
 
-.b-dark .bc-segmented-input__indicator {
+.dark .bc-segmented-input__indicator {
   background-color: var(--si-indicator-bg-dark, var(--bg-elevated));
   box-shadow: var(
     --shadow-segmented-control-indicator-dark,
@@ -10514,49 +10802,49 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   );
 }
 
-.b-dark .bc-segmented-input__segment {
+.dark .bc-segmented-input__segment {
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   border-radius: var(--radius-full);
 }
 
-.b-dark .bc-segmented-input--squared .bc-segmented-input__segment {
+.dark .bc-segmented-input--squared .bc-segmented-input__segment {
   border-radius: var(--radius-control-sm, var(--radius-sm));
 }
 
-.b-dark .bc-segmented-input__segment:hover {
+.dark .bc-segmented-input__segment:hover {
   color: var(--text-normal);
   background-color: var(--interactive-hover);
 }
 
-.b-dark .bc-segmented-input__segment--active,
-.b-dark .bc-segmented-input__segment--active:hover {
+.dark .bc-segmented-input__segment--active,
+.dark .bc-segmented-input__segment--active:hover {
   color: var(--si-active-text-dark, var(--text-normal));
   background: transparent;
 }
 
-.b-dark .bc-segmented-input__segment--inactive:hover {
+.dark .bc-segmented-input__segment--inactive:hover {
   color: var(--text-normal);
 }
 
 /* Disabled state (dark) */
-.b-dark .bc-segmented-input--disabled {
+.dark .bc-segmented-input--disabled {
   background-color: var(--bg-background);
   border: 1px solid var(--border-divider);
   opacity: 0.5;
 }
 
-.b-dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
+.dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
   background-color: var(--bg-subtle);
   box-shadow: var(--shadow-none, none);
 }
 
-.b-dark .bc-segmented-input--disabled .bc-segmented-input__segment {
+.dark .bc-segmented-input--disabled .bc-segmented-input__segment {
   cursor: not-allowed;
 }
 
-.b-dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
+.dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
   background-color: transparent;
 }
 
@@ -10674,7 +10962,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark span.bc-sidebar-link {
+.dark span.bc-sidebar-link {
   color: var(--color-primary-200);
 }
 
@@ -10711,7 +10999,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark background mode in dark theme - inverted back to light colors */
-.b-dark .bc-sidebar--dark-bg span.bc-sidebar-link {
+.dark .bc-sidebar--dark-bg span.bc-sidebar-link {
   color: var(--color-primary-700);
 }
 
@@ -10805,28 +11093,28 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark .bc-sink {
+.dark .bc-sink {
   background-color: var(--bg-background);
   border: 1px solid var(--border-default);
   box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
   color: var(--text-normal);
 }
 
-.b-dark .bc-sink--deep {
+.dark .bc-sink--deep {
   box-shadow: var(
     --shadow-sink-dark-deep,
     inset 0 4px 8px var(--shadow-color-dark)
   );
 }
 
-.b-dark .bc-sink--shallow {
+.dark .bc-sink--shallow {
   box-shadow: var(
     --shadow-sink-dark-shallow,
     inset 0 1px 2px var(--shadow-color-dark)
   );
 }
 
-.b-dark .bc-sink--flat {
+.dark .bc-sink--flat {
   box-shadow: var(--shadow-sink-dark-flat, none);
   border: 1px solid var(--border-divider);
   background-color: var(--bg-subtle);
@@ -10902,7 +11190,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark .bc-skeleton {
+.dark .bc-skeleton {
   --skeleton-bg: oklch(0.25 0 0);
   --skeleton-shimmer: oklch(0.3 0 0);
 }
@@ -11055,22 +11343,22 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark .bc-tag {
+.dark .bc-tag {
   background-color: var(--tag-bg-dark);
   color: var(--tag-text-dark);
   border-color: var(--tag-border-dark);
 }
 
-.b-dark .bc-tag:hover {
+.dark .bc-tag:hover {
   background-color: var(--tag-bg-hover-dark);
   color: var(--tag-text-hover-dark);
 }
 
-.b-dark .bc-tag__close {
+.dark .bc-tag__close {
   color: var(--tag-text-dark);
 }
 
-.b-dark .bc-tag__close:hover:not(:disabled) {
+.dark .bc-tag__close:hover:not(:disabled) {
   color: var(--tag-text-dark);
   border-color: color-mix(in srgb, var(--tag-text-dark) 30%, transparent);
 }
@@ -11138,11 +11426,9 @@ span.bc-sidebar-link {
   display: grid;
   grid-template-areas: 'stack';
   border-radius: var(--radius-full);
-  box-shadow: var(
-    --shadow-switch-track,
-    inset 0 0 calc(var(--spacing-base))
-      color-mix(in srgb, var(--color-black) 20%, transparent)
-  );
+  box-shadow:
+    inset 0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
+    inset 0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent);
   transition: background-color var(--motion-transition-fast)
     var(--motion-easing-standard);
   cursor: pointer;
@@ -11220,9 +11506,9 @@ span.bc-sidebar-link {
 /* Switch thumb/handle */
 .bc-switch__thumb {
   grid-area: stack;
+  position: relative;
   width: calc(var(--spacing-base) * 4); /* 16px equivalent */
   height: calc(var(--spacing-base) * 4);
-  /* margin-top: calc(var(--spacing-base) / 2); */
   border-radius: var(--radius-full);
   background-color: var(--color-white);
   box-shadow: var(
@@ -11231,16 +11517,26 @@ span.bc-sidebar-link {
     0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
   );
   z-index: 1;
-  transition: transform var(--motion-transition-fast)
-    var(--motion-easing-standard);
+  inset-inline-start: 0;
+  transition: inset-inline-start var(--motion-duration-fast, 120ms)
+    cubic-bezier(0.2, 0, 0, 1);
   pointer-events: none;
 }
 
+/* Thumb position when on — uses inset-inline-start so RTL is handled
+   automatically via the logical property. calc(100% - thumbWidth) moves
+   the thumb to the far end of the grid area regardless of track width. */
+.bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 4);
+}
+
 /* Size variants for track and thumb */
 .bc-switch--xs .bc-switch__thumb {
   width: calc(var(--spacing-base) * 3); /* 12px equivalent */
   height: calc(var(--spacing-base) * 3);
-  /* margin-top: calc(var(--spacing-base) / 1); */
+}
+.bc-switch--xs .bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 3);
 }
 .bc-switch--xs .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11257,7 +11553,9 @@ span.bc-sidebar-link {
 .bc-switch--sm .bc-switch__thumb {
   width: calc(var(--spacing-base) * 3.5); /* 14px equivalent */
   height: calc(var(--spacing-base) * 3.5);
-  /* margin-top: calc(var(--spacing-base) / 1); */
+}
+.bc-switch--sm .bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 3.5);
 }
 .bc-switch--sm .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11274,7 +11572,9 @@ span.bc-sidebar-link {
 .bc-switch--md .bc-switch__thumb {
   width: calc(var(--spacing-base) * 4); /* 20px equivalent */
   height: calc(var(--spacing-base) * 4);
-  /* margin-top: calc(var(--spacing-base) / 1); */
+}
+.bc-switch--md .bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 4);
 }
 .bc-switch--md .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11291,7 +11591,9 @@ span.bc-sidebar-link {
 .bc-switch--lg .bc-switch__thumb {
   width: calc(var(--spacing-base) * 5); /* 20px equivalent */
   height: calc(var(--spacing-base) * 5);
-  /* margin-top: calc(var(--spacing-base) / 1); */
+}
+.bc-switch--lg .bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 5);
 }
 .bc-switch--lg .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11308,7 +11610,9 @@ span.bc-sidebar-link {
 .bc-switch--xl .bc-switch__thumb {
   width: calc(var(--spacing-base) * 6); /* 24px equivalent */
   height: calc(var(--spacing-base) * 6);
-  /* margin-top: calc(var(--spacing-base) / 1); */
+}
+.bc-switch--xl .bc-switch__thumb--on {
+  inset-inline-start: calc(100% - var(--spacing-base) * 6);
 }
 .bc-switch--xl .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11353,25 +11657,25 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark .bc-switch__label {
+.dark .bc-switch__label {
   color: var(--text-normal);
 }
 
-.b-dark .bc-switch__track--off {
+.dark .bc-switch__track--off {
   background-color: var(--bg-subtle);
   border: 1px solid var(--border-default);
 }
 
-.b-dark .bc-switch__track--on {
+.dark .bc-switch__track--on {
   background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
   border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
 }
 
-.b-dark .bc-switch__track-label--on {
+.dark .bc-switch__track-label--on {
   color: var(--switch-track-on-label-dark, var(--text-normal));
 }
 
-.b-dark .bc-switch__thumb {
+.dark .bc-switch__thumb {
   background-color: var(--text-normal);
   box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
 }
@@ -11570,7 +11874,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode styles */
-.b-dark .bc-table-container {
+.dark .bc-table-container {
   --table-bg: var(--bg-background);
   --table-stripe-bg: var(--bg-surface);
 }
@@ -11794,30 +12098,30 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode support */
-.b-dark .bc-tabs__list {
+.dark .bc-tabs__list {
   background-color: var(--color-base-800);
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-tab {
+.dark .bc-tab {
   color: var(--color-base-300);
 }
 
-.b-dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
+.dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
   color: var(--color-base-100);
   background-color: var(--color-base-700);
 }
 
-.b-dark .bc-tab--active {
+.dark .bc-tab--active {
   color: var(--color-primary-400);
   background-color: var(--color-base-900);
 }
 
-.b-dark .bc-tab--disabled {
+.dark .bc-tab--disabled {
   color: var(--color-base-600);
 }
 
-.b-dark .bc-tabs__panel {
+.dark .bc-tabs__panel {
   background-color: var(--color-base-900);
 }
 
@@ -11935,29 +12239,29 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode adjustments for variants */
-.b-dark .bc-tabs--variant-text .bc-tabs__list {
+.dark .bc-tabs--variant-text .bc-tabs__list {
   background-color: transparent;
   border-bottom: none;
 }
-.b-dark .bc-tabs--variant-text .bc-tab {
+.dark .bc-tabs--variant-text .bc-tab {
   color: var(--color-primary-300);
 }
-.b-dark .bc-tabs--variant-text .bc-tab--active {
+.dark .bc-tabs--variant-text .bc-tab--active {
   color: var(--color-primary-200);
 }
 
-.b-dark .bc-tabs--variant-filled .bc-tab {
+.dark .bc-tabs--variant-filled .bc-tab {
   background-color: var(--tabs-filled-inactive-bg-dark);
   color: var(--tabs-filled-inactive-text-dark);
 }
-.b-dark .bc-tabs--variant-filled .bc-tab--active {
+.dark .bc-tabs--variant-filled .bc-tab--active {
   background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
   color: var(--tabs-filled-active-text-dark);
 }
-.b-dark
+.dark
   .bc-tabs--variant-filled
   .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
-.b-dark
+.dark
   .bc-tabs--variant-filled
   .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
   background-color: var(
@@ -11966,11 +12270,11 @@ span.bc-sidebar-link {
   );
 }
 
-.b-dark .bc-tabs--variant-outline .bc-tab {
+.dark .bc-tabs--variant-outline .bc-tab {
   background-color: var(--color-base-800);
   border-color: var(--color-base-600);
 }
-.b-dark .bc-tabs--variant-outline .bc-tab--active {
+.dark .bc-tabs--variant-outline .bc-tab--active {
   background-color: var(--color-base-900);
   border-color: var(--color-primary-600);
   border-bottom-color: var(--color-base-900);
@@ -12082,46 +12386,46 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode adjustments for underline variant */
-.b-dark .bc-tabs--variant-underline .bc-tabs__list {
+.dark .bc-tabs--variant-underline .bc-tabs__list {
   background-color: transparent;
   border-bottom-color: var(--color-base-700);
 }
 
-.b-dark .bc-tabs--variant-underline .bc-tab {
+.dark .bc-tabs--variant-underline .bc-tab {
   color: var(--color-base-500);
 }
 
-.b-dark
+.dark
   .bc-tabs--variant-underline
   .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
   color: var(--color-base-300);
 }
 
-.b-dark .bc-tabs--variant-underline .bc-tab--active {
+.dark .bc-tabs--variant-underline .bc-tab--active {
   color: var(--color-primary-400);
 }
 
-.b-dark .bc-tabs--variant-underline .bc-tab--active::after {
+.dark .bc-tabs--variant-underline .bc-tab--active::after {
   background-color: var(--color-primary-400);
 }
 
 /* Dark mode adjustments for pill variant */
-.b-dark .bc-tabs--variant-pill .bc-tabs__list {
+.dark .bc-tabs--variant-pill .bc-tabs__list {
   background-color: var(--color-base-800);
 }
 
-.b-dark .bc-tabs--variant-pill .bc-tab {
+.dark .bc-tabs--variant-pill .bc-tab {
   color: var(--color-base-500);
 }
 
-.b-dark
+.dark
   .bc-tabs--variant-pill
   .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
   color: var(--color-base-300);
   background-color: var(--color-base-700);
 }
 
-.b-dark .bc-tabs--variant-pill .bc-tab--active {
+.dark .bc-tabs--variant-pill .bc-tab--active {
   background-color: var(--color-base-900);
   color: var(--color-base-200);
   box-shadow: var(--shadow-sm);
@@ -12248,21 +12552,21 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-tag-input {
+.dark .bc-tag-input {
   background: var(--color-base-800);
   border-color: var(--color-base-600);
 }
 
-.b-dark .bc-tag-input__tag {
+.dark .bc-tag-input__tag {
   background: var(--color-base-700);
   color: var(--color-base-200);
 }
 
-.b-dark .bc-tag-input__tag-remove {
+.dark .bc-tag-input__tag-remove {
   color: var(--color-base-400);
 }
 
-.b-dark .bc-tag-input__input {
+.dark .bc-tag-input__input {
   color: var(--color-base-100);
 }
 
@@ -12348,7 +12652,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark theme adjustments */
-.b-dark .bc-tooltip {
+.dark .bc-tooltip {
   background-color: var(--bg-elevated);
   color: var(--text-normal);
   border: 1px solid var(--border-default);
@@ -12359,7 +12663,7 @@ span.bc-sidebar-link {
   );
 }
 
-.b-dark .bc-tooltip__arrow svg path {
+.dark .bc-tooltip__arrow svg path {
   fill: var(--bg-elevated);
   stroke: var(--border-default);
   stroke-width: 1;
@@ -12371,7 +12675,7 @@ span.bc-sidebar-link {
     border: 1px solid var(--color-neutral-600);
   }
 
-  .b-dark .bc-tooltip {
+  .dark .bc-tooltip {
     border: 1px solid var(--color-neutral-400);
   }
 }
@@ -12395,7 +12699,7 @@ span.bc-sidebar-link {
   width: 100%;
 }
 
-.b-dark .bc-toolbar {
+.dark .bc-toolbar {
   background-color: var(--color-neutral-800);
   border-color: var(--color-neutral-700);
 }
@@ -12413,7 +12717,7 @@ span.bc-sidebar-link {
   margin: 0 var(--spacing-xs);
 }
 
-.b-dark .bc-toolbar__divider {
+.dark .bc-toolbar__divider {
   background-color: var(--color-neutral-600);
 }
 
@@ -12543,29 +12847,27 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
+.dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
   color: var(--color-base-300);
 }
 
-.b-dark
-  .bc-toolbar__group
-  > .bc-toolbar__button.bc-button:hover:not(:disabled) {
+.dark .bc-toolbar__group > .bc-toolbar__button.bc-button:hover:not(:disabled) {
   background-color: var(--color-base-700);
   color: var(--color-base-100);
 }
 
-.b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
-.b-dark
+.dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
+.dark
   .bc-toolbar__group
   > .bc-toolbar__button.bc-button.bc-toolbar__button--active {
   background-color: var(--color-primary-900);
   color: var(--color-primary-300);
 }
 
-.b-dark
+.dark
   .bc-toolbar__group
   > .bc-toolbar__button.bc-button[aria-pressed='true']:hover:not(:disabled),
-.b-dark
+.dark
   .bc-toolbar__group
   > .bc-toolbar__button.bc-button.bc-toolbar__button--active:hover:not(
     :disabled
@@ -12621,29 +12923,26 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode for floating toolbar */
-.b-dark .bc-toolbar--floating {
+.dark .bc-toolbar--floating {
   background: var(--color-base-800);
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
+.dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
   color: var(--color-base-300);
 }
 
-.b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
+.dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
   background: var(--color-base-700);
 }
 
-.b-dark
-  .bc-toolbar--floating
-  .bc-toolbar__button
-  .bc-button[aria-pressed='true'],
-.b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
+.dark .bc-toolbar--floating .bc-toolbar__button .bc-button[aria-pressed='true'],
+.dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
   background: var(--color-primary-900);
   color: var(--color-primary-300);
 }
 
-.b-dark .bc-toolbar--floating .bc-toolbar__divider {
+.dark .bc-toolbar--floating .bc-toolbar__divider {
   background: var(--color-base-700);
 }
 
@@ -12764,28 +13063,28 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-tree-item__row:hover {
+.dark .bc-tree-item__row:hover {
   background-color: oklch(0.25 0 0);
 }
 
-.b-dark .bc-tree-item__row--selected {
+.dark .bc-tree-item__row--selected {
   background-color: oklch(0.25 0.03 250);
   color: oklch(0.75 0.12 250);
 }
 
-.b-dark .bc-tree-item__toggle {
+.dark .bc-tree-item__toggle {
   color: var(--color-gray-400);
 }
 
-.b-dark .bc-tree-item__toggle:hover {
+.dark .bc-tree-item__toggle:hover {
   color: var(--color-gray-200);
 }
 
-.b-dark .bc-tree-item__icon {
+.dark .bc-tree-item__icon {
   color: var(--color-gray-400);
 }
 
-.b-dark .bc-tree-item__badge {
+.dark .bc-tree-item__badge {
   background: oklch(0.25 0 0);
   color: var(--color-gray-300);
 }
@@ -12806,7 +13105,7 @@ span.bc-sidebar-link {
   outline-offset: -2px;
 }
 
-.b-dark .bc-tree-item__row:focus-visible {
+.dark .bc-tree-item__row:focus-visible {
   outline-color: var(--color-primary-400);
 }
 
@@ -13051,29 +13350,29 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-radio-group__indicator {
+.dark .bc-radio-group__indicator {
   border-color: var(--border-default);
   background-color: var(--bg-surface);
 }
 
-.b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
+.dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
   border-color: var(--color-primary-400);
 }
 
-.b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
+.dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
   background-color: var(--color-primary-400);
 }
 
-.b-dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
+.dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
   outline-color: var(--interactive-focus);
 }
 
-.b-dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
+.dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
   border-color: var(--border-default);
   background-color: var(--bg-subtle);
 }
 
-.b-dark
+.dark
   .bc-radio-group__input:disabled:checked
   + .bc-radio-group__indicator::after {
   background-color: var(--text-muted);
@@ -13173,6 +13472,67 @@ span.bc-sidebar-link {
   flex-shrink: 0;
 }
 
+/* Dark mode */
+.dark .bc-notice--tone-prominent {
+  border-color: var(--color-base-700);
+}
+
+.dark .bc-notice--tone-subtle {
+  border-color: var(--color-base-700);
+}
+
+.dark .bc-notice--info.bc-notice--tone-prominent {
+  background-color: color-mix(in srgb, var(--color-info-500) 12%, transparent);
+  border-color: var(--color-info-800);
+  color: var(--color-info-200);
+}
+
+.dark .bc-notice--success.bc-notice--tone-prominent {
+  background-color: color-mix(
+    in srgb,
+    var(--color-success-500) 12%,
+    transparent
+  );
+  border-color: var(--color-success-800);
+  color: var(--color-success-200);
+}
+
+.dark .bc-notice--warning.bc-notice--tone-prominent {
+  background-color: color-mix(
+    in srgb,
+    var(--color-warning-500) 12%,
+    transparent
+  );
+  border-color: var(--color-warning-800);
+  color: var(--color-warning-200);
+}
+
+.dark .bc-notice--danger.bc-notice--tone-prominent {
+  background-color: color-mix(
+    in srgb,
+    var(--color-danger-500) 12%,
+    transparent
+  );
+  border-color: var(--color-danger-800);
+  color: var(--color-danger-200);
+}
+
+.dark .bc-notice--info.bc-notice--tone-subtle {
+  color: var(--color-info-300);
+}
+
+.dark .bc-notice--success.bc-notice--tone-subtle {
+  color: var(--color-success-300);
+}
+
+.dark .bc-notice--warning.bc-notice--tone-subtle {
+  color: var(--color-warning-300);
+}
+
+.dark .bc-notice--danger.bc-notice--tone-subtle {
+  color: var(--color-danger-300);
+}
+
 @layer components {
   .bc-notification {
     --notification-accent-color: var(--color-primary-500);
@@ -13289,7 +13649,7 @@ span.bc-sidebar-link {
     align-items: flex-start;
   }
 
-  .b-dark .bc-notification {
+  .dark .bc-notification {
     --notification-bg: var(--bg-surface);
     --notification-border-color: var(--color-base-700);
   }
@@ -13467,39 +13827,63 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-notification-panel {
+.dark .bc-notification-panel {
   background: var(--color-base-800);
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-notification-panel__header {
+.dark .bc-notification-panel__header {
   border-color: var(--color-base-700);
 }
 
-.b-dark .bc-notification-panel__header-title {
+.dark .bc-notification-panel__header-title {
   color: var(--color-base-100);
 }
 
-.b-dark .bc-notification-panel__item:hover {
+.dark .bc-notification-panel__item:hover {
   background: var(--color-base-700);
 }
 
-.b-dark .bc-notification-panel__item--unread {
+.dark .bc-notification-panel__item--unread {
   background: rgba(37, 99, 235, 0.08);
 }
 
-.b-dark .bc-notification-panel__item-icon {
+.dark .bc-notification-panel__item-icon {
   background: var(--color-base-700);
 }
 
-.b-dark .bc-notification-panel__item-title {
+.dark .bc-notification-panel__item-title {
   color: var(--color-base-100);
 }
 
-.b-dark .bc-notification-panel__item-body {
+.dark .bc-notification-panel__item-body {
   color: var(--color-base-400);
 }
 
+.dark .bc-notification-panel__mark-read-btn {
+  color: var(--color-primary-400);
+}
+
+.dark .bc-notification-panel__close-btn {
+  color: var(--color-base-500);
+}
+
+.dark .bc-notification-panel__item-meta {
+  color: var(--color-base-500);
+}
+
+.dark .bc-notification-panel__item-source {
+  color: var(--color-primary-400);
+}
+
+.dark .bc-notification-panel__empty {
+  color: var(--color-base-500);
+}
+
+.dark .bc-notification-panel__item--unread:hover {
+  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
+}
+
 /* Minimal optional controls for VideoPlayer wrapper */
 
 .bc-video-player {
@@ -13935,7 +14319,7 @@ span.bc-sidebar-link {
   text-align: center;
 }
 
-.b-dark .bc-pdf-page-viewer__error-text {
+.dark .bc-pdf-page-viewer__error-text {
   color: var(--color-danger-400);
 }
 
@@ -14031,11 +14415,11 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-dialog__consequences li::before {
+.dark .bc-dialog__consequences li::before {
   color: var(--color-base-600);
 }
 
-.b-dark .bc-dialog__icon {
+.dark .bc-dialog__icon {
   /* In dark mode, use shade 900 for bg and 400 for fg — applied via inline styles */
 }
 
@@ -14103,7 +14487,7 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode overrides */
-.b-dark .bc-ribbon {
+.dark .bc-ribbon {
   background: var(--ribbon-bg-dark);
   color: var(--ribbon-text-dark);
 }
@@ -14271,31 +14655,31 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-accordion--default {
+.dark .bc-accordion--default {
   border-color: var(--border-default);
 }
 
-.b-dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
+.dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
   border-top-color: var(--border-default);
 }
 
-.b-dark .bc-accordion--separated .bc-accordion__item {
+.dark .bc-accordion--separated .bc-accordion__item {
   border-color: var(--border-default);
 }
 
-.b-dark .bc-accordion__item {
+.dark .bc-accordion__item {
   background-color: var(--bg-background);
 }
 
-.b-dark .bc-accordion__header {
+.dark .bc-accordion__header {
   color: var(--text-normal);
 }
 
-.b-dark .bc-accordion__header:hover:not(:disabled) {
+.dark .bc-accordion__header:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-accordion__body {
+.dark .bc-accordion__body {
   color: var(--text-normal);
 }
 
@@ -14720,82 +15104,82 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-calendar {
+.dark .bc-calendar {
   background-color: var(--bg-background);
   border-color: var(--border-default);
 }
 
-.b-dark .bc-calendar__nav-btn {
+.dark .bc-calendar__nav-btn {
   color: var(--text-normal);
 }
 
-.b-dark .bc-calendar__nav-btn:hover:not(:disabled) {
+.dark .bc-calendar__nav-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-calendar__title {
+.dark .bc-calendar__title {
   color: var(--text-normal);
 }
 
-.b-dark .bc-calendar__weekday {
+.dark .bc-calendar__weekday {
   color: var(--text-muted);
 }
 
-.b-dark .bc-calendar__day {
+.dark .bc-calendar__day {
   color: var(--text-normal);
 }
 
-.b-dark .bc-calendar__day:hover:not(:disabled) {
+.dark .bc-calendar__day:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-calendar__day--selected {
+.dark .bc-calendar__day--selected {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.b-dark .bc-calendar__day--today {
+.dark .bc-calendar__day--today {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
 
-.b-dark .bc-calendar__day--selected.bc-calendar__day--today {
+.dark .bc-calendar__day--selected.bc-calendar__day--today {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.b-dark .bc-calendar__title-btn {
+.dark .bc-calendar__title-btn {
   color: var(--text-normal);
 }
 
-.b-dark .bc-calendar__title-btn:hover:not(:disabled) {
+.dark .bc-calendar__title-btn:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-calendar__month-cell,
-.b-dark .bc-calendar__year-cell {
+.dark .bc-calendar__month-cell,
+.dark .bc-calendar__year-cell {
   color: var(--text-normal);
 }
 
-.b-dark .bc-calendar__month-cell:hover:not(:disabled),
-.b-dark .bc-calendar__year-cell:hover:not(:disabled) {
+.dark .bc-calendar__month-cell:hover:not(:disabled),
+.dark .bc-calendar__year-cell:hover:not(:disabled) {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-calendar__month-cell--current,
-.b-dark .bc-calendar__year-cell--current {
+.dark .bc-calendar__month-cell--current,
+.dark .bc-calendar__year-cell--current {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.b-dark .bc-calendar__month-cell--active,
-.b-dark .bc-calendar__year-cell--active {
+.dark .bc-calendar__month-cell--active,
+.dark .bc-calendar__year-cell--active {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
 
-.b-dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
-.b-dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
+.dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
+.dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
@@ -14841,13 +15225,13 @@ span.bc-sidebar-link {
 }
 
 /* Range selection - dark mode */
-.b-dark .bc-calendar__day--range-start,
-.b-dark .bc-calendar__day--range-end {
+.dark .bc-calendar__day--range-start,
+.dark .bc-calendar__day--range-end {
   background-color: var(--cal-selected-bg-dark);
   color: var(--cal-selected-text-dark);
 }
 
-.b-dark .bc-calendar__day--in-range {
+.dark .bc-calendar__day--in-range {
   background-color: var(--cal-today-bg-dark);
   color: var(--cal-today-text-dark);
 }
@@ -15145,28 +15529,28 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-advanced-slider__track {
+.dark .bc-advanced-slider__track {
   background-color: var(--bg-subtle);
 }
 
-.b-dark .bc-advanced-slider__fill {
+.dark .bc-advanced-slider__fill {
   background-color: var(--slider-color-dark);
 }
 
-.b-dark .bc-advanced-slider__thumb {
+.dark .bc-advanced-slider__thumb {
   background-color: var(--text-normal);
   border-color: var(--slider-color-dark);
 }
 
-.b-dark .bc-advanced-slider__value-label {
+.dark .bc-advanced-slider__value-label {
   background-color: var(--slider-color-dark);
 }
 
-.b-dark .bc-advanced-slider__tick::before {
+.dark .bc-advanced-slider__tick::before {
   background-color: var(--color-gray-500);
 }
 
-.b-dark .bc-advanced-slider__tick-label {
+.dark .bc-advanced-slider__tick-label {
   color: var(--text-muted);
 }
 
@@ -15273,20 +15657,20 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-otp-input__cell {
+.dark .bc-otp-input__cell {
   background-color: var(--bg-background);
   border-color: var(--border-default);
   color: var(--text-normal);
 }
 
-.b-dark .bc-otp-input__cell:focus,
-.b-dark .bc-otp-input__cell--focused {
+.dark .bc-otp-input__cell:focus,
+.dark .bc-otp-input__cell--focused {
   border-color: var(--otp-focus-border-dark);
   box-shadow: 0 0 0 2px
     color-mix(in srgb, var(--otp-focus-color-dark) 25%, transparent);
 }
 
-.b-dark .bc-otp-input__cell::placeholder {
+.dark .bc-otp-input__cell::placeholder {
   color: var(--text-muted);
 }
 
@@ -15316,10 +15700,17 @@ span.bc-sidebar-link {
   background-color: var(--toggle-bg);
   color: var(--toggle-text);
   text-shadow: var(--toggle-text-shadow);
+  line-height: 1;
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
   user-select: none;
 }
 
+/* Keep icons sized to the font so icon-only buttons match text button height */
+.bc-toggle-button .bc-icon {
+  width: 1em;
+  height: 1em;
+}
+
 .bc-toggle-button--full-width {
   width: 100%;
 }
@@ -15376,14 +15767,14 @@ span.bc-sidebar-link {
 }
 
 /* Dark mode */
-.b-dark .bc-toggle-button {
+.dark .bc-toggle-button {
   background-color: var(--toggle-bg-dark);
   color: var(--toggle-text-dark);
   border-color: var(--toggle-border-dark);
   text-shadow: var(--toggle-text-shadow-dark);
 }
 
-.b-dark .bc-toggle-button:hover:not(:disabled) {
+.dark .bc-toggle-button:hover:not(:disabled) {
   background-color: var(--toggle-bg-hover-dark);
   color: var(--toggle-text-hover-dark);
 }