@navikt/ds-css 7.2.1 → 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.
Files changed (58) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/action-menu.css +227 -0
  3. package/baseline/_inline-reset.css +3 -1
  4. package/baseline/_utilities.css +1 -1
  5. package/button.css +1 -0
  6. package/config/_mappings.js +5 -0
  7. package/darkside/README.md +25 -0
  8. package/darkside/baseline/fonts.darkside.css +129 -0
  9. package/darkside/baseline/print.darkside.css +75 -0
  10. package/darkside/baseline/reset.darkside.css +148 -0
  11. package/darkside/baseline/theme.darkside.css +10 -0
  12. package/darkside/baseline/utilities.darkside.css +65 -0
  13. package/darkside/button.darkside.css +6 -0
  14. package/darkside/index.css +17 -0
  15. package/darkside/typography.darkside.css +6 -0
  16. package/date.css +9 -9
  17. package/dist/component/actionmenu.css +228 -0
  18. package/dist/component/actionmenu.min.css +1 -0
  19. package/dist/component/date.css +9 -9
  20. package/dist/component/date.min.css +1 -1
  21. package/dist/component/dropdown.css +1 -1
  22. package/dist/component/dropdown.min.css +1 -1
  23. package/dist/component/form.css +29 -35
  24. package/dist/component/form.min.css +2 -2
  25. package/dist/component/index.css +1630 -57
  26. package/dist/component/index.min.css +6 -5
  27. package/dist/component/list.css +1 -0
  28. package/dist/component/list.min.css +1 -1
  29. package/dist/component/modal.css +6 -4
  30. package/dist/component/primitives.css +1 -2
  31. package/dist/component/primitives.min.css +1 -1
  32. package/dist/component/stepper.css +1 -2
  33. package/dist/component/stepper.min.css +1 -1
  34. package/dist/component/togglegroup.css +1 -1
  35. package/dist/component/togglegroup.min.css +1 -1
  36. package/dist/components.css +1237 -54
  37. package/dist/components.min.css +6 -4
  38. package/dist/global/baseline.css +4 -2
  39. package/dist/global/baseline.min.css +1 -1
  40. package/dist/global/tokens.css +1 -1
  41. package/dist/global/tokens.min.css +1 -1
  42. package/dist/index.css +1630 -57
  43. package/dist/index.min.css +6 -5
  44. package/dropdown.css +1 -1
  45. package/form/combobox.css +2 -2
  46. package/form/fieldset.css +2 -2
  47. package/form/radio-checkbox.css +16 -22
  48. package/form/search.css +3 -3
  49. package/form/select.css +1 -1
  50. package/form/text-field.css +3 -3
  51. package/form/textarea.css +2 -2
  52. package/index.css +2 -0
  53. package/list.css +1 -0
  54. package/modal.css +6 -4
  55. package/package.json +3 -3
  56. package/primitives/stack.css +1 -2
  57. package/stepper.css +1 -2
  58. package/toggle-group.css +1 -1
