mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: aria-current links and buttons

Browse source
This commit is contained in:
Lucas Larroche 2023-04-01 10:10:09 +07:00
parent 3644e4ccb5
commit e43ed98d29
13 changed files with 104 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/pico.classless.css
View file

@ -250,6 +250,10 @@ details[role=list] summary:not([role=button]) {
--pico-outline-width: 0.0625rem; --pico-outline-width: 0.0625rem;
} }
nav details[role=list] summary:focus-visible {
--pico-outline-width: 0.1875rem;
}
/** /**
* Color schemes * Color schemes
*/ */
@ -745,8 +749,8 @@ a,
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
} }
a:is([aria-current], :hover, :active, :focus), a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link]:is([aria-current], :hover, :active, :focus) { [role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover); --pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline; --pico-text-decoration: underline;
@ -1007,12 +1011,12 @@ input[type=file]::file-selector-button,
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); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=button]:is([aria-current], :hover, :active, :focus) { [role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-primary-background-hover); --pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-border-hover); --pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -1040,8 +1044,8 @@ input[type=file]::file-selector-button {
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
cursor: pointer; cursor: pointer;
} }
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) { input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-hover);
} }
@ -1968,10 +1972,17 @@ details[role=list] summary:not([role])[aria-invalid=true] {
--pico-form-element-focus-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]) { nav details[role=list] summary:not([role]) {
height: auto; 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); 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 { details[role=list] summary + ul {
display: flex; display: flex;
@ -2020,7 +2031,7 @@ details[role=list] summary + ul li a {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; 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: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]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details[role=list] summary + ul li label { details[role=list] summary + ul li label {
@ -2222,7 +2233,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] a[aria-current] { nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

62
css/pico.css
View file

@ -252,6 +252,10 @@ details[role=list] summary:not([role=button]) {
--pico-outline-width: 0.0625rem; --pico-outline-width: 0.0625rem;
} }
nav details[role=list] summary:focus-visible {
--pico-outline-width: 0.1875rem;
}
/** /**
* Color schemes * Color schemes
*/ */
@ -787,8 +791,8 @@ a,
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
} }
a:is([aria-current], :hover, :active, :focus), a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link]:is([aria-current], :hover, :active, :focus) { [role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover); --pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline; --pico-text-decoration: underline;
@ -802,8 +806,8 @@ a.secondary,
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-underline: var(--pico-secondary-underline); --pico-underline: var(--pico-secondary-underline);
} }
a.secondary:is([aria-current], :hover, :active, :focus), a.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link].secondary:is([aria-current], :hover, :active, :focus) { [role=link].secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-underline-hover); --pico-underline: var(--pico-secondary-underline-hover);
} }
@ -812,8 +816,8 @@ a.contrast,
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
--pico-underline: var(--pico-contrast-underline); --pico-underline: var(--pico-contrast-underline);
} }
a.contrast:is([aria-current], :hover, :active, :focus), a.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link].contrast:is([aria-current], :hover, :active, :focus) { [role=link].contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-underline-hover); --pico-underline: var(--pico-contrast-underline-hover);
} }
@ -1069,12 +1073,12 @@ input[type=file]::file-selector-button,
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); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=button]:is([aria-current], :hover, :active, :focus) { [role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-primary-background-hover); --pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-border-hover); --pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -1103,9 +1107,9 @@ input[type=file]::file-selector-button {
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
cursor: pointer; cursor: pointer;
} }
:is(button, [type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) { input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-secondary-background-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover); --pico-border-color: var(--pico-secondary-border-hover);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
@ -1121,7 +1125,7 @@ input[type=file]::file-selector-button:focus {
--pico-border-color: var(--pico-contrast-border); --pico-border-color: var(--pico-contrast-border);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, [type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) { :is(button, [type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-contrast-background-hover); --pico-background-color: var(--pico-contrast-background-hover);
--pico-border-color: var(--pico-contrast-border-hover); --pico-border-color: var(--pico-contrast-border-hover);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
@ -1136,8 +1140,8 @@ input[type=reset].outline {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-border-color: currentColor; --pico-border-color: currentColor;
} }
:is(button, [type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
} }
@ -1147,15 +1151,15 @@ input[type=reset].outline {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-border-color: currentColor; --pico-border-color: currentColor;
} }
:is(button, [type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
} }
:is(button, [type=submit], input[type=button], [role=button]).outline.contrast { :is(button, [type=submit], input[type=button], [role=button]).outline.contrast {
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
} }
:is(button, [type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) { :is(button, [type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
} }
@ -2077,10 +2081,17 @@ details[role=list] summary:not([role])[aria-invalid=true] {
--pico-form-element-focus-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]) { nav details[role=list] summary:not([role]) {
height: auto; 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); 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 { details[role=list] summary + ul {
display: flex; display: flex;
@ -2129,7 +2140,7 @@ details[role=list] summary + ul li a {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; 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: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]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details[role=list] summary + ul li label { details[role=list] summary + ul li label {
@ -2268,7 +2279,7 @@ dialog article .close {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article .close:is([aria-current], :hover, :active, :focus) { dialog article .close:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
@ -2283,6 +2294,7 @@ dialog:not([open]), dialog[open=false] {
} }
.modal-is-open dialog { .modal-is-open dialog {
pointer-events: auto; pointer-events: auto;
touch-action: auto;
} }
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
@ -2392,7 +2404,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] a[aria-current] { nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

37
css/pico.fluid.classless.css
View file

@ -250,6 +250,10 @@ details[role=list] summary:not([role=button]) {
--pico-outline-width: 0.0625rem; --pico-outline-width: 0.0625rem;
} }
nav details[role=list] summary:focus-visible {
--pico-outline-width: 0.1875rem;
}
/** /**
* Color schemes * Color schemes
*/ */
@ -708,8 +712,8 @@ a,
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
} }
a:is([aria-current], :hover, :active, :focus), a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link]:is([aria-current], :hover, :active, :focus) { [role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover); --pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline; --pico-text-decoration: underline;
@ -970,12 +974,12 @@ input[type=file]::file-selector-button,
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); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=button]:is([aria-current], :hover, :active, :focus) { [role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-primary-background-hover); --pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-border-hover); --pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -1003,8 +1007,8 @@ input[type=file]::file-selector-button {
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
cursor: pointer; cursor: pointer;
} }
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) { input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-secondary-hover); --pico-background-color: var(--pico-secondary-hover);
--pico-border-color: var(--pico-secondary-hover); --pico-border-color: var(--pico-secondary-hover);
} }
@ -1931,10 +1935,17 @@ details[role=list] summary:not([role])[aria-invalid=true] {
--pico-form-element-focus-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]) { nav details[role=list] summary:not([role]) {
height: auto; 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); 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 { details[role=list] summary + ul {
display: flex; display: flex;
@ -1983,7 +1994,7 @@ details[role=list] summary + ul li a {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; 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: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]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details[role=list] summary + ul li label { details[role=list] summary + ul li label {
@ -2185,7 +2196,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] a[aria-current] { nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

3
scss/components/_modal.scss
View file

@ -93,7 +93,7 @@
transition: opacity var(#{$✨}transition); transition: opacity var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
opacity: 1; opacity: 1;
} }
} }
@ -117,6 +117,7 @@
dialog { dialog {
pointer-events: auto; pointer-events: auto;
touch-action: auto;
} }
} }
} }

