@navikt/ds-css 5.5.0 → 5.6.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.
Files changed (29) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/accordion.css +2 -2
  3. package/config/_mappings.js +1 -1
  4. package/date.css +59 -21
  5. package/dist/component/accordion.css +2 -2
  6. package/dist/component/accordion.min.css +1 -1
  7. package/dist/component/date.css +59 -21
  8. package/dist/component/date.min.css +1 -1
  9. package/dist/component/form.css +1 -0
  10. package/dist/component/form.min.css +1 -1
  11. package/dist/component/index.css +230 -138
  12. package/dist/component/index.min.css +3 -33
  13. package/dist/component/primitives.css +175 -112
  14. package/dist/component/primitives.min.css +2 -32
  15. package/dist/component/timeline.css +2 -5
  16. package/dist/component/timeline.min.css +1 -1
  17. package/dist/components.css +239 -140
  18. package/dist/components.min.css +3 -33
  19. package/dist/global/tokens.css +1 -1
  20. package/dist/index.css +230 -138
  21. package/dist/index.min.css +3 -33
  22. package/form/select.css +1 -0
  23. package/package.json +2 -2
  24. package/primitives/bleed.css +87 -0
  25. package/primitives/box.css +33 -75
  26. package/primitives/index.css +1 -0
  27. package/primitives/responsive.css +16 -20
  28. package/primitives/stack.css +38 -17
  29. package/timeline.css +2 -5