@@ -1,4 +1,956 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root, :host {
6
+ --a-version: "7.3.1";
7
+ --a-spacing-1-alt: 0.375rem;
8
+ --a-spacing-05: 0.125rem;
9
+ --a-spacing-32: 8rem;
10
+ --a-spacing-24: 6rem;
11
+ --a-spacing-20: 5rem;
12
+ --a-spacing-18: 4.5rem;
13
+ --a-spacing-16: 4rem;
14
+ --a-spacing-14: 3.5rem;
15
+ --a-spacing-12: 3rem;
16
+ --a-spacing-11: 2.75rem;
17
+ --a-spacing-10: 2.5rem;
18
+ --a-spacing-9: 2.25rem;
19
+ --a-spacing-8: 2rem;
20
+ --a-spacing-7: 1.75rem;
21
+ --a-spacing-6: 1.5rem;
22
+ --a-spacing-5: 1.25rem;
23
+ --a-spacing-4: 1rem;
24
+ --a-spacing-3: 0.75rem;
25
+ --a-spacing-2: 0.5rem;
26
+ --a-spacing-1: 0.25rem;
27
+ --a-spacing-0: 0;
28
+ --a-shadow-xlarge: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
29
+ --a-shadow-large: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
30
+ --a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
31
+ --a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
32
+ --a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
33
+ --a-purple-900: rgba(31, 20, 47, 1);
34
+ --a-purple-800: rgba(48, 31, 70, 1);
35
+ --a-purple-700: rgba(65, 43, 93, 1);
36
+ --a-purple-600: rgba(82, 56, 116, 1);
37
+ --a-purple-500: rgba(99, 70, 137, 1);
38
+ --a-purple-400: rgba(130, 105, 162, 1);
39
+ --a-purple-300: rgba(161, 141, 187, 1);
40
+ --a-purple-200: rgba(192, 178, 210, 1);
41
+ --a-purple-100: rgba(224, 216, 233, 1);
42
+ --a-purple-50: rgba(239, 236, 244, 1);
43
+ --a-orange-900: rgba(82, 51, 0, 1);
44
+ --a-orange-800: rgba(125, 76, 0, 1);
45
+ --a-orange-700: rgba(168, 100, 0, 1);
46
+ --a-orange-600: rgba(199, 115, 0, 1);
47
+ --a-orange-500: rgba(255, 145, 0, 1);
48
+ --a-orange-400: rgba(255, 170, 51, 1);
49
+ --a-orange-300: rgba(255, 193, 102, 1);
50
+ --a-orange-200: rgba(255, 215, 153, 1);
51
+ --a-orange-100: rgba(255, 236, 204, 1);
52
+ --a-orange-50: rgba(255, 249, 240, 1);
53
+ --a-limegreen-900: rgba(71, 78, 0, 1);
54
+ --a-limegreen-800: rgba(102, 110, 0, 1);
55
+ --a-limegreen-700: rgba(127, 137, 0, 1);
56
+ --a-limegreen-600: rgba(147, 158, 0, 1);
57
+ --a-limegreen-500: rgba(162, 173, 0, 1);
58
+ --a-limegreen-400: rgba(193, 203, 51, 1);
59
+ --a-limegreen-300: rgba(217, 227, 102, 1);
60
+ --a-limegreen-200: rgba(236, 243, 153, 1);
61
+ --a-limegreen-100: rgba(249, 252, 204, 1);
62
+ --a-limegreen-50: rgba(253, 255, 230, 1);
63
+ --a-lightblue-900: rgba(19, 72, 82, 1);
64
+ --a-lightblue-800: rgba(35, 107, 125, 1);
65
+ --a-lightblue-700: rgba(54, 141, 168, 1);
66
+ --a-lightblue-600: rgba(76, 173, 205, 1);
67
+ --a-lightblue-500: rgba(102, 203, 236, 1);
68
+ --a-lightblue-400: rgba(124, 218, 248, 1);
69
+ --a-lightblue-300: rgba(151, 230, 255, 1);
70
+ --a-lightblue-200: rgba(181, 241, 255, 1);
71
+ --a-lightblue-100: rgba(216, 249, 255, 1);
72
+ --a-lightblue-50: rgba(235, 252, 255, 1);
73
+ --a-green-900: rgba(0, 59, 15, 1);
74
+ --a-green-800: rgba(0, 85, 25, 1);
75
+ --a-green-700: rgba(0, 106, 35, 1);
76
+ --a-green-600: rgba(0, 124, 46, 1);
77
+ --a-green-500: rgba(6, 137, 58, 1);
78
+ --a-green-400: rgba(42, 167, 88, 1);
79
+ --a-green-300: rgba(102, 199, 134, 1);
80
+ --a-green-200: rgba(153, 222, 173, 1);
81
+ --a-green-100: rgba(204, 241, 214, 1);
82
+ --a-green-50: rgba(243, 252, 245, 1);
83
+ --a-deepblue-900: rgba(0, 36, 58, 1);
84
+ --a-deepblue-800: rgba(0, 52, 83, 1);
85
+ --a-deepblue-700: rgba(0, 67, 103, 1);
86
+ --a-deepblue-600: rgba(0, 80, 119, 1);
87
+ --a-deepblue-500: rgba(0, 91, 130, 1);
88
+ --a-deepblue-400: rgba(51, 128, 165, 1);
89
+ --a-deepblue-300: rgba(102, 163, 196, 1);
90
+ --a-deepblue-200: rgba(153, 196, 221, 1);
91
+ --a-deepblue-100: rgba(204, 226, 240, 1);
92
+ --a-deepblue-50: rgba(230, 241, 248, 1);
93
+ --a-red-900: rgba(38, 0, 0, 1);
94
+ --a-red-800: rgba(92, 0, 0, 1);
95
+ --a-red-700: rgba(140, 0, 0, 1);
96
+ --a-red-600: rgba(173, 0, 0, 1);
97
+ --a-red-500: rgba(195, 0, 0, 1);
98
+ --a-red-400: rgba(222, 46, 46, 1);
99
+ --a-red-300: rgba(242, 92, 92, 1);
100
+ --a-red-200: rgba(246, 130, 130, 1);
101
+ --a-red-100: rgba(255, 194, 194, 1);
102
+ --a-red-50: rgba(255, 230, 230, 1);
103
+ --a-blue-900: rgba(0, 34, 82, 1);
104
+ --a-blue-800: rgba(0, 52, 125, 1);
105
+ --a-blue-700: rgba(0, 69, 156, 1);
106
+ --a-blue-600: rgba(0, 86, 180, 1);
107
+ --a-blue-500: rgba(0, 103, 197, 1);
108
+ --a-blue-400: rgba(51, 134, 224, 1);
109
+ --a-blue-300: rgba(102, 165, 244, 1);
110
+ --a-blue-200: rgba(153, 195, 255, 1);
111
+ --a-blue-100: rgba(204, 225, 255, 1);
112
+ --a-blue-50: rgba(230, 240, 255, 1);
113
+ --a-grayalpha-900: rgba(2, 5, 9, 0.87);
114
+ --a-grayalpha-800: rgba(3, 11, 22, 0.75);
115
+ --a-grayalpha-700: rgba(1, 11, 24, 0.68);
116
+ --a-grayalpha-600: rgba(2, 15, 34, 0.6);
117
+ --a-grayalpha-500: rgba(2, 20, 49, 0.49);
118
+ --a-grayalpha-400: rgba(5, 23, 51, 0.34);
119
+ --a-grayalpha-300: rgba(7, 26, 54, 0.21);
120
+ --a-grayalpha-200: rgba(17, 41, 64, 0.13);
121
+ --a-grayalpha-100: rgba(18, 43, 68, 0.08);
122
+ --a-grayalpha-50: rgba(38, 55, 89, 0.06);
123
+ --a-gray-900: rgba(35, 38, 42, 1);
124
+ --a-gray-800: rgba(66, 71, 79, 1);
125
+ --a-gray-700: rgba(82, 89, 98, 1);
126
+ --a-gray-600: rgba(103, 111, 123, 1);
127
+ --a-gray-500: rgba(131, 140, 154, 1);
128
+ --a-gray-400: rgba(170, 176, 186, 1);
129
+ --a-gray-300: rgba(203, 207, 213, 1);
130
+ --a-gray-200: rgba(224, 227, 230, 1);
131
+ --a-gray-100: rgba(236, 238, 240, 1);
132
+ --a-gray-50: rgba(242, 243, 245, 1);
133
+ --a-nav-red: rgba(195, 0, 0, 1);
134
+ --a-white: rgba(255, 255, 255, 1);
135
+ --a-transparent: rgba(255, 255, 255, 0);
136
+ --a-border-radius-full: 9999px;
137
+ --a-border-radius-xlarge: 12px;
138
+ --a-border-radius-large: 8px;
139
+ --a-border-radius-medium: 4px;
140
+ --a-border-radius-small: 2px;
141
+ --a-z-index-tooltip: 3000;
142
+ --a-z-index-focus: 10;
143
+ --a-z-index-popover: 1000;
144
+ --a-font-weight-regular: 400;
145
+ --a-font-weight-bold: 600;
146
+ --a-font-size-small: 0.875rem;
147
+ --a-font-size-medium: 1rem;
148
+ --a-font-size-large: 1.125rem;
149
+ --a-font-size-xlarge: 1.25rem;
150
+ --a-font-size-heading-xsmall: 1.125rem;
151
+ --a-font-size-heading-small: 1.25rem;
152
+ --a-font-size-heading-medium: 1.5rem;
153
+ --a-font-size-heading-large: 1.75rem;
154
+ --a-font-size-heading-xlarge: 2rem;
155
+ --a-font-size-heading-2xlarge: 2.5rem;
156
+ --a-font-line-height-medium: 1.25rem;
157
+ --a-font-line-height-large: 1.5rem;
158
+ --a-font-line-height-xlarge: 1.75rem;
159
+ --a-font-line-height-heading-xsmall: 1.5rem;
160
+ --a-font-line-height-heading-small: 1.75rem;
161
+ --a-font-line-height-heading-medium: 2rem;
162
+ --a-font-line-height-heading-large: 2.25rem;
163
+ --a-font-line-height-heading-xlarge: 2.5rem;
164
+ --a-font-line-height-heading-2xlarge: 3.25rem;
165
+ --a-font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
166
+ --a-text-width-max: 576px;
167
+ --a-breakpoint-2xl-down: 1439px;
168
+ --a-breakpoint-2xl: 1440px;
169
+ --a-breakpoint-xl-down: 1279px;
170
+ --a-breakpoint-xl: 1280px;
171
+ --a-breakpoint-lg-down: 1023px;
172
+ --a-breakpoint-lg: 1024px;
173
+ --a-breakpoint-md-down: 767px;
174
+ --a-breakpoint-md: 768px;
175
+ --a-breakpoint-sm-down: 479px;
176
+ --a-breakpoint-sm: 480px;
177
+ --a-breakpoint-xs: 0;
178
+ --a-data-border-6: var(--a-purple-400);
179
+ --a-data-border-5: var(--a-green-400);
180
+ --a-data-border-4: var(--a-lightblue-700);
181
+ --a-data-border-3: var(--a-orange-600);
182
+ --a-data-border-2: var(--a-deepblue-500);
183
+ --a-data-border-1: var(--a-blue-400);
184
+ --a-data-surface-6-subtle: var(--a-purple-200);
185
+ --a-data-surface-6: var(--a-purple-400);
186
+ --a-data-surface-5-subtle: var(--a-green-200);
187
+ --a-data-surface-5: var(--a-green-400);
188
+ --a-data-surface-4-subtle: var(--a-lightblue-500);
189
+ --a-data-surface-4: var(--a-lightblue-700);
190
+ --a-data-surface-3-subtle: var(--a-orange-300);
191
+ --a-data-surface-3: var(--a-orange-600);
192
+ --a-data-surface-2-subtle: var(--a-deepblue-200);
193
+ --a-data-surface-2: var(--a-deepblue-500);
194
+ --a-data-surface-1-subtle: var(--a-blue-100);
195
+ --a-data-surface-1: var(--a-blue-400);
196
+ --a-text-on-alt-3: var(--a-white);
197
+ --a-text-on-alt-2: var(--a-gray-900);
198
+ --a-text-on-alt-1: var(--a-white);
199
+ --a-text-on-info: var(--a-gray-900);
200
+ --a-text-on-warning: var(--a-gray-900);
201
+ --a-text-on-danger: var(--a-white);
202
+ --a-text-on-success: var(--a-white);
203
+ --a-text-on-action: var(--a-white);
204
+ --a-text-on-neutral: var(--a-white);
205
+ --a-text-on-inverted: var(--a-white);
206
+ --a-text-action: var(--a-blue-500);
207
+ --a-text-action-on-action-subtle: var(--a-blue-600);
208
+ --a-text-action-hover: var(--a-blue-600);
209
+ --a-text-action-selected: var(--a-blue-700);
210
+ --a-text-danger: var(--a-red-500);
211
+ --a-text-visited: var(--a-purple-500);
212
+ --a-text-subtle: var(--a-grayalpha-700);
213
+ --a-text-default: var(--a-gray-900);
214
+ --a-surface-alt-3: var(--a-deepblue-500);
215
+ --a-surface-alt-3-strong: var(--a-deepblue-800);
216
+ --a-surface-alt-3-moderate: var(--a-deepblue-200);
217
+ --a-surface-alt-3-subtle: var(--a-deepblue-100);
218
+ --a-surface-alt-2: var(--a-limegreen-400);
219
+ --a-surface-alt-2-moderate: var(--a-limegreen-200);
220
+ --a-surface-alt-2-subtle: var(--a-limegreen-100);
221
+ --a-surface-alt-1: var(--a-purple-400);
222
+ --a-surface-alt-1-moderate: var(--a-purple-200);
223
+ --a-surface-alt-1-subtle: var(--a-purple-100);
224
+ --a-surface-info: var(--a-lightblue-500);
225
+ --a-surface-info-moderate: var(--a-lightblue-200);
226
+ --a-surface-info-subtle: var(--a-lightblue-100);
227
+ --a-surface-warning: var(--a-orange-500);
228
+ --a-surface-warning-moderate: var(--a-orange-200);
229
+ --a-surface-warning-subtle: var(--a-orange-100);
230
+ --a-surface-danger: var(--a-red-500);
231
+ --a-surface-danger-moderate: var(--a-red-200);
232
+ --a-surface-danger-subtle: var(--a-red-100);
233
+ --a-surface-success: var(--a-green-500);
234
+ --a-surface-success-moderate: var(--a-green-200);
235
+ --a-surface-success-subtle: var(--a-green-100);
236
+ --a-surface-neutral: var(--a-gray-700);
237
+ --a-surface-neutral-selected: var(--a-gray-900);
238
+ --a-surface-neutral-moderate: var(--a-grayalpha-200);
239
+ --a-surface-neutral-subtle: var(--a-grayalpha-100);
240
+ --a-surface-action: var(--a-blue-500);
241
+ --a-surface-action-selected: var(--a-blue-700);
242
+ --a-surface-action-subtle: var(--a-blue-50);
243
+ --a-surface-inverted: var(--a-gray-900);
244
+ --a-surface-backdrop: var(--a-grayalpha-500);
245
+ --a-surface-transparent: var(--a-transparent);
246
+ --a-surface-subtle: var(--a-gray-50);
247
+ --a-surface-selected: var(--a-blue-50);
248
+ --a-surface-default: var(--a-white);
249
+ --a-surface-info-subtle-hover: var(--a-lightblue-200);
250
+ --a-surface-warning-subtle-hover: var(--a-orange-200);
251
+ --a-surface-danger-active: var(--a-red-700);
252
+ --a-surface-danger-hover: var(--a-red-600);
253
+ --a-surface-danger-subtle-hover: var(--a-red-200);
254
+ --a-surface-success-hover: var(--a-green-600);
255
+ --a-surface-success-subtle-hover: var(--a-green-200);
256
+ --a-surface-neutral-hover: var(--a-gray-800);
257
+ --a-surface-neutral-active: var(--a-gray-900);
258
+ --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
259
+ --a-surface-action-selected-hover: var(--a-blue-800);
260
+ --a-surface-action-active: var(--a-blue-700);
261
+ --a-surface-action-hover: var(--a-blue-600);
262
+ --a-surface-action-subtle-hover: var(--a-blue-100);
263
+ --a-surface-inverted-active: var(--a-gray-700);
264
+ --a-surface-inverted-hover: var(--a-gray-800);
265
+ --a-surface-active: var(--a-grayalpha-200);
266
+ --a-surface-hover: var(--a-grayalpha-100);
267
+ --a-icon-on-info: var(--a-gray-900);
268
+ --a-icon-on-warning: var(--a-gray-900);
269
+ --a-icon-on-danger: var(--a-white);
270
+ --a-icon-on-success: var(--a-white);
271
+ --a-icon-on-action: var(--a-white);
272
+ --a-icon-on-inverted: var(--a-white);
273
+ --a-icon-on-neutral: var(--a-white);
274
+ --a-icon-alt-3: var(--a-deepblue-500);
275
+ --a-icon-alt-2: var(--a-limegreen-700);
276
+ --a-icon-alt-1: var(--a-purple-500);
277
+ --a-icon-info: var(--a-lightblue-800);
278
+ --a-icon-warning: var(--a-orange-600);
279
+ --a-icon-danger: var(--a-red-500);
280
+ --a-icon-success: var(--a-green-500);
281
+ --a-icon-action: var(--a-blue-500);
282
+ --a-icon-action-on-action-subtle: var(--a-blue-600);
283
+ --a-icon-action-hover: var(--a-blue-600);
284
+ --a-icon-action-selected: var(--a-blue-700);
285
+ --a-icon-subtle: var(--a-grayalpha-700);
286
+ --a-icon-default: var(--a-gray-900);
287
+ --a-border-alt-3: var(--a-deepblue-500);
288
+ --a-border-alt-2: var(--a-limegreen-700);
289
+ --a-border-alt-1: var(--a-purple-400);
290
+ --a-border-on-inverted-subtle: var(--a-gray-700);
291
+ --a-border-on-inverted: var(--a-gray-200);
292
+ --a-border-focus: var(--a-blue-800);
293
+ --a-border-focus-on-inverted: var(--a-blue-200);
294
+ --a-border-info: var(--a-lightblue-700);
295
+ --a-border-warning: var(--a-orange-600);
296
+ --a-border-danger: var(--a-red-500);
297
+ --a-border-success: var(--a-green-500);
298
+ --a-border-selected: var(--a-blue-500);
299
+ --a-border-action: var(--a-blue-500);
300
+ --a-border-action-hover: var(--a-blue-600);
301
+ --a-border-action-selected: var(--a-blue-700);
302
+ --a-border-subtle: var(--a-grayalpha-300);
303
+ --a-border-divider: var(--a-grayalpha-300);
304
+ --a-border-strong: var(--a-grayalpha-700);
305
+ --a-border-default: var(--a-grayalpha-500);
306
+ --a-border-subtle-hover: var(--a-grayalpha-400);
307
+ --a-bg-subtle: var(--a-gray-100);
308
+ --a-bg-default: var(--a-white);
309
+ --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
310
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
311
+ }
312
+
313
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
314
+
315
+ /* Document
316
+ ========================================================================== */
317
+
318
+ /**
319
+ * 1. Correct the line height in all browsers.
320
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
321
+ */
322
+
323
+ html {
324
+ line-height: 1.15; /* 1 */
325
+ -webkit-text-size-adjust: 100%; /* 2 */
326
+ }
327
+
328
+ /* Sections
329
+ ========================================================================== */
330
+
331
+ /**
332
+ * Remove the margin in all browsers.
333
+ */
334
+
335
+ body {
336
+ margin: 0;
337
+ }
338
+
339
+ /**
340
+ * Render the `main` element consistently in IE.
341
+ */
342
+
343
+ main {
344
+ display: block;
345
+ }
346
+
347
+ /**
348
+ * Correct the font size and margin on `h1` elements within `section` and
349
+ * `article` contexts in Chrome, Firefox, and Safari.
350
+ */
351
+
352
+ h1 {
353
+ font-size: 2em;
354
+ margin: 0.67em 0;
355
+ }
356
+
357
+ /* Grouping content
358
+ ========================================================================== */
359
+
360
+ /**
361
+ * 1. Add the correct box sizing in Firefox.
362
+ * 2. Show the overflow in Edge and IE.
363
+ */
364
+
365
+ hr {
366
+ box-sizing: content-box; /* 1 */
367
+ height: 0; /* 1 */
368
+ overflow: visible; /* 2 */
369
+ }
370
+
371
+ /**
372
+ * 1. Correct the inheritance and scaling of font size in all browsers.
373
+ * 2. Correct the odd `em` font sizing in all browsers.
374
+ */
375
+
376
+ pre {
377
+ font-family: monospace; /* 1 */
378
+ font-size: 1em; /* 2 */
379
+ }
380
+
381
+ /* Text-level semantics
382
+ ========================================================================== */
383
+
384
+ /**
385
+ * Remove the gray background on active links in IE 10.
386
+ */
387
+
388
+ a {
389
+ background-color: transparent;
390
+ color: var(--a-text-action);
391
+ }
392
+
393
+ /**
394
+ * 1. Remove the bottom border in Chrome 57-
395
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
396
+ */
397
+
398
+ abbr[title] {
399
+ border-bottom: none; /* 1 */
400
+ text-decoration: underline; /* 2 */
401
+ text-decoration: underline dotted; /* 2 */
402
+ }
403
+
404
+ /**
405
+ * Add the correct font weight in Chrome, Edge, and Safari.
406
+ */
407
+
408
+ b,
409
+ strong {
410
+ font-weight: bolder;
411
+ }
412
+
413
+ /**
414
+ * 1. Correct the inheritance and scaling of font size in all browsers.
415
+ * 2. Correct the odd `em` font sizing in all browsers.
416
+ */
417
+
418
+ code,
419
+ kbd,
420
+ samp {
421
+ font-family: monospace; /* 1 */
422
+ font-size: 1em; /* 2 */
423
+ }
424
+
425
+ /**
426
+ * Add the correct font size in all browsers.
427
+ */
428
+
429
+ small {
430
+ font-size: 80%;
431
+ }
432
+
433
+ /**
434
+ * Prevent `sub` and `sup` elements from affecting the line height in
435
+ * all browsers.
436
+ */
437
+
438
+ sub,
439
+ sup {
440
+ font-size: 75%;
441
+ line-height: 0;
442
+ position: relative;
443
+ vertical-align: baseline;
444
+ }
445
+
446
+ sub {
447
+ bottom: -0.25em;
448
+ }
449
+
450
+ sup {
451
+ top: -0.5em;
452
+ }
453
+
454
+ /* Embedded content
455
+ ========================================================================== */
456
+
457
+ /**
458
+ * Remove the border on images inside links in IE 10.
459
+ */
460
+
461
+ img {
462
+ border-style: none;
463
+ }
464
+
465
+ /* Forms
466
+ ========================================================================== */
467
+
468
+ /**
469
+ * Remove the inner border and padding in Firefox.
470
+ */
471
+
472
+ button::-moz-focus-inner,
473
+ [type="button"]::-moz-focus-inner,
474
+ [type="reset"]::-moz-focus-inner,
475
+ [type="submit"]::-moz-focus-inner {
476
+ border-style: none;
477
+ padding: 0;
478
+ }
479
+
480
+ /**
481
+ * Restore the focus styles unset by the previous rule.
482
+ */
483
+
484
+ button:-moz-focusring,
485
+ [type="button"]:-moz-focusring,
486
+ [type="reset"]:-moz-focusring,
487
+ [type="submit"]:-moz-focusring {
488
+ outline: 1px dotted ButtonText;
489
+ }
490
+
491
+ /**
492
+ * Correct the padding in Firefox.
493
+ */
494
+
495
+ fieldset {
496
+ padding: 0.35em 0.75em 0.625em;
497
+ }
498
+
499
+ /**
500
+ * 1. Correct the text wrapping in Edge and IE.
501
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
502
+ * 3. Remove the padding so developers are not caught out when they zero out
503
+ * `fieldset` elements in all browsers.
504
+ */
505
+
506
+ legend {
507
+ box-sizing: border-box; /* 1 */
508
+ color: inherit; /* 2 */
509
+ display: table; /* 1 */
510
+ max-width: 100%; /* 1 */
511
+ padding: 0; /* 3 */
512
+ white-space: normal; /* 1 */
513
+ box-sizing: border-box;
514
+ color: inherit;
515
+ display: table;
516
+ max-width: 100%;
517
+ padding: 0;
518
+ white-space: normal;
519
+ }
520
+
521
+ /**
522
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
523
+ */
524
+
525
+ progress {
526
+ vertical-align: baseline;
527
+ }
528
+
529
+ /**
530
+ * Remove the default vertical scrollbar in IE 10+.
531
+ */
532
+
533
+ textarea {
534
+ overflow: auto;
535
+ }
536
+
537
+ /**
538
+ * 1. Add the correct box sizing in IE 10.
539
+ * 2. Remove the padding in IE 10.
540
+ */
541
+
542
+ [type="checkbox"],
543
+ [type="radio"] {
544
+ box-sizing: border-box; /* 1 */
545
+ padding: 0; /* 2 */
546
+ }
547
+
548
+ /**
549
+ * Correct the cursor style of increment and decrement buttons in Chrome.
550
+ */
551
+
552
+ [type="number"]::-webkit-inner-spin-button,
553
+ [type="number"]::-webkit-outer-spin-button {
554
+ height: auto;
555
+ }
556
+
557
+ /**
558
+ * 1. Correct the odd appearance in Chrome and Safari.
559
+ * 2. Correct the outline style in Safari.
560
+ */
561
+
562
+ [type="search"] {
563
+ -webkit-appearance: textfield; /* 1 */
564
+ outline-offset: -2px; /* 2 */
565
+ }
566
+
567
+ /**
568
+ * Remove the inner padding in Chrome and Safari on macOS.
569
+ */
570
+
571
+ [type="search"]::-webkit-search-decoration {
572
+ -webkit-appearance: none;
573
+ }
574
+
575
+ /**
576
+ * 1. Correct the inability to style clickable types in iOS and Safari.
577
+ * 2. Change font properties to `inherit` in Safari.
578
+ */
579
+
580
+ ::-webkit-file-upload-button {
581
+ -webkit-appearance: button; /* 1 */
582
+ font: inherit; /* 2 */
583
+ }
584
+
585
+ /* Interactive
586
+ ========================================================================== */
587
+
588
+ /*
589
+ * Add the correct display in Edge, IE 10+, and Firefox.
590
+ */
591
+
592
+ details {
593
+ display: block;
594
+ }
595
+
596
+ /*
597
+ * Add the correct display in all browsers.
598
+ */
599
+
600
+ summary {
601
+ display: list-item;
602
+ }
603
+
604
+ /* Misc
605
+ ========================================================================== */
606
+
607
+ /**
608
+ * Add the correct display in IE 10+.
609
+ */
610
+
611
+ template {
612
+ display: none;
613
+ }
614
+
615
+ /* cyrillic-ext */
616
+
617
+ @font-face {
618
+ font-family: "Source Sans 3";
619
+ font-style: italic;
620
+ font-weight: 400 600;
621
+ font-display: swap;
622
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
623
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
624
+ }
625
+
626
+ /* cyrillic */
627
+
628
+ @font-face {
629
+ font-family: "Source Sans 3";
630
+ font-style: italic;
631
+ font-weight: 400 600;
632
+ font-display: swap;
633
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
634
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
635
+ }
636
+
637
+ /* latin-ext */
638
+
639
+ @font-face {
640
+ font-family: "Source Sans 3";
641
+ font-style: italic;
642
+ font-weight: 400 600;
643
+ font-display: swap;
644
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
645
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
646
+ U+2C60-2C7F, U+A720-A7FF;
647
+ }
648
+
649
+ /* latin */
650
+
651
+ @font-face {
652
+ font-family: "Source Sans 3";
653
+ font-style: italic;
654
+ font-weight: 400 600;
655
+ font-display: swap;
656
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
657
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
658
+ U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
659
+ }
660
+
661
+ /* cyrillic-ext */
662
+
663
+ @font-face {
664
+ font-family: "Source Sans 3";
665
+ font-style: normal;
666
+ font-weight: 400 600;
667
+ font-display: swap;
668
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
669
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
670
+ }
671
+
672
+ /* cyrillic */
673
+
674
+ @font-face {
675
+ font-family: "Source Sans 3";
676
+ font-style: normal;
677
+ font-weight: 400 600;
678
+ font-display: swap;
679
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
680
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
681
+ }
682
+
683
+ /* latin-ext */
684
+
685
+ @font-face {
686
+ font-family: "Source Sans 3";
687
+ font-style: normal;
688
+ font-weight: 400 600;
689
+ font-display: swap;
690
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
691
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
692
+ U+2C60-2C7F, U+A720-A7FF;
693
+ }
694
+
695
+ /* latin */
696
+
697
+ @font-face {
698
+ font-family: "Source Sans 3";
699
+ font-style: normal;
700
+ font-weight: 400 600;
701
+ font-display: swap;
702
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
703
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
704
+ U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
705
+ }
706
+
707
+ /* Legacy support */
708
+
709
+ /* latin-ext */
710
+
711
+ @font-face {
712
+ font-family: "Source Sans Pro";
713
+ font-style: italic;
714
+ font-weight: 400 600;
715
+ font-display: swap;
716
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
717
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
718
+ U+2C60-2C7F, U+A720-A7FF;
719
+ }
720
+
721
+ /* latin */
722
+
723
+ @font-face {
724
+ font-family: "Source Sans Pro";
725
+ font-style: italic;
726
+ font-weight: 400 600;
727
+ font-display: swap;
728
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
729
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
730
+ U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
731
+ }
732
+
733
+ /* latin-ext */
734
+
735
+ @font-face {
736
+ font-family: "Source Sans Pro";
737
+ font-style: normal;
738
+ font-weight: 400 600;
739
+ font-display: swap;
740
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
741
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
742
+ U+2C60-2C7F, U+A720-A7FF;
743
+ }
744
+
745
+ /* latin */
746
+
747
+ @font-face {
748
+ font-family: "Source Sans Pro";
749
+ font-style: normal;
750
+ font-weight: 400 600;
751
+ font-display: swap;
752
+ src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
753
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
754
+ U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
755
+ }
756
+
757
+ /* ==========================================================================
758
+ Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
759
+ Inlined to avoid the additional HTTP request:
760
+ https://www.phpied.com/delay-loading-your-print-css/
761
+ ========================================================================== */
762
+
763
+ @media print {
764
+ *,
765
+ *::before,
766
+ *::after {
767
+ background: #fff !important;
768
+ color: #000 !important;
769
+
770
+ /* Black prints faster */
771
+ box-shadow: none !important;
772
+ text-shadow: none !important;
773
+ }
774
+
775
+ a,
776
+ a:visited {
777
+ text-decoration: underline;
778
+ }
779
+
780
+ a[href]::after {
781
+ content: " (" attr(href) ")";
782
+ }
783
+
784
+ abbr[title]::after {
785
+ content: " (" attr(title) ")";
786
+ }
787
+
788
+ /*
789
+ * Don't show links that are fragment identifiers,
790
+ * or use the `javascript:` pseudo protocol
791
+ */
792
+ a[href^="#"]::after,
793
+ a[href^="javascript:"]::after {
794
+ content: "";
795
+ }
796
+
797
+ pre {
798
+ white-space: pre-wrap !important;
799
+ }
800
+
801
+ pre,
802
+ blockquote {
803
+ border: 1px solid #999;
804
+ page-break-inside: avoid;
805
+ }
806
+
807
+ /*
808
+ * Printing Tables:
809
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
810
+ */
811
+ thead {
812
+ display: table-header-group;
813
+ }
814
+
815
+ tr,
816
+ img {
817
+ page-break-inside: avoid;
818
+ }
819
+
820
+ p,
821
+ h2,
822
+ h3 {
823
+ orphans: 3;
824
+ widows: 3;
825
+ }
826
+
827
+ h2,
828
+ h3 {
829
+ page-break-after: avoid;
830
+ }
831
+ }
832
+
833
+ html,
834
+ :host {
835
+ box-sizing: border-box;
836
+ }
837
+
838
+ *,
839
+ *::before,
840
+ *::after {
841
+ box-sizing: inherit;
842
+ }
843
+
844
+ button,
845
+ input,
846
+ optgroup,
847
+ select,
848
+ textarea {
849
+ font-family: inherit;
850
+ font-size: 100%;
851
+ line-height: 1.15;
852
+ margin: 0;
853
+ color: inherit;
854
+ }
855
+
856
+ button,
857
+ input {
858
+ overflow: visible;
859
+ }
860
+
861
+ button,
862
+ select {
863
+ text-transform: none;
864
+ }
865
+
866
+ button,
867
+ [type="button"],
868
+ [type="reset"],
869
+ [type="submit"] {
870
+ -webkit-appearance: button;
871
+ }
872
+
873
+ /* Make elements with the HTML hidden attribute stay hidden by default. */
874
+
875
+ [hidden] {
876
+ display: none !important;
877
+ }
878
+
879
+ /* https://web.dev/prefers-reduced-motion/ */
880
+
881
+ @media (prefers-reduced-motion: reduce) {
882
+ *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
883
+ ::before,
884
+ ::after {
885
+ animation-delay: -1ms !important;
886
+ animation-duration: 1ms !important;
887
+ animation-iteration-count: 1 !important;
888
+ background-attachment: initial !important;
889
+ scroll-behavior: auto !important;
890
+ transition-duration: 0s !important;
891
+ transition-delay: 0s !important;
892
+ }
893
+ }
894
+
895
+ /*
896
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
897
+ *
898
+ * Hide only visually, but have it available for screen readers:
899
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
900
+ *
901
+ * 1. For long content, line feeds are not interpreted as spaces and small width
902
+ * causes content to wrap 1 word per line:
903
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
904
+ */
905
+
906
+ .sr-only,
907
+ .navds-sr-only {
908
+ border: 0;
909
+ clip: rect(0, 0, 0, 0);
910
+ clip-path: inset(50%);
911
+ height: 1px;
912
+ margin: -1px;
913
+ overflow: hidden;
914
+ padding: 0;
915
+ position: absolute;
916
+ white-space: nowrap;
917
+ width: 1px;
918
+ }
919
+
920
+ /*
921
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
922
+ *
923
+ * Extends the .sr-only class to allow the element
924
+ * to be focusable when navigated to via the keyboard:
925
+ * https://www.drupal.org/node/897638
926
+ */
927
+
928
+ .sr-only.focusable:active,
929
+ .sr-only.focusable:focus,
930
+ .navds-sr-only.focusable:active,
931
+ .navds-sr-only.focusable:focus {
932
+ clip: auto;
933
+ clip-path: none;
934
+ height: auto;
935
+ margin: 0;
936
+ overflow: visible;
937
+ position: static;
938
+ white-space: inherit;
939
+ width: auto;
940
+ }
941
+
942
+ :root,
943
+ :host,
944
+ [data-theme="light"] {
945
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
946
+
947
+ color: var(--a-text-default);
948
+ }
949
+
1
950
  [data-theme="dark"] {
951
+ --a-shadow-focus: var(--a-shadow-focus-inverted);
952
+
953
+ color: var(--a-text-on-inverted);
2
954
  --__ac-typo-error-text: var(--a-red-300);
3
955
  --__ac-typo-text-subtle: var(--a-gray-300);
4
956
  --__ac-button-primary-text: var(--a-gray-900);
@@ -43,6 +995,13 @@
43
995
  --__ac-search-error-border: var(--a-red-300);
44
996
  }
