@tempots/beatui 1.7.2 → 1.7.5

package/dist/beatui.css

@@ -5695,15 +5695,29 @@ 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);
+    pointer-events: none;
+    z-index: -1;
   }
 }
 

package/dist/beatui.tailwind.css

@@ -5361,15 +5361,29 @@ 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);
+    pointer-events: none;
+    z-index: -1;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "1.7.2",
+  "version": "1.7.5",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",