@tempots/beatui 1.7.0 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/beatui.css CHANGED
@@ -426,11 +426,12 @@ ol {
426
426
  --overlay-width-md: min(37.5rem, 90vw);
427
427
  --overlay-width-lg: min(50rem, 90vw);
428
428
  --overlay-width-xl: min(62.5rem, 90vw);
429
- --overlay-width-min-width: 12rem;
429
+ --overlay-min-width: 12rem;
430
430
  }
431
431
 
432
432
  *, ::before, ::after {
433
433
  --spacing-base: calc(var(--spacing-base-raw) * var(--spacing-scale));
434
+ --spacing-2xs: calc(var(--spacing-base) / 4);
434
435
  --spacing-xs: calc(var(--spacing-base) / 2);
435
436
  --spacing-sm: var(--spacing-base);
436
437
  --spacing-smh: calc(var(--spacing-base) * 1.5);
@@ -5692,6 +5693,20 @@ a:focus-visible {
5692
5693
  pointer-events: auto;
5693
5694
  }
5694
5695
 
5696
+ /*
5697
+ * On mobile, .bc-menu uses position:fixed for a bottom-sheet layout.
5698
+ * The animation system sets transform on .bc-flyout-container, which per CSS spec
5699
+ * changes the containing block for position:fixed descendants from the viewport
5700
+ * to the transformed ancestor. Make .bc-flyout-container span the viewport on
5701
+ * mobile so it provides a correctly-sized containing block for the fixed menu.
5702
+ */
5703
+ @media (max-width: 640px) {
5704
+ .bc-flyout-container:has(.bc-menu) {
5705
+ position: fixed;
5706
+ inset: 0;
5707
+ }
5708
+ }
5709
+
5695
5710
  /* Dark mode */
5696
5711
  .dark .bc-flyout {
5697
5712
  background-color: var(--color-base-800);
@@ -10869,8 +10884,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10869
10884
 
10870
10885
  .bc-lightbox__close {
10871
10886
  position: absolute;
10872
- top: var(--spacing-2, 16px);
10873
- right: var(--spacing-2, 16px);
10887
+ top: var(--spacing-lg);
10888
+ right: var(--spacing-lg);
10874
10889
  z-index: calc(var(--z-index-overlay, 1000) + 1);
10875
10890
  border-radius: 100%;
10876
10891
  padding: var(--spacing-base, 4px);
@@ -15081,8 +15096,8 @@ span.bc-sidebar-link {
15081
15096
  bottom: 0;
15082
15097
  display: flex;
15083
15098
  align-items: center;
15084
- gap: var(--spacing-2, 8px);
15085
- padding: var(--spacing-2, 8px);
15099
+ gap: var(--spacing-md);
15100
+ padding: var(--spacing-md);
15086
15101
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
15087
15102
  }
15088
15103
 
@@ -16502,7 +16517,7 @@ span.bc-sidebar-link {
16502
16517
  background: none;
16503
16518
  border: none;
16504
16519
  cursor: pointer;
16505
- padding: var(--spacing-xxs) var(--spacing-xs);
16520
+ padding: var(--spacing-2xs) var(--spacing-xs);
16506
16521
  border-radius: var(--radius-sm);
16507
16522
  transition:
16508
16523
  color var(--motion-transition-fast) var(--motion-easing-standard),
@@ -345,11 +345,12 @@
345
345
  --overlay-width-md: min(37.5rem, 90vw);
346
346
  --overlay-width-lg: min(50rem, 90vw);
347
347
  --overlay-width-xl: min(62.5rem, 90vw);
348
- --overlay-width-min-width: 12rem;
348
+ --overlay-min-width: 12rem;
349
349
  }
350
350
 
351
351
  *, ::before, ::after {
352
352
  --spacing-base: calc(var(--spacing-base-raw) * var(--spacing-scale));
353
+ --spacing-2xs: calc(var(--spacing-base) / 4);
353
354
  --spacing-xs: calc(var(--spacing-base) / 2);
354
355
  --spacing-sm: var(--spacing-base);
355
356
  --spacing-smh: calc(var(--spacing-base) * 1.5);
@@ -5358,6 +5359,20 @@ a:focus-visible {
5358
5359
  pointer-events: auto;
5359
5360
  }
5360
5361
 
5362
+ /*
5363
+ * On mobile, .bc-menu uses position:fixed for a bottom-sheet layout.
5364
+ * The animation system sets transform on .bc-flyout-container, which per CSS spec
5365
+ * changes the containing block for position:fixed descendants from the viewport
5366
+ * to the transformed ancestor. Make .bc-flyout-container span the viewport on
5367
+ * mobile so it provides a correctly-sized containing block for the fixed menu.
5368
+ */
5369
+ @media (max-width: 640px) {
5370
+ .bc-flyout-container:has(.bc-menu) {
5371
+ position: fixed;
5372
+ inset: 0;
5373
+ }
5374
+ }
5375
+
5361
5376
  /* Dark mode */
5362
5377
  .dark .bc-flyout {
5363
5378
  background-color: var(--color-base-800);
@@ -10535,8 +10550,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10535
10550
 
10536
10551
  .bc-lightbox__close {
10537
10552
  position: absolute;
10538
- top: var(--spacing-2, 16px);
10539
- right: var(--spacing-2, 16px);
10553
+ top: var(--spacing-lg);
10554
+ right: var(--spacing-lg);
10540
10555
  z-index: calc(var(--z-index-overlay, 1000) + 1);
10541
10556
  border-radius: 100%;
10542
10557
  padding: var(--spacing-base, 4px);
@@ -14747,8 +14762,8 @@ span.bc-sidebar-link {
14747
14762
  bottom: 0;
14748
14763
  display: flex;
14749
14764
  align-items: center;
14750
- gap: var(--spacing-2, 8px);
14751
- padding: var(--spacing-2, 8px);
14765
+ gap: var(--spacing-md);
14766
+ padding: var(--spacing-md);
14752
14767
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
14753
14768
  }
14754
14769
 
@@ -16168,7 +16183,7 @@ span.bc-sidebar-link {
16168
16183
  background: none;
16169
16184
  border: none;
16170
16185
  cursor: pointer;
16171
- padding: var(--spacing-xxs) var(--spacing-xs);
16186
+ padding: var(--spacing-2xs) var(--spacing-xs);
16172
16187
  border-radius: var(--radius-sm);
16173
16188
  transition:
16174
16189
  color var(--motion-transition-fast) var(--motion-easing-standard),