45
997
 
998
+ body,
999
+ :host {
1000
+ font-family: var(--a-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);
1001
+ line-height: 1.333;
1002
+ font-size: 1.125rem;
1003
+ }
1004
+
46
1005
  [data-theme="light"] {
47
1006
  --__ac-typo-error-text: initial;
48
1007
  --__ac-typo-text-subtle: initial;
@@ -1752,7 +2711,7 @@
1752
2711
  border-bottom: 1px solid var(--a-border-divider);
1753
2712
  }
1754
2713
 
1755
- .navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
2714
+ .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
1756
2715
  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
1757
2716
  }
1758
2717
 
@@ -1829,6 +2788,235 @@
1829
2788
  }
1830
2789
  }
1831
2790
 
2791
+ .navds-action-menu__content {
2792
+ overflow: hidden;
2793
+ box-shadow: var(--a-shadow-medium);
2794
+ border-radius: var(--a-border-radius-large);
2795
+ }
2796
+
2797
+ /* stylelint-disable csstools/value-no-unknown-custom-properties */
2798
+
2799
+ .navds-action-menu__content > .navds-action-menu__content-inner {
2800
+ --__ac-action-menu-content-p: var(--a-spacing-2);
2801
+ --__ac-action-menu-item-pr: var(--a-spacing-3);
2802
+ --__ac-action-menu-item-pl: var(--a-spacing-2);
2803
+ --__ac-action-menu-item-height: 2rem;
2804
+
2805
+ border-radius: var(--a-border-radius-large);
2806
+ background-color: var(--a-surface-default);
2807
+ min-width: 128px;
2808
+ max-width: min(95vw, 640px);
2809
+ transform-origin: var(--__ac-action-menu-content-transform-origin);
2810
+ animation-duration: 160ms;
2811
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
2812
+ padding: var(--__ac-action-menu-content-p);
2813
+ overflow: auto;
2814
+ max-height: var(--__ac-action-menu-content-available-height);
2815
+ }
2816
+
2817
+ .navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
2818
+ animation-name: aksel-action-from-bottom, aksel-action-fade-in;
2819
+ }
2820
+
2821
+ .navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
2822
+ animation-name: aksel-action-from-top, aksel-action-fade-in;
2823
+ }
2824
+
2825
+ .navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
2826
+ animation-name: aksel-action-from-left, aksel-action-fade-in;
2827
+ }
2828
+
2829
+ .navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
2830
+ animation-name: aksel-action-from-right, aksel-action-fade-in;
2831
+ }
2832
+
2833
+ @keyframes aksel-action-from-bottom {
2834
+ from {
2835
+ transform: translateY(-4px);
2836
+ }
2837
+
2838
+ to {
2839
+ transform: translateY(0);
2840
+ }
2841
+ }
2842
+
2843
+ @keyframes aksel-action-from-top {
2844
+ from {
2845
+ transform: translateY(4px);
2846
+ }
2847
+
2848
+ to {
2849
+ transform: translateY(0);
2850
+ }
2851
+ }
2852
+
2853
+ @keyframes aksel-action-from-left {
2854
+ from {
2855
+ transform: translateX(4px);
2856
+ }
2857
+
2858
+ to {
2859
+ transform: translateY(0);
2860
+ }
2861
+ }
2862
+
2863
+ @keyframes aksel-action-from-right {
2864
+ from {
2865
+ transform: translateX(-4px);
2866
+ }
2867
+
2868
+ to {
2869
+ transform: translateY(0);
2870
+ }
2871
+ }
2872
+
2873
+ @keyframes aksel-action-fade-in {
2874
+ from {
2875
+ opacity: 0.01;
2876
+ }
2877
+
2878
+ to {
2879
+ opacity: 1;
2880
+ }
2881
+ }
2882
+
2883
+ .navds-action-menu__item {
2884
+ display: flex;
2885
+ align-items: center;
2886
+ gap: var(--a-spacing-2);
2887
+ min-height: var(--__ac-action-menu-item-height);
2888
+ cursor: default;
2889
+ border-radius: var(--a-border-radius-medium);
2890
+ position: relative;
2891
+ padding-left: var(--__ac-action-menu-item-pl);
2892
+ padding-right: var(--__ac-action-menu-item-pr);
2893
+ font-size: var(--a-font-size-medium);
2894
+ scroll-margin-block: var(--__ac-action-menu-content-p);
2895
+ line-height: 1.5;
2896
+ color: var(--a-text-default);
2897
+ text-decoration: none;
2898
+ }
2899
+
2900
+ .navds-action-menu__item svg {
2901
+ flex-shrink: 0;
2902
+ }
2903
+
2904
+ .navds-action-menu__item--has-icon {
2905
+ --__ac-action-menu-item-pl: var(--a-spacing-6);
2906
+ }
2907
+
2908
+ .navds-action-menu__sub-trigger {
2909
+ --__ac-action-menu-item-pr: var(--a-spacing-05);
2910
+ }
2911
+
2912
+ .navds-action-menu__item:focus {
2913
+ outline: none;
2914
+ background-color: var(--a-surface-action-subtle-hover);
2915
+ color: var(--a-text-default);
2916
+ }
2917
+
2918
+ .navds-action-menu__item--danger {
2919
+ color: var(--a-text-danger);
2920
+ }
2921
+
2922
+ .navds-action-menu__item--danger:focus {
2923
+ background-color: var(--a-surface-danger-subtle);
2924
+ }
2925
+
2926
+ .navds-action-menu__marker {
2927
+ display: flex;
2928
+ align-items: center;
2929
+ gap: var(--a-spacing-1);
2930
+ }
2931
+
2932
+ .navds-action-menu__marker--right {
2933
+ margin-left: auto;
2934
+ padding-left: var(--a-spacing-4);
2935
+ }
2936
+
2937
+ .navds-action-menu__marker--left {
2938
+ position: absolute;
2939
+ left: 0;
2940
+ width: var(--__ac-action-menu-item-pl);
2941
+ display: inline-flex;
2942
+ justify-content: center;
2943
+ }
2944
+
2945
+ .navds-action-menu__marker-icon svg {
2946
+ font-size: 18px;
2947
+ flex-shrink: 0;
2948
+ }
2949
+
2950
+ .navds-action-menu__shortcut {
2951
+ background-color: var(--a-surface-neutral-subtle);
2952
+ color: var(--a-text-default);
2953
+ border-radius: var(--a-border-radius-small);
2954
+ padding: 0 var(--a-spacing-1);
2955
+ min-width: 1.125rem;
2956
+ height: 1.125rem;
2957
+ line-height: 1;
2958
+ display: inline-flex;
2959
+ align-items: center;
2960
+ justify-content: center;
2961
+ font-size: var(--a-font-size-small);
2962
+ }
2963
+
2964
+ .navds-action-menu__label {
2965
+ display: flex;
2966
+ align-items: center;
2967
+ min-height: calc(var(--__ac-action-menu-item-height) - 6px);
2968
+ padding-right: var(--__ac-action-menu-item-pr);
2969
+ padding-left: var(--__ac-action-menu-item-pl);
2970
+ color: var(--a-text-subtle);
2971
+ border-radius: var(--a-border-radius-medium);
2972
+ user-select: none;
2973
+ cursor: default;
2974
+ font-size: var(--a-font-size-small);
2975
+ }
2976
+
2977
+ .navds-action-menu__divider {
2978
+ height: 1px;
2979
+ margin-block: var(--a-spacing-2);
2980
+ background-color: var(--a-border-divider);
2981
+ }
2982
+
2983
+ .navds-action-menu__indicator {
2984
+ display: grid;
2985
+ place-content: center;
2986
+ }
2987
+
2988
+ .navds-action-menu__indicator-icon {
2989
+ font-size: 14px;
2990
+ }
2991
+
2992
+ .navds-action-menu__indicator-icon--unchecked,
2993
+ .navds-action-menu__indicator-icon--checked,
2994
+ .navds-action-menu__indicator-icon--indeterminate {
2995
+ display: none;
2996
+ }
2997
+
2998
+ .navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
2999
+ display: block;
3000
+ }
3001
+
3002
+ .navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
3003
+ display: block;
3004
+ }
3005
+
3006
+ .navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
3007
+ display: block;
3008
+ }
3009
+
3010
+ .navds-action-menu__item:where([aria-disabled="true"]) {
3011
+ color: var(--a-text-subtle);
3012
+ opacity: 0.5;
3013
+ pointer-events: none;
3014
+ }
3015
+
3016
+ .navds-action-menu__sub-trigger:where([data-state="open"]) {
3017
+ background-color: var(--a-surface-neutral-subtle);
3018
+ }
3019
+
1832
3020
  .navds-expansioncard {
1833
3021
  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
1834
3022
  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
@@ -2176,7 +3364,7 @@
2176
3364
  min-width: 0;
2177
3365
  }
