style(dropdowns)

css/pico.classless.css

@@ -662,7 +662,8 @@ ul {
   font-size: var(--font-size);
 }
 
-a {
+a,
+[role=link] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -674,11 +675,16 @@ a {
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
 }
-a[aria-current], a:hover, a:active, a:focus {
+a[aria-current], a:hover, a:active, a:focus,
+[role=link][aria-current],
+[role=link]:hover,
+[role=link]:active,
+[role=link]:focus {
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus {
+a:focus,
+[role=link]:focus {
   --background-color: var(--primary-focus);
 }
 
@@ -1817,7 +1823,7 @@ details summary {
   cursor: pointer;
   transition: color var(--transition);
 }
-details summary:not([role=button]) {
+details summary:not([role]) {
   color: var(--accordion-close-summary-color);
 }
 details summary::-webkit-details-marker {
@@ -1859,7 +1865,7 @@ details summary[role=button]::after {
 details[open] > summary {
   margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not([role=button]):not(:focus) {
+details[open] > summary:not([role]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
@@ -2000,14 +2006,19 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav a {
+nav a,
+nav [role=link] {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
+nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
+nav [role=link][aria-current],
+nav [role=link]:hover,
+nav [role=link]:active,
+nav [role=link]:focus {
   text-decoration: none;
 }
 
@@ -2185,7 +2196,7 @@ details[role=list] {
 details[role=list] summary {
   margin-bottom: 0;
 }
-details[role=list] summary:not([role=button]) {
+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);
@@ -2196,11 +2207,11 @@ details[role=list] summary:not([role=button]) {
   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 {
+details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):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 {
+details[role=list] summary:not([role]):focus {
   box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
@@ -2220,7 +2231,8 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary, nav [role=list] a {
+nav [role=list] summary,
+nav [role=list] a {
   display: flex;
   direction: ltr;
 }
@@ -2236,11 +2248,25 @@ nav [role=list] > ul li a {
   border-radius: 0;
 }
 
+nav [role=list] summary,
+nav [role=list] summary:not([role]) {
+  height: auto;
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+}
 nav [role=list][open] summary {
   border-radius: var(--border-radius);
 }
 nav [role=list] summary + ul {
-  margin-top: 2px;
+  margin-top: var(--outline-width);
+}
+nav [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 {
+  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);
 }
 
 li[role=list]:hover > ul,
@@ -2250,7 +2276,7 @@ li[role=list] a:focus ~ ul {
 }
 li[role=list] > ul {
   display: none;
-  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -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));
 }

css/pico.css

@@ -692,7 +692,8 @@ ul {
   font-size: var(--font-size);
 }
 
-a {
+a,
+[role=link] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -704,29 +705,46 @@ a {
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
 }
-a[aria-current], a:hover, a:active, a:focus {
+a[aria-current], a:hover, a:active, a:focus,
+[role=link][aria-current],
+[role=link]:hover,
+[role=link]:active,
+[role=link]:focus {
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus {
+a:focus,
+[role=link]:focus {
   --background-color: var(--primary-focus);
 }
-a.secondary {
+a.secondary,
+[role=link].secondary {
   --color: var(--secondary);
 }
-a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
+a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
+[role=link].secondary[aria-current],
+[role=link].secondary:hover,
+[role=link].secondary:active,
+[role=link].secondary:focus {
   --color: var(--secondary-hover);
 }
-a.secondary:focus {
+a.secondary:focus,
+[role=link].secondary:focus {
   --background-color: var(--secondary-focus);
 }
-a.contrast {
+a.contrast,
+[role=link].contrast {
   --color: var(--contrast);
 }
-a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
+a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
+[role=link].contrast[aria-current],
+[role=link].contrast:hover,
+[role=link].contrast:active,
+[role=link].contrast:focus {
   --color: var(--contrast-hover);
 }
-a.contrast:focus {
+a.contrast:focus,
+[role=link].contrast:focus {
   --background-color: var(--contrast-focus);
 }
 
@@ -2015,7 +2033,7 @@ details summary {
   cursor: pointer;
   transition: color var(--transition);
 }
-details summary:not([role=button]) {
+details summary:not([role]) {
   color: var(--accordion-close-summary-color);
 }
 details summary::-webkit-details-marker {
@@ -2060,7 +2078,7 @@ details summary[role=button]:not(.outline).contrast::after {
 details[open] > summary {
   margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not([role=button]):not(:focus) {
+details[open] > summary:not([role]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
@@ -2297,14 +2315,19 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav a {
+nav a,
+nav [role=link] {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
+nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
+nav [role=link][aria-current],
+nav [role=link]:hover,
+nav [role=link]:active,
+nav [role=link]:focus {
   text-decoration: none;
 }
 
@@ -2482,7 +2505,7 @@ details[role=list] {
 details[role=list] summary {
   margin-bottom: 0;
 }
-details[role=list] summary:not([role=button]) {
+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);
@@ -2493,11 +2516,11 @@ details[role=list] summary:not([role=button]) {
   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 {
+details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):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 {
+details[role=list] summary:not([role]):focus {
   box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
@@ -2517,7 +2540,8 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary, nav [role=list] a {
+nav [role=list] summary,
+nav [role=list] a {
   display: flex;
   direction: ltr;
 }
@@ -2533,11 +2557,25 @@ nav [role=list] > ul li a {
   border-radius: 0;
 }
 
+nav [role=list] summary,
+nav [role=list] summary:not([role]) {
+  height: auto;
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+}
 nav [role=list][open] summary {
   border-radius: var(--border-radius);
 }
 nav [role=list] summary + ul {
-  margin-top: 2px;
+  margin-top: var(--outline-width);
+}
+nav [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 {
+  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);
 }
 
 li[role=list]:hover > ul,
@@ -2547,7 +2585,7 @@ li[role=list] a:focus ~ ul {
 }
 li[role=list] > ul {
   display: none;
-  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -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));
 }

css/pico.fluid.classless.css

@@ -632,7 +632,8 @@ ul {
   font-size: var(--font-size);
 }
 
-a {
+a,
+[role=link] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -644,11 +645,16 @@ a {
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
 }
-a[aria-current], a:hover, a:active, a:focus {
+a[aria-current], a:hover, a:active, a:focus,
+[role=link][aria-current],
+[role=link]:hover,
+[role=link]:active,
+[role=link]:focus {
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus {
+a:focus,
+[role=link]:focus {
   --background-color: var(--primary-focus);
 }
 
@@ -1787,7 +1793,7 @@ details summary {
   cursor: pointer;
   transition: color var(--transition);
 }
-details summary:not([role=button]) {
+details summary:not([role]) {
   color: var(--accordion-close-summary-color);
 }
 details summary::-webkit-details-marker {
@@ -1829,7 +1835,7 @@ details summary[role=button]::after {
 details[open] > summary {
   margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not([role=button]):not(:focus) {
+details[open] > summary:not([role]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
@@ -1970,14 +1976,19 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav a {
+nav a,
+nav [role=link] {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
+nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
+nav [role=link][aria-current],
+nav [role=link]:hover,
+nav [role=link]:active,
+nav [role=link]:focus {
   text-decoration: none;
 }
 
@@ -2155,7 +2166,7 @@ details[role=list] {
 details[role=list] summary {
   margin-bottom: 0;
 }
-details[role=list] summary:not([role=button]) {
+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);
@@ -2166,11 +2177,11 @@ details[role=list] summary:not([role=button]) {
   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 {
+details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):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 {
+details[role=list] summary:not([role]):focus {
   box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
 }
 details[role=list][open] summary {
@@ -2190,7 +2201,8 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
-nav [role=list] summary, nav [role=list] a {
+nav [role=list] summary,
+nav [role=list] a {
   display: flex;
   direction: ltr;
 }
@@ -2206,11 +2218,25 @@ nav [role=list] > ul li a {
   border-radius: 0;
 }
 
+nav [role=list] summary,
+nav [role=list] summary:not([role]) {
+  height: auto;
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+}
 nav [role=list][open] summary {
   border-radius: var(--border-radius);
 }
 nav [role=list] summary + ul {
-  margin-top: 2px;
+  margin-top: var(--outline-width);
+}
+nav [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 {
+  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);
 }
 
 li[role=list]:hover > ul,
@@ -2220,7 +2246,7 @@ li[role=list] a:focus ~ ul {
 }
 li[role=list] > ul {
   display: none;
-  margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
   -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));
 }

css/pico.slim.css

@@ -624,7 +624,8 @@ ul {
   font-size: var(--font-size);
 }
 
-a {
+a,
+[role=link] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -633,29 +634,46 @@ a {
   -webkit-text-decoration: var(--text-decoration);
   text-decoration: var(--text-decoration);
 }
-a[aria-current], a:hover, a:active, a:focus {
+a[aria-current], a:hover, a:active, a:focus,
+[role=link][aria-current],
+[role=link]:hover,
+[role=link]:active,
+[role=link]:focus {
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus {
+a:focus,
+[role=link]:focus {
   --background-color: var(--primary-focus);
 }
-a.secondary {
+a.secondary,
+[role=link].secondary {
   --color: var(--secondary);
 }
-a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
+a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
+[role=link].secondary[aria-current],
+[role=link].secondary:hover,
+[role=link].secondary:active,
+[role=link].secondary:focus {
   --color: var(--secondary-hover);
 }
-a.secondary:focus {
+a.secondary:focus,
+[role=link].secondary:focus {
   --background-color: var(--secondary-focus);
 }
-a.contrast {
+a.contrast,
+[role=link].contrast {
   --color: var(--contrast);
 }
-a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
+a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
+[role=link].contrast[aria-current],
+[role=link].contrast:hover,
+[role=link].contrast:active,
+[role=link].contrast:focus {
   --color: var(--contrast-hover);
 }
-a.contrast:focus {
+a.contrast:focus,
+[role=link].contrast:focus {
   --background-color: var(--contrast-focus);
 }
 

docs/dropdowns.html

@@ -98,15 +98,37 @@
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
               
-            </code></pre></footer></article><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><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><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="button">Dropdown</summary><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></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
+            </code></pre></footer></article><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><p>Example with a dropdown as a link:</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><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="link">Dropdown</summary><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></details></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>&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> <i>role</i>=<u>"link"</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;
+          &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>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre></footer></article><p>Example with a default dropdown and a dropdown as a button:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><details role="list"><summary aria-haspopup="listbox">Dropdown</summary><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></details></li><li><details role="list"><summary aria-haspopup="listbox" role="button">Dropdown</summary><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></details></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>details</b> <i>role</i>=<u>"list"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</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;
+          &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>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
         &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</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;

docs/src/dropdowns.html

@@ -228,17 +228,17 @@
             </footer> 
           </article>
           <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>
+          <p>Example with a dropdown as a link:</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>
                   <details role="list" dir="rtl">
-                    <summary aria-haspopup="listbox" role="button">Dropdown</summary>
+                    <summary aria-haspopup="listbox" role="link">Dropdown</summary>
                     <ul role="listbox">
                       <li><a href="#" onclick="event.preventDefault()">Action</a></li>
                       <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
@@ -255,10 +255,64 @@
     &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>&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> <i>role</i>=<u>"link"</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;
+          &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>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
+          <p>Example with a default dropdown and a dropdown as a button:</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li>
+                  <details role="list">
+                    <summary aria-haspopup="listbox">Dropdown</summary>
+                    <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>
+                  </details>
+                </li>
+                <li>
+                  <details role="list">
+                    <summary aria-haspopup="listbox" role="button">Dropdown</summary>
+                    <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>
+                  </details>
+                </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>details</b> <i>role</i>=<u>"list"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</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;
+          &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>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
         &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</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;

scss/components/_accordion.scss

@@ -9,12 +9,11 @@ details {
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 
   summary {
-    
     line-height: 1rem;
     list-style-type: none;
     cursor: pointer;
 
-    &:not([role="button"]) {
+    &:not([role]) {
       color: var(--accordion-close-summary-color);
     }
 
@@ -65,7 +64,7 @@ details {
     &[role="button"] {
       width: 100%;
       text-align: left;
-      
+
       // Marker
       &::after {
         height: calc(1rem * var(--line-height));
@@ -73,10 +72,8 @@ details {
       }
 
       @if $enable-classes {
-        
         // .contrast
         &:not(.outline).contrast {
-          
           // Marker
           &::after {
             background-image: var(--icon-chevron-button-inverse);
@@ -91,7 +88,7 @@ details {
     > summary {
       margin-bottom: calc(var(--spacing));
 
-      &:not([role="button"]) {
+      &:not([role]) {
         &:not(:focus) {
           color: var(--accordion-open-summary-color);
         }
@@ -99,7 +96,7 @@ details {
 
       &::after {
         transform: rotate(0);
-      } 
+      }
     }
   }
 }

scss/components/_dropdown.scss

@@ -2,7 +2,7 @@
  * Dropdown ([role="list"])
  */
 
- // Menu
+// Menu
 details[role="list"],
 li[role="list"] {
   position: relative;
@@ -86,7 +86,7 @@ details[role="list"] {
   summary {
     margin-bottom: 0;
 
-    &:not([role="button"]) {
+    &:not([role]) {
       height: calc(
         1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
           var(--border-width) * 2
@@ -122,7 +122,7 @@ details[role="list"] {
   &[open] summary {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
-    
+
     &::before {
       display: block;
       z-index: 1;
@@ -140,11 +140,12 @@ details[role="list"] {
 
 // All Dropdowns inside <nav>
 nav [role="list"] {
-  summary, a {
+  summary,
+  a {
     display: flex;
     direction: ltr;
   }
-  
+
   summary + ul,
   > ul {
     min-width: fit-content;
@@ -158,18 +159,34 @@ nav [role="list"] {
 
 // Dropdowns inside <nav> as nested <details>
 nav [role="list"] {
+  summary,
+  summary:not([role]) {
+    height: auto;
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  }
+
   &[open] summary {
     border-radius: var(--border-radius);
   }
+  
   summary + ul {
-    margin-top: 2px;
+    margin-top: var(--outline-width);
+  }
+  
+  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)
-  // Open on hover (for mobile) 
   // or on active/focus (for keyboard navigation)
   &:hover > ul,
   a:active ~ ul,
@@ -179,8 +196,10 @@ li[role="list"] {
 
   > ul {
     display: none;
-    margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
+    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));
+    margin-inline-start: calc(
+      var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
+    );
   }
 
   > a::after {

scss/components/_nav.scss

@@ -29,17 +29,20 @@ nav {
   li {
     display: inline-block;
     margin: 0;
-    padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
+    padding: var(--nav-element-spacing-vertical)
-    
+      var(--nav-element-spacing-horizontal);
+
     // Minimal support for buttons and forms elements
     > * {
       --spacing: 0;
     }
   }
 
-  a {
+  a,
+  [role="link"] {
     display: inline-block;
-    margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
+    margin: calc(var(--nav-link-spacing-vertical) * -1)
+      calc(var(--nav-link-spacing-horizontal) * -1);
     padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
     border-radius: var(--border-radius);
     text-decoration: none;
@@ -63,12 +66,13 @@ aside {
   }
 
   li {
-    padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
+    padding: calc(var(--nav-element-spacing-vertical) * 0.5)
+      var(--nav-element-spacing-horizontal);
 
     a {
       display: block;
     }
-    
+
     // Minimal support for links as buttons
     [role="button"] {
       margin: inherit;

scss/content/_typography.scss

@@ -68,7 +68,8 @@ ul {
 
 // Links
 // 1. Remove the gray background on active links in IE 10
-a {
+a,
+[role="link"] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;