2
scss/components/_nav.scss
View file

@ -96,7 +96,7 @@
} }
// Minimal support for aria-current // Minimal support for aria-current
& a[aria-current] { & a[aria-current]:not([aria-current="false"]) {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

14
scss/content/_button.scss
View file

@ -62,7 +62,7 @@
color var(#{$✨}transition), box-shadow var(#{$✨}transition); color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}background-color: var(#{$✨}primary-background-hover); #{$✨}background-color: var(#{$✨}primary-background-hover);
#{$✨}border-color: var(#{$✨}primary-border-hover); #{$✨}border-color: var(#{$✨}primary-border-hover);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -92,7 +92,7 @@
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}background-color: var(#{$✨}secondary-background-hover); #{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover); #{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
@ -110,7 +110,7 @@
#{$✨}border-color: var(#{$✨}contrast-border); #{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}background-color: var(#{$✨}contrast-background-hover); #{$✨}background-color: var(#{$✨}contrast-background-hover);
#{$✨}border-color: var(#{$✨}contrast-border-hover); #{$✨}border-color: var(#{$✨}contrast-border-hover);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
@ -129,7 +129,7 @@
#{$✨}color: var(#{$✨}primary); #{$✨}color: var(#{$✨}primary);
#{$✨}border-color: currentColor; #{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary-hover); #{$✨}color: var(#{$✨}primary-hover);
} }
@ -141,7 +141,7 @@
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor; #{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);
} }
} }
@ -150,7 +150,7 @@
:is(button, [type="submit"], input[type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], input[type="button"], [role="button"]).outline.contrast {
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}color: var(#{$✨}contrast-hover); #{$✨}color: var(#{$✨}contrast-hover);
} }
} }
@ -163,7 +163,7 @@
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}background-color: var(#{$✨}secondary-hover); #{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover); #{$✨}border-color: var(#{$✨}secondary-hover);
} }

6
scss/content/_link.scss
View file

@ -23,7 +23,7 @@
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition); text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}color: var(#{$✨}primary-hover); #{$✨}color: var(#{$✨}primary-hover);
#{$✨}underline: var(#{$✨}primary-underline-hover); #{$✨}underline: var(#{$✨}primary-underline-hover);
#{$✨}text-decoration: underline; #{$✨}text-decoration: underline;
@ -39,7 +39,7 @@
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}underline: var(#{$✨}secondary-underline); #{$✨}underline: var(#{$✨}secondary-underline);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover); #{$✨}underline: var(#{$✨}secondary-underline-hover);
} }
@ -50,7 +50,7 @@
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
#{$✨}underline: var(#{$✨}contrast-underline); #{$✨}underline: var(#{$✨}contrast-underline);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) {
#{$✨}color: var(#{$✨}contrast-hover); #{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover); #{$✨}underline: var(#{$✨}contrast-underline-hover);
} }