@navikt/ds-css 7.3.0 → 7.3.1
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 +6 -0
- package/baseline/_utilities.css +1 -1
- package/button.css +1 -0
- package/darkside/baseline/utilities.darkside.css +1 -1
- package/darkside/index.css +8 -8
- package/date.css +9 -9
- package/dist/component/date.css +9 -9
- package/dist/component/date.min.css +1 -1
- package/dist/component/dropdown.css +1 -1
- package/dist/component/dropdown.min.css +1 -1
- package/dist/component/form.css +29 -35
- package/dist/component/form.min.css +2 -2
- package/dist/component/index.css +1432 -56
- package/dist/component/index.min.css +6 -5
- package/dist/component/modal.css +6 -4
- package/dist/component/primitives.css +1 -2
- package/dist/component/primitives.min.css +1 -1
- package/dist/component/stepper.css +1 -2
- package/dist/component/stepper.min.css +1 -1
- package/dist/component/togglegroup.css +1 -1
- package/dist/component/togglegroup.min.css +1 -1
- package/dist/components.css +1007 -54
- package/dist/components.min.css +6 -4
- package/dist/global/baseline.css +1 -1
- package/dist/global/baseline.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +1432 -56
- package/dist/index.min.css +6 -5
- package/dropdown.css +1 -1
- package/form/combobox.css +2 -2
- package/form/fieldset.css +2 -2
- package/form/radio-checkbox.css +16 -22
- package/form/search.css +3 -3
- package/form/select.css +1 -1
- package/form/text-field.css +3 -3
- package/form/textarea.css +2 -2
- package/index.css +1 -0
- package/modal.css +6 -4
- package/package.json +2 -2
- package/primitives/stack.css +1 -2
- package/stepper.css +1 -2
- package/toggle-group.css +1 -1
package/CHANGELOG.md
CHANGED
package/baseline/_utilities.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* https://web.dev/prefers-reduced-motion/ */
|
|
2
2
|
@media (prefers-reduced-motion: reduce) {
|
|
3
|
-
*:not(.navds-loader
|
|
3
|
+
*:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
|
|
4
4
|
::before,
|
|
5
5
|
::after {
|
|
6
6
|
animation-delay: -1ms !important;
|
package/button.css
CHANGED
|
@@ -154,6 +154,7 @@
|
|
|
154
154
|
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
155
155
|
var(--a-shadow-focus);
|
|
156
156
|
}
|
|
157
|
+
|
|
157
158
|
@media (forced-colors: active) {
|
|
158
159
|
.navds-button--primary:focus-visible {
|
|
159
160
|
box-shadow: none;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/* https://web.dev/prefers-reduced-motion/ */
|
|
6
6
|
@media (prefers-reduced-motion: reduce) {
|
|
7
|
-
*:not(.navds-loader
|
|
7
|
+
*:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
|
|
8
8
|
::before,
|
|
9
9
|
::after {
|
|
10
10
|
animation-delay: -1ms !important;
|
package/darkside/index.css
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.utilities;
|
|
4
4
|
|
|
5
5
|
/* CSS foundations */
|
|
6
|
-
@import
|
|
7
|
-
@import
|
|
8
|
-
@import
|
|
9
|
-
@import
|
|
10
|
-
@import
|
|
11
|
-
@import
|
|
6
|
+
@import "./baseline/reset.darkside.css" layer(aksel.reset);
|
|
7
|
+
@import "./baseline/print.darkside.css" layer(aksel.reset);
|
|
8
|
+
@import "./baseline/fonts.darkside.css" layer(aksel.typography);
|
|
9
|
+
@import "./baseline/theme.darkside.css" layer(aksel.theme);
|
|
10
|
+
@import "./typography.darkside.css" layer(aksel.typography);
|
|
11
|
+
@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
|
|
12
12
|
|
|
13
13
|
/* Theming */
|
|
14
|
-
@import
|
|
14
|
+
@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
|
|
15
15
|
|
|
16
16
|
/* Components */
|
|
17
|
-
@import
|
|
17
|
+
@import "./button.darkside.css" layer(aksel.components);
|
package/date.css
CHANGED
|
@@ -75,14 +75,14 @@
|
|
|
75
75
|
border-radius: var(--a-border-radius-xlarge);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.navds-date .rdp-button:not(.rdp-day_selected
|
|
79
|
-
.navds-date .navds-date__month-button:not(.rdp-day_selected
|
|
78
|
+
.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
|
|
79
|
+
.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
|
|
80
80
|
box-shadow: var(--a-shadow-focus);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
@supports not selector(:focus-visible) {
|
|
84
|
-
.navds-date .rdp-button:not(.rdp-day_selected
|
|
85
|
-
.navds-date .navds-date__month-button:not(.rdp-day_selected
|
|
84
|
+
.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
|
|
85
|
+
.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
|
|
86
86
|
box-shadow: var(--a-shadow-focus);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -167,8 +167,8 @@
|
|
|
167
167
|
color: var(--ac-date-disabled-text, var(--a-text-subtle));
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
.navds-date .rdp-button:where(:not(.rdp-day_selected
|
|
171
|
-
.navds-date__month-button:where(:not(.rdp-day_selected
|
|
170
|
+
.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
|
|
171
|
+
.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
|
|
172
172
|
background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
|
|
173
173
|
cursor: pointer;
|
|
174
174
|
}
|
|
@@ -201,19 +201,19 @@
|
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
/* Error-handling */
|
|
204
|
-
.navds-date__field--error .navds-date__field-input:not(:hover
|
|
204
|
+
.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
|
|
205
205
|
border-color: var(--ac-date-input-error-border, var(--a-border-danger));
|
|
206
206
|
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
-
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover
|
|
209
|
+
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
|
|
210
210
|
box-shadow:
|
|
211
211
|
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
212
212
|
var(--a-shadow-focus);
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
@supports not selector(:focus-visible) {
|
|
216
|
-
.navds-date__field--error .navds-date__field-input:focus:not(:hover
|
|
216
|
+
.navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
|
|
217
217
|
box-shadow:
|
|
218
218
|
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
219
219
|
var(--a-shadow-focus);
|
package/dist/component/date.css
CHANGED
|
@@ -75,14 +75,14 @@
|
|
|
75
75
|
border-radius: var(--a-border-radius-xlarge);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.navds-date .rdp-button:not(.rdp-day_selected
|
|
79
|
-
.navds-date .navds-date__month-button:not(.rdp-day_selected
|
|
78
|
+
.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
|
|
79
|
+
.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
|
|
80
80
|
box-shadow: var(--a-shadow-focus);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
@supports not selector(:focus-visible) {
|
|
84
|
-
.navds-date .rdp-button:not(.rdp-day_selected
|
|
85
|
-
.navds-date .navds-date__month-button:not(.rdp-day_selected
|
|
84
|
+
.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
|
|
85
|
+
.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
|
|
86
86
|
box-shadow: var(--a-shadow-focus);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -168,8 +168,8 @@
|
|
|
168
168
|
color: var(--ac-date-disabled-text, var(--a-text-subtle));
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
.navds-date .rdp-button:where(:not(.rdp-day_selected
|
|
172
|
-
.navds-date__month-button:where(:not(.rdp-day_selected
|
|
171
|
+
.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
|
|
172
|
+
.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
|
|
173
173
|
background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
|
|
174
174
|
cursor: pointer;
|
|
175
175
|
}
|
|
@@ -203,19 +203,19 @@
|
|
|
203
203
|
|
|
204
204
|
/* Error-handling */
|
|
205
205
|
|
|
206
|
-
.navds-date__field--error .navds-date__field-input:not(:hover
|
|
206
|
+
.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
|
|
207
207
|
border-color: var(--ac-date-input-error-border, var(--a-border-danger));
|
|
208
208
|
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover
|
|
211
|
+
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
|
|
212
212
|
box-shadow:
|
|
213
213
|
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
214
214
|
var(--a-shadow-focus);
|
|
215
215
|
}
|
|
216
216
|
|
|
217
217
|
@supports not selector(:focus-visible) {
|
|
218
|
-
.navds-date__field--error .navds-date__field-input:focus:not(:hover
|
|
218
|
+
.navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
|
|
219
219
|
box-shadow:
|
|
220
220
|
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
221
221
|
var(--a-shadow-focus);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected
|
|
1
|
+
.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover,:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-radius:calc(var(--a-border-radius-medium) - 1px);border-end-start-radius:0;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{color:var(--a-gray-500);cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
border-bottom: 1px solid var(--a-border-divider);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.navds-dropdown__menu > :not(.navds-dropdown__divider
|
|
16
|
+
.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
|
|
17
17
|
margin: 0 var(--a-spacing-4) var(--a-spacing-3);
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -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
|
|
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,.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:#0000;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 #0000;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 #0000;outline-offset:-2px}}.navds-dropdown__item:disabled{background:#0000;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
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
border: 0;
|
|
54
54
|
min-width: 0;
|
|
55
55
|
}
|
|
56
|
-
.navds-fieldset > :not(:first-child
|
|
56
|
+
.navds-fieldset > :not(:first-child, :empty) {
|
|
57
57
|
margin-top: var(--a-spacing-2);
|
|
58
58
|
}
|
|
59
59
|
.navds-fieldset__description {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
margin-top: 0.125rem;
|
|
64
64
|
}
|
|
65
65
|
/* Applied when hideLegend is applied to fieldset */
|
|
66
|
-
.navds-fieldset > .navds-sr-only + :not(:first-child
|
|
66
|
+
.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
|
|
67
67
|
margin-top: 0;
|
|
68
68
|
}
|
|
69
69
|
.navds-fieldset__legend {
|
|
@@ -569,39 +569,37 @@
|
|
|
569
569
|
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
|
570
570
|
color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
571
571
|
}
|
|
572
|
-
.navds-checkbox__input:hover:not(:disabled
|
|
573
|
-
.navds-radio__input:hover:not(:disabled
|
|
572
|
+
.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
|
|
573
|
+
.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
|
|
574
574
|
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
|
|
575
575
|
}
|
|
576
|
-
.navds-checkbox__input:hover:not(:disabled
|
|
577
|
-
.navds-radio__input:hover:not(:disabled
|
|
576
|
+
.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
|
|
577
|
+
.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
|
|
578
578
|
background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
|
|
579
579
|
}
|
|
580
|
-
.navds-checkbox--error
|
|
581
|
-
|
|
582
|
-
+ .navds-checkbox__label::before,
|
|
583
|
-
.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
580
|
+
.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
|
|
581
|
+
.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
|
|
584
582
|
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
|
585
583
|
}
|
|
586
584
|
.navds-checkbox--error
|
|
587
|
-
> .navds-checkbox__input:focus:not(:hover
|
|
585
|
+
> .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
|
|
588
586
|
+ .navds-checkbox__label::before,
|
|
589
|
-
.navds-radio--error > .navds-radio__input:focus:not(:hover
|
|
587
|
+
.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
|
|
590
588
|
box-shadow:
|
|
591
589
|
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
592
590
|
0 0 0 4px var(--a-border-focus);
|
|
593
591
|
}
|
|
594
592
|
.navds-checkbox--error
|
|
595
|
-
> .navds-checkbox__input:hover:not(:disabled
|
|
593
|
+
> .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
|
|
596
594
|
+ .navds-checkbox__label::before,
|
|
597
|
-
.navds-radio--error > .navds-radio__input:hover:not(:disabled
|
|
595
|
+
.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
|
|
598
596
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
599
597
|
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
|
600
598
|
}
|
|
601
599
|
.navds-checkbox--error
|
|
602
|
-
> .navds-checkbox__input:focus:hover:not(:disabled
|
|
600
|
+
> .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
|
|
603
601
|
+ .navds-checkbox__label::before,
|
|
604
|
-
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled
|
|
602
|
+
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
|
|
605
603
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
606
604
|
box-shadow:
|
|
607
605
|
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
@@ -629,14 +627,10 @@
|
|
|
629
627
|
.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
|
|
630
628
|
color: var(--a-text-default);
|
|
631
629
|
}
|
|
632
|
-
.navds-checkbox--readonly
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
.navds-
|
|
636
|
-
> .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
|
|
637
|
-
+ .navds-checkbox__label::before,
|
|
638
|
-
.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
|
|
639
|
-
.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
|
|
630
|
+
.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
|
|
631
|
+
.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
|
|
632
|
+
.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
|
|
633
|
+
.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
|
|
640
634
|
background-color: var(--__ac-radio-checkbox-readonly-bg);
|
|
641
635
|
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
|
|
642
636
|
}
|
|
@@ -813,7 +807,7 @@
|
|
|
813
807
|
/**
|
|
814
808
|
Error handling
|
|
815
809
|
*/
|
|
816
|
-
.navds-select--error > * select:not(:hover
|
|
810
|
+
.navds-select--error > * select:not(:hover, :focus, :disabled) {
|
|
817
811
|
box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
|
|
818
812
|
border-color: var(--ac-select-error-border, var(--a-surface-danger));
|
|
819
813
|
}
|
|
@@ -1111,17 +1105,17 @@
|
|
|
1111
1105
|
/**
|
|
1112
1106
|
Error handling
|
|
1113
1107
|
*/
|
|
1114
|
-
.navds-text-field--error > .navds-text-field__input:not(:hover
|
|
1108
|
+
.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
|
|
1115
1109
|
border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
|
|
1116
1110
|
box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
|
|
1117
1111
|
}
|
|
1118
|
-
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover
|
|
1112
|
+
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
|
|
1119
1113
|
box-shadow:
|
|
1120
1114
|
0 0 0 1px var(--a-border-danger),
|
|
1121
1115
|
var(--a-shadow-focus);
|
|
1122
1116
|
}
|
|
1123
1117
|
@supports not selector(:focus-visible) {
|
|
1124
|
-
.navds-text-field--error > .navds-text-field__input:focus:not(:hover
|
|
1118
|
+
.navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
|
|
1125
1119
|
box-shadow:
|
|
1126
1120
|
0 0 0 1px var(--a-border-danger),
|
|
1127
1121
|
var(--a-shadow-focus);
|
|
@@ -1230,12 +1224,12 @@
|
|
|
1230
1224
|
/**
|
|
1231
1225
|
Error handling
|
|
1232
1226
|
*/
|
|
1233
|
-
.navds-textarea--error .navds-textarea__input:not(:hover
|
|
1227
|
+
.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
|
|
1234
1228
|
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
|
1235
1229
|
border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
|
1236
1230
|
}
|
|
1237
1231
|
@supports not selector(:focus-visible) {
|
|
1238
|
-
.navds-textarea--error .navds-textarea__input:not(:hover
|
|
1232
|
+
.navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
|
|
1239
1233
|
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
|
1240
1234
|
border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
|
1241
1235
|
}
|
|
@@ -1403,11 +1397,11 @@
|
|
|
1403
1397
|
}
|
|
1404
1398
|
}
|
|
1405
1399
|
/* Error-handling */
|
|
1406
|
-
.navds-search--error .navds-search__input:not(:hover
|
|
1400
|
+
.navds-search--error .navds-search__input:not(:hover, :disabled) {
|
|
1407
1401
|
border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
|
|
1408
1402
|
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
|
|
1409
1403
|
}
|
|
1410
|
-
.navds-search--error .navds-search__input:focus-visible:not(:hover
|
|
1404
|
+
.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
|
|
1411
1405
|
box-shadow:
|
|
1412
1406
|
inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
|
1413
1407
|
var(--a-shadow-focus);
|
|
@@ -1419,7 +1413,7 @@
|
|
|
1419
1413
|
z-index: 1;
|
|
1420
1414
|
}
|
|
1421
1415
|
@supports not selector(:focus-visible) {
|
|
1422
|
-
.navds-search--error .navds-search__input:focus:not(:hover
|
|
1416
|
+
.navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
|
|
1423
1417
|
box-shadow:
|
|
1424
1418
|
inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
|
1425
1419
|
var(--a-shadow-focus);
|
|
@@ -1508,12 +1502,12 @@
|
|
|
1508
1502
|
.navds-combobox__wrapper-inner:hover {
|
|
1509
1503
|
cursor: text;
|
|
1510
1504
|
}
|
|
1511
|
-
.navds-combobox--error .navds-text-field__input:not(:hover
|
|
1505
|
+
.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
|
|
1512
1506
|
border-color: var(--ac-combobox-error-border, var(--a-border-danger));
|
|
1513
1507
|
box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
|
|
1514
1508
|
}
|
|
1515
1509
|
.navds-combobox--error
|
|
1516
|
-
.navds-text-field__input:not(:hover
|
|
1510
|
+
.navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
|
|
1517
1511
|
outline: 2px solid transparent;
|
|
1518
1512
|
outline-offset: 2px;
|
|
1519
1513
|
box-shadow:
|