package/dist/component/primitives.css CHANGED
@@ -1,19 +1,19 @@
1
1
  .navds-box {
2
2
  --__ac-box-padding-xs: initial;
3
- --__ac-box-padding-sm: initial;
4
- --__ac-box-padding-md: initial;
5
- --__ac-box-padding-lg: initial;
6
- --__ac-box-padding-xl: initial;
7
- --__ac-box-padding-block-xs: initial;
3
+ --__ac-box-padding-sm: var(--__ac-box-padding-xs);
4
+ --__ac-box-padding-md: var(--__ac-box-padding-sm);
5
+ --__ac-box-padding-lg: var(--__ac-box-padding-md);
6
+ --__ac-box-padding-xl: var(--__ac-box-padding-lg);
8
7
  --__ac-box-padding-inline-xs: initial;
9
- --__ac-box-padding-block-sm: initial;
10
- --__ac-box-padding-inline-sm: initial;
11
- --__ac-box-padding-block-md: initial;
12
- --__ac-box-padding-inline-md: initial;
13
- --__ac-box-padding-block-lg: initial;
14
- --__ac-box-padding-inline-lg: initial;
15
- --__ac-box-padding-block-xl: initial;
16
- --__ac-box-padding-inline-xl: initial;
8
+ --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
9
+ --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
10
+ --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
11
+ --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
12
+ --__ac-box-padding-block-xs: initial;
13
+ --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
14
+ --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
15
+ --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
16
+ --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
17
17
  --__ac-box-padding: var(--__ac-box-padding-xs);
18
18
  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
19
19
  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -22,10 +22,10 @@
22
22
  --__ac-box-shadow: initial;
23
23
  --__ac-box-border-width: initial;
24
24
  --__ac-box-border-radius-xs: initial;
25
- --__ac-box-border-radius-sm: initial;
26
- --__ac-box-border-radius-md: initial;
27
- --__ac-box-border-radius-lg: initial;
28
- --__ac-box-border-radius-xl: initial;
25
+ --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
26
+ --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
27
+ --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
28
+ --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
29
29
  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
30
30
 
31
31
  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -40,79 +40,125 @@
40
40
 
41
41
  @media (min-width: 480px) {
42
42
  .navds-box {
43
- --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
44
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
45
- --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
46
- --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
43
+ --__ac-box-padding: var(--__ac-box-padding-sm);
44
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
45
+ --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
46
+ --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
47
47
  }
48
48
  }
49
49
 
50
50
  @media (min-width: 768px) {
51
51
  .navds-box {
52
- --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
53
- --__ac-box-padding-inline: var(
54
- --__ac-box-padding-inline-md,
55
- var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
56
- );
57
- --__ac-box-padding-block: var(
58
- --__ac-box-padding-block-md,
59
- var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
60
- );
61
- --__ac-box-border-radius: var(
62
- --__ac-box-border-radius-md,
63
- var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
64
- );
52
+ --__ac-box-padding: var(--__ac-box-padding-md);
53
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
54
+ --__ac-box-padding-block: var(--__ac-box-padding-block-md);
55
+ --__ac-box-border-radius: var(--__ac-box-border-radius-md);
65
56
  }
66
57
  }
67
58
 
68
59
  @media (min-width: 1024px) {
69
60
  .navds-box {
70
- --__ac-box-padding: var(
71
- --__ac-box-padding-lg,
72
- var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
73
- );
74
- --__ac-box-padding-inline: var(
75
- --__ac-box-padding-inline-lg,
76
- var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
77
- );
78
- --__ac-box-padding-block: var(
79
- --__ac-box-padding-block-lg,
80
- var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
81
- );
82
- --__ac-box-border-radius: var(
83
- --__ac-box-border-radius-lg,
84
- var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
85
- );
61
+ --__ac-box-padding: var(--__ac-box-padding-lg);
62
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
63
+ --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
64
+ --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
86
65
  }
87
66
  }
88
67
 
89
68
  @media (min-width: 1280px) {
90
69
  .navds-box {
91
- --__ac-box-padding: var(
92
- --__ac-box-padding-xl,
93
- var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
94
- );
95
- --__ac-box-padding-inline: var(
96
- --__ac-box-padding-inline-xl,
97
- var(
98
- --__ac-box-padding-inline-lg,
99
- var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
100
- )
101
- );
102
- --__ac-box-padding-block: var(
103
- --__ac-box-padding-block-xl,
104
- var(
105
- --__ac-box-padding-block-lg,
106
- var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
107
- )
108
- );
109
- --__ac-box-border-radius: var(
110
- --__ac-box-border-radius-xl,
111
- var(
112
- --__ac-box-border-radius-lg,
113
- var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
114
- )
115
- );
70
+ --__ac-box-padding: var(--__ac-box-padding-xl);
71
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
72
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
73
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
74
+ }
75
+ }
76
+
77
+ .navds-bleed {
78
+ --__ac-bleed-margin-inline-xs: initial;
79
+ --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
80
+ --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
81
+ --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
82
+ --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
83
+ --__ac-bleed-margin-block-xs: initial;
84
+ --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
85
+ --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
86
+ --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
87
+ --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
88
+
89
+ /** defaults */
90
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
91
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
92
+
93
+ margin-inline: var(--__ac-bleed-margin-inline);
94
+ margin-block: var(--__ac-bleed-margin-block);
95
+ }
96
+
97
+ .navds-bleed--padding {
98
+ --__ac-bleed-padding-inline-xs: initial;
99
+ --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
100
+ --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
101
+ --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
102
+ --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
103
+ --__ac-bleed-padding-block-xs: initial;
104
+ --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
105
+ --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
106
+ --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
107
+ --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
108
+
109
+ /** defaults */
110
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
111
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
112
+
113
+ padding-inline: var(--__ac-bleed-padding-inline);
114
+ padding-block: var(--__ac-bleed-padding-block);
115
+ }
116
+
117
+ @media (min-width: 480px) {
118
+ .navds-bleed {
119
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
120
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
121
+ }
122
+
123
+ .navds-bleed--padding {
124
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
125
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
126
+ }
127
+ }
128
+
129
+ @media (min-width: 768px) {
130
+ .navds-bleed {
131
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
132
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
133
+ }
134
+
135
+ .navds-bleed--padding {
136
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
137
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
138
+ }
139
+ }
140
+
141
+ @media (min-width: 1024px) {
142
+ .navds-bleed {
143
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
144
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
145
+ }
146
+
147
+ .navds-bleed--padding {
148
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
149
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
150
+ }
151
+ }
152
+
153
+ @media (min-width: 1280px) {
154
+ .navds-bleed {
155
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
156
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
157
+ }
158
+
159
+ .navds-bleed--padding {
160
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
161
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
116
162
  }
117
163
  }
118
164
 
@@ -175,16 +221,31 @@
175
221
  }
