@heroui/styles - npm Package Compare versions

Comparing version 3.2.3 to 3.2.4

dist/components/autocomplete.css

@@ -133,3 +133,3 @@ /* Autocomplete styles */
 .autocomplete__popover {
-  @apply w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
+  @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
   border-radius: min(32px, var(--radius-3xl));
@@ -195,5 +195,9 @@ box-shadow: var(--shadow-overlay);
 
-  /* Listbox styles */
+  /* Listbox styles.
+   * `min-h-0` + the popover's flex column let the list shrink below 320px when the
+   * popover itself is constrained (e.g. inside a Modal, or a short viewport). Without
+   * it the list keeps its full 320px and its overflow is clipped by the popover, making
+   * the last options unreachable. */
   [data-slot="list-box"] {
-    @apply max-h-[320px] scrollbar overflow-y-auto p-1.5 outline-none;
+    @apply max-h-[320px] min-h-0 scrollbar overflow-y-auto p-1.5 outline-none;
   }
@@ -224,3 +228,3 @@
   [data-slot="search-field"] {
-    @apply px-3 py-1 outline-none;
+    @apply shrink-0 px-3 py-1 outline-none;
   }
@@ -227,0 +231,0 @@

dist/components/badge.css

@@ -20,2 +20,3 @@ /* ==========================================================================
   border: 1px solid var(--badge-border);
+  background-clip: padding-box;
 }
@@ -22,0 +23,0 @@

dist/components/modal.css

@@ -141,6 +141,13 @@ /* -------------------------------------------------------------------------------------------------
  * Modifier: container--scroll-outside
+ *
+ * The container is React Aria's modal ref, so it must stay `pointer-events: none`,
+ * otherwise clicks around the dialog count as inside the modal and never dismiss it.
+ * The backdrop owns the scrolling instead.
  */
 .modal__container--scroll-outside {
-  @apply scrollbar overflow-y-auto;
-  @apply pointer-events-auto;
+  @apply h-auto min-h-(--visual-viewport-height) overflow-y-visible;
+}
+
+.modal__backdrop:has(.modal__container--scroll-outside) {
+  @apply scrollbar items-start overflow-y-auto;
   -webkit-overflow-scrolling: touch;
@@ -147,0 +154,0 @@ }

package.json

 {
   "name": "@heroui/styles",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "HeroUI core styles and Tailwind plugin",
@@ -54,3 +54,3 @@ "author": "HeroUI <[e-mail]>",
   "dependencies": {
-    "tailwind-variants": "3.3.0",
+    "tailwind-variants": "3.3.1",
     "tw-animate-css": "1.4.0"
@@ -57,0 +57,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

1003853

0.09%

Lines of code

18035

0.06%

Dependency changes

• + Added

  tailwind-variants@3.3.1
  (transitive)

• - Removed

  tailwind-variants@3.3.0
  (transitive)

• Updated

  tailwind-variants@3.3.1