From 51dd2293cab8d77cf13fc2c32b6053ffa654bc56 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Sun, 1 Jan 2023 14:00:33 +0700
Subject: [PATCH] refactor: accordion and dropdown

---
 scss/components/_accordion.scss |  21 +-
 scss/components/_dropdown.scss  | 381 ++++++++++++++++++--------------
 2 files changed, 227 insertions(+), 175 deletions(-)

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 39cae2e5..30c0879d 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -63,11 +63,17 @@
       &:focus {
         outline: none;
 
-        &:not([role="button"]) {
+        &:not([role]) {
           color: var(#{$✨}accordion-active-summary-color);
         }
       }
 
+      &:focus-visible {
+        &:not([role]) {
+          color: var(#{$✨}primary);
+        }
+      }
+
       // Type button
       &[role="button"] {
         width: 100%;
@@ -80,11 +86,14 @@
         }
 
         @if $enable-classes {
-          // .contrast
-          &:not(.outline).contrast {
-            // Marker
+          &.outline {
             &::after {
-              background-image: var(#{$✨}icon-chevron-button-inverse);
+              background-image: var(#{$✨}icon-chevron);
+            }
+          }
+          &.contrast:not(.outline) {
+            &::after {
+              background-image: var(#{$✨}icon-chevron-button-contrast);
             }
           }
         }
@@ -94,7 +103,7 @@
     // Open
     &[open] {
       > summary {
-        margin-bottom: calc(var(#{$✨}spacing));
+        margin-bottom: var(#{$✨}spacing);
 
         &:not([role]) {
           &:not(:focus) {
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index c0efaac4..b59605f6 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -6,31 +6,162 @@
    * Dropdown ([role="list"])
    */
 
-  // Menu
+  // Container
+  // ––––––––––––––––––––
+  // 1. Container type accordion
   details[role="list"],
-  li[role="list"] {
+  // 2. Container type nested list
+  nav li:has(button, a):has(li) {
     position: relative;
+    // margin-bottom: var(#{$✨}spacing);
+    border-bottom: none;
+
+    // Marker
+    // ––––––––––––––––––––
+    summary,
+    > button,
+    > a {
+      &::after {
+        display: block;
+        width: 1rem;
+        height: calc(1rem * var(#{$✨}line-height, 1.5));
+        margin-inline-start: 0.25rem;
+        float: right;
+        // TODO: find out why we need this magic number (0.2 rem)
+        // for the marker to be aligned with the on in the regular select
+        transform: rotate(0deg) translateX(0.2rem);
+        background-image: var(#{$✨}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+      }
+    }
+
+    // Marker as button
+    summary[role="button"],
+    > button {
+      &::after {
+        background-image: var(#{$✨}icon-chevron-button);
+      }
+
+      @if $enable-classes {
+        &.outline {
+          &::after {
+            background-image: var(#{$✨}icon-chevron);
+          }
+        }
+        &.contrast:not(.outline) {
+          &::after {
+            background-image: var(#{$✨}icon-chevron-button-contrast);
+          }
+        }
+      }
+    }
   }
 
+  // Container type accordion
+  // inside a nav
+  // ––––––––––––––––––––
+  nav details[role="list"] {
+    // Override height
+    margin-bottom: 0;
+  }
+
+  // Bouton as a select
+  // inside container type accordion
+  // ––––––––––––––––––––
+  details[role="list"] summary:not([role]) {
+    height: calc(
+      1rem *
+        var(#{$✨}line-height) +
+        var(#{$✨}form-element-spacing-vertical) *
+        2 +
+        var(#{$✨}border-width) *
+        2
+    );
+    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);
+    background-color: var(#{$✨}form-element-background-color);
+    color: var(#{$✨}form-element-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
+        color var(#{$✨}transition), box-shadow var(#{$✨}transition);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(#{$✨}form-element-active-border-color);
+      background-color: var(#{$✨}form-element-active-background-color);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
+    }
+
+    // Aria-invalid
+    &[aria-invalid="false"] {
+      #{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);
+      #{$✨}form-element-active-border-color: var(#{$✨}form-element-valid-focus-color);
+      #{$✨}form-element-focus-color: var(#{$✨}form-element-valid-focus-color);
+    }
+
+    &[aria-invalid="true"] {
+      #{$✨}form-element-border-color: var(#{$✨}form-element-invalid-border-color);
+      #{$✨}form-element-active-border-color: var(#{$✨}form-element-invalid-focus-color);
+      #{$✨}form-element-focus-color: var(#{$✨}form-element-invalid-focus-color);
+    }
+  }
+
+  // Bouton as a select
+  // inside container type accordion
+  // AND inside a nav
+  // ––––––––––––––––––––
+  nav details[role="list"] summary:not([role]) {
+    // Override height
+    height: auto;
+    padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
+      var(#{$✨}nav-link-spacing-horizontal);
+  }
+
+  // Submenu
+  // ––––––––––––––––––––
+  // 1. Inside container type accordion
   details[role="list"] summary + ul,
-  li[role="list"] > ul {
+  // 2. Inside container type nested list
+  nav li button + ul,
+  nav li a + ul {
     display: flex;
     z-index: 99;
     position: absolute;
-    top: auto;
-    right: 0;
     left: 0;
     flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
     margin: 0;
+    margin-top: var(#{$✨}outline-width);
     padding: 0;
     border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
     border-radius: var(#{$✨}border-radius);
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
     background-color: var(#{$✨}dropdown-background-color);
     box-shadow: var(#{$✨}dropdown-box-shadow);
     color: var(#{$✨}dropdown-color);
     white-space: nowrap;
+    opacity: 0;
+
+    @if $enable-transitions {
+      transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
+    }
+
+    &[dir="rtl"] {
+      right: 0;
+      left: auto;
+    }
 
     li {
       width: 100%;
@@ -54,186 +185,98 @@
         padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
           var(#{$✨}form-element-spacing-horizontal);
         overflow: hidden;
+        border-radius: 0;
         color: var(#{$✨}dropdown-color);
         text-decoration: none;
         text-overflow: ellipsis;
 
-        &:hover {
-          background-color: var(#{$✨}dropdown-hover-background-color);
-        }
-      }
-
-      &:has(label) {
-        &:hover {
-          background-color: var(#{$✨}dropdown-hover-background-color);
-
-          label {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-
-  // Marker
-  details[role="list"] summary,
-  li[role="list"] > a {
-    &::after {
-      display: block;
-      width: 1rem;
-      height: calc(1rem * var(#{$✨}line-height, 1.5));
-      margin-inline-start: 0.5rem;
-      float: right;
-      transform: rotate(0deg);
-      background-position: right center;
-      background-size: 1rem auto;
-      background-repeat: no-repeat;
-      content: "";
-    }
-  }
-
-  // Global dropdown only
-  details[role="list"] {
-    padding: 0;
-    border-bottom: none;
-
-    // Style <summary> as <select>
-    summary {
-      margin-bottom: 0;
-
-      &:not([role]) {
-        height: calc(
-          1rem *
-            var(#{$✨}line-height) +
-            var(#{$✨}form-element-spacing-vertical) *
-            2 +
-            var(#{$✨}border-width) *
-            2
-        );
-        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);
-        background-color: var(#{$✨}form-element-background-color);
-        color: var(#{$✨}form-element-placeholder-color);
-        line-height: inherit;
-        cursor: pointer;
-
-        @if $enable-transitions {
-          transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
-            color var(#{$✨}transition), box-shadow var(#{$✨}transition);
-        }
-
+        &:hover,
+        &:focus,
         &:active,
-        &:focus {
-          border-color: var(#{$✨}form-element-active-border-color);
-          background-color: var(#{$✨}form-element-active-background-color);
+        &:focus-visible {
+          background-color: var(#{$✨}dropdown-hover-background-color);
         }
+      }
 
-        &:focus {
-          box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
+      &:has(label):hover {
+        background-color: var(#{$✨}dropdown-hover-background-color);
+
+        label {
+          cursor: pointer;
         }
       }
     }
+  }
 
-    &[open] {
-      summary {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
+  // Submenu inside container
+  // type nested list
+  // ––––––––––––––––––––
+  nav li button + ul,
+  nav li a + ul {
+    transform: scaleY(0%);
+    transform-origin: top;
 
-        &:not([role="button"]) {
-          &:active,
-          &:focus {
-            border-color: var(#{$✨}form-element-border-color);
+    &:first-of-type,
+    &:last-of-type {
+      margin-right: var(#{$✨}nav-link-spacing-horizontal);
+      margin-left: var(#{$✨}nav-link-spacing-horizontal);
+    }
+  }
+
+  // Button opened
+  // inside container type accordion
+  // ––––––––––––––––––––
+  details[role="list"][open] summary {
+    margin-bottom: 0;
+  }
+
+  // Menu opened
+  // ––––––––––––––––––––
+  // 1. Inside container type accordion
+  details[role="list"][open] summary,
+  // 2. Inside container type nested list
+  nav li:has(:focus, :focus-within) button,
+  nav li:has(:focus, :focus-within) a {
+    + ul {
+      transform: scaleY(1);
+      opacity: 1;
+      @if $enable-transitions {
+        transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+      }
+    }
+  }
+  // Menu opened inside container
+  // type nested list on a touch device
+  // ––––––––––––––––––––
+  @media (any-hover: none) {
+    nav li button,
+    nav li a {
+      &:hover {
+        + ul {
+          transform: scaleY(1);
+          opacity: 1;
+          @if $enable-transitions {
+            transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
           }
         }
-
-        &:focus {
-          box-shadow: none;
-        }
-
-        // Close for details[role="list"]
-        &::before {
-          display: block;
-          z-index: 1;
-          position: fixed;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          background: none;
-          content: "";
-          cursor: default;
-        }
       }
     }
   }
 
-  // All Dropdowns inside <nav>
-  nav details[role="list"] summary,
-  nav li[role="list"] a {
-    display: flex;
-    direction: ltr;
-  }
-
-  nav details[role="list"] summary + ul,
-  nav li[role="list"] > ul {
-    min-width: fit-content;
-    border-radius: var(#{$✨}border-radius);
-
-    li a {
-      border-radius: 0;
-    }
-  }
-
-  // Dropdowns inside <nav> as nested <details>
-  nav details[role="list"] {
-    summary,
-    summary:not([role]) {
-      height: auto;
-      padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
-    }
-
-    &[open] summary {
-      border-radius: var(#{$✨}border-radius);
-    }
-
-    summary + ul {
-      margin-top: var(#{$✨}outline-width);
-      margin-inline-start: 0;
-    }
-
-    summary[role="link"] {
-      margin-bottom: calc(var(#{$✨}nav-link-spacing-vertical) * -1);
-      line-height: var(#{$✨}line-height);
-
-      + ul {
-        margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
-        margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
-      }
-    }
-  }
-
-  // Dropdowns inside a <nav> without using <details>
-  li[role="list"] {
-    // Open on hover (for mobile)
-    // or on active/focus (for keyboard navigation)
-    &:hover > ul,
-    a:active ~ ul,
-    a:focus ~ ul {
-      display: flex;
-    }
-
-    > ul {
-      display: none;
-      margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
-      margin-inline-start: calc(
-        var(#{$✨}nav-element-spacing-horizontal) - var(#{$✨}nav-link-spacing-horizontal)
-      );
-    }
-
-    > a::after {
-      background-image: var(#{$✨}icon-chevron);
+  // Close for dropdown
+  // inside container type accordion
+  // ––––––––––––––––––––
+  details[role="list"][open] summary {
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      inset: 0;
+      background: none;
+      content: "";
+      cursor: default;
     }
   }
 }