refactor: dropdown

css/pico.classless.css

@@ -250,14 +250,6 @@ input:not([type=submit],
   --pico-border-width: 0.1875rem;
 }
 
-details[role=list] summary:not([role=button]) {
-  --pico-outline-width: 0.0625rem;
-}
-
-nav details[role=list] summary:focus-visible {
-  --pico-outline-width: 0.1875rem;
-}
-
 [role=search] {
   --pico-border-radius: 5rem;
 }
@@ -373,11 +365,6 @@ nav details[role=list] summary:focus-visible {
   --pico-card-border-color: var(--pico-muted-border-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
   --pico-card-sectioning-background-color: #fbfcfc;
-  --pico-dropdown-background-color: #fff;
-  --pico-dropdown-border-color: #eff1f4;
-  --pico-dropdown-box-shadow: var(--pico-box-shadow);
-  --pico-dropdown-color: var(--pico-color);
-  --pico-dropdown-hover-background-color: #eff1f4;
   --pico-loading-spinner-opacity: 0.5;
   --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
   --pico-progress-background-color: #dfe3eb;
@@ -494,11 +481,6 @@ nav details[role=list] summary:focus-visible {
     --pico-card-border-color: var(--pico-card-background-color);
     --pico-card-box-shadow: var(--pico-box-shadow);
     --pico-card-sectioning-background-color: #1a1f28;
-    --pico-dropdown-background-color: #181c25;
-    --pico-dropdown-border-color: #202632;
-    --pico-dropdown-box-shadow: var(--pico-box-shadow);
-    --pico-dropdown-color: var(--pico-color);
-    --pico-dropdown-hover-background-color: #202632;
     --pico-loading-spinner-opacity: 0.5;
     --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
     --pico-progress-background-color: #202632;
@@ -608,11 +590,6 @@ nav details[role=list] summary:focus-visible {
   --pico-card-border-color: var(--pico-card-background-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
   --pico-card-sectioning-background-color: #1a1f28;
-  --pico-dropdown-background-color: #181c25;
-  --pico-dropdown-border-color: #202632;
-  --pico-dropdown-box-shadow: var(--pico-box-shadow);
-  --pico-dropdown-color: var(--pico-color);
-  --pico-dropdown-hover-background-color: #202632;
   --pico-loading-spinner-opacity: 0.5;
   --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
   --pico-progress-background-color: #202632;
@@ -1921,160 +1898,6 @@ article > footer {
   border-bottom-left-radius: var(--pico-border-radius);
 }
 
-/**
- * Dropdown ([role="list"])
- */
-details[role=list] {
-  position: relative;
-  border-bottom: none;
-}
-details[role=list] summary::after,
-details[role=list] > button::after,
-details[role=list] > a::after {
-  display: block;
-  width: 1rem;
-  height: calc(1rem * var(--pico-line-height, 1.5));
-  -webkit-margin-start: 0.25rem;
-  margin-inline-start: 0.25rem;
-  float: right;
-  transform: rotate(0deg) translateX(0.2rem);
-  background-image: var(--pico-icon-chevron);
-  background-position: right center;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-  content: "";
-}
-
-nav details[role=list] {
-  margin-bottom: 0;
-}
-
-details[role=list] summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
-  border-radius: var(--pico-border-radius);
-  background-color: var(--pico-form-element-background-color);
-  color: var(--pico-form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
-}
-details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
-  border-color: var(--pico-form-element-active-border-color);
-  background-color: var(--pico-form-element-active-background-color);
-}
-details[role=list] summary:not([role]):focus {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
-}
-details[role=list] summary:not([role]):focus-visible {
-  outline: none;
-}
-details[role=list] summary:not([role])[aria-invalid=false] {
-  --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
-  --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
-  --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
-}
-details[role=list] summary:not([role])[aria-invalid=true] {
-  --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
-  --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
-  --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
-}
-
-nav details[role=list] {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details[role=list] summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details[role=list] summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
-details[role=list] summary + ul {
-  display: flex;
-  z-index: 99;
-  position: absolute;
-  left: 0;
-  flex-direction: column;
-  width: 100%;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  margin: 0;
-  margin-top: var(--pico-outline-width);
-  padding: 0;
-  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
-  border-radius: var(--pico-border-radius);
-  background-color: var(--pico-dropdown-background-color);
-  box-shadow: var(--pico-dropdown-box-shadow);
-  color: var(--pico-dropdown-color);
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
-}
-details[role=list] summary + ul[dir=rtl] {
-  right: 0;
-  left: auto;
-}
-details[role=list] summary + ul li {
-  width: 100%;
-  margin-bottom: 0;
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
-  list-style: none;
-}
-details[role=list] summary + ul li:first-of-type {
-  margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details[role=list] summary + ul li:last-of-type {
-  margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details[role=list] summary + ul li a {
-  display: block;
-  margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
-  overflow: hidden;
-  border-radius: 0;
-  color: var(--pico-dropdown-color);
-  text-decoration: none;
-  text-overflow: ellipsis;
-}
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
-  background-color: var(--pico-dropdown-hover-background-color);
-}
-details[role=list] summary + ul li label {
-  width: 100%;
-}
-details[role=list] summary + ul li:has(label):hover {
-  background-color: var(--pico-dropdown-hover-background-color);
-}
-
-details[role=list][open] summary {
-  margin-bottom: 0;
-}
-
-details[role=list][open] summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
-details[role=list][open] summary::before {
-  display: block;
-  z-index: 1;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  inset: 0;
-  background: none;
-  content: "";
-  cursor: default;
-}
-
 /**
  * Group ([role="group"], [role="search"])
  */

css/pico.css

@@ -252,11 +252,11 @@ input:not([type=submit],
   --pico-border-width: 0.1875rem;
 }
 
-details[role=list] summary:not([role=button]) {
+details.dropdown summary:not([role=button]) {
   --pico-outline-width: 0.0625rem;
 }
 
-nav details[role=list] summary:focus-visible {
+nav details.dropdown summary:focus-visible {
   --pico-outline-width: 0.1875rem;
 }
 
@@ -2051,15 +2051,15 @@ article > footer {
 }
 
 /**
- * Dropdown ([role="list"])
+ * Dropdown (details.dropdown)
  */
-details[role=list] {
+details.dropdown {
   position: relative;
   border-bottom: none;
 }
-details[role=list] summary::after,
+details.dropdown summary::after,
-details[role=list] > button::after,
+details.dropdown > button::after,
-details[role=list] > a::after {
+details.dropdown > a::after {
   display: block;
   width: 1rem;
   height: calc(1rem * var(--pico-line-height, 1.5));
@@ -2074,11 +2074,11 @@ details[role=list] > a::after {
   content: "";
 }
 
-nav details[role=list] {
+nav details.dropdown {
   margin-bottom: 0;
 }
 
-details[role=list] summary:not([role]) {
+details.dropdown summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
   border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@@ -2092,40 +2092,40 @@ details[role=list] summary:not([role]) {
   user-select: none;
   transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
 }
-details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
+details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
   border-color: var(--pico-form-element-active-border-color);
   background-color: var(--pico-form-element-active-background-color);
 }
-details[role=list] summary:not([role]):focus {
+details.dropdown summary:not([role]):focus {
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
 }
-details[role=list] summary:not([role]):focus-visible {
+details.dropdown summary:not([role]):focus-visible {
   outline: none;
 }
-details[role=list] summary:not([role])[aria-invalid=false] {
+details.dropdown summary:not([role])[aria-invalid=false] {
   --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
   --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
 }
-details[role=list] summary:not([role])[aria-invalid=true] {
+details.dropdown summary:not([role])[aria-invalid=true] {
   --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
 
-nav details[role=list] {
+nav details.dropdown {
   display: inline;
   margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
 }
-nav details[role=list] summary:not([role]) {
+nav details.dropdown summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
   padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
 }
-nav details[role=list] summary:not([role]):focus-visible {
+nav details.dropdown summary:not([role]):focus-visible {
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
 
-details[role=list] summary + ul {
+details.dropdown summary + ul {
   display: flex;
   z-index: 99;
   position: absolute;
@@ -2146,23 +2146,23 @@ details[role=list] summary + ul {
   opacity: 0;
   transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
 }
-details[role=list] summary + ul[dir=rtl] {
+details.dropdown summary + ul[dir=rtl] {
   right: 0;
   left: auto;
 }
-details[role=list] summary + ul li {
+details.dropdown summary + ul li {
   width: 100%;
   margin-bottom: 0;
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
   list-style: none;
 }
-details[role=list] summary + ul li:first-of-type {
+details.dropdown summary + ul li:first-of-type {
   margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li:last-of-type {
+details.dropdown summary + ul li:last-of-type {
   margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
 }
-details[role=list] summary + ul li a {
+details.dropdown summary + ul li a {
   display: block;
   margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@@ -2172,27 +2172,27 @@ details[role=list] summary + ul li a {
   text-decoration: none;
   text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
+details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current] {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-details[role=list] summary + ul li label {
+details.dropdown summary + ul li label {
   width: 100%;
 }
-details[role=list] summary + ul li:has(label):hover {
+details.dropdown summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
 
-details[role=list][open] summary {
+details.dropdown[open] summary {
   margin-bottom: 0;
 }
 
-details[role=list][open] summary + ul {
+details.dropdown[open] summary + ul {
   transform: scaleY(1);
   opacity: 1;
   transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
 }
 
-details[role=list][open] summary::before {
+details.dropdown[open] summary::before {
   display: block;
   z-index: 1;
   position: fixed;

css/pico.fluid.classless.css

@@ -250,14 +250,6 @@ input:not([type=submit],
   --pico-border-width: 0.1875rem;
 }
 
-details[role=list] summary:not([role=button]) {
-  --pico-outline-width: 0.0625rem;
-}
-
-nav details[role=list] summary:focus-visible {
-  --pico-outline-width: 0.1875rem;
-}
-
 [role=search] {
   --pico-border-radius: 5rem;
 }
@@ -373,11 +365,6 @@ nav details[role=list] summary:focus-visible {
   --pico-card-border-color: var(--pico-muted-border-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
   --pico-card-sectioning-background-color: #fbfcfc;
-  --pico-dropdown-background-color: #fff;
-  --pico-dropdown-border-color: #eff1f4;
-  --pico-dropdown-box-shadow: var(--pico-box-shadow);
-  --pico-dropdown-color: var(--pico-color);
-  --pico-dropdown-hover-background-color: #eff1f4;
   --pico-loading-spinner-opacity: 0.5;
   --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
   --pico-progress-background-color: #dfe3eb;
@@ -494,11 +481,6 @@ nav details[role=list] summary:focus-visible {
     --pico-card-border-color: var(--pico-card-background-color);
     --pico-card-box-shadow: var(--pico-box-shadow);
     --pico-card-sectioning-background-color: #1a1f28;
-    --pico-dropdown-background-color: #181c25;
-    --pico-dropdown-border-color: #202632;
-    --pico-dropdown-box-shadow: var(--pico-box-shadow);
-    --pico-dropdown-color: var(--pico-color);
-    --pico-dropdown-hover-background-color: #202632;
     --pico-loading-spinner-opacity: 0.5;
     --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
     --pico-progress-background-color: #202632;
@@ -608,11 +590,6 @@ nav details[role=list] summary:focus-visible {
   --pico-card-border-color: var(--pico-card-background-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
   --pico-card-sectioning-background-color: #1a1f28;
-  --pico-dropdown-background-color: #181c25;
-  --pico-dropdown-border-color: #202632;
-  --pico-dropdown-box-shadow: var(--pico-box-shadow);
-  --pico-dropdown-color: var(--pico-color);
-  --pico-dropdown-hover-background-color: #202632;
   --pico-loading-spinner-opacity: 0.5;
   --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
   --pico-progress-background-color: #202632;
@@ -1884,160 +1861,6 @@ article > footer {
   border-bottom-left-radius: var(--pico-border-radius);
 }
 
-/**
- * Dropdown ([role="list"])
- */
-details[role=list] {
-  position: relative;
-  border-bottom: none;
-}
-details[role=list] summary::after,
-details[role=list] > button::after,
-details[role=list] > a::after {
-  display: block;
-  width: 1rem;
-  height: calc(1rem * var(--pico-line-height, 1.5));
-  -webkit-margin-start: 0.25rem;
-  margin-inline-start: 0.25rem;
-  float: right;
-  transform: rotate(0deg) translateX(0.2rem);
-  background-image: var(--pico-icon-chevron);
-  background-position: right center;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-  content: "";
-}
-
-nav details[role=list] {
-  margin-bottom: 0;
-}
-
-details[role=list] summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
-  border-radius: var(--pico-border-radius);
-  background-color: var(--pico-form-element-background-color);
-  color: var(--pico-form-element-placeholder-color);
-  line-height: inherit;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
-}
-details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
-  border-color: var(--pico-form-element-active-border-color);
-  background-color: var(--pico-form-element-active-background-color);
-}
-details[role=list] summary:not([role]):focus {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
-}
-details[role=list] summary:not([role]):focus-visible {
-  outline: none;
-}
-details[role=list] summary:not([role])[aria-invalid=false] {
-  --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
-  --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
-  --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
-}
-details[role=list] summary:not([role])[aria-invalid=true] {
-  --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
-  --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
-  --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
-}
-
-nav details[role=list] {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details[role=list] summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details[role=list] summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
-details[role=list] summary + ul {
-  display: flex;
-  z-index: 99;
-  position: absolute;
-  left: 0;
-  flex-direction: column;
-  width: 100%;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  margin: 0;
-  margin-top: var(--pico-outline-width);
-  padding: 0;
-  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
-  border-radius: var(--pico-border-radius);
-  background-color: var(--pico-dropdown-background-color);
-  box-shadow: var(--pico-dropdown-box-shadow);
-  color: var(--pico-dropdown-color);
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
-}
-details[role=list] summary + ul[dir=rtl] {
-  right: 0;
-  left: auto;
-}
-details[role=list] summary + ul li {
-  width: 100%;
-  margin-bottom: 0;
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
-  list-style: none;
-}
-details[role=list] summary + ul li:first-of-type {
-  margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details[role=list] summary + ul li:last-of-type {
-  margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details[role=list] summary + ul li a {
-  display: block;
-  margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
-  overflow: hidden;
-  border-radius: 0;
-  color: var(--pico-dropdown-color);
-  text-decoration: none;
-  text-overflow: ellipsis;
-}
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
-  background-color: var(--pico-dropdown-hover-background-color);
-}
-details[role=list] summary + ul li label {
-  width: 100%;
-}
-details[role=list] summary + ul li:has(label):hover {
-  background-color: var(--pico-dropdown-hover-background-color);
-}
-
-details[role=list][open] summary {
-  margin-bottom: 0;
-}
-
-details[role=list][open] summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
-details[role=list][open] summary::before {
-  display: block;
-  z-index: 1;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  inset: 0;
-  background: none;
-  content: "";
-  cursor: default;
-}
-
 /**
  * Group ([role="group"], [role="search"])
  */

scss/_index.scss

@@ -18,7 +18,7 @@
 @use "content/link"; // a, role="link"
 @use "content/typography"; // headings, p, ul, blockquote, ...
 @use "content/embedded"; // audio, canvas, iframe, img, svg, video
-@use "content/button"; // button, [role="button"], type="button", type="submit" ...
+@use "content/button"; // button, role="button", type="button", type="submit" ...
 @use "content/table"; // table, tr, td, ...
 @use "content/code"; // pre, code, ...
 @use "content/miscs"; // hr, template, [hidden], dialog, canvas
@@ -35,8 +35,8 @@
 // Components
 @use "components/accordion"; // details, summary
 @use "components/card"; // article
-@use "components/dropdown"; // details[role="list"]
+@use "components/dropdown"; // details.dropdown
-@use "components/group"; // details[role="list"]
+@use "components/group"; // role="group"
 @use "components/loading"; // aria-busy=true
 @use "components/modal"; // dialog
 @use "components/nav"; // nav

scss/components/_dropdown.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "../settings" as *;
 
-@if map.get($modules, "components/dropdown") {
+@if map.get($modules, "components/dropdown") and $enable-classes {
   /**
-   * Dropdown ([role="list"])
+   * Dropdown (details.dropdown)
    */
 
   // Container
   // ––––––––––––––––––––
-  details[role="list"] {
+  details.dropdown {
     position: relative;
     border-bottom: none;
 
@@ -38,7 +38,7 @@
   // Container type accordion
   // inside a nav
   // ––––––––––––––––––––
-  nav details[role="list"] {
+  nav details.dropdown {
     // Override height
     margin-bottom: 0;
   }
@@ -46,7 +46,7 @@
   // Bouton as a select
   // inside container type accordion
   // ––––––––––––––––––––
-  details[role="list"] summary:not([role]) {
+  details.dropdown summary:not([role]) {
     height: calc(
       1rem *
         var(#{$✨}line-height) +
@@ -100,7 +100,7 @@
 
   // Dropdown inside a nav
   // ––––––––––––––––––––
-  nav details[role="list"] {
+  nav details.dropdown {
     display: inline;
     margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0;
 
@@ -118,7 +118,7 @@
 
   // Submenu
   // ––––––––––––––––––––
-  details[role="list"] summary + ul {
+  details.dropdown summary + ul {
     display: flex;
     z-index: 99;
     position: absolute;
@@ -196,14 +196,14 @@
   // Button opened
   // inside container type accordion
   // ––––––––––––––––––––
-  details[role="list"][open] summary {
+  details.dropdown[open] summary {
     margin-bottom: 0;
   }
 
   // Menu opened
   // ––––––––––––––––––––
   // 1. Inside container type accordion
-  details[role="list"][open] summary {
+  details.dropdown[open] summary {
     + ul {
       transform: scaleY(1);
       opacity: 1;
@@ -217,7 +217,7 @@
   // Close for dropdown
   // inside container type accordion
   // ––––––––––––––––––––
-  details[role="list"][open] summary {
+  details.dropdown[open] summary {
     &::before {
       display: block;
       z-index: 1;

scss/themes/default/_dark.scss

@@ -167,8 +167,8 @@
     #{$✨}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
   }
 
-  // Dropdown (<details role="list">)
+  // Dropdown (details.dropdown)
-  @if map.get($modules, "components/dropdown") {
+  @if map.get($modules, "components/dropdown") and $enable-classes {
     #{$✨}dropdown-background-color: #{$slate-900};
     #{$✨}dropdown-border-color: #{$slate-850};
     #{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);

scss/themes/default/_light.scss

@@ -167,8 +167,8 @@
     #{$✨}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
   }
 
-  // Dropdown (<details role="list">)
+  // Dropdown (details.dropdown)
-  @if map.get($modules, "components/dropdown") {
+  @if map.get($modules, "components/dropdown") and $enable-classes {
     #{$✨}dropdown-background-color: #{$white};
     #{$✨}dropdown-border-color: #{$slate-50};
     #{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);

scss/themes/default/_styles.scss

@@ -358,15 +358,15 @@
     }
   }
 
-  // Dropdown (<details role="list">)
+  // Dropdown (details.dropdown)
-  @if map.get($modules, "components/dropdown") {
+  @if map.get($modules, "components/dropdown") and $enable-classes {
-    details[role="list"] {
+    details.dropdown {
       summary:not([role="button"]) {
         #{$✨}outline-width: 0.0625rem;
       }
     }
     nav {
-      details[role="list"] {
+      details.dropdown {
         summary:focus-visible {
           #{$✨}outline-width: 0.1875rem;
         }