@allxsmith/bestax-bulma 5.26.2 → 5.26.4

package/src/scss/form/_picker-popover.scss

@@ -40,24 +40,43 @@ $picker-trigger-hover-color: cv.getVar('text-strong') !default;
   animation: picker-popover-fade-in
     cv.getVar('picker-popover-animation-duration') ease;
 
+  // The gap is a margin on the side facing the anchor, as on Popover, so the
+  // positioning hook can read it off the panel when `auto` picks a corner.
   &.#{iv.$class-prefix}is-bottom-left {
-    top: calc(100% + cv.getVar('picker-popover-offset'));
+    top: 100%;
     left: 0;
+    margin-top: cv.getVar('picker-popover-offset');
   }
   &.#{iv.$class-prefix}is-bottom-right {
-    top: calc(100% + cv.getVar('picker-popover-offset'));
+    top: 100%;
     right: 0;
+    margin-top: cv.getVar('picker-popover-offset');
   }
   &.#{iv.$class-prefix}is-top-left {
-    bottom: calc(100% + cv.getVar('picker-popover-offset'));
+    bottom: 100%;
     left: 0;
+    margin-bottom: cv.getVar('picker-popover-offset');
   }
   &.#{iv.$class-prefix}is-top-right {
-    bottom: calc(100% + cv.getVar('picker-popover-offset'));
+    bottom: 100%;
     right: 0;
+    margin-bottom: cv.getVar('picker-popover-offset');
   }
+  // Portaled: fixed to the viewport at the top and left the positioning hook
+  // sets inline, so the corner's own right and bottom must not apply. Left
+  // in, `right: 0` stretches the panel to the viewport's right edge and the
+  // top corners' `bottom` collapses it to its padding. The coordinates are
+  // the anchor's edge, so a panel above it pulls up by the gap instead.
   &.#{iv.$class-prefix}is-portal {
     position: fixed;
+    right: auto;
+    bottom: auto;
+
+    &.#{iv.$class-prefix}is-top-left,
+    &.#{iv.$class-prefix}is-top-right {
+      margin-top: calc(-1 * #{cv.getVar('picker-popover-offset')});
+      margin-bottom: 0;
+    }
   }
 }
 

package/src/scss/form/_rate.scss

@@ -299,9 +299,11 @@ $rate-pop-scale: 1.2 !default;
 }
 
 // Reduced motion
+// The pop is set on `.rate-item.is-active`, which is more specific than the
+// rule here, so the stop is `!important` to win over it.
 @media (prefers-reduced-motion: reduce) {
   .#{iv.$class-prefix}rate-item {
     transition: none;
-    animation: none;
+    animation: none !important;
   }
 }

package/src/scss/form/_timeinput.scss

@@ -342,8 +342,13 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
   // Wide bottom-anchored popover when it contains a TimeInput panel — the
   // OS-native picker on iOS occupies almost the full screen width with the
   // wheels centred, so we mirror that. `:has()` is supported on iOS 15.4+,
-  // Safari 15.4+, and all current Chromium / Firefox.
-  .#{iv.$class-prefix}picker-popover:has(.#{iv.$class-prefix}timeinput-panel) {
+  // Safari 15.4+, and all current Chromium / Firefox. A portaled panel is
+  // left out: the top and left set inline on it beat this rule's, so it
+  // would stretch to the insets below rather than move, and it keeps its
+  // corner instead.
+  .#{iv.$class-prefix}picker-popover:not(.#{iv.$class-prefix}is-portal):has(
+      .#{iv.$class-prefix}timeinput-panel
+    ) {
     // Override the popover's registered radius var so border-radius (which
     // already references `cv.getVar('picker-popover-radius')`) updates
     // automatically. We use Bulma's `radius-large` scaled by 4 for an
@@ -359,6 +364,11 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
     top: auto;
     width: auto;
     max-width: none;
+    // The sheet sits off the viewport, not the input, so it drops the gap its
+    // corner puts in a margin. Kept, a top corner's would lift it off its
+    // `bottom`, and `auto` would leave room for a gap the sheet doesn't have.
+    margin-top: 0;
+    margin-bottom: 0;
   }
   .#{iv.$class-prefix}timeinput-panel {
     display: flex;