2178
3366
 
2179
- .navds-fieldset > :not(:first-child):not(:empty) {
3367
+ .navds-fieldset > :not(:first-child, :empty) {
2180
3368
  margin-top: var(--a-spacing-2);
2181
3369
  }
2182
3370
 
@@ -2190,7 +3378,7 @@
2190
3378
 
2191
3379
  /* Applied when hideLegend is applied to fieldset */
2192
3380
 
2193
- .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
3381
+ .navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
2194
3382
  margin-top: 0;
2195
3383
  }
2196
3384
 
@@ -2783,44 +3971,42 @@
2783
3971
  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
2784
3972
  }
2785
3973
 
2786
- .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
2787
- .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
3974
+ .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
3975
+ .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
2788
3976
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
2789
3977
  }
2790
3978
 
2791
- .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
2792
- .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
3979
+ .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
3980
+ .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
2793
3981
  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
2794
3982
  }
2795
3983
 
2796
- .navds-checkbox--error
2797
- > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2798
- + .navds-checkbox__label::before,
2799
- .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
3984
+ .navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
3985
+ .navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
2800
3986
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2801
3987
  }
2802
3988
 
2803
3989
  .navds-checkbox--error
2804
- > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
3990
+ > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
2805
3991
  + .navds-checkbox__label::before,