176
222
 
177
223
  .navds-stack {
178
- --__ac-stack-align: initial;
179
- --__ac-stack-justify: initial;
180
- --__ac-stack-direction: initial;
181
224
  --__ac-stack-wrap: initial;
182
225
  --__ac-stack-gap-xs: initial;
183
- --__ac-stack-gap-sm: initial;
184
- --__ac-stack-gap-md: initial;
185
- --__ac-stack-gap-lg: initial;
186
- --__ac-stack-gap-xl: initial;
226
+ --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
227
+ --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
228
+ --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
229
+ --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
187
230
  --__ac-stack-gap: var(--__ac-stack-gap-xs);
231
+ --__ac-stack-justify-xs: initial;
232
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
233
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
234
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
235
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
236
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
237
+ --__ac-stack-align-xs: initial;
238
+ --__ac-stack-align-sm: var(--__ac-stack-align-xs);
239
+ --__ac-stack-align-md: var(--__ac-stack-align-sm);
240
+ --__ac-stack-align-lg: var(--__ac-stack-align-md);
241
+ --__ac-stack-align-xl: var(--__ac-stack-align-lg);
242
+ --__ac-stack-align: var(--__ac-stack-align-xs);
243
+ --__ac-stack-direction-xs: initial;
244
+ --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
245
+ --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
246
+ --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
247
+ --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
248
+ --__ac-stack-direction: var(--__ac-stack-direction-xs);
188
249
 
189
250
  gap: var(--__ac-stack-gap);
190
251
  display: flex;
@@ -201,87 +262,89 @@
201
262
 
202
263
  .navds-stack > .navds-stack__spacer {
203
264
  margin-block-start: calc(var(--__ac-stack-gap) * -1);
204
- }
205
-
206
- .navds-hstack > .navds-stack__spacer {
207
265
  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
208
266
  }
209
267
 
210
268
  @media (min-width: 480px) {
211
269
  .navds-stack {
212
- --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
270
+ --__ac-stack-gap: var(--__ac-stack-gap-sm);
271
+ --__ac-stack-align: var(--__ac-stack-align-sm);
272
+ --__ac-stack-justify: var(--__ac-stack-justify-sm);
273
+ --__ac-stack-direction: var(--__ac-stack-direction-sm);
213
274
  }
214
275
  }
215
276
 
216
277
  @media (min-width: 768px) {
217
278
  .navds-stack {
218
- --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
279
+ --__ac-stack-gap: var(--__ac-stack-gap-md);
280
+ --__ac-stack-align: var(--__ac-stack-align-md);
281
+ --__ac-stack-justify: var(--__ac-stack-justify-md);
282
+ --__ac-stack-direction: var(--__ac-stack-direction-md);
219
283
  }
220
284
  }
221
285
 
222
286
  @media (min-width: 1024px) {
223
287
  .navds-stack {
224
- --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
288
+ --__ac-stack-gap: var(--__ac-stack-gap-lg);
289
+ --__ac-stack-align: var(--__ac-stack-align-lg);
290
+ --__ac-stack-justify: var(--__ac-stack-justify-lg);
291
+ --__ac-stack-direction: var(--__ac-stack-direction-lg);
225
292
  }
226
293
  }
227
294
 
228
295
  @media (min-width: 1280px) {
229
296
  .navds-stack {
230
- --__ac-stack-gap: var(
231
- --__ac-stack-gap-xl,
232
- var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
233
- );
297
+ --__ac-stack-gap: var(--__ac-stack-gap-xl);
298
+ --__ac-stack-align: var(--__ac-stack-align-xl);
299
+ --__ac-stack-justify: var(--__ac-stack-justify-xl);
300
+ --__ac-stack-direction: var(--__ac-stack-direction-xl);
234
301
  }
235
302
  }
236
303
 
237
- .navds-responsive {
238
- display: none;
239
- }
240
-
241
304
  @media (min-width: 480px) {
242
- .navds-responsive__above--sm {
243
- display: revert;
305
+ .navds-responsive__below--sm {
306
+ display: none !important;
244
307
  }
245
308
  }
246
309
 
247
310
  @media (max-width: 479px) {
248
- .navds-responsive__below--sm {
249
- display: revert;
311
+ .navds-responsive__above--sm {
312
+ display: none !important;
250
313
  }
251
314
  }
252
315
 
253
316
  @media (min-width: 768px) {
254
- .navds-responsive__above--md {
255
- display: revert;
317
+ .navds-responsive__below--md {
318
+ display: none !important;
256
319
  }
257
320
  }
258
321
 
259
322
  @media (max-width: 767px) {
260
- .navds-responsive__below--md {
261
- display: revert;
323
+ .navds-responsive__above--md {
324
+ display: none !important;
262
325
  }
263
326
  }
264
327
 
265
328
  @media (min-width: 1024px) {
266
- .navds-responsive__above--lg {
267
- display: revert;
329
+ .navds-responsive__below--lg {
330
+ display: none !important;
268
331
  }
269
332
  }
270
333
 
271
334
  @media (max-width: 1023px) {
272
- .navds-responsive__below--lg {
273
- display: revert;
335
+ .navds-responsive__above--lg {
336
+ display: none !important;
274
337
  }
275
338
  }
276
339
 
277
340
  @media (min-width: 1280px) {
278
- .navds-responsive__above--xl {
279
- display: revert;
341
+ .navds-responsive__below--xl {
342
+ display: none !important;
280
343
  }
281
344
  }
282
345
 
283
346
  @media (max-width: 1279px) {
284
- .navds-responsive__below--xl {
285
- display: revert;
347
+ .navds-responsive__above--xl {
348
+ display: none !important;
286
349
  }
287
350
  }
package/dist/component/primitives.min.css CHANGED
@@ -1,37 +1,7 @@
1
- .navds-box{--__ac-box-padding-xs:initial;--__ac-box-padding-sm:initial;--__ac-box-padding-md:initial;--__ac-box-padding-lg:initial;--__ac-box-padding-xl:initial;--__ac-box-padding-block-xs:initial;--__ac-box-padding-inline-xs:initial;--__ac-box-padding-block-sm:initial;--__ac-box-padding-inline-sm:initial;--__ac-box-padding-block-md:initial;--__ac-box-padding-inline-md:initial;--__ac-box-padding-block-lg:initial;--__ac-box-padding-inline-lg:initial;--__ac-box-padding-block-xl:initial;--__ac-box-padding-inline-xl:initial;--__ac-box-padding:var(--__ac-box-padding-xs);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xs);--__ac-box-padding-block:var(--__ac-box-padding-block-xs);--__ac-box-background:initial;--__ac-box-border-color:initial;--__ac-box-shadow:initial;--__ac-box-border-width:initial;--__ac-box-border-radius-xs:initial;--__ac-box-border-radius-sm:initial;--__ac-box-border-radius-md:initial;--__ac-box-border-radius-lg:initial;--__ac-box-border-radius-xl:initial;--__ac-box-border-radius:var(--__ac-box-border-radius-xs);background-color:var(--__ac-box-background);border-color:var(--__ac-box-border-color);border-radius:var(--__ac-box-border-radius);border-style:solid;border-width:var(--__ac-box-border-width,0);box-shadow:var(--__ac-box-shadow);padding-block:var(--__ac-box-padding-block,var(--__ac-box-padding));padding-inline:var(--__ac-box-padding-inline,var(--__ac-box-padding))}@media (min-width:480px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-sm,var(--__ac-box-padding-xs));--__ac-box-padding-inline:var(--__ac-box-padding-inline-sm,var(--__ac-box-padding-inline-xs));--__ac-box-padding-block:var(--__ac-box-padding-block-sm,var(--__ac-box-padding-block-xs));--__ac-box-border-radius:var(--__ac-box-border-radius-sm,var(--__ac-box-border-radius-xs))}}@media (min-width:768px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-md,var(--__ac-box-padding-sm,var(--__ac-box-padding-xs)));--__ac-box-padding-inline:var(
2
- --__ac-box-padding-inline-md,var(--__ac-box-padding-inline-sm,var(--__ac-box-padding-inline-xs))
3
- );--__ac-box-padding-block:var(
4
- --__ac-box-padding-block-md,var(--__ac-box-padding-block-sm,var(--__ac-box-padding-block-xs))
5
- );--__ac-box-border-radius:var(
6
- --__ac-box-border-radius-md,var(--__ac-box-border-radius-sm,var(--__ac-box-border-radius-xs))
7
- )}}@media (min-width:1024px){.navds-box{--__ac-box-padding:var(
8
- --__ac-box-padding-lg,var(--__ac-box-padding-md,var(--__ac-box-padding-sm,var(--__ac-box-padding-xs)))
9
- );--__ac-box-padding-inline:var(
10
- --__ac-box-padding-inline-lg,var(--__ac-box-padding-inline-md,var(--__ac-box-padding-inline-sm,var(--__ac-box-padding-inline-xs)))
11
- );--__ac-box-padding-block:var(
12
- --__ac-box-padding-block-lg,var(--__ac-box-padding-block-md,var(--__ac-box-padding-block-sm,var(--__ac-box-padding-block-xs)))
13
- );--__ac-box-border-radius:var(
14
- --__ac-box-border-radius-lg,var(--__ac-box-border-radius-md,var(--__ac-box-border-radius-sm,var(--__ac-box-border-radius-xs)))
15
- )}}@media (min-width:1280px){.navds-box{--__ac-box-padding:var(
16
- --__ac-box-padding-xl,var(--__ac-box-padding-lg,var(--__ac-box-padding-md,var(--__ac-box-padding-sm,var(--__ac-box-padding-xs))))
17
- );--__ac-box-padding-inline:var(
18
- --__ac-box-padding-inline-xl,var(
19
- --__ac-box-padding-inline-lg,var(--__ac-box-padding-inline-md,var(--__ac-box-padding-inline-sm,var(--__ac-box-padding-inline-xs)))
20
- )
21
- );--__ac-box-padding-block:var(
22
- --__ac-box-padding-block-xl,var(
23
- --__ac-box-padding-block-lg,var(--__ac-box-padding-block-md,var(--__ac-box-padding-block-sm,var(--__ac-box-padding-block-xs)))
24
- )
25
- );--__ac-box-border-radius:var(
26
- --__ac-box-border-radius-xl,var(
27
- --__ac-box-border-radius-lg,var(--__ac-box-border-radius-md,var(--__ac-box-border-radius-sm,var(--__ac-box-border-radius-xs)))
28
- )
29
- )}}.navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);--__ac-hgrid-align:initial;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
1
+ .navds-box{--__ac-box-padding-xs:initial;--__ac-box-padding-sm:var(--__ac-box-padding-xs);--__ac-box-padding-md:var(--__ac-box-padding-sm);--__ac-box-padding-lg:var(--__ac-box-padding-md);--__ac-box-padding-xl:var(--__ac-box-padding-lg);--__ac-box-padding-inline-xs:initial;--__ac-box-padding-inline-sm:var(--__ac-box-padding-inline-xs);--__ac-box-padding-inline-md:var(--__ac-box-padding-inline-sm);--__ac-box-padding-inline-lg:var(--__ac-box-padding-inline-md);--__ac-box-padding-inline-xl:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block-xs:initial;--__ac-box-padding-block-sm:var(--__ac-box-padding-block-xs);--__ac-box-padding-block-md:var(--__ac-box-padding-block-sm);--__ac-box-padding-block-lg:var(--__ac-box-padding-block-md);--__ac-box-padding-block-xl:var(--__ac-box-padding-block-lg);--__ac-box-padding:var(--__ac-box-padding-xs);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xs);--__ac-box-padding-block:var(--__ac-box-padding-block-xs);--__ac-box-background:initial;--__ac-box-border-color:initial;--__ac-box-shadow:initial;--__ac-box-border-width:initial;--__ac-box-border-radius-xs:initial;--__ac-box-border-radius-sm:var(--__ac-box-border-radius-xs);--__ac-box-border-radius-md:var(--__ac-box-border-radius-sm);--__ac-box-border-radius-lg:var(--__ac-box-border-radius-md);--__ac-box-border-radius-xl:var(--__ac-box-border-radius-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-xs);background-color:var(--__ac-box-background);border-color:var(--__ac-box-border-color);border-radius:var(--__ac-box-border-radius);border-style:solid;border-width:var(--__ac-box-border-width,0);box-shadow:var(--__ac-box-shadow);padding-block:var(--__ac-box-padding-block,var(--__ac-box-padding));padding-inline:var(--__ac-box-padding-inline,var(--__ac-box-padding))}@media (min-width:480px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-sm);--__ac-box-padding-inline:var(--__ac-box-padding-inline-sm);--__ac-box-padding-block:var(--__ac-box-padding-block-sm);--__ac-box-border-radius:var(--__ac-box-border-radius-sm)}}@media (min-width:768px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-md);--__ac-box-padding-inline:var(--__ac-box-padding-inline-md);--__ac-box-padding-block:var(--__ac-box-padding-block-md);--__ac-box-border-radius:var(--__ac-box-border-radius-md)}}@media (min-width:1024px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-lg);--__ac-box-padding-inline:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block:var(--__ac-box-padding-block-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-lg)}}@media (min-width:1280px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-xl);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xl);--__ac-box-padding-block:var(--__ac-box-padding-block-xl);--__ac-box-border-radius:var(--__ac-box-border-radius-xl)}}.navds-bleed{--__ac-bleed-margin-inline-xs:initial;--__ac-bleed-margin-inline-sm:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-inline-md:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-inline-lg:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-inline-xl:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block-xs:initial;--__ac-bleed-margin-block-sm:var(--__ac-bleed-margin-block-xs);--__ac-bleed-margin-block-md:var(--__ac-bleed-margin-block-sm);--__ac-bleed-margin-block-lg:var(--__ac-bleed-margin-block-md);--__ac-bleed-margin-block-xl:var(--__ac-bleed-margin-block-lg);--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xs);margin-block:var(--__ac-bleed-margin-block);margin-inline:var(--__ac-bleed-margin-inline)}.navds-bleed--padding{--__ac-bleed-padding-inline-xs:initial;--__ac-bleed-padding-inline-sm:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-inline-md:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-inline-lg:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-inline-xl:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block-xs:initial;--__ac-bleed-padding-block-sm:var(--__ac-bleed-padding-block-xs);--__ac-bleed-padding-block-md:var(--__ac-bleed-padding-block-sm);--__ac-bleed-padding-block-lg:var(--__ac-bleed-padding-block-md);--__ac-bleed-padding-block-xl:var(--__ac-bleed-padding-block-lg);--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xs);padding-block:var(--__ac-bleed-padding-block);padding-inline:var(--__ac-bleed-padding-inline)}@media (min-width:480px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-sm)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-sm)}}@media (min-width:768px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-md)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-md)}}@media (min-width:1024px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-lg)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-lg)}}@media (min-width:1280px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xl);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xl)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xl);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xl)}}.navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);--__ac-hgrid-align:initial;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
30
2
  --__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)))
