@tempots/beatui 0.38.0 → 0.40.0

package/dist/beatui.css

@@ -1241,6 +1241,276 @@ a:focus-visible {
   }
 }
 
+/* Animated Toggle Component - Composable Animation System */
+.bc-animated-toggle {
+  --animation-duration: 1s;
+  --animation-easing: cubic-bezier(0.2, 0, 0, 1);
+  --scale-factor: 0.95;
+  --transform-origin: center;
+
+  transition-property: opacity, transform;
+  transition-duration: var(--animation-duration);
+  transition-timing-function: var(--animation-easing);
+  transform-origin: var(--transform-origin);
+}
+
+/* Status: closed - element is hidden */
+.bc-animated-toggle--closed {
+  display: none;
+}
+
+/* Status: start-opening - element becomes visible but hasn't started animating */
+.bc-animated-toggle--start-opening {
+  display: initial;
+}
+
+/* Animation: NONE - no animation, just show/hide */
+.bc-animated-toggle--none {
+  transition-property: none;
+  transition-duration: 0s;
+}
+
+/* Animation: FADE */
+.bc-animated-toggle--fade.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--start-opening {
+  opacity: 0;
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--start-closing {
+  opacity: 1;
+}
+
+/* Animation: SLIDE - individual directions */
+.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
+  transform: translateX(-100%);
+}
+
+.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
+  transform: translateX(100%);
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
+  transform: translateY(100%);
+}
+
+.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
+  transform: translateY(0);
+}
+
+.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
+  transform: translateY(-100%);
+}
+
+.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
+  transform: translateY(0);
+}
+
+/* Animation: SCALE */
+.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: scale(1);
+}
+
+/* Composable animations: fade + slide combinations */
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Composable animations: fade + scale */
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Composable animations: slide + scale combinations */
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateX(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateX(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateY(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateY(0) scale(1);
+}
+
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  transform: translateY(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  transform: translateY(0) scale(1);
+}
+
+/* Composable animations: fade + slide + scale (all three) */
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateY(-100%) scale(var(--scale-factor));
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
+.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-animated-toggle {
+    transition: none;
+  }
+}
+
 /* Auth Container Component */
 .bc-auth-container--styled {
   display: flex;
@@ -1754,6 +2024,10 @@ a:focus-visible {
   text-shadow: var(--button-text-shadow, var(--text-shadow-none));
 }
 
+.bc-button--full-width {
+  width: 100%;
+}
+
 .bc-button > span {
   min-height: 10px;
 }
@@ -2248,7 +2522,7 @@ a:focus-visible {
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: 0;
-  z-index: var(--z-index-popover);
+  z-index: var(--z-index-navigation);
   min-width: 12rem;
   max-height: 20rem;
   overflow-y: auto;
@@ -3439,6 +3713,10 @@ a:focus-visible {
   display: block;
 }
 
+.bc-flyout-container {
+  z-index: var(--z-index-popover);
+}
+
 .bc-flyout {
   /* Base flyout styles */
   background-color: var(--color-neutral-50);
@@ -3446,7 +3724,6 @@ a:focus-visible {
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-sm);
-  z-index: var(--z-index-popover);
 }
 
 /* Transform origins for placement-aware animations */
@@ -3664,7 +3941,7 @@ a:focus-visible {
 
 /* Focus within state */
 .bc-input-container:focus-within {
-  z-index: 10;
+  z-index: var(--z-index-navigation);
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: -2px;
 }
@@ -3686,7 +3963,7 @@ a:focus-visible {
   display: flex;
   flex-direction: row;
   align-items: center;
-  z-index: 10;
+  z-index: var(--z-index-navigation);
 }
 
 /* Input wrapper */
@@ -3858,6 +4135,9 @@ a:focus-visible {
 .bc-input-wrapper {
   display: flex;
   flex-direction: column;
+}
+
+.bc-input-wrapper--full-width {
   width: 100%;
 }
 
@@ -4758,45 +5038,45 @@ a:focus-visible {
 }
 
 /* Modal positioning - Top Left */
-.bc-modal--position-top-left.bc-modal--container-body {
+.bc-modal--position-top-start.bc-modal--container-body {
   top: 2rem;
   left: 2rem;
 }
 
-.bc-modal--position-top-left.bc-modal--container-element {
+.bc-modal--position-top-start.bc-modal--container-element {
   top: 5%;
   left: 5%;
 }
 
 /* Modal positioning - Top Right */
-.bc-modal--position-top-right.bc-modal--container-body {
+.bc-modal--position-top-end.bc-modal--container-body {
   top: 2rem;
   right: 2rem;
 }
 
-.bc-modal--position-top-right.bc-modal--container-element {
+.bc-modal--position-top-end.bc-modal--container-element {
   top: 5%;
   right: 5%;
 }
 
 /* Modal positioning - Bottom Left */
-.bc-modal--position-bottom-left.bc-modal--container-body {
+.bc-modal--position-bottom-start.bc-modal--container-body {
   bottom: 2rem;
   left: 2rem;
 }
 
-.bc-modal--position-bottom-left.bc-modal--container-element {
+.bc-modal--position-bottom-start.bc-modal--container-element {
   bottom: 5%;
   left: 5%;
 }
 
 /* Modal positioning - Bottom Right */
-.bc-modal--position-bottom-right.bc-modal--container-body {
+.bc-modal--position-bottom-end.bc-modal--container-body {
   bottom: 2rem;
   right: 2rem;
 }
 
-.bc-modal--position-bottom-right.bc-modal--container-element {
+.bc-modal--position-bottom-end.bc-modal--container-element {
   bottom: 5%;
   right: 5%;
 }
@@ -4994,26 +5274,26 @@ a:focus-visible {
 }
 
 /* Animation states - Corner positions */
-.bc-overlay[data-status='start-opening'] .bc-modal--position-top-left,
-.bc-overlay[data-status='closing'] .bc-modal--position-top-left,
-.bc-overlay[data-status='start-opening'] .bc-modal--position-top-right,
-.bc-overlay[data-status='closing'] .bc-modal--position-top-right,
-.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-left,
-.bc-overlay[data-status='closing'] .bc-modal--position-bottom-left,
-.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-right,
-.bc-overlay[data-status='closing'] .bc-modal--position-bottom-right {
+.bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
+.bc-overlay[data-status='closing'] .bc-modal--position-top-start,
+.bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
+.bc-overlay[data-status='closing'] .bc-modal--position-top-end,
+.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
+.bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
+.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
+.bc-overlay[data-status='closing'] .bc-modal--position-bottom-end {
   opacity: 0;
   transform: scale(0.95);
 }
 
-.bc-overlay[data-status='opened'] .bc-modal--position-top-left,
-.bc-overlay[data-status='opening'] .bc-modal--position-top-left,
-.bc-overlay[data-status='opened'] .bc-modal--position-top-right,
-.bc-overlay[data-status='opening'] .bc-modal--position-top-right,
-.bc-overlay[data-status='opened'] .bc-modal--position-bottom-left,
-.bc-overlay[data-status='opening'] .bc-modal--position-bottom-left,
-.bc-overlay[data-status='opened'] .bc-modal--position-bottom-right,
-.bc-overlay[data-status='opening'] .bc-modal--position-bottom-right {
+.bc-overlay[data-status='opened'] .bc-modal--position-top-start,
+.bc-overlay[data-status='opening'] .bc-modal--position-top-start,
+.bc-overlay[data-status='opened'] .bc-modal--position-top-end,
+.bc-overlay[data-status='opening'] .bc-modal--position-top-end,
+.bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
+.bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
+.bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
+.bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
   opacity: 1;
   transform: scale(1);
 }
@@ -5169,22 +5449,22 @@ a:focus-visible {
   }
 
   /* Corner positions */
-  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-left,
-  .bc-overlay[data-status='closing'] .bc-modal--position-top-left,
-  .bc-overlay[data-status='opened'] .bc-modal--position-top-left,
-  .bc-overlay[data-status='opening'] .bc-modal--position-top-left,
-  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-right,
-  .bc-overlay[data-status='closing'] .bc-modal--position-top-right,
-  .bc-overlay[data-status='opened'] .bc-modal--position-top-right,
-  .bc-overlay[data-status='opening'] .bc-modal--position-top-right,
-  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-left,
-  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-left,
-  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-left,
-  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-left,
-  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-right,
-  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-right,
-  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-right,
-  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-right {
+  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
+  .bc-overlay[data-status='closing'] .bc-modal--position-top-start,
+  .bc-overlay[data-status='opened'] .bc-modal--position-top-start,
+  .bc-overlay[data-status='opening'] .bc-modal--position-top-start,
+  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
+  .bc-overlay[data-status='closing'] .bc-modal--position-top-end,
+  .bc-overlay[data-status='opened'] .bc-modal--position-top-end,
+  .bc-overlay[data-status='opening'] .bc-modal--position-top-end,
+  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
+  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
+  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
+  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
+  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
+  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-end,
+  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
+  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
     transform: none;
   }
 }
@@ -7376,16 +7656,16 @@ span.bc-sidebar-link {
 }
 /* Corner rounding rules */
 .bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:first-child {
-  border-top-left-radius: var(--radius-control-sm, var(--radius-sm));
+  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
 }
 .bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:last-child {
-  border-top-right-radius: var(--radius-control-sm, var(--radius-sm));
+  border-top-end-radius: var(--radius-control-sm, var(--radius-sm));
 }
 .bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:first-child {
-  border-top-left-radius: var(--radius-control-sm, var(--radius-sm));
+  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
 }
 .bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:last-child {
-  border-bottom-left-radius: var(--radius-control-sm, var(--radius-sm));
+  border-bottom-start-radius: var(--radius-control-sm, var(--radius-sm));
 }
 
 /* Outline variant: tabs look like segmented buttons */
@@ -7650,14 +7930,14 @@ span.bc-sidebar-link {
 
 /* Toolbar group button blending */
 .bc-toolbar__group > :not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-top-end-radius: 0;
+  border-bottom-end-radius: 0;
   margin-left: -1px;
 }
 
 .bc-toolbar__group > :not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-top-start-radius: 0;
+  border-bottom-start-radius: 0;
   margin-left: -1px;
 }
 
@@ -7791,6 +8071,130 @@ span.bc-sidebar-link {
   flex-shrink: 0;
 }
 
+@layer components {
+  .bc-notification {
+    --notification-accent-color: var(--color-primary-500);
+    --notification-radius: var(--radius-lg);
+    --notification-bg: #fff;
+    --notification-border-color: var(--border-divider-light);
+    --notification-text-color: var(--text-normal-light);
+    --notification-muted-color: var(--text-muted-light);
+    --notification-accent-width: 6px;
+
+    display: flex;
+    gap: var(--spacing-md);
+    align-items: center;
+    padding: var(--spacing-md);
+    border-radius: var(--notification-radius);
+    background-color: var(--notification-bg);
+    color: var(--notification-text-color);
+    border: 1px solid transparent;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .bc-notification--bordered {
+    border-color: var(--notification-border-color);
+  }
+
+  .bc-notification__accent {
+    margin: 0 var(--spacing-md) 0 0;
+    min-width: var(--notification-accent-width);
+    min-height: 100%;
+    border-radius: var(--radius-pill, var(--radius-full));
+    background-color: var(--notification-accent-color);
+    align-self: stretch;
+  }
+
+  .bc-notification__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  .bc-notification__title {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    margin: 0;
+  }
+
+  .bc-notification__content {
+    color: var(--notification-muted-color);
+    line-height: var(--line-height-normal);
+  }
+
+  .bc-notification__meta {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .bc-notification-viewport {
+    position: fixed;
+    display: flex;
+    gap: var(--spacing-md);
+    width: min(420px, calc(100vw - var(--spacing-2xl)));
+    z-index: var(--z-index-notification, 90);
+    pointer-events: none;
+  }
+
+  .bc-notification-viewport > * {
+    pointer-events: auto;
+  }
+
+  .bc-notification-viewport--top-end {
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .bc-notification-viewport--top-start {
+    top: var(--spacing-xl);
+    left: var(--spacing-xl);
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .bc-notification-viewport--bottom-end {
+    bottom: var(--spacing-xl);
+    right: var(--spacing-xl);
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+
+  .bc-notification-viewport--bottom-start {
+    bottom: var(--spacing-xl);
+    left: var(--spacing-xl);
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+
+  .b-dark .bc-notification {
+    --notification-bg: var(--bg-surface-dark);
+    --notification-border-color: var(--border-border-dark);
+    --notification-text-color: var(--text-normal-dark);
+    --notification-muted-color: var(--text-muted-dark);
+    box-shadow: var(--shadow-lg);
+  }
+
+  @media (max-width: 640px) {
+    .bc-notification-viewport {
+      left: var(--spacing-md);
+      right: var(--spacing-md);
+      width: auto;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bc-notification {
+      transition: none;
+    }
+  }
+}
+
 /* Minimal optional controls for VideoPlayer wrapper */
 
 .bc-video-player {
@@ -7854,7 +8258,7 @@ span.bc-sidebar-link {
   height: max-content;
 }
 
-/* Top-right corner (default) */
+/* top-end corner (default) */
 .bc-ribbon {
   top: 0;
   left: 100%;
@@ -7862,24 +8266,24 @@ span.bc-sidebar-link {
     translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
 }
 
-/* Top-left corner */
-.bc-ribbon[style*='--ribbon-corner: top-left'] {
+/* top-start corner */
+.bc-ribbon[style*='--ribbon-corner: top-start'] {
   top: 0;
   left: 0;
   transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
     translate(calc(var(--ribbon-inset, 0px) * -1), var(--ribbon-offset, 0px));
 }
 
-/* Bottom-right corner */
-.bc-ribbon[style*='--ribbon-corner: bottom-right'] {
+/* bottom-end corner */
+.bc-ribbon[style*='--ribbon-corner: bottom-end'] {
   top: 100%;
   left: 100%;
   transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
     translate(var(--ribbon-inset, 0px), calc(var(--ribbon-offset, 0px) * -1));
 }
 
-/* Bottom-left corner */
-.bc-ribbon[style*='--ribbon-corner: bottom-left'] {
+/* bottom-start corner */
+.bc-ribbon[style*='--ribbon-corner: bottom-start'] {
   top: 100%;
   left: 0;
   transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))