2806
- .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
3992
+ .navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
2807
3993
  box-shadow:
2808
3994
  0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2809
3995
  0 0 0 4px var(--a-border-focus);
2810
3996
  }
2811
3997
 
2812
3998
  .navds-checkbox--error
2813
- > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
3999
+ > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
2814
4000
  + .navds-checkbox__label::before,
2815
- .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
4001
+ .navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
2816
4002
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2817
4003
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2818
4004
  }
2819
4005
 
2820
4006
  .navds-checkbox--error
2821
- > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
4007
+ > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
2822
4008
  + .navds-checkbox__label::before,
2823
- .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
4009
+ .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
2824
4010
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2825
4011
  box-shadow:
2826
4012
  0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
@@ -2855,14 +4041,10 @@
2855
4041
  color: var(--a-text-default);
2856
4042
  }
2857
4043
 
2858
- .navds-checkbox--readonly
2859
- > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
2860
- + .navds-checkbox__label::before,
2861
- .navds-checkbox--readonly
2862
- > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
2863
- + .navds-checkbox__label::before,
2864
- .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
2865
- .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
4044
+ .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
4045
+ .navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
4046
+ .navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
4047
+ .navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
2866
4048
  background-color: var(--__ac-radio-checkbox-readonly-bg);
