@tempots/beatui 1.7.1 → 1.7.4

package/dist/beatui.css

@@ -426,11 +426,12 @@ ol {
   --overlay-width-md: min(37.5rem, 90vw);
   --overlay-width-lg: min(50rem, 90vw);
   --overlay-width-xl: min(62.5rem, 90vw);
-  --overlay-width-min-width: 12rem;
+  --overlay-min-width: 12rem;
 }
 
 *, ::before, ::after {
   --spacing-base: calc(var(--spacing-base-raw) * var(--spacing-scale));
+  --spacing-2xs: calc(var(--spacing-base) / 4);
   --spacing-xs: calc(var(--spacing-base) / 2);
   --spacing-sm: var(--spacing-base);
   --spacing-smh: calc(var(--spacing-base) * 1.5);
@@ -5694,15 +5695,28 @@ a:focus-visible {
 
 /*
  * On mobile, .bc-menu uses position:fixed for a bottom-sheet layout.
- * The animation system sets transform on .bc-flyout-container, which per CSS spec
- * changes the containing block for position:fixed descendants from the viewport
- * to the transformed ancestor. Make .bc-flyout-container span the viewport on
- * mobile so it provides a correctly-sized containing block for the fixed menu.
+ * Any transform on an ancestor (even identity matrix) changes the containing
+ * block for position:fixed from the viewport to that ancestor (CSS spec).
+ * The animation system sets transform on .bc-flyout-container for slide/scale,
+ * which breaks the menu's fixed positioning and causes it to size relative to
+ * the 0-width flyout container instead of the viewport.
+ *
+ * Fix: disable transform on mobile when containing a menu. The opacity fade
+ * animation still works. Slide/scale aren't meaningful for a bottom sheet.
  */
 @media (max-width: 640px) {
   .bc-flyout-container:has(.bc-menu) {
+    transform: none !important;
+    transition-property: opacity !important;
+  }
+
+  /* Dark backdrop behind the bottom-sheet menu on mobile */
+  .bc-flyout-container:has(.bc-menu)::before {
+    content: '';
     position: fixed;
     inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
   }
 }
 
@@ -10883,8 +10897,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-lightbox__close {
   position: absolute;
-  top: var(--spacing-2, 16px);
-  right: var(--spacing-2, 16px);
+  top: var(--spacing-lg);
+  right: var(--spacing-lg);
   z-index: calc(var(--z-index-overlay, 1000) + 1);
   border-radius: 100%;
   padding: var(--spacing-base, 4px);
@@ -15095,8 +15109,8 @@ span.bc-sidebar-link {
   bottom: 0;
   display: flex;
   align-items: center;
-  gap: var(--spacing-2, 8px);
-  padding: var(--spacing-2, 8px);
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
   background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
 }
 
@@ -16516,7 +16530,7 @@ span.bc-sidebar-link {
   background: none;
   border: none;
   cursor: pointer;
-  padding: var(--spacing-xxs) var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
   border-radius: var(--radius-sm);
   transition:
     color var(--motion-transition-fast) var(--motion-easing-standard),

package/dist/beatui.tailwind.css

@@ -345,11 +345,12 @@
   --overlay-width-md: min(37.5rem, 90vw);
   --overlay-width-lg: min(50rem, 90vw);
   --overlay-width-xl: min(62.5rem, 90vw);
-  --overlay-width-min-width: 12rem;
+  --overlay-min-width: 12rem;
 }
 
 *, ::before, ::after {
   --spacing-base: calc(var(--spacing-base-raw) * var(--spacing-scale));
+  --spacing-2xs: calc(var(--spacing-base) / 4);
   --spacing-xs: calc(var(--spacing-base) / 2);
   --spacing-sm: var(--spacing-base);
   --spacing-smh: calc(var(--spacing-base) * 1.5);
@@ -5360,15 +5361,28 @@ a:focus-visible {
 
 /*
  * On mobile, .bc-menu uses position:fixed for a bottom-sheet layout.
- * The animation system sets transform on .bc-flyout-container, which per CSS spec
- * changes the containing block for position:fixed descendants from the viewport
- * to the transformed ancestor. Make .bc-flyout-container span the viewport on
- * mobile so it provides a correctly-sized containing block for the fixed menu.
+ * Any transform on an ancestor (even identity matrix) changes the containing
+ * block for position:fixed from the viewport to that ancestor (CSS spec).
+ * The animation system sets transform on .bc-flyout-container for slide/scale,
+ * which breaks the menu's fixed positioning and causes it to size relative to
+ * the 0-width flyout container instead of the viewport.
+ *
+ * Fix: disable transform on mobile when containing a menu. The opacity fade
+ * animation still works. Slide/scale aren't meaningful for a bottom sheet.
  */
 @media (max-width: 640px) {
   .bc-flyout-container:has(.bc-menu) {
+    transform: none !important;
+    transition-property: opacity !important;
+  }
+
+  /* Dark backdrop behind the bottom-sheet menu on mobile */
+  .bc-flyout-container:has(.bc-menu)::before {
+    content: '';
     position: fixed;
     inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
   }
 }
 
@@ -10549,8 +10563,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-lightbox__close {
   position: absolute;
-  top: var(--spacing-2, 16px);
-  right: var(--spacing-2, 16px);
+  top: var(--spacing-lg);
+  right: var(--spacing-lg);
   z-index: calc(var(--z-index-overlay, 1000) + 1);
   border-radius: 100%;
   padding: var(--spacing-base, 4px);
@@ -14761,8 +14775,8 @@ span.bc-sidebar-link {
   bottom: 0;
   display: flex;
   align-items: center;
-  gap: var(--spacing-2, 8px);
-  padding: var(--spacing-2, 8px);
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
   background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
 }
 
@@ -16182,7 +16196,7 @@ span.bc-sidebar-link {
   background: none;
   border: none;
   cursor: pointer;
-  padding: var(--spacing-xxs) var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
   border-radius: var(--radius-sm);
   transition:
     color var(--motion-transition-fast) var(--motion-easing-standard),