chore: resolved merge conflicts and updated styles, reduced markup

css/pico.classless.css

@@ -2034,11 +2034,11 @@ progress::-moz-progress-bar {
   }
 }
 details[role=dropdown] {
+  position: relative;
   padding: 0;
   border-bottom: none;
 }
 details[role=dropdown] summary {
-  position: relative;
   margin-bottom: 0;
   padding: calc(var(--spacing) * 0.5);
   border: var(--border-width) solid var(--form-element-border-color);
@@ -2048,11 +2048,7 @@ details[role=dropdown] summary {
 details[role=dropdown] summary::after {
   transform: rotate(0deg);
 }
-details[role=dropdown] summary + div {
+details[role=dropdown] summary + ul {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
   z-index: 100;
   position: absolute;
   top: auto;
@@ -2067,33 +2063,33 @@ details[role=dropdown] summary + div ul {
   background-color: var(--background-color);
   list-style: none;
 }
-details[role=dropdown] summary + div ul li {
+details[role=dropdown] summary + ul li {
   margin-bottom: 0;
 }
-details[role=dropdown] summary + div ul li::marker {
+details[role=dropdown] summary + ul li::marker {
   content: "";
 }
-details[role=dropdown] summary + div ul li input[type=radio],
+details[role=dropdown] summary + ul li input[type=radio],
-details[role=dropdown] summary + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=checkbox] {
   display: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-details[role=dropdown] summary + div ul li label {
+details[role=dropdown] summary + ul li label {
   position: relative;
   width: 100%;
   margin: 0;
   padding: calc(var(--spacing) * 0.5);
   line-height: 1;
 }
-details[role=dropdown] summary + div ul li label:hover {
+details[role=dropdown] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input:checked + label {
+details[role=dropdown] summary + ul li input:checked + label {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
   display: inline-block;
   width: calc(var(--spacing) * 1.2);
   height: calc(var(--spacing) * 1.2);
@@ -2103,7 +2099,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
   content: "";
   vertical-align: text-bottom;
 }
-details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
   background-image: var(--icon-checkbox);
   background-position: center;
   background-size: calc(var(--spacing) * 0.8) auto;

css/pico.css

@@ -2317,11 +2317,11 @@ progress::-moz-progress-bar {
   }
 }
 details[role=dropdown] {
+  position: relative;
   padding: 0;
   border-bottom: none;
 }
 details[role=dropdown] summary {
-  position: relative;
   margin-bottom: 0;
   padding: calc(var(--spacing) * 0.5);
   border: var(--border-width) solid var(--form-element-border-color);
@@ -2331,11 +2331,7 @@ details[role=dropdown] summary {
 details[role=dropdown] summary::after {
   transform: rotate(0deg);
 }
-details[role=dropdown] summary + div {
+details[role=dropdown] summary + ul {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
   z-index: 100;
   position: absolute;
   top: auto;
@@ -2350,33 +2346,33 @@ details[role=dropdown] summary + div ul {
   background-color: var(--background-color);
   list-style: none;
 }
-details[role=dropdown] summary + div ul li {
+details[role=dropdown] summary + ul li {
   margin-bottom: 0;
 }
-details[role=dropdown] summary + div ul li::marker {
+details[role=dropdown] summary + ul li::marker {
   content: "";
 }
-details[role=dropdown] summary + div ul li input[type=radio],
+details[role=dropdown] summary + ul li input[type=radio],
-details[role=dropdown] summary + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=checkbox] {
   display: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-details[role=dropdown] summary + div ul li label {
+details[role=dropdown] summary + ul li label {
   position: relative;
   width: 100%;
   margin: 0;
   padding: calc(var(--spacing) * 0.5);
   line-height: 1;
 }
-details[role=dropdown] summary + div ul li label:hover {
+details[role=dropdown] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input:checked + label {
+details[role=dropdown] summary + ul li input:checked + label {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
   display: inline-block;
   width: calc(var(--spacing) * 1.2);
   height: calc(var(--spacing) * 1.2);
@@ -2386,7 +2382,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
   content: "";
   vertical-align: text-bottom;
 }
-details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
   background-image: var(--icon-checkbox);
   background-position: center;
   background-size: calc(var(--spacing) * 0.8) auto;

css/pico.fluid.classless.css

@@ -2004,11 +2004,11 @@ progress::-moz-progress-bar {
   }
 }
 details[role=dropdown] {
+  position: relative;
   padding: 0;
   border-bottom: none;
 }
 details[role=dropdown] summary {
-  position: relative;
   margin-bottom: 0;
   padding: calc(var(--spacing) * 0.5);
   border: var(--border-width) solid var(--form-element-border-color);
@@ -2018,11 +2018,7 @@ details[role=dropdown] summary {
 details[role=dropdown] summary::after {
   transform: rotate(0deg);
 }
-details[role=dropdown] summary + div {
+details[role=dropdown] summary + ul {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
   z-index: 100;
   position: absolute;
   top: auto;
@@ -2037,33 +2033,33 @@ details[role=dropdown] summary + div ul {
   background-color: var(--background-color);
   list-style: none;
 }
-details[role=dropdown] summary + div ul li {
+details[role=dropdown] summary + ul li {
   margin-bottom: 0;
 }
-details[role=dropdown] summary + div ul li::marker {
+details[role=dropdown] summary + ul li::marker {
   content: "";
 }
-details[role=dropdown] summary + div ul li input[type=radio],
+details[role=dropdown] summary + ul li input[type=radio],
-details[role=dropdown] summary + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=checkbox] {
   display: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-details[role=dropdown] summary + div ul li label {
+details[role=dropdown] summary + ul li label {
   position: relative;
   width: 100%;
   margin: 0;
   padding: calc(var(--spacing) * 0.5);
   line-height: 1;
 }
-details[role=dropdown] summary + div ul li label:hover {
+details[role=dropdown] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input:checked + label {
+details[role=dropdown] summary + ul li input:checked + label {
   background-color: var(--secondary-focus);
 }
-details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
   display: inline-block;
   width: calc(var(--spacing) * 1.2);
   height: calc(var(--spacing) * 1.2);
@@ -2073,7 +2069,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
   content: "";
   vertical-align: text-bottom;
 }
-details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before {
+details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
   background-image: var(--icon-checkbox);
   background-position: center;
   background-size: calc(var(--spacing) * 0.8) auto;

docs/src/dropdown.html

@@ -20,7 +20,6 @@
           <article aria-label="Dropdown examples">
             <details role="dropdown">
               <summary>Single select</summary>
-              <div>
                 <ul>
                   <li>
                     <input type="radio" id="01" name="option1" />
@@ -31,11 +30,9 @@
                     <label for="02">Option 2</label>
                   </li>
                 </ul>
-              </div>
             </details>
             <details role="dropdown">
               <summary>Multi-select</summary>
-              <div>
                 <ul>
                   <li>
                     <input type="checkbox" id="11" name="option2" />
@@ -46,7 +43,6 @@
                     <label for="12">Option 2</label>
                   </li>
                 </ul>
-              </div>
             </details>
           </article>
 
@@ -76,7 +72,6 @@
                 <em>===============================</em>
                 &lt;<b>details role="dropdown"</b>&gt;
                   &lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt;
-                  &lt;<b>div</b>&gt;
                   &lt;<b>ul</b>&gt;
                     &lt;<b>li</b>&gt;
                       &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
@@ -87,7 +82,6 @@
                       &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
                     &lt;<b>/li</b>&gt;
                   &lt;<b>/ul</b>&gt;
-                  &lt;<b>/div</b>&gt;
                 &lt;<b>/details</b>&gt;
   
   
@@ -95,7 +89,6 @@
                 <em>===============================</em>
                 &lt;<b>details role="dropdown"</b>&gt;
                   &lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt;
-                  &lt;<b>div</b>&gt;
                   &lt;<b>ul</b>&gt;
                     &lt;<b>li</b>&gt;
                       &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
@@ -106,7 +99,6 @@
                       &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
                     &lt;<b>/li</b>&gt;
                   &lt;<b>/ul</b>&gt;
-                  &lt;<b>/div</b>&gt;
                 &lt;<b>/details</b>&gt;
               </code>
             </pre>

scss/components/_dropdown.scss

@@ -1,9 +1,9 @@
 details[role='dropdown'] {
+  position: relative;
   padding: 0;
   border-bottom: none;
 
   summary {
-    position: relative;
     margin-bottom: 0;
     padding: calc(var(--spacing) * 0.5);
     border: var(--border-width) solid var(--form-element-border-color);
@@ -14,11 +14,7 @@ details[role='dropdown'] {
       transform: rotate(0deg);
     }
 
-    & + div {
+    & + ul {
-      position: relative;
-      margin: 0;
-
-      ul {
       z-index: 100;
       position: absolute;
       top: auto;
@@ -83,7 +79,6 @@ details[role='dropdown'] {
       }
     }
   }
-  }
 
   &[disabled] summary,
   &.disabled summary {