2867
4049
  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2868
4050
  }
@@ -3058,7 +4240,7 @@
3058
4240
  Error handling
3059
4241
  */
3060
4242
 
3061
- .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
4243
+ .navds-select--error > * select:not(:hover, :focus, :disabled) {
3062
4244
  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
3063
4245
  border-color: var(--ac-select-error-border, var(--a-surface-danger));
3064
4246
  }
@@ -3416,19 +4598,19 @@
3416
4598
  Error handling
3417
4599
  */
3418
4600
 
3419
- .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
4601
+ .navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
3420
4602
  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
3421
4603
  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
3422
4604
  }
3423
4605
 
3424
- .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
4606
+ .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
3425
4607
  box-shadow:
3426
4608
  0 0 0 1px var(--a-border-danger),
3427
4609
  var(--a-shadow-focus);
3428
4610
  }
3429
4611
 
3430
4612
  @supports not selector(:focus-visible) {
3431
- .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
4613
+ .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
3432
4614
  box-shadow:
3433
4615
  0 0 0 1px var(--a-border-danger),
3434
4616
  var(--a-shadow-focus);
@@ -3560,13 +4742,13 @@
3560
4742
  Error handling
3561
4743
  */
3562
4744
 
3563
- .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
4745
+ .navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
3564
4746
  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
3565
4747
  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
3566
4748
  }
