feat(dropdowns): Add nested list support

css/pico.classless.css

@@ -2096,15 +2096,17 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
-details[role=list] {
+/**
+ * Dropdown ([role="list"])
+ */
+details[role=list],
+li[role=list] {
   position: relative;
-  padding: 0;
-  border-bottom: none;
 }
-details[role=list] summary {
+details[role=list] summary + ul,
-  margin: 0;
+details[role=list] > ul,
-}
+li[role=list] summary + ul,
-details[role=list] summary + ul {
+li[role=list] > ul {
   display: flex;
   z-index: 99;
   position: absolute;
@@ -2112,9 +2114,6 @@ details[role=list] summary + ul {
   right: 0;
   left: 0;
   flex-direction: column;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
@@ -2126,37 +2125,83 @@ details[role=list] summary + ul {
   color: var(--dropdown-color);
   white-space: nowrap;
 }
-details[role=list] summary + ul li {
+details[role=list] summary + ul li,
+details[role=list] > ul li,
+li[role=list] summary + ul li,
+li[role=list] > ul li {
   width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
 }
-details[role=list] summary + ul li:first-of-type {
+details[role=list] summary + ul li:first-of-type,
+details[role=list] > ul li:first-of-type,
+li[role=list] summary + ul li:first-of-type,
+li[role=list] > ul li:first-of-type {
   margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li:last-of-type {
+details[role=list] summary + ul li:last-of-type,
+details[role=list] > ul li:last-of-type,
+li[role=list] summary + ul li:last-of-type,
+li[role=list] > ul li:last-of-type {
   margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li a {
+details[role=list] summary + ul li a,
+details[role=list] > ul li a,
+li[role=list] summary + ul li a,
+li[role=list] > ul li a {
   display: block;
   margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+  overflow: hidden;
   color: var(--dropdown-color);
   text-decoration: none;
+  text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover {
+details[role=list] summary + ul li a:hover,
+details[role=list] > ul li a:hover,
+li[role=list] summary + ul li a:hover,
+li[role=list] > ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
-details[role=list] summary::after {
+
+details[role=list] summary::after,
+li[role=list] > a::after {
+  display: block;
+  width: 1.5rem;
   height: calc(1rem * var(--line-height));
+  float: right;
   transform: rotate(0deg);
+  background-position: right;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
 }
-details[role=list][disabled] summary, details[role=list].disabled summary {
+
-  border-color: var(--form-element-disabled-border-color);
+details[role=list] {
-  background-color: var(--form-element-disabled-background-color);
+  padding: 0;
-  opacity: var(--form-element-disabled-opacity);
+  border-bottom: none;
-  pointer-events: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+}
+details[role=list] summary:not([role=button]) {
+  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;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
   border-bottom-right-radius: 0;
@@ -2175,55 +2220,38 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+nav [role=list] summary + ul,
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+nav [role=list] > ul {
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  min-width: -webkit-fit-content;
-  border: var(--border-width) solid var(--form-element-border-color);
+  min-width: -moz-fit-content;
-  border-radius: var(--border-radius);
+  min-width: fit-content;
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-
-nav ul li details[role=list] {
-  display: inline-block;
-  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-}
-nav ul li details[role=list] summary:not([role=button]) {
-  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-  border-radius: var(--border-radius);
-  line-height: var(--line-height);
-}
-nav ul li details[role=list] summary:not([role=button]):focus {
-  background-color: var(--primary-focus);
-}
-nav ul li details[role=list] summary:not([role=button]) a {
-  pointer-events: none;
-}
-nav ul li details[role=list] summary:not([role=button]) a:focus {
-  background-color: transparent;
-}
-nav ul li details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav ul li details[role=list][open] summary + ul {
+nav [role=list] summary + ul li a,
-  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+nav [role=list] > ul li a {
-  border-radius: var(--border-radius);
-}
-nav ul li details[role=list][open] summary + ul a {
   border-radius: 0;
 }
-nav ul li details[role=list][open] summary[role=button] + ul {
+
-  margin-top: var(--nav-link-spacing-horizontal);
+nav [role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav [role=list] summary + ul {
+  margin-top: 2px;
+}
+
+li[role=list]:hover > ul,
+li[role=list] a:active ~ ul,
+li[role=list] a:focus ~ ul {
+  display: flex;
+}
+li[role=list] > ul {
+  display: none;
+  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+}
+li[role=list] > a::after {
+  background-image: var(--icon-chevron);
 }
 
 /**

css/pico.css

@@ -2393,15 +2393,17 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
-details[role=list] {
+/**
+ * Dropdown ([role="list"])
+ */
+details[role=list],
+li[role=list] {
   position: relative;
-  padding: 0;
-  border-bottom: none;
 }
-details[role=list] summary {
+details[role=list] summary + ul,
-  margin: 0;
+details[role=list] > ul,
-}
+li[role=list] summary + ul,
-details[role=list] summary + ul {
+li[role=list] > ul {
   display: flex;
   z-index: 99;
   position: absolute;
@@ -2409,9 +2411,6 @@ details[role=list] summary + ul {
   right: 0;
   left: 0;
   flex-direction: column;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
@@ -2423,37 +2422,83 @@ details[role=list] summary + ul {
   color: var(--dropdown-color);
   white-space: nowrap;
 }
-details[role=list] summary + ul li {
+details[role=list] summary + ul li,
+details[role=list] > ul li,
+li[role=list] summary + ul li,
+li[role=list] > ul li {
   width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
 }
-details[role=list] summary + ul li:first-of-type {
+details[role=list] summary + ul li:first-of-type,
+details[role=list] > ul li:first-of-type,
+li[role=list] summary + ul li:first-of-type,
+li[role=list] > ul li:first-of-type {
   margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li:last-of-type {
+details[role=list] summary + ul li:last-of-type,
+details[role=list] > ul li:last-of-type,
+li[role=list] summary + ul li:last-of-type,
+li[role=list] > ul li:last-of-type {
   margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li a {
+details[role=list] summary + ul li a,
+details[role=list] > ul li a,
+li[role=list] summary + ul li a,
+li[role=list] > ul li a {
   display: block;
   margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+  overflow: hidden;
   color: var(--dropdown-color);
   text-decoration: none;
+  text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover {
+details[role=list] summary + ul li a:hover,
+details[role=list] > ul li a:hover,
+li[role=list] summary + ul li a:hover,
+li[role=list] > ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
-details[role=list] summary::after {
+
+details[role=list] summary::after,
+li[role=list] > a::after {
+  display: block;
+  width: 1.5rem;
   height: calc(1rem * var(--line-height));
+  float: right;
   transform: rotate(0deg);
+  background-position: right;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
 }
-details[role=list][disabled] summary, details[role=list].disabled summary {
+
-  border-color: var(--form-element-disabled-border-color);
+details[role=list] {
-  background-color: var(--form-element-disabled-background-color);
+  padding: 0;
-  opacity: var(--form-element-disabled-opacity);
+  border-bottom: none;
-  pointer-events: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+}
+details[role=list] summary:not([role=button]) {
+  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;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
   border-bottom-right-radius: 0;
@@ -2472,55 +2517,38 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+nav [role=list] summary + ul,
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+nav [role=list] > ul {
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  min-width: -webkit-fit-content;
-  border: var(--border-width) solid var(--form-element-border-color);
+  min-width: -moz-fit-content;
-  border-radius: var(--border-radius);
+  min-width: fit-content;
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-
-nav ul li details[role=list] {
-  display: inline-block;
-  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-}
-nav ul li details[role=list] summary:not([role=button]) {
-  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-  border-radius: var(--border-radius);
-  line-height: var(--line-height);
-}
-nav ul li details[role=list] summary:not([role=button]):focus {
-  background-color: var(--primary-focus);
-}
-nav ul li details[role=list] summary:not([role=button]) a {
-  pointer-events: none;
-}
-nav ul li details[role=list] summary:not([role=button]) a:focus {
-  background-color: transparent;
-}
-nav ul li details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav ul li details[role=list][open] summary + ul {
+nav [role=list] summary + ul li a,
-  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+nav [role=list] > ul li a {
-  border-radius: var(--border-radius);
-}
-nav ul li details[role=list][open] summary + ul a {
   border-radius: 0;
 }
-nav ul li details[role=list][open] summary[role=button] + ul {
+
-  margin-top: var(--nav-link-spacing-horizontal);
+nav [role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav [role=list] summary + ul {
+  margin-top: 2px;
+}
+
+li[role=list]:hover > ul,
+li[role=list] a:active ~ ul,
+li[role=list] a:focus ~ ul {
+  display: flex;
+}
+li[role=list] > ul {
+  display: none;
+  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+}
+li[role=list] > a::after {
+  background-image: var(--icon-chevron);
 }
 
 /**

css/pico.fluid.classless.css

@@ -2066,15 +2066,17 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
-details[role=list] {
+/**
+ * Dropdown ([role="list"])
+ */
+details[role=list],
+li[role=list] {
   position: relative;
-  padding: 0;
-  border-bottom: none;
 }
-details[role=list] summary {
+details[role=list] summary + ul,
-  margin: 0;
+details[role=list] > ul,
-}
+li[role=list] summary + ul,
-details[role=list] summary + ul {
+li[role=list] > ul {
   display: flex;
   z-index: 99;
   position: absolute;
@@ -2082,9 +2084,6 @@ details[role=list] summary + ul {
   right: 0;
   left: 0;
   flex-direction: column;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
   margin: 0;
   padding: 0;
   border: var(--border-width) solid var(--dropdown-border-color);
@@ -2096,37 +2095,83 @@ details[role=list] summary + ul {
   color: var(--dropdown-color);
   white-space: nowrap;
 }
-details[role=list] summary + ul li {
+details[role=list] summary + ul li,
+details[role=list] > ul li,
+li[role=list] summary + ul li,
+li[role=list] > ul li {
   width: 100%;
   margin-bottom: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
   list-style: none;
 }
-details[role=list] summary + ul li:first-of-type {
+details[role=list] summary + ul li:first-of-type,
+details[role=list] > ul li:first-of-type,
+li[role=list] summary + ul li:first-of-type,
+li[role=list] > ul li:first-of-type {
   margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li:last-of-type {
+details[role=list] summary + ul li:last-of-type,
+details[role=list] > ul li:last-of-type,
+li[role=list] summary + ul li:last-of-type,
+li[role=list] > ul li:last-of-type {
   margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li a {
+details[role=list] summary + ul li a,
+details[role=list] > ul li a,
+li[role=list] summary + ul li a,
+li[role=list] > ul li a {
   display: block;
   margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+  overflow: hidden;
   color: var(--dropdown-color);
   text-decoration: none;
+  text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover {
+details[role=list] summary + ul li a:hover,
+details[role=list] > ul li a:hover,
+li[role=list] summary + ul li a:hover,
+li[role=list] > ul li a:hover {
   background-color: var(--dropdown-hover-background-color);
 }
-details[role=list] summary::after {
+
+details[role=list] summary::after,
+li[role=list] > a::after {
+  display: block;
+  width: 1.5rem;
   height: calc(1rem * var(--line-height));
+  float: right;
   transform: rotate(0deg);
+  background-position: right;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
 }
-details[role=list][disabled] summary, details[role=list].disabled summary {
+
-  border-color: var(--form-element-disabled-border-color);
+details[role=list] {
-  background-color: var(--form-element-disabled-background-color);
+  padding: 0;
-  opacity: var(--form-element-disabled-opacity);
+  border-bottom: none;
-  pointer-events: none;
+}
+details[role=list] summary {
+  margin-bottom: 0;
+}
+details[role=list] summary:not([role=button]) {
+  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;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
+  border-color: var(--form-element-active-border-color);
+  background-color: var(--form-element-active-background-color);
+}
+details[role=list] summary:not([role=button]):focus {
+  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
   border-bottom-right-radius: 0;
@@ -2145,55 +2190,38 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
+nav [role=list] summary + ul,
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+nav [role=list] > ul {
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  min-width: -webkit-fit-content;
-  border: var(--border-width) solid var(--form-element-border-color);
+  min-width: -moz-fit-content;
-  border-radius: var(--border-radius);
+  min-width: fit-content;
-  background-color: var(--form-element-background-color);
-  color: var(--form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  border-color: var(--form-element-active-border-color);
-  background-color: var(--form-element-active-background-color);
-}
-*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
-  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-}
-
-nav ul li details[role=list] {
-  display: inline-block;
-  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-}
-nav ul li details[role=list] summary:not([role=button]) {
-  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-  border-radius: var(--border-radius);
-  line-height: var(--line-height);
-}
-nav ul li details[role=list] summary:not([role=button]):focus {
-  background-color: var(--primary-focus);
-}
-nav ul li details[role=list] summary:not([role=button]) a {
-  pointer-events: none;
-}
-nav ul li details[role=list] summary:not([role=button]) a:focus {
-  background-color: transparent;
-}
-nav ul li details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav ul li details[role=list][open] summary + ul {
+nav [role=list] summary + ul li a,
-  margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
+nav [role=list] > ul li a {
-  border-radius: var(--border-radius);
-}
-nav ul li details[role=list][open] summary + ul a {
   border-radius: 0;
 }
-nav ul li details[role=list][open] summary[role=button] + ul {
+
-  margin-top: var(--nav-link-spacing-horizontal);
+nav [role=list][open] summary {
+  border-radius: var(--border-radius);
+}
+nav [role=list] summary + ul {
+  margin-top: 2px;
+}
+
+li[role=list]:hover > ul,
+li[role=list] a:active ~ ul,
+li[role=list] a:focus ~ ul {
+  display: flex;
+}
+li[role=list] > ul {
+  display: none;
+  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
+}
+li[role=list] > a::after {
+  background-image: var(--icon-chevron);
 }
 
 /**

docs/src/dropdowns.html

@@ -23,12 +23,12 @@
           <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
           <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
           <article aria-label="Dropdowns as Selects">
-            <details role="list">x
+            <details role="list">
               <summary aria-haspopup="listbox">Dropdown</summary>
               <ul role="listbox">
-                <li><a href="#">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
               </ul>
             </details>
             <select required>
@@ -58,30 +58,30 @@
 
             </footer> 
           </article>
-          <p><code><i>role</i>=<u>"button"</u></code> on the <code>&lt;<b>summary</b>&gt;</code> element can be used to turn the dropdown into a button.</p>
+          <p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
           <article aria-label="Dropdowns as Buttons">
             <details role="list">
               <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
               <ul role="listbox">
-                <li><a href="#">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
               </ul>
             </details>
             <details role="list">
               <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
               <ul role="listbox">
-                <li><a href="#">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
               </ul>
             </details>
             <details role="list">
               <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
               <ul role="listbox">
-                <li><a href="#">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
               </ul>
             </details>
             <footer class="code">
@@ -227,7 +227,7 @@
               
             </footer> 
           </article>
-          <p>Dropdowns can be used inside the <a href="navs.html">&lt;nav&gt;</a> component.</p>
+          <p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
           <article aria-label="Dropdowns inside a nav">
             <nav>
               <ul>
@@ -238,11 +238,11 @@
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li>
                   <details role="list" dir="rtl">
-                    <summary aria-haspopup="listbox">Dropdown</summary>
+                    <summary aria-haspopup="listbox" role="button">Dropdown</summary>
                     <ul role="listbox">
-                      <li><a href="#">Action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                      <li><a href="#">Another action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
                     </ul>
                   </details>
                 </li>
@@ -259,7 +259,7 @@
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
     &lt;<b>li</b>&gt;
       &lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
-        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>rolep</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
         &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
           &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
           &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
@@ -272,7 +272,48 @@
 
             </footer> 
           </article>
-          <p>ℹ️&nbsp;Dropdowns inside a <code>&lt;<b>nav</b>&gt;</code> are still experimental and will probably evolve.</p>
+          <p>You can also use  <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
+          <p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li><strong>Brand</strong></li>
+              </ul>
+              <ul>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li role="list" dir="rtl">
+                  <a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
+                  <ul role="listbox">
+                    <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                    <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                    <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </nav>
+            <footer class="code">
+
+<pre><code>&lt;<b>nav</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</b>&gt;
+      &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+      &lt;/<b>ul</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
         </section>
 
         ${require('./_footer.html')}

scss/components/_dropdown.scss

@@ -1,80 +1,128 @@
-details[role="list"] {
+/**
+ * Dropdown ([role="list"])
+ */
+
+ // Menu
+details[role="list"],
+li[role="list"] {
   position: relative;
-  padding: 0;
-  border-bottom: none;
 
-  summary {
+  summary + ul,
+  > ul {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    top: auto;
+    right: 0;
+    left: 0;
+    flex-direction: column;
     margin: 0;
+    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(--card-box-shadow);
+    color: var(--dropdown-color);
+    white-space: nowrap;
 
-    & + ul {
+    li {
-      display: flex;
+      width: 100%;
-      z-index: 99;
+      margin-bottom: 0;
-      position: absolute;
+      padding: calc(var(--form-element-spacing-vertical) * 0.5)
-      top: auto;
+        var(--form-element-spacing-horizontal);
-      right: 0;
+      list-style: none;
-      left: 0;
-      flex-direction: column;
-      min-width: fit-content;
-      margin: 0;
-      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(--card-box-shadow);
-      color: var(--dropdown-color);
-      white-space: nowrap;
 
-      li {
+      &:first-of-type {
-        width: 100%;
+        margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
-        margin-bottom: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+      }
+
+      a {
+        display: block;
+        margin: calc(var(--form-element-spacing-vertical) * -0.5)
+          calc(var(--form-element-spacing-horizontal) * -1);
         padding: calc(var(--form-element-spacing-vertical) * 0.5)
           var(--form-element-spacing-horizontal);
-        list-style: none;
+        overflow: hidden;
+        color: var(--dropdown-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
 
-        &:first-of-type {
+        &:hover {
-          margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+          background-color: var(--dropdown-hover-background-color);
-        }
-
-        &:last-of-type {
-          margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
-        }
-
-        a {
-          display: block;
-          margin: calc(var(--form-element-spacing-vertical) * -0.5)
-            calc(var(--form-element-spacing-horizontal) * -1);
-          padding: calc(var(--form-element-spacing-vertical) * 0.5)
-            var(--form-element-spacing-horizontal);
-          color: var(--dropdown-color);
-          text-decoration: none;
-
-          &:hover {
-            background-color: var(--dropdown-hover-background-color);
-          }
         }
       }
     }
+  }
+}
 
-    // Marker
+// Marker
-    &::after {
+details[role="list"] summary,
-      height: calc(1rem * var(--line-height));
+li[role="list"] > a {
-      transform: rotate(0deg);
+  &::after {
+    display: block;
+    width: 1.5rem;
+    height: calc(1rem * var(--line-height));
+    float: right;
+    transform: rotate(0deg);
+    background-position: right;
+    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="button"]) {
+      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);
+      }
+
+      &: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);
+      }
     }
   }
 
-  &[disabled] summary,
+  // Close for details[role="list"]
-  &.disabled summary {
-    border-color: var(--form-element-disabled-border-color);
-    background-color: var(--form-element-disabled-background-color);
-    opacity: var(--form-element-disabled-opacity);
-    pointer-events: none;
-  }
-
   &[open] summary {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
+    
     &::before {
       display: block;
       z-index: 1;
@@ -90,87 +138,45 @@ details[role="list"] {
   }
 }
 
-// <summary> as a <select>
+// All Dropdowns inside <nav>
-*:not(nav > ul > li):not(nav > aside > ul > li) {
+nav [role="list"] summary + ul,
-  > details[role="list"] {
+nav [role="list"] > ul {
-    summary {
+  min-width: fit-content;
-      &:not([role="button"]) {
+  border-radius: var(--border-radius);
-        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 {
+  li a {
-          transition: background-color var(--transition),
+    border-radius: 0;
-            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);
-        }
-      }
-    }
   }
 }
 
-// Dropdown inside <nav>
+// Dropdowns inside <nav> as nested <details>
-nav ul li {
+nav [role="list"] {
-  details[role="list"] {
+  &[open] summary {
-    display: inline-block;
+    border-radius: var(--border-radius);
-    margin: calc(var(--nav-link-spacing-vertical) * -1)
+  }
-      calc(var(--nav-link-spacing-horizontal) * -1);
+  summary + ul {
-
+    margin-top: 2px;
-    summary:not([role="button"]) {
+  }
-      padding: var(--nav-link-spacing-vertical)
+}
-        var(--nav-link-spacing-horizontal);
+
-      border-radius: var(--border-radius);
+// Dropdowns inside a <nav> without using <details>
-      line-height: var(--line-height);
+li[role="list"] {
-
+
-      &:focus {
+  // Open on hover (for mobile) 
-        background-color: var(--primary-focus);
+  // or on active/focus (for keyboard navigation)
-      }
+  &:hover > ul,
-
+  a:active ~ ul,
-      a {
+  a:focus ~ ul {
-        pointer-events: none;
+    display: flex;
-
+  }
-        &:focus {
+
-          background-color: transparent;
+  > ul {
-        }
+    display: none;
-      }
+    margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
-    }
+    margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
-
+  }
-    &[open] summary {
+
-      border-radius: var(--border-radius);
+  > a::after {
-
+    background-image: var(--icon-chevron);
-      & + ul {
-        margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
-        border-radius: var(--border-radius);
-
-        a {
-          border-radius: 0;
-        }
-      }
-
-      &[role="button"] {
-        & + ul {
-          margin-top: var(--nav-link-spacing-horizontal);
-        }
-      }
-    }
   }
 }