made dropdown appearance inline with form controls

css/pico.classless.css

@@ -1841,7 +1841,6 @@ details[open] > summary::after {
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);
@@ -2058,13 +2057,16 @@ details[role=list] {
 }
 details[role=list] summary {
   margin-bottom: 0;
-  padding: calc(var(--spacing) * 0.5);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
   border: var(--border-width) solid var(--form-element-border-color);
   border-radius: var(--border-radius);
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  line-height: inherit;
   cursor: pointer;
 }
 details[role=list] summary::after {
   transform: rotate(0deg);
+  height: 100%;
 }
 details[role=list] summary + ul {
   z-index: 100;
@@ -2087,42 +2089,21 @@ details[role=list] summary + ul li {
 details[role=list] summary + ul li::marker {
   content: "";
 }
-details[role=list] summary + ul li input[type=radio],
-details[role=list] summary + ul li input[type=checkbox] {
-  display: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
 details[role=list] summary + ul li label {
+  cursor: pointer;
   position: relative;
   width: 100%;
   margin: 0;
-  padding: calc(var(--spacing) * 0.5);
-  line-height: 1;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
 }
 details[role=list] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=list] summary + ul li input:checked + label {
-  background-color: var(--secondary-focus);
-}
-details[role=list] summary + ul li 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;
-}
-details[role=list] 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;
-  background-repeat: no-repeat;
-  background-color: var(--primary);
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
   color: var(--muted-color);

css/pico.css

@@ -2019,7 +2019,6 @@ details[open] > summary::after {
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);
@@ -2332,13 +2331,16 @@ details[role=list] {
 }
 details[role=list] summary {
   margin-bottom: 0;
-  padding: calc(var(--spacing) * 0.5);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
   border: var(--border-width) solid var(--form-element-border-color);
   border-radius: var(--border-radius);
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  line-height: inherit;
   cursor: pointer;
 }
 details[role=list] summary::after {
   transform: rotate(0deg);
+  height: 100%;
 }
 details[role=list] summary + ul {
   z-index: 100;
@@ -2361,42 +2363,21 @@ details[role=list] summary + ul li {
 details[role=list] summary + ul li::marker {
   content: "";
 }
-details[role=list] summary + ul li input[type=radio],
-details[role=list] summary + ul li input[type=checkbox] {
-  display: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
 details[role=list] summary + ul li label {
+  cursor: pointer;
   position: relative;
   width: 100%;
   margin: 0;
-  padding: calc(var(--spacing) * 0.5);
-  line-height: 1;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
 }
 details[role=list] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=list] summary + ul li input:checked + label {
-  background-color: var(--secondary-focus);
-}
-details[role=list] summary + ul li 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;
-}
-details[role=list] 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;
-  background-repeat: no-repeat;
-  background-color: var(--primary);
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
   color: var(--muted-color);

css/pico.fluid.classless.css

@@ -1811,7 +1811,6 @@ details[open] > summary::after {
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);
@@ -2028,13 +2027,16 @@ details[role=list] {
 }
 details[role=list] summary {
   margin-bottom: 0;
-  padding: calc(var(--spacing) * 0.5);
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
   border: var(--border-width) solid var(--form-element-border-color);
   border-radius: var(--border-radius);
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  line-height: inherit;
   cursor: pointer;
 }
 details[role=list] summary::after {
   transform: rotate(0deg);
+  height: 100%;
 }
 details[role=list] summary + ul {
   z-index: 100;
@@ -2057,42 +2059,21 @@ details[role=list] summary + ul li {
 details[role=list] summary + ul li::marker {
   content: "";
 }
-details[role=list] summary + ul li input[type=radio],
-details[role=list] summary + ul li input[type=checkbox] {
-  display: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
 details[role=list] summary + ul li label {
+  cursor: pointer;
   position: relative;
   width: 100%;
   margin: 0;
-  padding: calc(var(--spacing) * 0.5);
-  line-height: 1;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
 }
 details[role=list] summary + ul li label:hover {
   background-color: var(--secondary-focus);
 }
-details[role=list] summary + ul li input:checked + label {
-  background-color: var(--secondary-focus);
-}
-details[role=list] summary + ul li 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;
-}
-details[role=list] 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;
-  background-repeat: no-repeat;
-  background-color: var(--primary);
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 details[role=list][disabled] summary, details[role=list].disabled summary {
   color: var(--muted-color);

docs/src/dropdown.html

@@ -20,29 +20,37 @@
           <article aria-label="Dropdown examples">
             <details role="list">
               <summary aria-haspopup="listbox">Single select</summary>
-                <ul role="listbox">
-                  <li>
+              <ul role="listbox">
+                <li>
+                  <label for="01">
                     <input type="radio" id="01" name="option1" />
-                    <label for="01">Option 1</label>
-                  </li>
-                  <li>
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="02">
                     <input type="radio" id="02" name="option1" />
-                    <label for="02">Option 2</label>
-                  </li>
-                </ul>
+                    Option 2
+                  </label>
+                </li>
+              </ul>
             </details>
             <details role="list">
               <summary aria-haspopup="listbox">Multi-select</summary>
-                <ul role="listbox">
-                  <li>
+              <ul role="listbox">
+                <li>
+                  <label for="11">
                     <input type="checkbox" id="11" name="option2" />
-                    <label for="11">Option 1</label>
-                  </li>
-                  <li>
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="12">
                     <input type="checkbox" id="12" name="option2" />
-                    <label for="12">Option 2</label>
-                  </li>
-                </ul>
+                    Option 2
+                  </label>
+                </li>
+              </ul>
             </details>
           </article>
 
@@ -61,8 +69,9 @@
               <code>summary</code> tag text when any option selected.
             </li>
             <li>
-              in case of single select, remove <code>open</code> attribute on <code>details</code> tag
-              using javascript when an option is selected.
+              in case of single select, remove <code>open</code> attribute on
+              <code>details</code> tag using javascript when an option is
+              selected.
             </li>
           </ul>
           <footer class="code">
@@ -73,12 +82,16 @@
                   &lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
                   &lt;<b>ul role="listbox"</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>label for="01"</b>&gt;
+                        &lt;<b>input type="radio" id="01" name="option1" /</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>label for="02"</b>&gt;
+                        &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
+                        Option 2
+                      &lt;<b>/label</b>&gt;
                     &lt;<b>/li</b>&gt;
                   &lt;<b>/ul</b>&gt;
                 &lt;<b>/details</b>&gt;
@@ -89,12 +102,16 @@
                   &lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
                   &lt;<b>ul role="listbox"</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>label for="01"</b>&gt;
+                        &lt;<b>input type="checkbox" id="01" name="option1" /</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>label for="01"</b>&gt;
+                        &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
+                        Option 2
+                      &lt;<b>/label</b>&gt;
                     &lt;<b>/li</b>&gt;
                   &lt;<b>/ul</b>&gt;
                 &lt;<b>/details</b>&gt;

scss/components/_card.scss

@@ -5,7 +5,6 @@
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);

scss/components/_dropdown.scss

@@ -5,13 +5,20 @@ details[role='list'] {
 
   summary {
     margin-bottom: 0;
-    padding: calc(var(--spacing) * 0.5);
+    padding: var(--form-element-spacing-vertical)
+      var(--form-element-spacing-horizontal);
     border: var(--border-width) solid var(--form-element-border-color);
     border-radius: var(--border-radius);
+    height: calc(
+      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+        var(--border-width) * 2
+    );
+    line-height: inherit;
     cursor: pointer;
 
     &::after {
       transform: rotate(0deg);
+      height: 100%;
     }
 
     & + ul {
@@ -35,45 +42,20 @@ details[role='list'] {
           content: '';
         }
 
-        input[type='radio'],
-        input[type='checkbox'] {
-          display: none;
-          appearance: none;
-        }
-
         label {
+          cursor: pointer;
           position: relative;
           width: 100%;
           margin: 0;
-          padding: calc(var(--spacing) * 0.5);
-          line-height: 1;
+          padding: var(--form-element-spacing-vertical)
+            var(--form-element-spacing-horizontal);
           &:hover {
             background-color: var(--secondary-focus);
           }
-        }
 
-        input:checked + label {
-          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;
-          }
-
-          &: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='radio'],
+          input[type='checkbox'] {
+            appearance: none;
           }
         }
       }