3567
4749
 
3568
4750
  @supports not selector(:focus-visible) {
3569
- .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
4751
+ .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
3570
4752
  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
3571
4753
  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
3572
4754
  }
@@ -3765,12 +4947,12 @@
3765
4947
 
3766
4948
  /* Error-handling */
3767
4949
 
3768
- .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
4950
+ .navds-search--error .navds-search__input:not(:hover, :disabled) {
3769
4951
  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
3770
4952
  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
3771
4953
  }
3772
4954
 
3773
- .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
4955
+ .navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
3774
4956
  box-shadow:
3775
4957
  inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3776
4958
  var(--a-shadow-focus);
@@ -3785,7 +4967,7 @@
3785
4967
  }
3786
4968
 
3787
4969
  @supports not selector(:focus-visible) {
3788
- .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
4970
+ .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
3789
4971
  box-shadow:
3790
4972
  inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3791
4973
  var(--a-shadow-focus);
@@ -3891,13 +5073,13 @@
3891
5073
  cursor: text;
3892
5074
  }
3893
5075
 
3894
- .navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
5076
+ .navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
3895
5077
  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
3896
5078
  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
3897
5079
  }
3898
5080
 
3899
5081
  .navds-combobox--error
3900
- .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
5082
+ .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
3901
5083
  outline: 2px solid transparent;
