Merge branch 'll/feature/dropdown' into dev

README.md

@@ -164,6 +164,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
 - [Cards](https://picocss.com/docs/cards.html)
 - [Modal](https://picocss.com/docs/modal.html)
 - [Navs](https://picocss.com/docs/navs.html)
+- [Dropdown](https://picocss.com/docs/dropdown.html)
 - [Progress](https://picocss.com/docs/progress.html)
 
 **Utilities**

css/pico.classless.css

@@ -1856,7 +1856,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);
@@ -2066,6 +2065,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+  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;
+  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;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  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 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);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.css

@@ -2037,7 +2037,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);
@@ -2343,6 +2342,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+  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;
+  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;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  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 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);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.fluid.classless.css

@@ -1826,7 +1826,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);
@@ -2036,6 +2035,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+  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;
+  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;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  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 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);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

docs/src/_sidebar.html

@@ -43,6 +43,7 @@
       <ul>
         <li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
         <li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
+        <li><a href="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</a></li>
         <li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
         <li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
         <li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>

docs/src/dropdown.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    ${require('./_head.html') title="Dropdown" description="a dropdown
+    component, without JavaScript." canonical="dropdown.html" }
+  </head>
+
+  <body>
+    ${require('./_nav.html')}
+
+    <main class="container" id="docs">
+      ${require('./_sidebar.html') active="dropdown-link"}
+
+      <div role="document">
+        <section id="dropdown">
+          <hgroup>
+            <h1>Dropdown</h1>
+            <h2>single / multi select dropdown, without JavaScript.</h2>
+          </hgroup>
+          <article aria-label="Dropdown examples">
+            <details role="list">
+              <summary aria-haspopup="listbox">Single select</summary>
+              <ul role="listbox">
+                <li>
+                  <label for="01">
+                    <input type="radio" id="01" name="option1" />
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="02">
+                    <input type="radio" id="02" name="option1" />
+                    Option 2
+                  </label>
+                </li>
+              </ul>
+            </details>
+            <details role="list">
+              <summary aria-haspopup="listbox">Multi-select</summary>
+              <ul role="listbox">
+                <li>
+                  <label for="11">
+                    <input type="checkbox" id="11" name="option2" />
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="12">
+                    <input type="checkbox" id="12" name="option2" />
+                    Option 2
+                  </label>
+                </li>
+              </ul>
+            </details>
+          </article>
+
+          <label><strong>Usage notes</strong></label>
+          <ul>
+            <li>
+              in order to use dropdown component, use
+              <code>role='list'</code> on details tag.
+            </li>
+            <li>
+              no need to use javascript to close the dropdown when clicked
+              outside.
+            </li>
+            <li>
+              for both single / multi-select case, need javascript to update
+              <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.
+            </li>
+          </ul>
+          <footer class="code">
+            <pre>
+              <code>
+                <em>&lt;!-- For Single-select --&gt;</em>
+                &lt;<b>details role="list"</b>&gt;
+                  &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>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>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;
+  
+  
+                <em>&lt;!-- For Multi-select --&gt;</em>
+                &lt;<b>details role="list"</b>&gt;
+                  &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>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>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;
+              </code>
+            </pre>
+          </footer>
+        </section>
+
+        ${require('./_footer.html')}
+      </div>
+    </main>
+    <script src="js/commons.min.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,93 @@
+details[role='list'] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+
+  summary {
+    margin-bottom: 0;
+    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 {
+      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: '';
+        }
+
+        label {
+          cursor: pointer;
+          position: relative;
+          width: 100%;
+          margin: 0;
+          padding: var(--form-element-spacing-vertical)
+            var(--form-element-spacing-horizontal);
+          &:hover {
+            background-color: var(--secondary-focus);
+          }
+
+          input[type='radio'],
+          input[type='checkbox'] {
+            appearance: none;
+          }
+        }
+      }
+    }
+  }
+
+  &[disabled] summary,
+  &.disabled summary {
+    color: var(--muted-color);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &[open] summary {
+    margin-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    &::before {
+      display: block;
+      z-index: 80;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      content: ' ';
+      cursor: default;
+    }
+
+    &::after {
+      transform: rotate(180deg);
+    }
+  }
+}

scss/pico.scss

@@ -34,6 +34,7 @@
 @import "components/modal"; // dialog
 @import "components/nav"; // nav
 @import "components/progress"; // progress
+@import "components/dropdown"; // dropdown
 
 // Utilities
 @import "utilities/loading"; // aria-busy=true