@tempots/beatui 0.38.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;
@@ -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;
   }
 }
@@ -7376,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 */
@@ -7650,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;
 }
 
@@ -7791,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 {
@@ -7854,7 +8184,7 @@ span.bc-sidebar-link {
   height: max-content;
 }
 
-/* Top-right corner (default) */
+/* top-end corner (default) */
 .bc-ribbon {
   top: 0;
   left: 100%;
@@ -7862,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))