3902
5084
  outline-offset: 2px;
3903
5085
  box-shadow:
@@ -4818,8 +6000,9 @@ button.navds-internalheader__title:active,
4818
6000
  /* From polyfill */
4819
6001
  position: fixed;
4820
6002
  top: 0;
4821
- right: 0;
4822
6003
  bottom: 0;
6004
+ right: 0;
6005
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
4823
6006
  left: 0;
4824
6007
  }
4825
6008
 
@@ -4868,8 +6051,9 @@ button.navds-internalheader__title:active,
4868
6051
  /* From polyfill: */
4869
6052
  position: fixed;
4870
6053
  top: 0;
4871
- right: 0;
4872
6054
  bottom: 0;
6055
+ right: 0;
6056
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
4873
6057
  left: 0;
4874
6058
  }
4875
6059
 
@@ -4949,7 +6133,7 @@ button.navds-internalheader__title:active,
4949
6133
  }
4950
6134
 
4951
6135
  @keyframes akselModalFadeIn {
4952
- from {
6136
+ 0% {
4953
6137
  opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
4954
6138
  transform: translate3d(0, calc(5% + 4px), 0);
4955
6139
  }
@@ -4958,7 +6142,7 @@ button.navds-internalheader__title:active,
4958
6142
  opacity: 1;
4959
6143
  }
4960
6144
 
4961
- to {
6145
+ 100% {
4962
6146
  transform: none;
4963
6147
  }
4964
6148
  }
@@ -5213,14 +6397,14 @@ button.navds-internalheader__title:active,
5213
6397
  border-radius: var(--a-border-radius-xlarge);
5214
6398
  }
5215
6399
 
5216
- .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
5217
- .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
6400
+ .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
6401
+ .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
5218
6402
  box-shadow: var(--a-shadow-focus);
5219
6403
  }
5220
6404
 
5221
6405
  @supports not selector(:focus-visible) {
5222
- .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
5223
- .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
6406
+ .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
6407
+ .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
5224
6408
  box-shadow: var(--a-shadow-focus);
5225
6409
  }
5226
6410
  }
@@ -5306,8 +6490,8 @@ button.navds-internalheader__title:active,
5306
6490
  color: var(--ac-date-disabled-text, var(--a-text-subtle));
5307
6491
  }
5308
6492
 
5309
- .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
5310
- .navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
6493
+ .navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
6494
+ .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
5311
6495
  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
5312
6496
  cursor: pointer;
5313
6497
  }
@@ -5341,19 +6525,19 @@ button.navds-internalheader__title:active,
5341
6525
 
5342
6526
  /* Error-handling */
5343
6527
 
5344
- .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
6528
+ .navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
5345
6529
  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
5346
6530
  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
5347
6531
  }
5348
6532
 
5349
- .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
6533
+ .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
5350
6534
  box-shadow:
5351
6535
  inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
5352
6536
  var(--a-shadow-focus);
5353
6537
  }
5354
6538
 
5355
6539
  @supports not selector(:focus-visible) {
5356
- .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
6540
+ .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
5357
6541
  box-shadow:
5358
6542
  inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
5359
6543
  var(--a-shadow-focus);
@@ -6385,7 +7569,7 @@ button.navds-internalheader__title:active,
6385
7569
  }
6386
7570
 
6387
7571
  .navds-toggle-group__button:active {
6388
- background-color: none !important;
7572
+ background-color: unset !important;
6389
7573
  }
6390
7574
 
6391
7575
  .navds-toggle-group__button:focus-visible {
@@ -6928,8 +8112,7 @@ button.navds-stepper__step {
6928
8112
  grid-template-columns:
6929
8113
  [content-start] auto [circle] var(--navds-stepper-circle-size)
6930
8114
  [content-end] auto;
6931
- justify-items: center;
6932
- align-items: center;
8115
+ place-items: center center;
6933
8116
  margin-bottom: 0;
6934
8117
  }
6935
8118
 
@@ -7561,6 +8744,7 @@ _:future,
7561
8744
 
7562
8745
  .navds-list__item-marker--icon {
7563
8746
  font-size: 1.5rem;
8747
+ justify-content: center;
7564
8748
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
7565
8749
  }
7566
8750
 
@@ -7939,8 +9123,7 @@ _:future,
7939
9123
 
7940
9124
  .navds-stack__spacer {
7941
9125
  flex: 1;
7942
- justify-self: stretch;
7943
- align-self: stretch;
9126
+ place-content: stretch stretch;
7944
9127
  }
7945
9128
 
7946
9129
  .navds-stack > .navds-stack__spacer {