chore(dropdown): Optimize selectors

css/pico.classless.css

@@ -1981,9 +1981,8 @@ details[role=list],
 li[role=list] {
   position: relative;
 }
+
 details[role=list] summary + ul,
-details[role=list] > ul,
-li[role=list] summary + ul,
 li[role=list] > ul {
   display: flex;
   z-index: 99;
@@ -2004,8 +2003,6 @@ li[role=list] > ul {
   white-space: nowrap;
 }
 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;
@@ -2013,20 +2010,14 @@ li[role=list] > ul li {
   list-style: none;
 }
 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] > 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] > 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);
@@ -2037,8 +2028,6 @@ li[role=list] > ul li a {
   text-overflow: ellipsis;
 }
 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);
 }
@@ -2098,39 +2087,42 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] a {
+nav li[role=list] a {
   display: flex;
   direction: ltr;
 }
-nav [role=list] summary + ul,
+
-nav [role=list] > ul {
+nav details[role=list] summary + ul,
+nav li[role=list] > ul {
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul li a,
+nav details[role=list] summary + ul li a,
-nav [role=list] > ul li a {
+nav li[role=list] > ul li a {
   border-radius: 0;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] summary:not([role]) {
+nav details[role=list] summary:not([role]) {
   height: auto;
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
 }
-nav [role=list][open] summary {
+nav details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul {
+nav details[role=list] summary + ul {
   margin-top: var(--outline-width);
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
 }
-nav [role=list] summary[role=link] {
+nav details[role=list] summary[role=link] {
   margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
   line-height: var(--line-height);
 }
-nav [role=list] summary[role=link] + ul {
+nav details[role=list] summary[role=link] + ul {
   margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
   margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

css/pico.css

@@ -2224,9 +2224,8 @@ details[role=list],
 li[role=list] {
   position: relative;
 }
+
 details[role=list] summary + ul,
-details[role=list] > ul,
-li[role=list] summary + ul,
 li[role=list] > ul {
   display: flex;
   z-index: 99;
@@ -2247,8 +2246,6 @@ li[role=list] > ul {
   white-space: nowrap;
 }
 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;
@@ -2256,20 +2253,14 @@ li[role=list] > ul li {
   list-style: none;
 }
 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] > 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] > 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);
@@ -2280,8 +2271,6 @@ li[role=list] > ul li a {
   text-overflow: ellipsis;
 }
 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);
 }
@@ -2341,39 +2330,42 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] a {
+nav li[role=list] a {
   display: flex;
   direction: ltr;
 }
-nav [role=list] summary + ul,
+
-nav [role=list] > ul {
+nav details[role=list] summary + ul,
+nav li[role=list] > ul {
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul li a,
+nav details[role=list] summary + ul li a,
-nav [role=list] > ul li a {
+nav li[role=list] > ul li a {
   border-radius: 0;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] summary:not([role]) {
+nav details[role=list] summary:not([role]) {
   height: auto;
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
 }
-nav [role=list][open] summary {
+nav details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul {
+nav details[role=list] summary + ul {
   margin-top: var(--outline-width);
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
 }
-nav [role=list] summary[role=link] {
+nav details[role=list] summary[role=link] {
   margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
   line-height: var(--line-height);
 }
-nav [role=list] summary[role=link] + ul {
+nav details[role=list] summary[role=link] + ul {
   margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
   margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

css/pico.fluid.classless.css

@@ -1951,9 +1951,8 @@ details[role=list],
 li[role=list] {
   position: relative;
 }
+
 details[role=list] summary + ul,
-details[role=list] > ul,
-li[role=list] summary + ul,
 li[role=list] > ul {
   display: flex;
   z-index: 99;
@@ -1974,8 +1973,6 @@ li[role=list] > ul {
   white-space: nowrap;
 }
 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;
@@ -1983,20 +1980,14 @@ li[role=list] > ul li {
   list-style: none;
 }
 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] > 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] > 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);
@@ -2007,8 +1998,6 @@ li[role=list] > ul li a {
   text-overflow: ellipsis;
 }
 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);
 }
@@ -2068,39 +2057,42 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] a {
+nav li[role=list] a {
   display: flex;
   direction: ltr;
 }
-nav [role=list] summary + ul,
+
-nav [role=list] > ul {
+nav details[role=list] summary + ul,
+nav li[role=list] > ul {
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul li a,
+nav details[role=list] summary + ul li a,
-nav [role=list] > ul li a {
+nav li[role=list] > ul li a {
   border-radius: 0;
 }
 
-nav [role=list] summary,
+nav details[role=list] summary,
-nav [role=list] summary:not([role]) {
+nav details[role=list] summary:not([role]) {
   height: auto;
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
 }
-nav [role=list][open] summary {
+nav details[role=list][open] summary {
   border-radius: var(--border-radius);
 }
-nav [role=list] summary + ul {
+nav details[role=list] summary + ul {
   margin-top: var(--outline-width);
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
 }
-nav [role=list] summary[role=link] {
+nav details[role=list] summary[role=link] {
   margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
   line-height: var(--line-height);
 }
-nav [role=list] summary[role=link] + ul {
+nav details[role=list] summary[role=link] + ul {
   margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
   margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

scss/components/_dropdown.scss

@@ -6,9 +6,10 @@
 details[role="list"],
 li[role="list"] {
   position: relative;
+}
 
-  summary + ul,
+details[role="list"] summary + ul,
-  > ul {
+li[role="list"] > ul {
   display: flex;
   z-index: 99;
   position: absolute;
@@ -58,7 +59,6 @@ li[role="list"] {
       }
     }
   }
-  }
 }
 
 // Marker
@@ -139,26 +139,24 @@ details[role="list"] {
 }
 
 // All Dropdowns inside <nav>
-nav [role="list"] {
+nav details[role="list"] summary,
-  summary,
+nav li[role="list"] a {
-  a {
   display: flex;
   direction: ltr;
-  }
+}
 
-  summary + ul,
+nav details[role="list"] summary + ul,
-  > 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 [role="list"] {
+nav details[role="list"] {
   summary,
   summary:not([role]) {
     height: auto;
@@ -171,6 +169,7 @@ nav [role="list"] {
 
   summary + ul {
     margin-top: var(--outline-width);
+    margin-inline-start: 0;
   }
 
   summary[role="link"] {