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 {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
+details[role=dropdown] summary + 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 + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=radio],
+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 {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
+details[role=dropdown] summary + 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 + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=radio],
+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 {
-  position: relative;
-  margin: 0;
-}
-details[role=dropdown] summary + div ul {
+details[role=dropdown] summary + 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 + div ul li input[type=checkbox] {
+details[role=dropdown] summary + ul li input[type=radio],
+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,18 +72,16 @@
                 <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;
-                        &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
-                      &lt;<b>/li</b>&gt;
-                      &lt;<b>li</b>&gt;
-                        &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
-                        &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>ul</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
+                      &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>/details</b>&gt;
   
   
@@ -95,18 +89,16 @@
                 <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;
-                        &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
-                      &lt;<b>/li</b>&gt;
-                      &lt;<b>li</b>&gt;
-                        &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
-                        &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>ul</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
+                      &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>/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,71 +14,66 @@ details[role='dropdown'] {
       transform: rotate(0deg);
     }
 
-    & + div {
-      position: relative;
+    & + ul {
+      z-index: 100;
+      position: absolute;
+      top: auto;
+      right: 0px;
+      left: 0px;
       margin: 0;
+      padding: 0;
+      border: var(--border-width) solid var(--form-element-border-color);
+      border-top: none;
+      border-bottom-right-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+      background-color: var(--background-color);
+      list-style: none;
 
-      ul {
-        z-index: 100;
-        position: absolute;
-        top: auto;
-        right: 0px;
-        left: 0px;
-        margin: 0;
-        padding: 0;
-        border: var(--border-width) solid var(--form-element-border-color);
-        border-top: none;
-        border-bottom-right-radius: var(--border-radius);
-        border-bottom-left-radius: var(--border-radius);
-        background-color: var(--background-color);
-        list-style: none;
+      li {
+        margin-bottom: 0;
+        &::marker {
+          content: '';
+        }
 
-        li {
-          margin-bottom: 0;
-          &::marker {
-            content: '';
-          }
+        input[type='radio'],
+        input[type='checkbox'] {
+          display: none;
+          appearance: none;
+        }
 
-          input[type='radio'],
-          input[type='checkbox'] {
-            display: none;
-            appearance: none;
-          }
-
-          label {
-            position: relative;
-            width: 100%;
-            margin: 0;
-            padding: calc(var(--spacing) * 0.5);
-            line-height: 1;
-            &:hover {
-              background-color: var(--secondary-focus);
-            }
-          }
-
-          input:checked + label {
+        label {
+          position: relative;
+          width: 100%;
+          margin: 0;
+          padding: calc(var(--spacing) * 0.5);
+          line-height: 1;
+          &:hover {
             background-color: var(--secondary-focus);
           }
+        }
 
-          input[type='checkbox'] {
-            & + label:before {
-              display: inline-block;
-              width: calc(var(--spacing) * 1.2);
-              height: calc(var(--spacing) * 1.2);
-              margin-right: calc(var(--spacing) * 0.5);
-              border: var(--border-width) solid var(--primary);
-              border-radius: var(--border-radius);
-              content: '';
-              vertical-align: text-bottom;
-            }
+        input:checked + label {
+          background-color: var(--secondary-focus);
+        }
 
-            &:checked + label:before {
-              background-image: var(--icon-checkbox);
-              background-position: center;
-              background-size: calc(var(--spacing) * 0.8) auto;
-              background-repeat: no-repeat;
-              background-color: var(--primary);
-            }
+        input[type='checkbox'] {
+          & + label:before {
+            display: inline-block;
+            width: calc(var(--spacing) * 1.2);
+            height: calc(var(--spacing) * 1.2);
+            margin-right: calc(var(--spacing) * 0.5);
+            border: var(--border-width) solid var(--primary);
+            border-radius: var(--border-radius);
+            content: '';
+            vertical-align: text-bottom;
+          }
+
+          &:checked + label:before {
+            background-image: var(--icon-checkbox);
+            background-position: center;
+            background-size: calc(var(--spacing) * 0.8) auto;
+            background-repeat: no-repeat;
+            background-color: var(--primary);
           }
         }
       }