31
3
  );--__ac-hgrid-gap:var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))}}@media (min-width:1280px){.navds-hgrid{--__ac-hgrid-columns:var(
32
4
  --__ac-hgrid-columns-xl,var(--__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs))))
33
5
  );--__ac-hgrid-gap:var(
34
6
  --__ac-hgrid-gap-xl,var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))
35
- )}}.navds-stack{--__ac-stack-align:initial;--__ac-stack-justify:initial;--__ac-stack-direction:initial;--__ac-stack-wrap:initial;--__ac-stack-gap-xs:initial;--__ac-stack-gap-sm:initial;--__ac-stack-gap-md:initial;--__ac-stack-gap-lg:initial;--__ac-stack-gap-xl:initial;--__ac-stack-gap:var(--__ac-stack-gap-xs);align-items:var(--__ac-stack-align);display:flex;flex-flow:var(--__ac-stack-direction) var(--__ac-stack-wrap);gap:var(--__ac-stack-gap);justify-content:var(--__ac-stack-justify)}.navds-stack__spacer{align-self:stretch;flex:1;justify-self:stretch}.navds-stack>.navds-stack__spacer{-webkit-margin-before:calc(var(--__ac-stack-gap)*-1);margin-block-start:calc(var(--__ac-stack-gap)*-1)}.navds-hstack>.navds-stack__spacer{-webkit-margin-start:calc(var(--__ac-stack-gap)*-1);margin-inline-start:calc(var(--__ac-stack-gap)*-1)}@media (min-width:480px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-sm,var(--__ac-stack-gap-xs))}}@media (min-width:768px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-md,var(--__ac-stack-gap-sm,var(--__ac-stack-gap-xs)))}}@media (min-width:1024px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-lg,var(--__ac-stack-gap-md,var(--__ac-stack-gap-sm,var(--__ac-stack-gap-xs))))}}@media (min-width:1280px){.navds-stack{--__ac-stack-gap:var(
36
- --__ac-stack-gap-xl,var(--__ac-stack-gap-lg,var(--__ac-stack-gap-md,var(--__ac-stack-gap-sm,var(--__ac-stack-gap-xs))))
37
- )}}.navds-responsive{display:none}@media (min-width:480px){.navds-responsive__above--sm{display:revert}}@media (max-width:479px){.navds-responsive__below--sm{display:revert}}@media (min-width:768px){.navds-responsive__above--md{display:revert}}@media (max-width:767px){.navds-responsive__below--md{display:revert}}@media (min-width:1024px){.navds-responsive__above--lg{display:revert}}@media (max-width:1023px){.navds-responsive__below--lg{display:revert}}@media (min-width:1280px){.navds-responsive__above--xl{display:revert}}@media (max-width:1279px){.navds-responsive__below--xl{display:revert}}
7
+ )}}.navds-stack{--__ac-stack-wrap:initial;--__ac-stack-gap-xs:initial;--__ac-stack-gap-sm:var(--__ac-stack-gap-xs);--__ac-stack-gap-md:var(--__ac-stack-gap-sm);--__ac-stack-gap-lg:var(--__ac-stack-gap-md);--__ac-stack-gap-xl:var(--__ac-stack-gap-lg);--__ac-stack-gap:var(--__ac-stack-gap-xs);--__ac-stack-justify-xs:initial;--__ac-stack-justify-sm:var(--__ac-stack-justify-xs);--__ac-stack-justify-md:var(--__ac-stack-justify-sm);--__ac-stack-justify-lg:var(--__ac-stack-justify-md);--__ac-stack-justify-xl:var(--__ac-stack-justify-lg);--__ac-stack-justify:var(--__ac-stack-justify-xs);--__ac-stack-align-xs:initial;--__ac-stack-align-sm:var(--__ac-stack-align-xs);--__ac-stack-align-md:var(--__ac-stack-align-sm);--__ac-stack-align-lg:var(--__ac-stack-align-md);--__ac-stack-align-xl:var(--__ac-stack-align-lg);--__ac-stack-align:var(--__ac-stack-align-xs);--__ac-stack-direction-xs:initial;--__ac-stack-direction-sm:var(--__ac-stack-direction-xs);--__ac-stack-direction-md:var(--__ac-stack-direction-sm);--__ac-stack-direction-lg:var(--__ac-stack-direction-md);--__ac-stack-direction-xl:var(--__ac-stack-direction-lg);--__ac-stack-direction:var(--__ac-stack-direction-xs);align-items:var(--__ac-stack-align);display:flex;flex-flow:var(--__ac-stack-direction) var(--__ac-stack-wrap);gap:var(--__ac-stack-gap);justify-content:var(--__ac-stack-justify)}.navds-stack__spacer{align-self:stretch;flex:1;justify-self:stretch}.navds-stack>.navds-stack__spacer{-webkit-margin-before:calc(var(--__ac-stack-gap)*-1);-webkit-margin-start:calc(var(--__ac-stack-gap)*-1);margin-block-start:calc(var(--__ac-stack-gap)*-1);margin-inline-start:calc(var(--__ac-stack-gap)*-1)}@media (min-width:480px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-sm);--__ac-stack-align:var(--__ac-stack-align-sm);--__ac-stack-justify:var(--__ac-stack-justify-sm);--__ac-stack-direction:var(--__ac-stack-direction-sm)}}@media (min-width:768px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-md);--__ac-stack-align:var(--__ac-stack-align-md);--__ac-stack-justify:var(--__ac-stack-justify-md);--__ac-stack-direction:var(--__ac-stack-direction-md)}}@media (min-width:1024px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-lg);--__ac-stack-align:var(--__ac-stack-align-lg);--__ac-stack-justify:var(--__ac-stack-justify-lg);--__ac-stack-direction:var(--__ac-stack-direction-lg)}}@media (min-width:1280px){.navds-stack{--__ac-stack-gap:var(--__ac-stack-gap-xl);--__ac-stack-align:var(--__ac-stack-align-xl);--__ac-stack-justify:var(--__ac-stack-justify-xl);--__ac-stack-direction:var(--__ac-stack-direction-xl)}}@media (min-width:480px){.navds-responsive__below--sm{display:none!important}}@media (max-width:479px){.navds-responsive__above--sm{display:none!important}}@media (min-width:768px){.navds-responsive__below--md{display:none!important}}@media (max-width:767px){.navds-responsive__above--md{display:none!important}}@media (min-width:1024px){.navds-responsive__below--lg{display:none!important}}@media (max-width:1023px){.navds-responsive__above--lg{display:none!important}}@media (min-width:1280px){.navds-responsive__below--xl{display:none!important}}@media (max-width:1279px){.navds-responsive__above--xl{display:none!important}}
package/dist/component/timeline.css CHANGED
@@ -337,17 +337,14 @@
337
337
  box-shadow: var(--a-shadow-medium);
338
338
  border: 1px solid;
339
339
  border-color: var(--ac-popover-border, var(--a-border-default));
340
- border-radius: var(--a-border-radius-medium);
340
+ border-radius: var(--a-border-radius-large);
341
+ padding: var(--a-spacing-3);
341
342
  }
342
343
 
343
344
  .navds-timeline__popover:focus {
344
345
  outline: none;
345
346
  }
346
347
 
347
- .navds-timeline__popover-content {
348
- padding: var(--a-spacing-3);
349
- }
350
-
351
348
  .navds-timeline__popover-arrow {
352
349
  position: absolute;
353
350
  z-index: -1;
package/dist/component/timeline.min.css CHANGED
@@ -1 +1 @@
1
- .navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:content-box;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{--navdsc-timeline-pin-size:0.9rem;display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(88% - var(--navdsc-timeline-pin-size));margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-medium);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-content{padding:var(--a-spacing-3)}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:transparent;border-top-color:transparent}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:transparent;border-top-color:transparent}
1
+ .navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:content-box;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{--navdsc-timeline-pin-size:0.9rem;display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(88% - var(--navdsc-timeline-pin-size));margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:transparent;border-top-color:transparent}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:transparent;border-top-color:transparent}