@tempots/beatui 0.37.0 → 0.39.0

package/dist/beatui.css

@@ -1241,6 +1241,205 @@ a:focus-visible {
   }
 }
 
+/* Animated Toggle Component */
+.bc-animated-toggle {
+  transition-property: all;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Status: closed and start-closing - 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;
+}
+
+/* Animation: FADE */
+.bc-animated-toggle--fade.bc-animated-toggle--closing,
+.bc-animated-toggle--fade.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-opening,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
+  opacity: 0;
+}
+
+.bc-animated-toggle--fade.bc-animated-toggle--opening,
+.bc-animated-toggle--fade.bc-animated-toggle--start-closing,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-closing,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
+  opacity: 1;
+}
+
+/* Animation: slide-right */
+.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-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--start-closing,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing {
+  transform: translateX(0);
+}
+
+/* Animation: slide-left */
+.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-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--start-closing,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing {
+  transform: translateX(0);
+}
+
+/* Animation: slide-up */
+.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-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--start-closing,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing {
+  transform: translateY(0);
+}
+
+/* Animation: slide-down */
+.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
+.bc-animated-toggle--fade-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--start-closing,
+.bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
+.bc-animated-toggle--fade-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,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening {
+  transform: scale(0.8);
+}
+
+.bc-animated-toggle--scale.bc-animated-toggle--opening,
+.bc-animated-toggle--scale.bc-animated-toggle--start-closing,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
+.bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing {
+  transform: scale(1);
+}
+
+/* Animation: flyout-top */
+.bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening {
+  transform: translateY(-1rem) scale(0.95);
+}
+
+.bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing {
+  transform: translateY(0) scale(1);
+}
+
+/* Animation: flyout-bottom */
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening {
+  transform: translateY(1rem) scale(0.95);
+}
+
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing {
+  transform: translateY(0) scale(1);
+}
+
+/* Animation: flyout-left */
+.bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(-1rem) scale(0.95);
+}
+
+.bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+/* Animation: flyout-right */
+.bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
+  opacity: 0;
+  transform: translateX(1rem) scale(0.95);
+}
+
+.bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
+.bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
+  opacity: 1;
+  transform: translateX(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;
@@ -1601,7 +1800,6 @@ a:focus-visible {
   align-items: center;
   justify-content: center;
   border: 1.5px solid var(--badge-border);
-  font-weight: var(--font-weight-semibold);
   font-family: var(
     --default-ui-font-family,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
@@ -1614,6 +1812,7 @@ a:focus-visible {
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   background-color: var(--badge-bg);
   color: var(--badge-text);
+  white-space: nowrap;
 }
 
 .bc-badge__content {
@@ -1754,6 +1953,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;
 }
@@ -3858,6 +4061,9 @@ a:focus-visible {
 .bc-input-wrapper {
   display: flex;
   flex-direction: column;
+}
+
+.bc-input-wrapper--full-width {
   width: 100%;
 }
 
@@ -4758,45 +4964,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 +5200,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 +5375,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;
   }
 }
@@ -6881,15 +7087,15 @@ span.bc-sidebar-link {
 }
 
 /* Table header */
-.bc-table thead,
-.bc-table tfoot {
+.bc-table > thead,
+.bc-table > tfoot {
   background-color: var(--table-header-bg);
   color: var(--table-header-text);
   font-weight: var(--font-weight-semibold);
 }
 
 /* Sticky header */
-.bc-table--sticky-header thead {
+.bc-table--sticky-header > thead {
   position: sticky;
   top: 0;
   z-index: var(--z-index-sticky, 10);
@@ -6897,7 +7103,7 @@ span.bc-sidebar-link {
 }
 
 /* Sticky footer */
-.bc-table--sticky-header tfoot {
+.bc-table--sticky-header > tfoot {
   position: sticky;
   bottom: 0;
   z-index: var(--z-index-sticky, 10);
@@ -6905,15 +7111,21 @@ span.bc-sidebar-link {
 }
 
 /* Table cells */
-.bc-table th,
-.bc-table td {
+.bc-table > thead > tr > th,
+.bc-table > thead > tr > td,
+.bc-table > tbody > tr > th,
+.bc-table > tbody > tr > td,
+.bc-table > tfoot > tr > th,
+.bc-table > tfoot > tr > td {
   text-align: left;
   vertical-align: middle;
   padding: var(--spacing-md);
   border: none;
 }
 
-.bc-table th {
+.bc-table > thead > tr > th,
+.bc-table > tbody > tr > th,
+.bc-table > tfoot > tr > th {
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
 }
@@ -6924,68 +7136,96 @@ span.bc-sidebar-link {
 }
 
 /* With row borders */
-.bc-table--with-row-borders th,
-.bc-table--with-row-borders td {
+.bc-table--with-row-borders > thead > tr > th,
+.bc-table--with-row-borders > thead > tr > td,
+.bc-table--with-row-borders > tbody > tr > th,
+.bc-table--with-row-borders > tbody > tr > td,
+.bc-table--with-row-borders > tfoot > tr > th,
+.bc-table--with-row-borders > tfoot > tr > td {
   border-bottom: 1px solid var(--table-border);
 }
 
 /* With column borders */
-.bc-table--with-column-borders th,
-.bc-table--with-column-borders td {
+.bc-table--with-column-borders > thead > tr > th,
+.bc-table--with-column-borders > thead > tr > td,
+.bc-table--with-column-borders > tbody > tr > th,
+.bc-table--with-column-borders > tbody > tr > td,
+.bc-table--with-column-borders > tfoot > tr > th,
+.bc-table--with-column-borders > tfoot > tr > td {
   border-right: 1px solid var(--table-border);
 }
 
-.bc-table--with-column-borders th:last-child,
-.bc-table--with-column-borders td:last-child {
+.bc-table--with-column-borders > thead > tr > th:last-child,
+.bc-table--with-column-borders > thead > tr > td:last-child,
+.bc-table--with-column-borders > tbody > tr > th:last-child,
+.bc-table--with-column-borders > tbody > tr > td:last-child,
+.bc-table--with-column-borders > tfoot > tr > th:last-child,
+.bc-table--with-column-borders > tfoot > tr > td:last-child {
   border-right: none;
 }
 
 /* With striped rows */
-.bc-table--with-striped-rows tbody tr:nth-child(even) {
+.bc-table--with-striped-rows > tbody > tr:nth-child(even) {
   background-color: var(--table-stripe-bg);
 }
 
 /* Hoverable striped rows - darker stripe on hover */
 .bc-table--hoverable.bc-table--with-striped-rows
-  tbody
-  tr:nth-child(even):hover {
+  > tbody
+  > tr:nth-child(even):hover {
   background-color: var(--table-hover-bg);
   filter: brightness(0.95);
 }
 
 /* Size variants */
-.bc-table--size-xs th,
-.bc-table--size-xs td {
+.bc-table--size-xs > thead > tr > th,
+.bc-table--size-xs > thead > tr > td,
+.bc-table--size-xs > tbody > tr > th,
+.bc-table--size-xs > tbody > tr > td,
+.bc-table--size-xs > tfoot > tr > th,
+.bc-table--size-xs > tfoot > tr > td {
   padding: var(--spacing-xs);
   font-size: var(--font-size-sm);
 }
 
-.bc-table--size-sm th,
-.bc-table--size-sm td {
+.bc-table--size-sm > thead > tr > th,
+.bc-table--size-sm > thead > tr > td,
+.bc-table--size-sm > tbody > tr > th,
+.bc-table--size-sm > tbody > tr > td,
+.bc-table--size-sm > tfoot > tr > th,
+.bc-table--size-sm > tfoot > tr > td {
   padding: calc(var(--spacing-base) * 1.5);
   font-size: var(--font-size-sm);
 }
 
-.bc-table--size-lg th,
-.bc-table--size-lg td {
+.bc-table--size-lg > thead > tr > th,
+.bc-table--size-lg > thead > tr > td,
+.bc-table--size-lg > tbody > tr > th,
+.bc-table--size-lg > tbody > tr > td,
+.bc-table--size-lg > tfoot > tr > th,
+.bc-table--size-lg > tfoot > tr > td {
   padding: var(--spacing-lg);
 }
 
-.bc-table--size-xl th,
-.bc-table--size-xl td {
+.bc-table--size-xl > thead > tr > th,
+.bc-table--size-xl > thead > tr > td,
+.bc-table--size-xl > tbody > tr > th,
+.bc-table--size-xl > tbody > tr > td,
+.bc-table--size-xl > tfoot > tr > th,
+.bc-table--size-xl > tfoot > tr > td {
   padding: calc(var(--spacing-base) * 5);
   font-size: var(--font-size-lg);
 }
 
 /* Hoverable rows */
-.bc-table--hoverable tbody tr {
+.bc-table--hoverable > tbody > tr {
   transition: background-color
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   cursor: pointer;
 }
 
-.bc-table--hoverable tbody tr:hover {
+.bc-table--hoverable > tbody > tr:hover {
   background-color: var(--table-hover-bg);
 }
 
@@ -7009,7 +7249,7 @@ span.bc-sidebar-link {
 
 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
-  .bc-table--hoverable tbody tr {
+  .bc-table--hoverable > tbody > tr {
     transition: none;
   }
 }
@@ -7342,16 +7582,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 */
@@ -7616,14 +7856,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;
 }
 
@@ -7757,6 +7997,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 {
@@ -7820,7 +8184,7 @@ span.bc-sidebar-link {
   height: max-content;
 }
 
-/* Top-right corner (default) */
+/* top-end corner (default) */
 .bc-ribbon {
   top: 0;
   left: 100%;
@@ -7828,24 +8192,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))