@navikt/ds-css 5.18.2 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/button.css +2 -0
- package/copybutton.css +1 -1
- package/dist/component/button.css +1 -0
- package/dist/component/button.min.css +1 -1
- package/dist/component/copybutton.css +1 -1
- package/dist/component/copybutton.min.css +1 -1
- package/dist/component/dropdown.css +1 -0
- package/dist/component/dropdown.min.css +1 -1
- package/dist/component/form.css +45 -50
- package/dist/component/form.min.css +1 -1
- package/dist/component/helptext.css +5 -0
- package/dist/component/helptext.min.css +1 -1
- package/dist/component/index.css +136 -269
- package/dist/component/index.min.css +13 -5
- package/dist/component/link.css +1 -0
- package/dist/component/link.min.css +1 -1
- package/dist/component/linkpanel.css +2 -2
- package/dist/component/linkpanel.min.css +1 -1
- package/dist/component/primitives.css +75 -0
- package/dist/component/primitives.min.css +10 -2
- package/dist/component/readmore.css +1 -0
- package/dist/component/readmore.min.css +1 -1
- package/dist/component/stepper.css +5 -2
- package/dist/component/stepper.min.css +1 -1
- package/dist/component/tabs.css +1 -1
- package/dist/component/tabs.min.css +1 -1
- package/dist/components.css +141 -295
- package/dist/components.min.css +12 -4
- package/dist/global/tokens.css +6 -2
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +136 -269
- package/dist/index.min.css +13 -5
- package/dropdown.css +1 -0
- package/form/combobox.css +1 -10
- package/form/confirmation-panel.css +4 -0
- package/form/error-summary.css +8 -2
- package/form/radio-checkbox.css +18 -18
- package/form/search.css +7 -7
- package/form/select.css +2 -1
- package/form/text-field.css +2 -1
- package/form/textarea.css +6 -14
- package/help-text.css +5 -0
- package/index.css +0 -2
- package/link-panel.css +2 -2
- package/link.css +1 -0
- package/package.json +2 -2
- package/primitives/bleed.css +16 -0
- package/primitives/box.css +13 -0
- package/primitives/hgrid.css +21 -0
- package/primitives/responsive.css +12 -0
- package/primitives/stack.css +13 -0
- package/read-more.css +1 -0
- package/stepper.css +5 -2
- package/tabs.css +1 -1
- package/tokens.json +21 -11
- package/content-container.css +0 -17
- package/dist/component/contentcontainer.css +0 -17
- package/dist/component/contentcontainer.min.css +0 -1
- package/dist/component/grid.css +0 -217
- package/dist/component/grid.min.css +0 -1
- package/grid.css +0 -217
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 6.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
|
8
|
+
|
|
9
|
+
- Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1). ([#2623](https://github.com/navikt/aksel/pull/2623))
|
|
10
|
+
|
|
11
|
+
- CSS: Oppdatert bruk av action-farger i systemet. Dette påvirker komponentene: Button, CopyButton, Dropdown, Combobox, ConfirmationPanel, Radio, Checkbox, Search, Select, TextField, Textarea, Helptext, LinkPanel, Link, ReadMore, Stepper og Tabs. Endringen skal ikke brekke noe så lenge man ikke har overskrevet farger manuelt. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
|
12
|
+
|
|
13
|
+
- Tokens: Nye tokens `--a-text-action-hover`,`--a-icon-action-hover` og `--a-border-action-hover` ([#2623](https://github.com/navikt/aksel/pull/2623))
|
|
14
|
+
|
|
15
|
+
- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
|
|
16
|
+
|
|
17
|
+
## 5.18.3
|
|
18
|
+
|
|
3
19
|
## 5.18.2
|
|
4
20
|
|
|
5
21
|
## 5.18.1
|
package/button.css
CHANGED
|
@@ -130,6 +130,7 @@
|
|
|
130
130
|
background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
|
|
131
131
|
color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
|
|
132
132
|
}
|
|
133
|
+
|
|
133
134
|
@media (forced-colors: active) {
|
|
134
135
|
.navds-button.navds-button--primary {
|
|
135
136
|
background-color: highlight;
|
|
@@ -227,6 +228,7 @@
|
|
|
227
228
|
--ac-button-secondary-hover-bg,
|
|
228
229
|
var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
|
|
229
230
|
);
|
|
231
|
+
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
.navds-button--secondary:focus-visible {
|
package/copybutton.css
CHANGED
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
.navds-copybutton--action:hover {
|
|
148
|
-
color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
|
|
148
|
+
color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
|
|
149
149
|
background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
|
|
150
150
|
}
|
|
151
151
|
|
|
@@ -229,6 +229,7 @@
|
|
|
229
229
|
--ac-button-secondary-hover-bg,
|
|
230
230
|
var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
|
|
231
231
|
);
|
|
232
|
+
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
|
|
232
233
|
}
|
|
233
234
|
|
|
234
235
|
.navds-button--secondary:focus-visible {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
[data-theme=dark]{--__ac-button-primary-text:var(--a-gray-900);--__ac-button-primary-bg:var(--a-blue-200);--__ac-button-primary-focus-border:var(--a-gray-900);--__ac-button-primary-hover-bg:var(--a-blue-300);--__ac-button-primary-active-bg:var(--a-blue-400);--__ac-button-secondary-text:var(--a-white);--__ac-button-secondary-hover-text:var(--a-white);--__ac-button-secondary-active-text:var(--a-white);--__ac-button-secondary-active-focus-border:var(--a-gray-900);--__ac-button-secondary-bg:var(--a-gray-900);--__ac-button-secondary-border:var(--a-blue-200);--__ac-button-secondary-hover-bg:var(--a-gray-800);--__ac-button-secondary-focus-border:var(--a-blue-200);--__ac-button-secondary-active-bg:var(--a-gray-700)}[data-theme=light]{--__ac-button-primary-text:initial;--__ac-button-primary-bg:initial;--__ac-button-primary-focus-border:initial;--__ac-button-primary-hover-bg:initial;--__ac-button-primary-active-bg:initial;--__ac-button-secondary-text:initial;--__ac-button-secondary-hover-text:initial;--__ac-button-secondary-active-text:initial;--__ac-button-secondary-active-focus-border:initial;--__ac-button-secondary-bg:initial;--__ac-button-secondary-border:initial;--__ac-button-secondary-hover-bg:initial;--__ac-button-secondary-focus-border:initial;--__ac-button-secondary-active-bg:initial}.navds-button{--__ac-button-padding:var(--a-spacing-3) var(--a-spacing-5);align-items:center;background:none;border:none;border-radius:var(--ac-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:inline-flex;gap:var(--a-spacing-2);justify-content:center;margin:0;padding:var(--ac-button-padding,var(--__ac-button-padding));text-decoration:none}.navds-button--small{--__ac-button-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem;padding:var(--ac-button-padding-small,var(--__ac-button-padding))}.navds-button--xsmall{--__ac-button-padding:var(--a-spacing-05) var(--a-spacing-2);gap:var(--a-spacing-1);padding:var(--ac-button-padding-xsmall,var(--__ac-button-padding))}.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-3);padding:var(--ac-button-padding-icon-only,var(--__ac-button-padding))}.navds-button--small.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-1);padding:var(--ac-button-padding-icon-only-small,var(--__ac-button-padding))}.navds-button--xsmall.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-05);padding:var(--ac-button-padding-icon-only-xsmall,var(--__ac-button-padding))}.navds-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:2px solid transparent;outline-offset:2px}@supports not selector(:focus-visible){.navds-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-button__icon{--ac-button-icon-margin:-4px;display:flex;font-size:1.5rem}.navds-button__icon:first-child{margin-left:var(--ac-button-icon-margin)}.navds-button__icon:last-child{margin-right:var(--ac-button-icon-margin)}.navds-button__icon:only-child{margin:0}.navds-button--small .navds-button__icon{--ac-button-icon-margin:-2px}.navds-button--xsmall .navds-button__icon{--ac-button-icon-margin:-2px;font-size:1.25rem}.navds-button--primary{background-color:var(--ac-button-primary-bg,var(--__ac-button-primary-bg,var(--a-surface-action)));color:var(--ac-button-primary-text,var(--__ac-button-primary-text,var(--a-text-on-action)))}@media (forced-colors:active){.navds-button.navds-button--primary{background-color:highlight;color:highlighttext}.navds-button.navds-button--primary span{forced-color-adjust:none}}.navds-button--primary:hover{background-color:var(--ac-button-primary-hover-bg,var(--__ac-button-primary-hover-bg,var(--a-surface-action-hover)))}.navds-button--primary:active{background-color:var(--ac-button-primary-active-bg,var(--__ac-button-primary-active-bg,var(--a-surface-action-active)))}.navds-button--primary:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus);outline:2px solid transparent;outline-offset:2px}@media (forced-colors:active){.navds-button--primary:focus-visible{box-shadow:none}}@supports not selector(:focus-visible){.navds-button--primary:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--primary:active:where(:disabled,.navds-button--disabled),.navds-button--primary:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-bg,var(--a-surface-action))}.navds-button--primary-neutral{background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral));color:var(--ac-button-primary-neutral-text,var(--a-text-on-neutral))}.navds-button--primary-neutral:hover{background-color:var(--ac-button-primary-neutral-hover-bg,var(--a-surface-neutral-hover))}.navds-button--primary-neutral:active{background-color:var(--ac-button-primary-neutral-active-bg,var(--a-surface-neutral-active))}.navds-button--primary-neutral:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--primary-neutral:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--primary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--primary-neutral:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral))}.navds-button--secondary{background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary:hover{background-color:var(
|
|
2
2
|
--ac-button-secondary-hover-bg,var(--__ac-button-secondary-hover-bg,var(--a-surface-action-subtle-hover))
|
|
3
|
-
);color:var(--ac-button-secondary-hover-text,var(--__ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle)))}.navds-button--secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--__ac-button-secondary-active-bg,var(--a-surface-action-active)));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--__ac-button-secondary-active-text,var(--a-text-on-action)))}.navds-button--secondary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,hsla(0,0%,100%,.3))}@media (forced-colors:active){.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){color:GrayText;opacity:1}.navds-button{background-color:ButtonFace;border:1px solid transparent;color:ButtonText}.navds-button:hover{background-color:highlighttext;border-color:highlight;box-shadow:none;color:highlight}.navds-button:hover span{forced-color-adjust:none}.navds-button .navds-loader .navds-loader__foreground{stroke:canvas}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:canvastext}}
|
|
3
|
+
);box-shadow:inset 0 0 0 2px var(--ac-button-secondary-hover-border,var(--a-border-action-hover));color:var(--ac-button-secondary-hover-text,var(--__ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle)))}.navds-button--secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--__ac-button-secondary-active-bg,var(--a-surface-action-active)));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--__ac-button-secondary-active-text,var(--a-text-on-action)))}.navds-button--secondary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,hsla(0,0%,100%,.3))}@media (forced-colors:active){.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){color:GrayText;opacity:1}.navds-button{background-color:ButtonFace;border:1px solid transparent;color:ButtonText}.navds-button:hover{background-color:highlighttext;border-color:highlight;box-shadow:none;color:highlight}.navds-button:hover span{forced-color-adjust:none}.navds-button .navds-loader .navds-loader__foreground{stroke:canvas}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:canvastext}}
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
.navds-copybutton--action:hover {
|
|
149
|
-
color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
|
|
149
|
+
color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
|
|
150
150
|
background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
|
|
151
151
|
}
|
|
152
152
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}@media (forced-colors:active){.navds-copybutton{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-copybutton.navds-copybutton:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5)}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3)}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2)}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1)}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,var(--a-icon-success)))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--small>.navds-copybutton__content{gap:var(--a-spacing-1-alt)}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.navds-copybutton--active>.navds-copybutton__content{animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-copybutton:where(:disabled){border-color:GrayText;opacity:1}}
|
|
1
|
+
[data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}@media (forced-colors:active){.navds-copybutton{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-copybutton.navds-copybutton:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5)}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3)}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2)}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1)}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-text,var(--a-text-action-hover)))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,var(--a-icon-success)))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--small>.navds-copybutton__content{gap:var(--a-spacing-1-alt)}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.navds-copybutton--active>.navds-copybutton__content{animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-copybutton:where(:disabled){border-color:GrayText;opacity:1}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-dropdown__menu{color:var(--ac-dropdown-text,var(--a-text-default));max-height:616px;overflow:hidden;overflow-y:auto;padding:var(--a-spacing-2) 0;width:27ch}.navds-dropdown__divider{border:none;border-bottom:1px solid var(--a-border-divider);margin:var(--a-spacing-3) 0}.navds-dropdown__menu>:not(.navds-dropdown__divider):not(.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{list-style:none;margin:0;padding:0}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{align-items:center;background:transparent;border:none;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:pointer;display:flex;font:inherit;gap:var(--a-spacing-2);margin:0;overflow:visible;padding:var(--a-spacing-1) var(--a-spacing-4);text-align:left;text-decoration:none;width:100%}.navds-dropdown__item:hover{background-color:var(--ac-dropdown-item-hover-bg,var(--a-surface-action-subtle-hover))}.navds-dropdown__item:active{background-color:var(--ac-dropdown-item-active-bg,var(--a-surface-action-active));color:var(--ac-dropdown-item-active-text,var(--a-text-on-action))}.navds-dropdown__item:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}@supports not selector(:focus-visible){.navds-dropdown__item:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}}.navds-dropdown__item:disabled{background:transparent;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-dropdown__item:hover{color:highlight}.navds-dropdown__item:disabled{color:graytext;opacity:1}}
|
|
1
|
+
.navds-dropdown__menu{color:var(--ac-dropdown-text,var(--a-text-default));max-height:616px;overflow:hidden;overflow-y:auto;padding:var(--a-spacing-2) 0;width:27ch}.navds-dropdown__divider{border:none;border-bottom:1px solid var(--a-border-divider);margin:var(--a-spacing-3) 0}.navds-dropdown__menu>:not(.navds-dropdown__divider):not(.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{list-style:none;margin:0;padding:0}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{align-items:center;background:transparent;border:none;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:pointer;display:flex;font:inherit;gap:var(--a-spacing-2);margin:0;overflow:visible;padding:var(--a-spacing-1) var(--a-spacing-4);text-align:left;text-decoration:none;width:100%}.navds-dropdown__item:hover{background-color:var(--ac-dropdown-item-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-dropdown-item-hover-text,var(--a-text-action-hover))}.navds-dropdown__item:active{background-color:var(--ac-dropdown-item-active-bg,var(--a-surface-action-active));color:var(--ac-dropdown-item-active-text,var(--a-text-on-action))}.navds-dropdown__item:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}@supports not selector(:focus-visible){.navds-dropdown__item:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}}.navds-dropdown__item:disabled{background:transparent;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-dropdown__item:hover{color:highlight}.navds-dropdown__item:disabled{color:graytext;opacity:1}}
|
package/dist/component/form.css
CHANGED
|
@@ -133,10 +133,15 @@
|
|
|
133
133
|
.navds-error-summary--small {
|
|
134
134
|
padding: var(--a-spacing-3);
|
|
135
135
|
}
|
|
136
|
-
.navds-error-
|
|
137
|
-
box-shadow: var(--a-shadow-focus);
|
|
136
|
+
.navds-error-summary__heading:focus {
|
|
138
137
|
outline: none;
|
|
139
138
|
}
|
|
139
|
+
.navds-error-summary:focus-visible,
|
|
140
|
+
.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
|
|
141
|
+
box-shadow:
|
|
142
|
+
0 0 0 1px var(--a-border-on-inverted),
|
|
143
|
+
0 0 0 4px var(--a-border-focus);
|
|
144
|
+
}
|
|
140
145
|
@supports not selector(:focus-visible) {
|
|
141
146
|
.navds-error-summary:focus {
|
|
142
147
|
box-shadow: var(--a-shadow-focus);
|
|
@@ -182,6 +187,9 @@
|
|
|
182
187
|
border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
|
|
183
188
|
background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
|
|
184
189
|
}
|
|
190
|
+
.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
|
|
191
|
+
color: var(--a-text-default);
|
|
192
|
+
}
|
|
185
193
|
@media (forced-colors: active) {
|
|
186
194
|
.navds-confirmation-panel__inner::before {
|
|
187
195
|
content: "";
|
|
@@ -289,21 +297,17 @@
|
|
|
289
297
|
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
|
|
290
298
|
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
|
|
291
299
|
box-shadow:
|
|
292
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
300
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
|
|
293
301
|
0 0 0 4px var(--a-border-focus);
|
|
294
302
|
}
|
|
295
303
|
@supports not selector(:focus-visible) {
|
|
296
304
|
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
|
297
305
|
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
|
298
306
|
box-shadow:
|
|
299
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
307
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
|
|
300
308
|
0 0 0 4px var(--a-border-focus);
|
|
301
309
|
}
|
|
302
310
|
}
|
|
303
|
-
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
|
304
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
305
|
-
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
306
|
-
}
|
|
307
311
|
.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
|
|
308
312
|
content: "";
|
|
309
313
|
position: absolute;
|
|
@@ -318,9 +322,13 @@
|
|
|
318
322
|
.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
|
|
319
323
|
transform: translate(0.25rem, -50%);
|
|
320
324
|
}
|
|
321
|
-
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
|
322
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
323
|
-
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
325
|
+
.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
|
|
326
|
+
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
|
|
327
|
+
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
|
|
328
|
+
}
|
|
329
|
+
.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
|
|
330
|
+
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
|
|
331
|
+
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
|
|
324
332
|
}
|
|
325
333
|
.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
|
|
326
334
|
display: none;
|
|
@@ -350,7 +358,7 @@
|
|
|
350
358
|
.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
|
|
351
359
|
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
|
|
352
360
|
box-shadow:
|
|
353
|
-
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
361
|
+
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
354
362
|
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
355
363
|
0 0 0 4px var(--a-border-focus);
|
|
356
364
|
}
|
|
@@ -358,20 +366,20 @@
|
|
|
358
366
|
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
|
359
367
|
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
|
360
368
|
box-shadow:
|
|
361
|
-
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
369
|
+
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
362
370
|
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
363
371
|
0 0 0 4px var(--a-border-focus);
|
|
364
372
|
}
|
|
365
373
|
}
|
|
366
374
|
.navds-radio__input:checked + .navds-radio__label::before {
|
|
367
375
|
box-shadow:
|
|
368
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
376
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
369
377
|
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
|
|
370
|
-
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
378
|
+
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
|
|
371
379
|
}
|
|
372
380
|
.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
|
|
373
381
|
box-shadow:
|
|
374
|
-
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
382
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
|
|
375
383
|
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
376
384
|
0 0 0 4px var(--a-border-focus);
|
|
377
385
|
}
|
|
@@ -385,17 +393,17 @@
|
|
|
385
393
|
}
|
|
386
394
|
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
|
387
395
|
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
|
388
|
-
color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
396
|
+
color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
389
397
|
}
|
|
390
398
|
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
|
|
391
399
|
+ .navds-checkbox__label::before,
|
|
392
400
|
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
|
393
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
401
|
+
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
394
402
|
}
|
|
395
403
|
@supports not selector(:focus-visible) {
|
|
396
404
|
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
|
397
405
|
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
|
398
|
-
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
406
|
+
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
399
407
|
}
|
|
400
408
|
}
|
|
401
409
|
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
|
|
@@ -624,11 +632,12 @@
|
|
|
624
632
|
}
|
|
625
633
|
}
|
|
626
634
|
.navds-select__input:hover {
|
|
627
|
-
border-color: var(--ac-select-hover-
|
|
635
|
+
border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
|
|
628
636
|
cursor: pointer;
|
|
629
637
|
}
|
|
630
638
|
.navds-select__input:focus-visible {
|
|
631
639
|
outline: none;
|
|
640
|
+
border-color: var(--ac-select-active-border, var(--a-border-action-selected));
|
|
632
641
|
box-shadow: var(--a-shadow-focus);
|
|
633
642
|
}
|
|
634
643
|
@supports not selector(:focus-visible) {
|
|
@@ -944,12 +953,13 @@
|
|
|
944
953
|
min-height: 2rem;
|
|
945
954
|
}
|
|
946
955
|
.navds-text-field__input:hover {
|
|
947
|
-
border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
|
|
956
|
+
border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
|
|
948
957
|
}
|
|
949
958
|
.navds-text-field__input:focus-visible {
|
|
950
959
|
outline: 2px solid transparent;
|
|
951
960
|
outline-offset: 2px;
|
|
952
961
|
box-shadow: var(--a-shadow-focus);
|
|
962
|
+
border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
|
|
953
963
|
}
|
|
954
964
|
@supports not selector(:focus-visible) {
|
|
955
965
|
.navds-text-field__input:focus {
|
|
@@ -1003,16 +1013,9 @@
|
|
|
1003
1013
|
color: fieldtext;
|
|
1004
1014
|
}
|
|
1005
1015
|
}
|
|
1006
|
-
.navds-textarea__wrapper {
|
|
1007
|
-
--__ac-textarea-height: initial;
|
|
1008
|
-
|
|
1009
|
-
position: relative;
|
|
1010
|
-
min-width: 100%;
|
|
1011
|
-
}
|
|
1012
|
-
.navds-textarea__input:first-child {
|
|
1013
|
-
height: var(--__ac-textarea-height);
|
|
1014
|
-
}
|
|
1015
1016
|
.navds-textarea__input {
|
|
1017
|
+
/* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
|
|
1018
|
+
height: var(--__ac-textarea-height);
|
|
1016
1019
|
appearance: none;
|
|
1017
1020
|
padding: var(--a-spacing-2);
|
|
1018
1021
|
background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
|
|
@@ -1027,12 +1030,13 @@
|
|
|
1027
1030
|
color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
|
|
1028
1031
|
}
|
|
1029
1032
|
.navds-textarea__input:hover {
|
|
1030
|
-
border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
|
|
1033
|
+
border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
|
|
1031
1034
|
}
|
|
1032
1035
|
.navds-textarea__input:focus-visible {
|
|
1033
1036
|
outline: 2px solid transparent;
|
|
1034
1037
|
outline-offset: 2px;
|
|
1035
1038
|
box-shadow: var(--a-shadow-focus);
|
|
1039
|
+
border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
|
|
1036
1040
|
}
|
|
1037
1041
|
@supports not selector(:focus-visible) {
|
|
1038
1042
|
.navds-textarea__input:focus {
|
|
@@ -1045,7 +1049,7 @@
|
|
|
1045
1049
|
padding: var(--a-spacing-1-alt);
|
|
1046
1050
|
}
|
|
1047
1051
|
.navds-textarea__counter {
|
|
1048
|
-
margin-top:
|
|
1052
|
+
margin-top: -0.375rem;
|
|
1049
1053
|
color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
|
|
1050
1054
|
}
|
|
1051
1055
|
.navds-textarea__counter--error {
|
|
@@ -1054,7 +1058,7 @@
|
|
|
1054
1058
|
.navds-textarea__sr-counter {
|
|
1055
1059
|
display: none;
|
|
1056
1060
|
}
|
|
1057
|
-
.navds-
|
|
1061
|
+
.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
|
|
1058
1062
|
display: initial;
|
|
1059
1063
|
}
|
|
1060
1064
|
.navds-textarea--resize-both .navds-textarea__input {
|
|
@@ -1180,7 +1184,7 @@
|
|
|
1180
1184
|
width: 24px;
|
|
1181
1185
|
}
|
|
1182
1186
|
.navds-search__button-clear:hover {
|
|
1183
|
-
color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
|
|
1187
|
+
color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
|
|
1184
1188
|
}
|
|
1185
1189
|
.navds-search__button-clear:focus-visible {
|
|
1186
1190
|
outline: 2px solid transparent;
|
|
@@ -1212,12 +1216,12 @@
|
|
|
1212
1216
|
0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
|
1213
1217
|
0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
|
|
1214
1218
|
}
|
|
1215
|
-
.navds-search__button-search.navds-button--secondary:hover {
|
|
1219
|
+
.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
|
|
1216
1220
|
box-shadow:
|
|
1217
|
-
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
1218
|
-
0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
1219
|
-
0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
1220
|
-
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
|
|
1221
|
+
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
|
|
1222
|
+
0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
|
|
1223
|
+
0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
|
|
1224
|
+
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
|
|
1221
1225
|
z-index: 1;
|
|
1222
1226
|
}
|
|
1223
1227
|
.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
|
|
@@ -1230,7 +1234,7 @@
|
|
|
1230
1234
|
}
|
|
1231
1235
|
.navds-search__button-search.navds-button--secondary:focus-visible:hover {
|
|
1232
1236
|
box-shadow:
|
|
1233
|
-
0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
1237
|
+
0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
|
|
1234
1238
|
var(--a-shadow-focus);
|
|
1235
1239
|
}
|
|
1236
1240
|
.navds-search__button-search.navds-button--secondary:focus-visible:active {
|
|
@@ -1373,9 +1377,6 @@
|
|
|
1373
1377
|
box-shadow: none;
|
|
1374
1378
|
}
|
|
1375
1379
|
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
|
|
1376
|
-
box-shadow:
|
|
1377
|
-
0 0 0 1px var(--a-surface-default) inset,
|
|
1378
|
-
var(--a-shadow-focus);
|
|
1379
1380
|
box-shadow: var(--a-shadow-focus);
|
|
1380
1381
|
outline: 3px solid transparent;
|
|
1381
1382
|
outline-offset: 2px;
|
|
@@ -1392,9 +1393,6 @@
|
|
|
1392
1393
|
}
|
|
1393
1394
|
|
|
1394
1395
|
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
|
|
1395
|
-
box-shadow:
|
|
1396
|
-
0 0 0 1px var(--a-surface-default) inset,
|
|
1397
|
-
var(--a-shadow-focus);
|
|
1398
1396
|
box-shadow: var(--a-shadow-focus);
|
|
1399
1397
|
outline: 3px solid transparent;
|
|
1400
1398
|
outline-offset: 2px;
|
|
@@ -1407,9 +1405,6 @@
|
|
|
1407
1405
|
}
|
|
1408
1406
|
@supports not selector(:has) {
|
|
1409
1407
|
.navds-combobox--focused .navds-combobox__wrapper-inner {
|
|
1410
|
-
box-shadow:
|
|
1411
|
-
0 0 0 1px var(--a-surface-default) inset,
|
|
1412
|
-
var(--a-shadow-focus);
|
|
1413
1408
|
box-shadow: var(--a-shadow-focus);
|
|
1414
1409
|
outline: 3px solid transparent;
|
|
1415
1410
|
outline-offset: 2px;
|
|
@@ -1565,7 +1560,7 @@
|
|
|
1565
1560
|
}
|
|
1566
1561
|
.navds-combobox__list-item--focus,
|
|
1567
1562
|
.navds-combobox__list--with-hover
|
|
1568
|
-
.navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
|
|
1563
|
+
.navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
|
|
1569
1564
|
background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
|
|
1570
1565
|
cursor: pointer;
|
|
1571
1566
|
border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
|