Closes Hamburger Menu show part of menu below Yohn/PicoCSS#49

Fixes Accordion chevron padding picocss/pico#653

Demo has been updated with new hamburger nav  example.

scss/components/_accordion.scss

@@ -5,19 +5,26 @@
   /**
    * Accordion (<details>)
    */
-
   #{$parent-selector} details {
     display: block;
     margin-bottom: var(#{$css-var-prefix}spacing);
 
+    @if $enable-classes {
+      &.hide-arrow > summary::after {
+        display: none;
+        content: none;
+      }
+    }
+
     summary {
+      position: relative;
+      padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
       line-height: 1rem;
       list-style-type: none;
       cursor: pointer;
-
-      @if $enable-transitions {
-        //transition: color var(#{$css-var-prefix}transition);
-      }
+      //@if $enable-transitions {
+      //transition: color var(#{$css-var-prefix}transition);
+      //}
 
       &:not([role]) {
         color: var(#{$css-var-prefix}accordion-close-summary-color);
@@ -39,10 +46,12 @@
       // Marker
       &::after {
         display: block;
+        position: absolute;
+        top: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5);
+        right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * 0.5);
         width: 1rem;
         height: 1rem;
         margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
-        float: right;
         transform: rotate(-90deg);
         background-image: var(#{$css-var-prefix}icon-chevron);
         background-position: right center;

scss/components/_dropdown.scss

@@ -265,6 +265,13 @@
     // Override height
     margin-bottom: 0;
 
+    &.hide-arrow {
+      > summary::after {
+        display: none;
+        content: none;
+      }
+    }
+
     > summary {
       &:not([role]) {
         // Override height

scss/components/_group.scss

@@ -6,6 +6,8 @@
    * Group ([role="group"], [role="search"])
    */
 
+  /* V3 Remove, modifing the <legend> placement is disabled
+   * in chrome.*/
   #{$parent-selector} fieldset[role="group"] > legend {
     float: left;
   }

scss/components/_nav-hamburger.scss

@@ -10,7 +10,7 @@
    */
   #{$parent-selector} nav[role="navigation"] {
     z-index: 1;
-    align-items: center;
+    //align-items: center; // the label for the burger was bouncing
     width: 100%;
     overflow: visible;
 
@@ -29,6 +29,12 @@
       cursor: pointer;
       user-select: none;
     }
+    > ul,
+    > ol {
+      > li > [role="search"] {
+        margin-block-end: 0;
+      }
+    }
   }
 
   @each $breakpoint, $values in $breakpoints {
@@ -51,6 +57,7 @@
           display: block;
         }
         > [role="list"] {
+          display: none;
           flex-direction: column;
           align-items: flex-start;
           width: 90vw;
@@ -58,21 +65,34 @@
           margin: 0 auto;
           background-color: var(#{$css-var-prefix}muted-border-color); //muted-border-color);
           box-shadow: var(#{$css-var-prefix}box-shadow);
-          transition: max-height var(#{$css-var-prefix}transition);
+          opacity: 0;
+          @if $enable-transitions {
+            transition:
+              max-height var(#{$css-var-prefix}transition),
+              opacity var(#{$css-var-prefix}transition);
+          }
           li {
             width: calc(100% - calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2));
             margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 0.5)
               var(#{$css-var-prefix}nav-link-spacing-vertical);
             padding: 0;
+            > details.dropdown {
+              width: 100%;
+            }
+            > form[role="search"] {
+              margin-block-end: 0;
+            }
           }
           a {
             display: block;
             margin: 0;
-            border-bottom: 1px solid transparent;
             border-radius: 0;
-            transition:
-              border-color var(#{$css-var-prefix}transition),
-              color var(#{$css-var-prefix}transition);
+            border-block-end: 1px solid transparent;
+            @if $enable-transitions {
+              transition:
+                border-color var(#{$css-var-prefix}transition),
+                color var(#{$css-var-prefix}transition);
+            }
           }
           a:hover {
             border-bottom-color: var(#{$css-var-prefix}underline);
@@ -82,7 +102,9 @@
           }
         }
         input[type="checkbox"]:checked ~ [role="list"] {
+          display: block;
           max-height: 100vh;
+          opacity: 1;
         }
       }
     }

scss/helpers/_copyright.scss

@@ -1,4 +1,4 @@
 /*!
- * Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2025 - Licensed under MIT
  */