@jsenv/navi 0.26.0 → 0.26.1

package/dist/jsenv_navi.js

@@ -6287,6 +6287,7 @@ const FLOW_PROPS = {
   flex: () => {},
   grid: () => {},
   gridTemplateColumns: PASS_THROUGH,
+  display: PASS_THROUGH, // in case people write "display: none" (even if hidden prop is recommended)
   row: () => {},
   column: () => {},
 };
@@ -8223,6 +8224,19 @@ import.meta.css = [/* css */`
       grid-auto-flow: unset;
     }
   }
+  /*
+
+  It's very common to declare a display on component as follow
+  .component_class { display: component_display; }
+
+  This kill the default behavior of [hidden] attribute and we need to explicitly handle it with:
+  .component_class[hidden] { display: none; }
+
+  To avoid this extra work and potential mistakes we force the default behavior of [hidden] attribute.
+  */
+  [hidden] {
+    display: none !important;
+  }
 `, "@jsenv/navi/src/box/box.jsx"];
 const PSEUDO_CLASSES_DEFAULT = [];
 const PSEUDO_ELEMENTS_DEFAULT = [];
@@ -27212,9 +27226,6 @@ const css$l = /* css */`
       cursor: not-allowed;
       pointer-events: none;
     }
-    &[hidden] {
-      display: none;
-    }
   }
 
   .navi_list_container {
@@ -27290,9 +27301,6 @@ const css$l = /* css */`
       text-align: center;
       user-select: none;
     }
-    &[hidden] {
-      display: none;
-    }
   }
   [navi-virtual-filler="bottom"] {
     /* for some reason preact ends up puttin this element before the list items in some scenarios
@@ -30974,7 +30982,7 @@ installImportMetaCssBuild(import.meta);const css$f = /* css */`
 
       &[hidden] {
         /* We keep placeholder in the dom in case it dictates the select width, this way select wont shrink once a value is selected */
-        display: inline-block;
+        display: inline-block !important;
         height: 0;
         padding-block: 0;
         visibility: hidden;