@knime/kds-components 0.31.2 → 0.31.4

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 (67) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/index.css +362 -358
  3. package/dist/index.js +546 -578
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/accessories/Avatar/KdsAvatar.vue.d.ts.map +1 -1
  6. package/dist/src/accessories/Badge/enums.d.ts +1 -1
  7. package/dist/src/accessories/ColorSwatch/KdsColorSwatch.vue.d.ts.map +1 -1
  8. package/dist/src/accessories/Icon/KdsDataType.vue.d.ts.map +1 -1
  9. package/dist/src/accessories/InlineMessage/KdsInlineMessage.vue.d.ts +16 -1
  10. package/dist/src/accessories/InlineMessage/KdsInlineMessage.vue.d.ts.map +1 -1
  11. package/dist/src/accessories/InlineMessage/enums.d.ts +1 -1
  12. package/dist/src/accessories/LiveStatus/KdsLiveStatus.vue.d.ts.map +1 -1
  13. package/dist/src/accessories/ProgressBar/KdsProgressBar.vue.d.ts.map +1 -1
  14. package/dist/src/buttons/BaseButton.vue.d.ts.map +1 -1
  15. package/dist/src/buttons/KdsProgressButton/enums.d.ts +1 -1
  16. package/dist/src/buttons/links/KdsLink/KdsLink.vue.d.ts.map +1 -1
  17. package/dist/src/containers/FileExplorer/FileExplorerItem.vue.d.ts +10 -10
  18. package/dist/src/containers/FileExplorer/FileExplorerItem.vue.d.ts.map +1 -1
  19. package/dist/src/containers/FileExplorer/FileExplorerItemBack.vue.d.ts.map +1 -1
  20. package/dist/src/containers/FileExplorer/KdsFileExplorer.vue.d.ts +10 -10
  21. package/dist/src/containers/FileExplorer/enums.d.ts +1 -1
  22. package/dist/src/containers/ListItem/KdsListItem/KdsListItem.vue.d.ts.map +1 -1
  23. package/dist/src/containers/ListItem/KdsListItemButton/KdsListItemButton.vue.d.ts.map +1 -1
  24. package/dist/src/containers/ListItem/ListItemSectionTitle/ListItemSectionTitle.vue.d.ts.map +1 -1
  25. package/dist/src/containers/MenuContainer/KdsMenuItem.vue.d.ts +2 -2
  26. package/dist/src/forms/Checkbox/BaseCheckbox.vue.d.ts.map +1 -1
  27. package/dist/src/forms/RadioButton/ValueSwitchItem.vue.d.ts.map +1 -1
  28. package/dist/src/forms/_helper/BaseFieldsetWrapper.vue.d.ts.map +1 -1
  29. package/dist/src/forms/_helper/InfoPopover/KdsInfoToggleButton.vue.d.ts.map +1 -1
  30. package/dist/src/forms/_helper/KdsLabel.vue.d.ts.map +1 -1
  31. package/dist/src/forms/_helper/VariablePopover/KdsVariableToggleButton.vue.d.ts.map +1 -1
  32. package/dist/src/forms/inputs/BaseInput.vue.d.ts +2 -2
  33. package/dist/src/forms/inputs/DateInput/KdsDateInput.vue.d.ts +5 -5
  34. package/dist/src/forms/inputs/DateTimeInput/KdsDateTimeInput.vue.d.ts +25 -25
  35. package/dist/src/forms/inputs/IntervalInput/KdsIntervalInput.vue.d.ts +5 -5
  36. package/dist/src/forms/inputs/NumberInput/KdsNumberInput.vue.d.ts +5 -5
  37. package/dist/src/forms/inputs/PasswordInput/KdsPasswordInput.vue.d.ts +5 -5
  38. package/dist/src/forms/inputs/PatternInput/KdsPatternInput.vue.d.ts +5 -5
  39. package/dist/src/forms/inputs/SearchInput/KdsSearchInput.vue.d.ts +9 -5
  40. package/dist/src/forms/inputs/SearchInput/KdsSearchInput.vue.d.ts.map +1 -1
  41. package/dist/src/forms/inputs/SearchInput/types.d.ts +9 -3
  42. package/dist/src/forms/inputs/SearchInput/types.d.ts.map +1 -1
  43. package/dist/src/forms/inputs/TextInput/KdsTextInput.vue.d.ts +5 -5
  44. package/dist/src/forms/inputs/TimeInput/KdsTimeInput.vue.d.ts +20 -20
  45. package/dist/src/forms/inputs/TimeInput/TimePicker.vue.d.ts +15 -15
  46. package/dist/src/forms/inputs/UsernameInput/KdsUsernameInput.vue.d.ts +5 -5
  47. package/dist/src/forms/inputs/UsernameInput/enums.d.ts +1 -1
  48. package/dist/src/forms/inputs/ZonedDateTimeInput/KdsZonedDateTimeInput.vue.d.ts +25 -25
  49. package/dist/src/forms/selects/Dropdown/DropdownContainer.vue.d.ts +5 -5
  50. package/dist/src/forms/selects/Dropdown/KdsDropdown.vue.d.ts +5 -5
  51. package/dist/src/forms/selects/Dropdown/KdsMultiSelectDropdown.vue.d.ts +5 -5
  52. package/dist/src/forms/selects/Dropdown/MultiSelectDropdownContainer.vue.d.ts +5 -5
  53. package/dist/src/forms/selects/TwinList/enums.d.ts +1 -1
  54. package/dist/src/layouts/Breadcrumb/BreadcrumbItem.vue.d.ts +1 -3
  55. package/dist/src/layouts/Breadcrumb/BreadcrumbItem.vue.d.ts.map +1 -1
  56. package/dist/src/layouts/LoadingSkeleton/enums.d.ts +4 -3
  57. package/dist/src/layouts/LoadingSkeleton/enums.d.ts.map +1 -1
  58. package/dist/src/layouts/Navigation/KdsNavItem/KdsNavItem.vue.d.ts.map +1 -1
  59. package/dist/src/layouts/Panel/KdsPanel.vue.d.ts.map +1 -1
  60. package/dist/src/layouts/Panel/enums.d.ts +2 -1
  61. package/dist/src/layouts/Panel/enums.d.ts.map +1 -1
  62. package/dist/src/layouts/Panel/types.d.ts +1 -1
  63. package/dist/src/layouts/TabBar/KdsTabBar.vue.d.ts.map +1 -1
  64. package/dist/src/overlays/Modal/KdsModal.vue.d.ts +2 -2
  65. package/dist/src/overlays/Modal/KdsModalLayout.vue.d.ts.map +1 -1
  66. package/dist/src/overlays/Popover/enums.d.ts +1 -1
  67. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,36 +1,6 @@
1
- .kds-tooltip {
2
- inset: auto auto anchor(top);
3
- justify-self: anchor-center;
4
- max-width: var(--kds-dimension-component-width-16x);
5
- padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-5x);
6
- margin: var(--kds-spacing-container-0-25x) 0
7
- var(--kds-spacing-container-0-25x) 0;
8
- position-try-fallbacks:
9
- --kds-tooltip-try-bottom-center, --kds-tooltip-try-top-center;
10
- font: var(--kds-font-base-subtext-small);
11
- color: var(--kds-color-tooltip-text-and-icon-neutral);
12
- overflow-wrap: anywhere;
13
- white-space: pre-line;
14
- background-color: var(--kds-color-tooltip-background-default);
15
- border: none;
16
- border-radius: var(--kds-border-radius-container-0-37x);
17
- box-shadow: var(--kds-elevation-level-3);
18
- }
19
-
20
- @position-try --kds-tooltip-try-top-center {
21
- inset: auto auto anchor(top);
22
- margin: var(--kds-spacing-container-0-25x) 0
23
- var(--kds-spacing-container-0-25x) 0;
24
- }
25
-
26
- @position-try --kds-tooltip-try-bottom-center {
27
- inset: anchor(bottom) auto auto;
28
- margin: var(--kds-spacing-container-0-25x) 0
29
- var(--kds-spacing-container-0-25x) 0;
30
- }
31
1
 
32
2
  .kds-avatar {
33
- &[data-v-ab63cc85] {
3
+ &[data-v-9e1a5abe] {
34
4
  display: inline-block;
35
5
  flex-shrink: 0;
36
6
  aspect-ratio: 1 / 1;
@@ -40,75 +10,75 @@
40
10
  outline-offset: -1px;
41
11
  border-radius: var(--kds-border-radius-container-pill);
42
12
  }
43
- &.small[data-v-ab63cc85] {
13
+ &.small[data-v-9e1a5abe] {
44
14
  inline-size: var(--kds-dimension-icon-0-75x);
45
15
  block-size: var(--kds-dimension-icon-0-75x);
46
16
  }
47
- &.medium[data-v-ab63cc85] {
17
+ &.medium[data-v-9e1a5abe] {
48
18
  inline-size: var(--kds-dimension-icon-1x);
49
19
  block-size: var(--kds-dimension-icon-1x);
50
20
  }
51
- &.large[data-v-ab63cc85] {
21
+ &.large[data-v-9e1a5abe] {
52
22
  inline-size: var(--kds-dimension-component-width-1-25x);
53
23
  block-size: var(--kds-dimension-component-height-1-25x);
54
24
  }
55
- &.xlarge[data-v-ab63cc85] {
25
+ &.xlarge[data-v-9e1a5abe] {
56
26
  inline-size: var(--kds-dimension-component-width-1-5x);
57
27
  block-size: var(--kds-dimension-component-height-1-5x);
58
28
  }
59
- &[data-color="red"][data-v-ab63cc85] {
29
+ &[data-color="red"][data-v-9e1a5abe] {
60
30
  color: var(--kds-color-avatar-text-and-icon-red);
61
31
  background: var(--kds-color-avatar-background-red);
62
32
  }
63
- &[data-color="orange"][data-v-ab63cc85] {
33
+ &[data-color="orange"][data-v-9e1a5abe] {
64
34
  color: var(--kds-color-avatar-text-and-icon-orange);
65
35
  background: var(--kds-color-avatar-background-orange);
66
36
  }
67
- &[data-color="yellow"][data-v-ab63cc85] {
37
+ &[data-color="yellow"][data-v-9e1a5abe] {
68
38
  color: var(--kds-color-avatar-text-and-icon-yellow);
69
39
  background: var(--kds-color-avatar-background-yellow);
70
40
  }
71
- &[data-color="green"][data-v-ab63cc85] {
41
+ &[data-color="green"][data-v-9e1a5abe] {
72
42
  color: var(--kds-color-avatar-text-and-icon-green);
73
43
  background: var(--kds-color-avatar-background-green);
74
44
  }
75
- &[data-color="teal"][data-v-ab63cc85] {
45
+ &[data-color="teal"][data-v-9e1a5abe] {
76
46
  color: var(--kds-color-avatar-text-and-icon-teal);
77
47
  background: var(--kds-color-avatar-background-teal);
78
48
  }
79
- &[data-color="blue"][data-v-ab63cc85] {
49
+ &[data-color="blue"][data-v-9e1a5abe] {
80
50
  color: var(--kds-color-avatar-text-and-icon-blue);
81
51
  background: var(--kds-color-avatar-background-blue);
82
52
  }
83
- &[data-color="purple"][data-v-ab63cc85] {
53
+ &[data-color="purple"][data-v-9e1a5abe] {
84
54
  color: var(--kds-color-avatar-text-and-icon-purple);
85
55
  background: var(--kds-color-avatar-background-purple);
86
56
  }
87
- &[data-color="aquamarine"][data-v-ab63cc85] {
57
+ &[data-color="aquamarine"][data-v-9e1a5abe] {
88
58
  color: var(--kds-color-avatar-text-and-icon-aquamarine);
89
59
  background: var(--kds-color-avatar-background-aquamarine);
90
60
  }
91
- &[data-color="grassgreen"][data-v-ab63cc85] {
61
+ &[data-color="grassgreen"][data-v-9e1a5abe] {
92
62
  color: var(--kds-color-avatar-text-and-icon-grassgreen);
93
63
  background: var(--kds-color-avatar-background-grassgreen);
94
64
  }
95
- &[data-color="brown"][data-v-ab63cc85] {
65
+ &[data-color="brown"][data-v-9e1a5abe] {
96
66
  color: var(--kds-color-avatar-text-and-icon-brown);
97
67
  background: var(--kds-color-avatar-background-brown);
98
68
  }
99
- &[data-color="empty"][data-v-ab63cc85] {
69
+ &[data-color="empty"][data-v-9e1a5abe] {
100
70
  color: transparent;
101
71
  background-color: var(--kds-color-avatar-background-empty);
102
72
  }
103
73
  }
104
- .kds-avatar-image[data-v-ab63cc85] {
74
+ .kds-avatar-image[data-v-9e1a5abe] {
105
75
  display: block;
106
76
  inline-size: 100%;
107
77
  block-size: 100%;
108
78
  object-fit: cover;
109
79
  object-position: center;
110
80
  }
111
- .kds-avatar-initials[data-v-ab63cc85] {
81
+ .kds-avatar-initials[data-v-9e1a5abe] {
112
82
  display: flex;
113
83
  align-items: center;
114
84
  justify-content: center;
@@ -119,7 +89,7 @@
119
89
  color: inherit;
120
90
  user-select: none;
121
91
  }
122
- .kds-avatar-initials > span[data-v-ab63cc85] {
92
+ .kds-avatar-initials > span[data-v-9e1a5abe] {
123
93
  font-size: calc(1em + calc(100cqi - 2em) / 2);
124
94
  }
125
95
 
@@ -180,7 +150,7 @@
180
150
  color: var(--kds-color-text-and-icon-disabled);
181
151
  }
182
152
  .kds-icon {
183
- &[data-v-667bceea] {
153
+ &[data-v-38e9537f] {
184
154
  --icon-width: var(--kds-dimension-icon-1x);
185
155
  --icon-height: var(--kds-dimension-icon-1x);
186
156
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -194,24 +164,24 @@
194
164
  vertical-align: middle;
195
165
  stroke-width: var(--icon-stroke-width);
196
166
  }
197
- &.xsmall[data-v-667bceea] {
167
+ &.xsmall[data-v-38e9537f] {
198
168
  --icon-width: var(--kds-dimension-icon-0-56x);
199
169
  --icon-height: var(--kds-dimension-icon-0-56x);
200
170
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
201
171
  }
202
- &.small[data-v-667bceea] {
172
+ &.small[data-v-38e9537f] {
203
173
  --icon-width: var(--kds-dimension-icon-0-75x);
204
174
  --icon-height: var(--kds-dimension-icon-0-75x);
205
175
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
206
176
  }
207
- &.large[data-v-667bceea] {
177
+ &.large[data-v-38e9537f] {
208
178
  --icon-width: var(--kds-dimension-icon-1-25x);
209
179
  --icon-height: var(--kds-dimension-icon-1-25x);
210
180
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
211
181
  }
212
182
  }
213
183
  .kds-data-type-icon-container {
214
- &[data-v-667bceea] {
184
+ &[data-v-38e9537f] {
215
185
  --data-type-height: var(--kds-dimension-component-height-1x);
216
186
  --data-type-width: var(--kds-dimension-component-width-1x);
217
187
  --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -229,23 +199,23 @@
229
199
 
230
200
  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
231
201
  }
232
- &.disabled[data-v-667bceea] {
202
+ &.disabled[data-v-38e9537f] {
233
203
  color: var(--kds-color-text-and-icon-disabled);
234
204
  }
235
- &.small[data-v-667bceea] {
205
+ &.small[data-v-38e9537f] {
236
206
  --data-type-height: var(--kds-dimension-icon-0-75x);
237
207
  --data-type-width: var(--kds-dimension-icon-0-75x);
238
208
  --data-type-padding: var(--kds-spacing-container-none);
239
209
  }
240
- &.large[data-v-667bceea] {
210
+ &.large[data-v-38e9537f] {
241
211
  --data-type-height: var(--kds-dimension-component-height-1-25x);
242
212
  --data-type-width: var(--kds-dimension-component-width-1-25x);
243
213
  }
244
214
  & .kds-icon.kds-data-type-icon {
245
- &.small[data-v-667bceea] {
215
+ &.small[data-v-38e9537f] {
246
216
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
247
217
  }
248
- &.medium[data-v-667bceea] {
218
+ &.medium[data-v-38e9537f] {
249
219
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
250
220
  }
251
221
  }
@@ -310,7 +280,7 @@
310
280
  }
311
281
 
312
282
  .kds-progress-bar {
313
- &[data-v-06930dc4] {
283
+ &[data-v-884d689a] {
314
284
  --progress-bar-background-color: var(--kds-color-surface-subtle);
315
285
  --progress-bar-foreground-color: var(
316
286
  --kds-color-background-primary-bold-initial
@@ -328,7 +298,7 @@
328
298
 
329
299
  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
330
300
  }
331
- & .progress[data-v-06930dc4] {
301
+ & .progress[data-v-884d689a] {
332
302
  display: block;
333
303
  width: 100%;
334
304
  height: var(--progress-bar-height);
@@ -341,44 +311,44 @@
341
311
  border: none;
342
312
  border-radius: var(--progress-bar-radius);
343
313
  }
344
- & .progress[data-v-06930dc4]::-webkit-progress-bar {
314
+ & .progress[data-v-884d689a]::-webkit-progress-bar {
345
315
  background-color: var(--progress-bar-background-color);
346
316
  }
347
- & .progress[data-v-06930dc4]::-webkit-progress-value {
317
+ & .progress[data-v-884d689a]::-webkit-progress-value {
348
318
  background-color: var(--progress-bar-foreground-color);
349
319
  border-radius: var(--progress-bar-radius);
350
320
  transition: width var(--progress-bar-transition-duration, 0.5s);
351
321
  }
352
- & .progress[data-v-06930dc4]::-moz-progress-bar {
322
+ & .progress[data-v-884d689a]::-moz-progress-bar {
353
323
  background-color: var(--progress-bar-foreground-color);
354
324
  }
355
- & .progress[data-v-06930dc4]:indeterminate {
325
+ & .progress[data-v-884d689a]:indeterminate {
356
326
  background-color: var(--progress-bar-background-color);
357
327
  background-image: none;
358
328
  }
359
- & .progress[data-v-06930dc4]:indeterminate::-webkit-progress-bar {
329
+ & .progress[data-v-884d689a]:indeterminate::-webkit-progress-bar {
360
330
  background-color: transparent;
361
331
  }
362
- & .progress[data-v-06930dc4]:indeterminate::-moz-progress-bar {
332
+ & .progress[data-v-884d689a]:indeterminate::-moz-progress-bar {
363
333
  background-color: transparent;
364
334
  }
365
- & .indeterminate-bar[data-v-06930dc4] {
335
+ & .indeterminate-bar[data-v-884d689a] {
366
336
  position: absolute;
367
337
  inset-block: 0;
368
338
  width: 35%;
369
339
  pointer-events: none;
370
340
  background-color: var(--progress-bar-foreground-color);
371
341
  border-radius: var(--kds-border-radius-container-pill);
372
- animation: move-indeterminate-06930dc4 1.5s linear infinite;
342
+ animation: move-indeterminate-884d689a 1.5s linear infinite;
373
343
  }
374
344
  }
375
- .kds-progress-bar-medium[data-v-06930dc4] {
345
+ .kds-progress-bar-medium[data-v-884d689a] {
376
346
  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
377
347
  }
378
- .kds-progress-bar-large[data-v-06930dc4] {
348
+ .kds-progress-bar-large[data-v-884d689a] {
379
349
  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
380
350
  }
381
- @keyframes move-indeterminate-06930dc4 {
351
+ @keyframes move-indeterminate-884d689a {
382
352
  0% {
383
353
  transform: translateX(-120%);
384
354
  }
@@ -388,7 +358,7 @@
388
358
  }
389
359
 
390
360
  .kds-color-swatch {
391
- &[data-v-b91cf470] {
361
+ &[data-v-91e0130d] {
392
362
  display: inline-block;
393
363
  flex-shrink: 0;
394
364
  overflow: hidden;
@@ -397,19 +367,19 @@
397
367
  border: var(--kds-border-base-muted);
398
368
  border-radius: var(--kds-border-radius-container-0-25x);
399
369
  }
400
- &.small[data-v-b91cf470] {
370
+ &.small[data-v-91e0130d] {
401
371
  --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
402
372
 
403
373
  width: var(--kds-dimension-icon-0-75x);
404
374
  height: var(--kds-dimension-icon-0-75x);
405
375
  }
406
- &.medium[data-v-b91cf470] {
376
+ &.medium[data-v-91e0130d] {
407
377
  --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
408
378
 
409
379
  width: var(--kds-dimension-icon-1x);
410
380
  height: var(--kds-dimension-icon-1x);
411
381
  }
412
- &.large[data-v-b91cf470] {
382
+ &.large[data-v-91e0130d] {
413
383
  --kds-color-swatch-checker-size: calc(
414
384
  var(--kds-dimension-component-width-1-25x) / 4
415
385
  );
@@ -420,7 +390,7 @@
420
390
  }
421
391
 
422
392
  .kds-live-status {
423
- &[data-v-c3dcc5ff] {
393
+ &[data-v-f20c5c00] {
424
394
  --dot-color: var(--kds-color-state-disabled);
425
395
  --dot-border-color: var(--kds-color-state-disabled-border);
426
396
 
@@ -431,20 +401,20 @@
431
401
  max-width: 100%;
432
402
  line-height: 0;
433
403
  }
434
- &.red[data-v-c3dcc5ff] {
404
+ &.red[data-v-f20c5c00] {
435
405
  --dot-color: var(--kds-color-state-error);
436
406
  --dot-border-color: var(--kds-color-state-error-border);
437
407
  }
438
- &.orange[data-v-c3dcc5ff] {
408
+ &.orange[data-v-f20c5c00] {
439
409
  --dot-color: var(--kds-color-state-warning);
440
410
  --dot-border-color: var(--kds-color-state-warning-border);
441
411
  }
442
- &.green[data-v-c3dcc5ff] {
412
+ &.green[data-v-f20c5c00] {
443
413
  --dot-color: var(--kds-color-state-success);
444
414
  --dot-border-color: var(--kds-color-state-success-border);
445
415
  }
446
416
  .dot {
447
- &[data-v-c3dcc5ff] {
417
+ &[data-v-f20c5c00] {
448
418
  display: inline-flex;
449
419
  flex-shrink: 0;
450
420
  align-items: center;
@@ -452,7 +422,7 @@
452
422
  width: var(--kds-dimension-icon-1-25x);
453
423
  height: var(--kds-dimension-icon-1-25x);
454
424
  }
455
- &[data-v-c3dcc5ff]::after {
425
+ &[data-v-f20c5c00]::after {
456
426
  display: block;
457
427
  width: 50%;
458
428
  height: 50%;
@@ -464,7 +434,7 @@
464
434
  border-radius: var(--kds-border-radius-container-pill);
465
435
  }
466
436
  }
467
- .label[data-v-c3dcc5ff] {
437
+ .label[data-v-f20c5c00] {
468
438
  overflow: hidden;
469
439
  text-overflow: ellipsis;
470
440
  font: var(--kds-font-base-subtext-medium);
@@ -472,26 +442,26 @@
472
442
  white-space: nowrap;
473
443
  }
474
444
  &.size-medium {
475
- .dot[data-v-c3dcc5ff] {
445
+ .dot[data-v-f20c5c00] {
476
446
  width: var(--kds-dimension-icon-1x);
477
447
  height: var(--kds-dimension-icon-1x);
478
448
  }
479
- &[data-v-c3dcc5ff]::after {
449
+ &[data-v-f20c5c00]::after {
480
450
  border-width: var(--kds-border-width-icon-stroke-m);
481
451
  }
482
- .label[data-v-c3dcc5ff] {
452
+ .label[data-v-f20c5c00] {
483
453
  font: var(--kds-font-base-subtext-small);
484
454
  }
485
455
  }
486
456
  &.size-small {
487
- .dot[data-v-c3dcc5ff] {
457
+ .dot[data-v-f20c5c00] {
488
458
  width: var(--kds-dimension-icon-0-75x);
489
459
  height: var(--kds-dimension-icon-0-75x);
490
460
  }
491
- &[data-v-c3dcc5ff]::after {
461
+ &[data-v-f20c5c00]::after {
492
462
  border-width: var(--kds-border-width-icon-stroke-s);
493
463
  }
494
- .label[data-v-c3dcc5ff] {
464
+ .label[data-v-f20c5c00] {
495
465
  font: var(--kds-font-base-subtext-xsmall);
496
466
  }
497
467
  }
@@ -554,7 +524,7 @@ to {
554
524
  }
555
525
 
556
526
  .kds-inline-message {
557
- &[data-v-194a0dfd] {
527
+ &[data-v-c54ea4b4] {
558
528
  display: flex;
559
529
  flex-direction: column;
560
530
  gap: var(--kds-spacing-container-0-25x);
@@ -566,43 +536,43 @@ to {
566
536
  border-radius: var(--kds-border-radius-container-0-50x);
567
537
  }
568
538
  .header {
569
- &[data-v-194a0dfd] {
539
+ &[data-v-c54ea4b4] {
570
540
  display: flex;
571
541
  gap: var(--kds-spacing-container-0-25x);
572
542
  align-items: center;
573
543
  }
574
- .icon[data-v-194a0dfd] {
544
+ .icon[data-v-c54ea4b4] {
575
545
  color: var(--icon-color);
576
546
  }
577
- .headline[data-v-194a0dfd] {
547
+ .headline[data-v-c54ea4b4] {
578
548
  font: var(--kds-font-base-title-small-strong);
579
549
  }
580
550
  }
581
- .body[data-v-194a0dfd] {
551
+ .body[data-v-c54ea4b4] {
582
552
  align-self: stretch;
583
553
  padding-left: var(--kds-spacing-container-1x);
584
554
  font: var(--kds-font-base-body-small);
585
555
  color: var(--kds-color-text-and-icon-muted);
586
556
  }
587
- &.info[data-v-194a0dfd] {
557
+ &.info[data-v-c54ea4b4] {
588
558
  --icon-color: var(--kds-color-text-and-icon-info);
589
559
 
590
560
  background-color: var(--kds-color-background-static-info-muted);
591
561
  border: var(--kds-border-base-info);
592
562
  }
593
- &.success[data-v-194a0dfd] {
563
+ &.success[data-v-c54ea4b4] {
594
564
  --icon-color: var(--kds-color-text-and-icon-success);
595
565
 
596
566
  background-color: var(--kds-color-background-static-success-muted);
597
567
  border: var(--kds-border-base-success);
598
568
  }
599
- &.error[data-v-194a0dfd] {
569
+ &.error[data-v-c54ea4b4] {
600
570
  --icon-color: var(--kds-color-text-and-icon-danger);
601
571
 
602
572
  background-color: var(--kds-color-background-static-danger-muted);
603
573
  border: var(--kds-border-base-danger);
604
574
  }
605
- &.warning[data-v-194a0dfd] {
575
+ &.warning[data-v-c54ea4b4] {
606
576
  --icon-color: var(--kds-color-text-and-icon-warning);
607
577
 
608
578
  background-color: var(--kds-color-background-static-warning-muted);
@@ -679,7 +649,7 @@ html.kds-legacy {
679
649
  }
680
650
 
681
651
  .button {
682
- &[data-v-83f63dc3] {
652
+ &[data-v-24ade73a] {
683
653
  position: relative;
684
654
  display: flex;
685
655
  flex-shrink: 0;
@@ -693,150 +663,150 @@ html.kds-legacy {
693
663
 
694
664
  /* for LinkButton */
695
665
  }
696
- &[data-v-83f63dc3]:is(a) {
666
+ &[data-v-24ade73a]:is(a) {
697
667
  text-decoration: none;
698
668
  }
699
- &.disabled[data-v-83f63dc3] {
669
+ &.disabled[data-v-24ade73a] {
700
670
  cursor: default;
701
671
  }
702
- &[data-v-83f63dc3]:focus-visible {
672
+ &[data-v-24ade73a]:focus-visible {
703
673
  outline: var(--kds-border-action-focused);
704
674
  outline-offset: var(--kds-spacing-offset-focus);
705
675
  }
706
676
  &.filled {
707
- &[data-v-83f63dc3] {
677
+ &[data-v-24ade73a] {
708
678
  color: var(--kds-color-text-and-icon-primary-inverted);
709
679
  background-color: var(--kds-color-background-primary-bold-initial);
710
680
  border: var(--kds-border-action-transparent);
711
681
  }
712
- &.disabled[data-v-83f63dc3] {
682
+ &.disabled[data-v-24ade73a] {
713
683
  color: var(--kds-color-text-and-icon-disabled-inverted);
714
684
  background-color: var(--kds-color-background-disabled-primary);
715
685
  }
716
686
  &:not(.disabled, .success, .error) {
717
- &[data-v-83f63dc3]:hover {
687
+ &[data-v-24ade73a]:hover {
718
688
  background-color: var(--kds-color-background-primary-bold-hover);
719
689
  }
720
- &[data-v-83f63dc3]:active {
690
+ &[data-v-24ade73a]:active {
721
691
  background-color: var(--kds-color-background-primary-bold-active);
722
692
  }
723
693
  }
724
694
  &.destructive {
725
- &[data-v-83f63dc3] {
695
+ &[data-v-24ade73a] {
726
696
  color: var(--kds-color-text-and-icon-danger-inverted);
727
697
  background-color: var(--kds-color-background-danger-bold-initial);
728
698
  }
729
- &.disabled[data-v-83f63dc3] {
699
+ &.disabled[data-v-24ade73a] {
730
700
  color: var(--kds-color-text-and-icon-disabled-inverted);
731
701
  background-color: var(--kds-color-background-disabled-danger);
732
702
  }
733
703
  &:not(.disabled, .success, .error) {
734
- &[data-v-83f63dc3]:hover {
704
+ &[data-v-24ade73a]:hover {
735
705
  background-color: var(--kds-color-background-danger-bold-hover);
736
706
  }
737
- &[data-v-83f63dc3]:active {
707
+ &[data-v-24ade73a]:active {
738
708
  background-color: var(--kds-color-background-danger-bold-active);
739
709
  }
740
710
  }
741
711
  }
742
712
  }
743
713
  &.outlined {
744
- &[data-v-83f63dc3] {
714
+ &[data-v-24ade73a] {
745
715
  color: var(--kds-color-text-and-icon-neutral);
746
716
  background-color: var(--kds-color-background-neutral-initial);
747
717
  border: var(--kds-border-action-default);
748
718
  }
749
- &.disabled[data-v-83f63dc3] {
719
+ &.disabled[data-v-24ade73a] {
750
720
  color: var(--kds-color-text-and-icon-disabled);
751
721
  border: var(--kds-border-action-disabled);
752
722
  }
753
723
  &:not(.disabled, .success, .error) {
754
- &[data-v-83f63dc3]:hover {
724
+ &[data-v-24ade73a]:hover {
755
725
  background-color: var(--kds-color-background-neutral-hover);
756
726
  }
757
- &[data-v-83f63dc3]:active {
727
+ &[data-v-24ade73a]:active {
758
728
  background-color: var(--kds-color-background-neutral-active);
759
729
  }
760
730
  }
761
731
  &.destructive {
762
- &[data-v-83f63dc3] {
732
+ &[data-v-24ade73a] {
763
733
  color: var(--kds-color-text-and-icon-danger);
764
734
  border: var(--kds-border-action-error);
765
735
  }
766
- &.disabled[data-v-83f63dc3] {
736
+ &.disabled[data-v-24ade73a] {
767
737
  color: var(--kds-color-text-and-icon-disabled);
768
738
  border: var(--kds-border-action-disabled);
769
739
  }
770
740
  &:not(.disabled, .success, .error) {
771
- &[data-v-83f63dc3]:hover {
741
+ &[data-v-24ade73a]:hover {
772
742
  background-color: var(--kds-color-background-danger-hover);
773
743
  }
774
- &[data-v-83f63dc3]:active {
744
+ &[data-v-24ade73a]:active {
775
745
  background-color: var(--kds-color-background-danger-active);
776
746
  }
777
747
  }
778
748
  }
779
749
  }
780
750
  &.transparent {
781
- &[data-v-83f63dc3] {
751
+ &[data-v-24ade73a] {
782
752
  color: var(--kds-color-text-and-icon-neutral);
783
753
  background-color: var(--kds-color-background-neutral-initial);
784
754
  border: var(--kds-border-action-transparent);
785
755
  }
786
- &.disabled[data-v-83f63dc3] {
756
+ &.disabled[data-v-24ade73a] {
787
757
  color: var(--kds-color-text-and-icon-disabled);
788
758
  }
789
759
  &:not(.disabled, .success, .error) {
790
- &[data-v-83f63dc3]:hover {
760
+ &[data-v-24ade73a]:hover {
791
761
  background-color: var(--kds-color-background-neutral-hover);
792
762
  }
793
- &[data-v-83f63dc3]:active {
763
+ &[data-v-24ade73a]:active {
794
764
  background-color: var(--kds-color-background-neutral-active);
795
765
  }
796
766
  }
797
767
  &.destructive {
798
- &[data-v-83f63dc3] {
768
+ &[data-v-24ade73a] {
799
769
  color: var(--kds-color-text-and-icon-danger);
800
770
  }
801
- &.disabled[data-v-83f63dc3] {
771
+ &.disabled[data-v-24ade73a] {
802
772
  color: var(--kds-color-text-and-icon-disabled);
803
773
  }
804
774
  &:not(.disabled, .success, .error) {
805
- &[data-v-83f63dc3]:hover {
775
+ &[data-v-24ade73a]:hover {
806
776
  background-color: var(--kds-color-background-danger-hover);
807
777
  }
808
- &[data-v-83f63dc3]:active {
778
+ &[data-v-24ade73a]:active {
809
779
  background-color: var(--kds-color-background-danger-active);
810
780
  }
811
781
  }
812
782
  }
813
783
  }
814
784
  &.toggled {
815
- &[data-v-83f63dc3] {
785
+ &[data-v-24ade73a] {
816
786
  color: var(--kds-color-text-and-icon-selected);
817
787
  background-color: var(--kds-color-background-selected-initial);
818
788
  border: var(--kds-border-action-selected);
819
789
  }
820
- &.disabled[data-v-83f63dc3] {
790
+ &.disabled[data-v-24ade73a] {
821
791
  color: var(--kds-color-text-and-icon-disabled);
822
792
  }
823
793
  &:not(.disabled, .success, .error) {
824
- &[data-v-83f63dc3]:hover {
794
+ &[data-v-24ade73a]:hover {
825
795
  background-color: var(--kds-color-background-selected-hover);
826
796
  }
827
- &[data-v-83f63dc3]:active {
797
+ &[data-v-24ade73a]:active {
828
798
  background-color: var(--kds-color-background-selected-active);
829
799
  }
830
800
  }
831
801
  }
832
- & .label[data-v-83f63dc3] {
802
+ & .label[data-v-24ade73a] {
833
803
  max-width: 200px;
834
804
  padding: 0 var(--kds-spacing-container-0-12x);
835
805
  overflow: hidden;
836
806
  text-overflow: ellipsis;
837
807
  white-space: nowrap;
838
808
  }
839
- &.xsmall[data-v-83f63dc3] {
809
+ &.xsmall[data-v-24ade73a] {
840
810
  gap: var(--kds-spacing-container-0-12x);
841
811
  height: var(--kds-dimension-component-height-1-25x);
842
812
  padding: 0
@@ -848,7 +818,7 @@ html.kds-legacy {
848
818
  var(--kds-border-radius-container-0-25x)
849
819
  );
850
820
  }
851
- &.small[data-v-83f63dc3] {
821
+ &.small[data-v-24ade73a] {
852
822
  gap: var(--kds-spacing-container-0-12x);
853
823
  height: var(--kds-dimension-component-height-1-5x);
854
824
  padding: 0
@@ -860,7 +830,7 @@ html.kds-legacy {
860
830
  var(--kds-border-radius-container-0-37x)
861
831
  );
862
832
  }
863
- &.medium[data-v-83f63dc3] {
833
+ &.medium[data-v-24ade73a] {
864
834
  gap: var(--kds-spacing-container-0-25x);
865
835
  height: var(--kds-dimension-component-height-1-75x);
866
836
  padding: 0
@@ -873,7 +843,7 @@ html.kds-legacy {
873
843
  );
874
844
  }
875
845
  &.large {
876
- &[data-v-83f63dc3] {
846
+ &[data-v-24ade73a] {
877
847
  gap: var(--kds-spacing-container-0-25x);
878
848
  height: var(--kds-dimension-component-height-2-25x);
879
849
  padding: 0
@@ -885,11 +855,11 @@ html.kds-legacy {
885
855
  var(--kds-border-radius-container-0-50x)
886
856
  );
887
857
  }
888
- & .label[data-v-83f63dc3] {
858
+ & .label[data-v-24ade73a] {
889
859
  padding: 0 var(--kds-spacing-container-0-25x);
890
860
  }
891
861
  }
892
- &.success[data-v-83f63dc3] {
862
+ &.success[data-v-24ade73a] {
893
863
  color: var(--kds-color-text-and-icon-success-inverted);
894
864
  background-color: var(--kds-color-background-success-bold-initial);
895
865
  border: var(--kds-border-action-transparent);
@@ -898,7 +868,7 @@ html.kds-legacy {
898
868
  border-color 200ms ease-out,
899
869
  color 200ms ease-out;
900
870
  }
901
- &.error[data-v-83f63dc3] {
871
+ &.error[data-v-24ade73a] {
902
872
  color: var(--kds-color-text-and-icon-danger-inverted);
903
873
  background-color: var(--kds-color-background-danger-bold-initial);
904
874
  border: var(--kds-border-action-transparent);
@@ -907,18 +877,18 @@ html.kds-legacy {
907
877
  border-color 200ms ease-out,
908
878
  color 200ms ease-out;
909
879
  }
910
- &.remove-border-radius-left[data-v-83f63dc3] {
880
+ &.remove-border-radius-left[data-v-24ade73a] {
911
881
  border-top-left-radius: 0;
912
882
  border-bottom-left-radius: 0;
913
883
  }
914
- &.remove-border-radius-right[data-v-83f63dc3] {
884
+ &.remove-border-radius-right[data-v-24ade73a] {
915
885
  border-top-right-radius: 0;
916
886
  border-bottom-right-radius: 0;
917
887
  }
918
888
  }
919
889
 
920
890
  .kds-link {
921
- &[data-v-6f9a0cf6] {
891
+ &[data-v-56e748a8] {
922
892
  display: inline-flex;
923
893
  align-items: center;
924
894
  justify-content: center;
@@ -931,57 +901,57 @@ html.kds-legacy {
931
901
  text-decoration-line: underline;
932
902
  border-radius: var(--kds-border-radius-container-0-12x);
933
903
  }
934
- &[data-v-6f9a0cf6]:is(a) {
904
+ &[data-v-56e748a8]:is(a) {
935
905
  cursor: pointer;
936
906
  }
937
- &[data-v-6f9a0cf6]:focus-visible {
907
+ &[data-v-56e748a8]:focus-visible {
938
908
  outline: var(--kds-border-action-focused);
939
909
  outline-offset: var(--kds-spacing-container-none);
940
910
  }
941
- & .label[data-v-6f9a0cf6],
942
- & .file-size[data-v-6f9a0cf6] {
911
+ & .label[data-v-56e748a8],
912
+ & .file-size[data-v-56e748a8] {
943
913
  min-width: 0;
944
914
  overflow: hidden;
945
915
  text-overflow: ellipsis;
946
916
  }
947
917
  &.variant-internal {
948
- &[data-v-6f9a0cf6] {
918
+ &[data-v-56e748a8] {
949
919
  color: var(--kds-color-text-and-icon-neutral);
950
920
  }
951
921
  &:not(.disabled) {
952
- &[data-v-6f9a0cf6]:visited {
922
+ &[data-v-56e748a8]:visited {
953
923
  color: var(--kds-color-text-and-icon-info);
954
924
  }
955
- &[data-v-6f9a0cf6]:hover {
925
+ &[data-v-56e748a8]:hover {
956
926
  background-color: var(--kds-color-background-neutral-hover);
957
927
  }
958
- &[data-v-6f9a0cf6]:active {
928
+ &[data-v-56e748a8]:active {
959
929
  background-color: var(--kds-color-background-neutral-active);
960
930
  }
961
931
  }
962
932
  }
963
- &.variant-external[data-v-6f9a0cf6] {
933
+ &.variant-external[data-v-56e748a8] {
964
934
  gap: var(--kds-spacing-container-0-12x);
965
935
  }
966
936
  &:is(.variant-external, .variant-document) {
967
- &[data-v-6f9a0cf6] {
937
+ &[data-v-56e748a8] {
968
938
  color: var(--kds-color-text-and-icon-selected);
969
939
  }
970
940
  &:not(.disabled) {
971
- &[data-v-6f9a0cf6]:visited {
941
+ &[data-v-56e748a8]:visited {
972
942
  color: var(--kds-color-text-and-icon-info);
973
943
  }
974
- &[data-v-6f9a0cf6]:hover {
944
+ &[data-v-56e748a8]:hover {
975
945
  color: var(--kds-color-text-and-icon-primary-inverted);
976
946
  background-color: var(--kds-color-background-primary-bold-hover);
977
947
  }
978
- &[data-v-6f9a0cf6]:active {
948
+ &[data-v-56e748a8]:active {
979
949
  color: var(--kds-color-text-and-icon-selected-inverted);
980
950
  background-color: var(--kds-color-background-primary-bold-active);
981
951
  }
982
952
  }
983
953
  }
984
- &.disabled[data-v-6f9a0cf6] {
954
+ &.disabled[data-v-56e748a8] {
985
955
  color: var(--kds-color-text-and-icon-disabled);
986
956
  pointer-events: none;
987
957
  cursor: default;
@@ -1026,7 +996,7 @@ html.kds-legacy {
1026
996
  }
1027
997
 
1028
998
  .kds-list-item {
1029
- &[data-v-36ccb8f8] {
999
+ &[data-v-a3d6c86f] {
1030
1000
  position: relative;
1031
1001
  display: flex;
1032
1002
  flex-shrink: 0;
@@ -1043,36 +1013,36 @@ html.kds-legacy {
1043
1013
  border-radius: var(--kds-border-radius-container-0-31x);
1044
1014
  }
1045
1015
  &.small {
1046
- &[data-v-36ccb8f8] {
1016
+ &[data-v-a3d6c86f] {
1047
1017
  gap: var(--kds-spacing-container-0-25x);
1048
1018
  align-items: flex-start;
1049
1019
  padding: var(--kds-spacing-container-0-25x)
1050
1020
  var(--kds-spacing-container-0-5x);
1051
1021
  font: var(--kds-font-base-interactive-small);
1052
1022
  }
1053
- .accessory[data-v-36ccb8f8] {
1023
+ .accessory[data-v-a3d6c86f] {
1054
1024
  display: flex;
1055
1025
  padding: var(--kds-spacing-container-0-12x) 0;
1056
1026
  }
1057
1027
  }
1058
1028
  &.large {
1059
- &[data-v-36ccb8f8] {
1029
+ &[data-v-a3d6c86f] {
1060
1030
  font: var(--kds-font-base-interactive-small-strong);
1061
1031
  }
1062
- .accessory[data-v-36ccb8f8] {
1032
+ .accessory[data-v-a3d6c86f] {
1063
1033
  display: flex;
1064
1034
  align-items: center;
1065
1035
  }
1066
1036
  }
1067
1037
  .content {
1068
- &[data-v-36ccb8f8] {
1038
+ &[data-v-a3d6c86f] {
1069
1039
  display: flex;
1070
1040
  flex: 1 1 auto;
1071
1041
  flex-direction: column;
1072
1042
  gap: var(--kds-spacing-container-0-12x);
1073
1043
  min-width: 0;
1074
1044
  }
1075
- .large &[data-v-36ccb8f8] {
1045
+ .large &[data-v-a3d6c86f] {
1076
1046
  justify-content: center;
1077
1047
  min-height: calc(
1078
1048
  var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1080,19 +1050,19 @@ html.kds-legacy {
1080
1050
  );
1081
1051
  }
1082
1052
  .label {
1083
- &[data-v-36ccb8f8] {
1053
+ &[data-v-a3d6c86f] {
1084
1054
  overflow: hidden;
1085
1055
  text-overflow: ellipsis;
1086
1056
  white-space: nowrap;
1087
1057
  }
1088
- .prefix[data-v-36ccb8f8] {
1058
+ .prefix[data-v-a3d6c86f] {
1089
1059
  flex-shrink: 0;
1090
1060
  }
1091
- .special[data-v-36ccb8f8] {
1061
+ .special[data-v-a3d6c86f] {
1092
1062
  font: var(--kds-font-base-interactive-small-italic);
1093
1063
  }
1094
1064
  }
1095
- .subtext[data-v-36ccb8f8] {
1065
+ .subtext[data-v-a3d6c86f] {
1096
1066
  display: -webkit-box;
1097
1067
  overflow: hidden;
1098
1068
  -webkit-line-clamp: 2;
@@ -1103,7 +1073,7 @@ html.kds-legacy {
1103
1073
  }
1104
1074
  }
1105
1075
  .trailing-item {
1106
- &[data-v-36ccb8f8] {
1076
+ &[data-v-a3d6c86f] {
1107
1077
  display: flex;
1108
1078
  flex-shrink: 0;
1109
1079
  gap: var(--kds-spacing-container-0-12x);
@@ -1111,76 +1081,76 @@ html.kds-legacy {
1111
1081
  align-self: center;
1112
1082
  justify-content: flex-end;
1113
1083
  }
1114
- .shortcut[data-v-36ccb8f8] {
1084
+ .shortcut[data-v-a3d6c86f] {
1115
1085
  flex-shrink: 0;
1116
1086
  font: var(--kds-font-base-interactive-xsmall-strong);
1117
1087
  color: var(--kds-color-text-and-icon-muted);
1118
1088
  text-align: right;
1119
1089
  white-space: nowrap;
1120
1090
  }
1121
- .trailing-item-reserve-space[data-v-36ccb8f8] {
1091
+ .trailing-item-reserve-space[data-v-a3d6c86f] {
1122
1092
  width: var(--kds-dimension-icon-0-75x);
1123
1093
  }
1124
1094
  }
1125
- &[data-v-36ccb8f8]:hover:not(.disabled),
1126
- &.active[data-v-36ccb8f8]:not(.disabled) {
1095
+ &[data-v-a3d6c86f]:hover:not(.disabled),
1096
+ &.active[data-v-a3d6c86f]:not(.disabled) {
1127
1097
  background: var(--kds-color-background-neutral-hover);
1128
1098
  }
1129
- &[data-v-36ccb8f8]:active:not(.disabled) {
1099
+ &[data-v-a3d6c86f]:active:not(.disabled) {
1130
1100
  background: var(--kds-color-background-neutral-active);
1131
1101
  }
1132
1102
  &.selected {
1133
- &[data-v-36ccb8f8] {
1103
+ &[data-v-a3d6c86f] {
1134
1104
  color: var(--kds-color-text-and-icon-selected);
1135
1105
  background: var(--kds-color-background-selected-initial);
1136
1106
  }
1137
- .subtext[data-v-36ccb8f8] {
1107
+ .subtext[data-v-a3d6c86f] {
1138
1108
  color: var(--kds-color-text-and-icon-selected);
1139
1109
  }
1140
- &[data-v-36ccb8f8]:hover,
1141
- &.active[data-v-36ccb8f8] {
1110
+ &[data-v-a3d6c86f]:hover,
1111
+ &.active[data-v-a3d6c86f] {
1142
1112
  background: var(--kds-color-background-selected-hover);
1143
1113
  }
1144
- &[data-v-36ccb8f8]:active {
1114
+ &[data-v-a3d6c86f]:active {
1145
1115
  background: var(--kds-color-background-selected-active);
1146
1116
  }
1147
- &.disabled[data-v-36ccb8f8] {
1117
+ &.disabled[data-v-a3d6c86f] {
1148
1118
  background: var(--kds-color-background-selected-initial);
1149
1119
  }
1150
1120
  }
1151
1121
  &.missing {
1152
- &[data-v-36ccb8f8] {
1122
+ &[data-v-a3d6c86f] {
1153
1123
  color: var(--kds-color-text-and-icon-danger);
1154
1124
  background: var(--kds-color-background-danger-initial);
1155
1125
  }
1156
- .subtext[data-v-36ccb8f8] {
1126
+ .subtext[data-v-a3d6c86f] {
1157
1127
  color: var(--kds-color-text-and-icon-danger);
1158
1128
  }
1159
- &[data-v-36ccb8f8]:hover,
1160
- &.active[data-v-36ccb8f8] {
1129
+ &[data-v-a3d6c86f]:hover,
1130
+ &.active[data-v-a3d6c86f] {
1161
1131
  background: var(--kds-color-background-danger-hover);
1162
1132
  }
1163
- &[data-v-36ccb8f8]:active {
1133
+ &[data-v-a3d6c86f]:active {
1164
1134
  background: var(--kds-color-background-danger-active);
1165
1135
  }
1166
- &.disabled[data-v-36ccb8f8] {
1136
+ &.disabled[data-v-a3d6c86f] {
1167
1137
  background: var(--kds-color-background-danger-initial);
1168
1138
  }
1169
1139
  }
1170
1140
  &.disabled {
1171
- &[data-v-36ccb8f8] {
1141
+ &[data-v-a3d6c86f] {
1172
1142
  color: var(--kds-color-text-and-icon-disabled);
1173
1143
  cursor: default;
1174
1144
  }
1175
- .shortcut[data-v-36ccb8f8],
1176
- .subtext[data-v-36ccb8f8] {
1145
+ .shortcut[data-v-a3d6c86f],
1146
+ .subtext[data-v-a3d6c86f] {
1177
1147
  color: var(--kds-color-text-and-icon-disabled);
1178
1148
  }
1179
1149
  }
1180
1150
  }
1181
1151
 
1182
1152
  .kds-list-item-section-title {
1183
- &[data-v-012ece68] {
1153
+ &[data-v-5eeb1226] {
1184
1154
  display: flex;
1185
1155
  flex-shrink: 0;
1186
1156
  gap: var(--kds-spacing-container-0-25x);
@@ -1190,12 +1160,12 @@ html.kds-legacy {
1190
1160
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
1191
1161
  color: var(--kds-color-text-and-icon-muted);
1192
1162
  }
1193
- .icon[data-v-012ece68] {
1163
+ .icon[data-v-5eeb1226] {
1194
1164
  display: flex;
1195
1165
  flex-shrink: 0;
1196
1166
  align-items: center;
1197
1167
  }
1198
- .label[data-v-012ece68] {
1168
+ .label[data-v-5eeb1226] {
1199
1169
  flex: 1 1 auto;
1200
1170
  min-width: 0;
1201
1171
  overflow: hidden;
@@ -1471,14 +1441,14 @@ html.kds-legacy {
1471
1441
  padding: 0;
1472
1442
  }
1473
1443
 
1474
- .kds-label-wrapper[data-v-2d3c5cbb] {
1444
+ .kds-label-wrapper[data-v-efe3313e] {
1475
1445
  display: flex;
1476
1446
  gap: var(--kds-spacing-container-0-12x);
1477
1447
  align-items: flex-start;
1478
1448
  max-width: 100%;
1479
1449
  min-height: var(--kds-dimension-component-height-0-75x);
1480
1450
  }
1481
- .label[data-v-2d3c5cbb] {
1451
+ .label[data-v-efe3313e] {
1482
1452
  display: block;
1483
1453
  flex-grow: 1;
1484
1454
  max-width: 100%;
@@ -1735,7 +1705,7 @@ html.kds-legacy {
1735
1705
  }
1736
1706
 
1737
1707
  .file-explorer-item {
1738
- &[data-v-4811e8e8] {
1708
+ &[data-v-91cbcaae] {
1739
1709
  display: grid;
1740
1710
 
1741
1711
  /* first two cols - icon + name */
@@ -1747,27 +1717,27 @@ html.kds-legacy {
1747
1717
 
1748
1718
  /* style the last column if the options menu is visible */
1749
1719
  }
1750
- &.has-options-menu > td[data-v-4811e8e8]:last-child {
1720
+ &.has-options-menu > td[data-v-91cbcaae]:last-child {
1751
1721
  width: min-content;
1752
1722
  }
1753
1723
  & .column {
1754
- &[data-v-4811e8e8] {
1724
+ &[data-v-91cbcaae] {
1755
1725
  display: flex;
1756
1726
  align-items: center;
1757
1727
  height: 100%;
1758
1728
  overflow: hidden;
1759
1729
  white-space: nowrap;
1760
1730
  }
1761
- & .inner[data-v-4811e8e8] {
1731
+ & .inner[data-v-91cbcaae] {
1762
1732
  width: 100%;
1763
1733
  overflow: hidden;
1764
1734
  text-overflow: ellipsis;
1765
1735
  }
1766
- &.dynamic-column[data-v-4811e8e8]:empty {
1736
+ &.dynamic-column[data-v-91cbcaae]:empty {
1767
1737
  display: none;
1768
1738
  }
1769
1739
  }
1770
- & .item-error[data-v-4811e8e8] {
1740
+ & .item-error[data-v-91cbcaae] {
1771
1741
  position: absolute;
1772
1742
  bottom: 0;
1773
1743
  z-index: 10;
@@ -1780,18 +1750,18 @@ html.kds-legacy {
1780
1750
  transform: translateY(100%);
1781
1751
  }
1782
1752
  & td.rename-active {
1783
- &[data-v-4811e8e8] {
1753
+ &[data-v-91cbcaae] {
1784
1754
  padding: 0 var(--kds-spacing-container-0-25x);
1785
1755
  }
1786
- & .rename-input-container[data-v-4811e8e8] {
1756
+ & .rename-input-container[data-v-91cbcaae] {
1787
1757
  flex: 1;
1788
1758
  }
1789
1759
  }
1790
1760
  & .item-icon {
1791
- &[data-v-4811e8e8] {
1761
+ &[data-v-91cbcaae] {
1792
1762
  position: relative;
1793
1763
  }
1794
- & .open-indicator[data-v-4811e8e8] {
1764
+ & .open-indicator[data-v-91cbcaae] {
1795
1765
  position: absolute;
1796
1766
  right: 0;
1797
1767
  bottom: 0;
@@ -1803,10 +1773,10 @@ html.kds-legacy {
1803
1773
  }
1804
1774
  }
1805
1775
 
1806
- .hidden[data-v-6053576d] {
1776
+ .hidden[data-v-a5de970a] {
1807
1777
  display: none;
1808
1778
  }
1809
- .file-explorer-item-back[data-v-6053576d] {
1779
+ .file-explorer-item-back[data-v-a5de970a] {
1810
1780
  cursor: pointer;
1811
1781
  }
1812
1782
 
@@ -1975,7 +1945,7 @@ table:focus {
1975
1945
  }
1976
1946
 
1977
1947
  .checkbox {
1978
- &[data-v-5138a023] {
1948
+ &[data-v-0bec87ad] {
1979
1949
  --bg-initial: var(--kds-color-background-input-initial);
1980
1950
  --bg-hover: var(--kds-color-background-input-hover);
1981
1951
  --bg-active: var(--kds-color-background-input-active);
@@ -1995,7 +1965,7 @@ table:focus {
1995
1965
  background: none;
1996
1966
  border: none;
1997
1967
  }
1998
- .control[data-v-5138a023] {
1968
+ .control[data-v-0bec87ad] {
1999
1969
  position: relative;
2000
1970
  display: flex;
2001
1971
  flex-shrink: 0;
@@ -2008,39 +1978,39 @@ table:focus {
2008
1978
  border: var(--border);
2009
1979
  border-radius: var(--kds-border-radius-container-0-25x);
2010
1980
  }
2011
- &:focus-visible .control[data-v-5138a023] {
1981
+ &:focus-visible .control[data-v-0bec87ad] {
2012
1982
  outline: var(--kds-border-action-focused);
2013
1983
  outline-offset: var(--kds-spacing-offset-focus);
2014
1984
  }
2015
- &:hover:not(.disabled) .control[data-v-5138a023] {
1985
+ &:hover:not(.disabled) .control[data-v-0bec87ad] {
2016
1986
  background: var(--bg-hover);
2017
1987
  }
2018
- &:active:not(.disabled) .control[data-v-5138a023] {
1988
+ &:active:not(.disabled) .control[data-v-0bec87ad] {
2019
1989
  background: var(--bg-active);
2020
1990
  }
2021
- &.checked[data-v-5138a023],
2022
- &.indeterminate[data-v-5138a023] {
1991
+ &.checked[data-v-0bec87ad],
1992
+ &.indeterminate[data-v-0bec87ad] {
2023
1993
  --bg-initial: var(--kds-color-background-selected-initial);
2024
1994
  --bg-hover: var(--kds-color-background-selected-hover);
2025
1995
  --bg-active: var(--kds-color-background-selected-active);
2026
1996
  --border: var(--kds-border-action-selected);
2027
1997
  }
2028
1998
  .content {
2029
- &[data-v-5138a023] {
1999
+ &[data-v-0bec87ad] {
2030
2000
  display: flex;
2031
2001
  flex-direction: column;
2032
2002
  gap: var(--kds-spacing-container-0-12x);
2033
2003
  }
2034
- & .label[data-v-5138a023] {
2004
+ & .label[data-v-0bec87ad] {
2035
2005
  font: var(--kds-font-base-interactive-small);
2036
2006
  color: var(--text-color);
2037
2007
  }
2038
- & .helper-text[data-v-5138a023] {
2008
+ & .helper-text[data-v-0bec87ad] {
2039
2009
  font: var(--kds-font-base-subtext-small);
2040
2010
  color: var(--helper-text-color);
2041
2011
  }
2042
2012
  }
2043
- &.disabled[data-v-5138a023] {
2013
+ &.disabled[data-v-0bec87ad] {
2044
2014
  --border: var(--kds-border-action-disabled);
2045
2015
  --icon-color: var(--kds-color-text-and-icon-disabled);
2046
2016
  --text-color: var(--kds-color-text-and-icon-disabled);
@@ -2049,27 +2019,27 @@ table:focus {
2049
2019
  cursor: default;
2050
2020
  }
2051
2021
  &.error {
2052
- &[data-v-5138a023] {
2022
+ &[data-v-0bec87ad] {
2053
2023
  --border: var(--kds-border-action-error);
2054
2024
  --icon-color: var(--kds-color-text-and-icon-danger);
2055
2025
  --text-color: var(--kds-color-text-and-icon-danger);
2056
2026
  --bg-hover: var(--kds-color-background-danger-hover);
2057
2027
  --bg-active: var(--kds-color-background-danger-active);
2058
2028
  }
2059
- &.checked[data-v-5138a023],
2060
- &.indeterminate[data-v-5138a023] {
2029
+ &.checked[data-v-0bec87ad],
2030
+ &.indeterminate[data-v-0bec87ad] {
2061
2031
  --bg-initial: var(--kds-color-background-danger-initial);
2062
2032
  }
2063
2033
  }
2064
2034
  }
2065
- .subtext-wrapper[data-v-5138a023] {
2035
+ .subtext-wrapper[data-v-0bec87ad] {
2066
2036
  padding-left: calc(
2067
2037
  var(--kds-dimension-component-height-0-88x) +
2068
2038
  var(--kds-spacing-container-0-37x)
2069
2039
  );
2070
2040
  }
2071
2041
 
2072
- .kds-fieldset[data-v-698f7098] {
2042
+ .kds-fieldset[data-v-a44731da] {
2073
2043
  display: flex;
2074
2044
  flex-direction: column;
2075
2045
  min-inline-size: 0;
@@ -2077,7 +2047,7 @@ table:focus {
2077
2047
  margin: 0;
2078
2048
  border: none;
2079
2049
  }
2080
- .kds-fieldset-legend[data-v-698f7098] {
2050
+ .kds-fieldset-legend[data-v-a44731da] {
2081
2051
  display: flex;
2082
2052
  gap: var(--kds-spacing-container-0-12x);
2083
2053
  align-items: center;
@@ -2085,12 +2055,12 @@ table:focus {
2085
2055
  min-height: var(--kds-dimension-component-height-0-75x);
2086
2056
  padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
2087
2057
  }
2088
- .kds-fieldset-content[data-v-698f7098] {
2058
+ .kds-fieldset-content[data-v-a44731da] {
2089
2059
  display: flex;
2090
2060
  flex-direction: column;
2091
2061
  gap: var(--kds-spacing-container-0-75x);
2092
2062
  }
2093
- .legend-text[data-v-698f7098] {
2063
+ .legend-text[data-v-a44731da] {
2094
2064
  display: block;
2095
2065
  flex-grow: 1;
2096
2066
  max-width: 100%;
@@ -2360,7 +2330,7 @@ table:focus {
2360
2330
  }
2361
2331
 
2362
2332
  .option {
2363
- &[data-v-cd4995e6] {
2333
+ &[data-v-5c6f0f1f] {
2364
2334
  display: flex;
2365
2335
  flex: 0 1 auto;
2366
2336
  gap: var(--kds-spacing-container-0-25x);
@@ -2382,57 +2352,57 @@ table:focus {
2382
2352
  border: var(--kds-border-action-transparent);
2383
2353
  border-radius: var(--kds-border-radius-container-0-25x);
2384
2354
  }
2385
- &.size-small[data-v-cd4995e6] {
2355
+ &.size-small[data-v-5c6f0f1f] {
2386
2356
  height: var(--kds-dimension-component-height-1-25x);
2387
2357
  font: var(--kds-font-base-interactive-small-strong);
2388
2358
  }
2389
- &[data-v-cd4995e6]:focus-visible {
2359
+ &[data-v-5c6f0f1f]:focus-visible {
2390
2360
  outline: none;
2391
2361
  }
2392
- &[data-v-cd4995e6]:focus:not(.selected) {
2362
+ &[data-v-5c6f0f1f]:focus:not(.selected) {
2393
2363
  border: var(--kds-border-action-selected);
2394
2364
  }
2395
- &[data-v-cd4995e6]:hover:not(:disabled) {
2365
+ &[data-v-5c6f0f1f]:hover:not(:disabled) {
2396
2366
  background: var(--kds-color-background-neutral-hover);
2397
2367
  }
2398
- &[data-v-cd4995e6]:active:not(:disabled) {
2368
+ &[data-v-5c6f0f1f]:active:not(:disabled) {
2399
2369
  background: var(--kds-color-background-neutral-active);
2400
2370
  }
2401
2371
  &.selected {
2402
- &[data-v-cd4995e6] {
2372
+ &[data-v-5c6f0f1f] {
2403
2373
  color: var(--kds-color-text-and-icon-selected);
2404
2374
  background: var(--kds-color-background-selected-initial);
2405
2375
  border: var(--kds-border-action-selected);
2406
2376
  }
2407
- &[data-v-cd4995e6]:hover:not(:disabled) {
2377
+ &[data-v-5c6f0f1f]:hover:not(:disabled) {
2408
2378
  background: var(--kds-color-background-selected-hover);
2409
2379
  }
2410
- &[data-v-cd4995e6]:active:not(:disabled) {
2380
+ &[data-v-5c6f0f1f]:active:not(:disabled) {
2411
2381
  background: var(--kds-color-background-selected-active);
2412
2382
  }
2413
2383
  &.variant-muted {
2414
- &[data-v-cd4995e6] {
2384
+ &[data-v-5c6f0f1f] {
2415
2385
  color: var(--kds-color-text-and-icon-neutral);
2416
2386
  background: var(--kds-color-background-input-initial);
2417
2387
  }
2418
- &[data-v-cd4995e6]:hover:not(:disabled) {
2388
+ &[data-v-5c6f0f1f]:hover:not(:disabled) {
2419
2389
  background: var(--kds-color-background-input-hover);
2420
2390
  }
2421
- &[data-v-cd4995e6]:active:not(:disabled) {
2391
+ &[data-v-5c6f0f1f]:active:not(:disabled) {
2422
2392
  background: var(--kds-color-background-input-active);
2423
2393
  }
2424
2394
  }
2425
2395
  }
2426
- &.disabled[data-v-cd4995e6] {
2396
+ &.disabled[data-v-5c6f0f1f] {
2427
2397
  color: var(--kds-color-text-and-icon-disabled);
2428
2398
  cursor: default;
2429
2399
  }
2430
- &.disabled.selected[data-v-cd4995e6] {
2400
+ &.disabled.selected[data-v-5c6f0f1f] {
2431
2401
  color: var(--kds-color-text-and-icon-disabled);
2432
2402
  border: var(--kds-border-action-disabled);
2433
2403
  }
2434
2404
  }
2435
- .option-label[data-v-cd4995e6] {
2405
+ .option-label[data-v-5c6f0f1f] {
2436
2406
  min-width: 0;
2437
2407
  padding: 0 var(--kds-spacing-container-0-12x);
2438
2408
  overflow: hidden;
@@ -2826,7 +2796,7 @@ table:focus {
2826
2796
  height: var(--kds-dimension-component-height-12x);
2827
2797
  }
2828
2798
 
2829
- .kds-search-results-container[data-v-8930f00a] {
2799
+ .kds-search-results-container[data-v-f7236e9c] {
2830
2800
  background-color: var(--kds-color-surface-default);
2831
2801
  border-radius: var(--kds-border-radius-container-0-50x);
2832
2802
  box-shadow: var(--kds-elevation-level-3);
@@ -3065,7 +3035,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3065
3035
  }
3066
3036
 
3067
3037
  .kds-list-item-button {
3068
- &[data-v-ac05d049] {
3038
+ &[data-v-21fb5571] {
3069
3039
  position: relative;
3070
3040
  display: flex;
3071
3041
  gap: var(--kds-spacing-container-0-25x);
@@ -3082,26 +3052,26 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3082
3052
  border: none;
3083
3053
  border-radius: var(--kds-border-radius-container-0-31x);
3084
3054
  }
3085
- .label[data-v-ac05d049] {
3055
+ .label[data-v-21fb5571] {
3086
3056
  flex: 1 1 auto;
3087
3057
  min-width: 0;
3088
3058
  overflow: hidden;
3089
3059
  text-overflow: ellipsis;
3090
3060
  white-space: nowrap;
3091
3061
  }
3092
- &[data-v-ac05d049]:disabled {
3062
+ &[data-v-21fb5571]:disabled {
3093
3063
  color: var(--kds-color-text-and-icon-disabled);
3094
3064
  pointer-events: none;
3095
3065
  cursor: default;
3096
3066
  }
3097
- &[data-v-ac05d049]:focus-visible:not(:disabled) {
3067
+ &[data-v-21fb5571]:focus-visible:not(:disabled) {
3098
3068
  outline: var(--kds-border-action-focused);
3099
3069
  outline-offset: var(--kds-spacing-offset-focus);
3100
3070
  }
3101
- &[data-v-ac05d049]:hover:not(:disabled) {
3071
+ &[data-v-21fb5571]:hover:not(:disabled) {
3102
3072
  background: var(--kds-color-background-neutral-hover);
3103
3073
  }
3104
- &[data-v-ac05d049]:active:not(:disabled) {
3074
+ &[data-v-21fb5571]:active:not(:disabled) {
3105
3075
  background: var(--kds-color-background-neutral-active);
3106
3076
  }
3107
3077
  }
@@ -3345,7 +3315,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3345
3315
  }
3346
3316
 
3347
3317
  .info-toggle-button {
3348
- &[data-v-020b385c] {
3318
+ &[data-v-67a8974e] {
3349
3319
  --bg-initial: transparent;
3350
3320
  --bg-hover: var(--kds-color-background-neutral-hover);
3351
3321
  --bg-active: var(--kds-color-background-neutral-active);
@@ -3366,20 +3336,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3366
3336
  border-radius: var(--kds-border-radius-container-0-12x);
3367
3337
  opacity: 1;
3368
3338
  }
3369
- &.hidden[data-v-020b385c] {
3339
+ &.hidden[data-v-67a8974e] {
3370
3340
  opacity: 0;
3371
3341
  }
3372
- &[data-v-020b385c]:focus-visible {
3342
+ &[data-v-67a8974e]:focus-visible {
3373
3343
  outline: var(--kds-border-action-focused);
3374
3344
  outline-offset: var(--kds-spacing-offset-focus);
3375
3345
  }
3376
- &[data-v-020b385c]:hover {
3346
+ &[data-v-67a8974e]:hover {
3377
3347
  background-color: var(--bg-hover);
3378
3348
  }
3379
- &[data-v-020b385c]:active {
3349
+ &[data-v-67a8974e]:active {
3380
3350
  background-color: var(--bg-active);
3381
3351
  }
3382
- &.selected[data-v-020b385c] {
3352
+ &.selected[data-v-67a8974e] {
3383
3353
  --bg-initial: var(--kds-color-background-selected-initial);
3384
3354
  --bg-hover: var(--kds-color-background-selected-hover);
3385
3355
  --bg-active: var(--kds-color-background-selected-active);
@@ -3409,7 +3379,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3409
3379
  }
3410
3380
 
3411
3381
  .variable-toggle-button {
3412
- &[data-v-3e9b0390] {
3382
+ &[data-v-b6d29842] {
3413
3383
  --bg-initial: var(--kds-color-background-neutral-initial);
3414
3384
  --bg-hover: var(--kds-color-background-neutral-hover);
3415
3385
  --bg-active: var(--kds-color-background-neutral-active);
@@ -3430,27 +3400,27 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3430
3400
  border-radius: var(--kds-border-radius-container-0-12x);
3431
3401
  opacity: 1;
3432
3402
  }
3433
- &.hidden[data-v-3e9b0390] {
3403
+ &.hidden[data-v-b6d29842] {
3434
3404
  opacity: 0;
3435
3405
  }
3436
- &[data-v-3e9b0390]:focus-visible {
3406
+ &[data-v-b6d29842]:focus-visible {
3437
3407
  outline: var(--kds-border-action-focused);
3438
3408
  outline-offset: var(--kds-spacing-offset-focus);
3439
3409
  }
3440
- &[data-v-3e9b0390]:hover {
3410
+ &[data-v-b6d29842]:hover {
3441
3411
  background-color: var(--bg-hover);
3442
3412
  }
3443
- &[data-v-3e9b0390]:active {
3413
+ &[data-v-b6d29842]:active {
3444
3414
  background-color: var(--bg-active);
3445
3415
  }
3446
- &.pressed-or-set[data-v-3e9b0390] {
3416
+ &.pressed-or-set[data-v-b6d29842] {
3447
3417
  --bg-initial: var(--kds-color-background-selected-initial);
3448
3418
  --bg-hover: var(--kds-color-background-selected-hover);
3449
3419
  --bg-active: var(--kds-color-background-selected-active);
3450
3420
  --border: var(--kds-border-action-selected);
3451
3421
  --icon-color: var(--kds-color-text-and-icon-success);
3452
3422
  }
3453
- &.error[data-v-3e9b0390] {
3423
+ &.error[data-v-b6d29842] {
3454
3424
  --bg-initial: var(--kds-color-background-danger-initial);
3455
3425
  --bg-hover: var(--kds-color-background-danger-hover);
3456
3426
  --bg-active: var(--kds-color-background-danger-active);
@@ -3763,7 +3733,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3763
3733
  }
3764
3734
 
3765
3735
  .kds-panel {
3766
- &[data-v-d3124a50] {
3736
+ &[data-v-64966fb2] {
3767
3737
  display: flex;
3768
3738
  flex-direction: column;
3769
3739
  width: 100%;
@@ -3771,7 +3741,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3771
3741
  min-height: 0;
3772
3742
  background-color: var(--kds-color-surface-default);
3773
3743
  }
3774
- .kds-panel-header[data-v-d3124a50] {
3744
+ .kds-panel-header[data-v-64966fb2] {
3775
3745
  display: flex;
3776
3746
  flex: 0 0 auto;
3777
3747
  gap: var(--kds-spacing-container-0-25x);
@@ -3781,13 +3751,13 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3781
3751
  calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
3782
3752
  border-bottom: var(--kds-border-base-subtle);
3783
3753
  }
3784
- .kds-panel-headline[data-v-d3124a50] {
3754
+ .kds-panel-headline[data-v-64966fb2] {
3785
3755
  display: flex;
3786
3756
  flex: 1 1 auto;
3787
3757
  align-items: center;
3788
3758
  min-width: 0;
3789
3759
  }
3790
- .kds-panel-headline-text[data-v-d3124a50] {
3760
+ .kds-panel-headline-text[data-v-64966fb2] {
3791
3761
  flex: 1 1 auto;
3792
3762
  min-width: 0;
3793
3763
  margin: 0;
@@ -3796,7 +3766,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3796
3766
  font: var(--kds-font-base-title-medium-strong);
3797
3767
  white-space: nowrap;
3798
3768
  }
3799
- .kds-panel-header-trailing[data-v-d3124a50] {
3769
+ .kds-panel-header-trailing[data-v-64966fb2] {
3800
3770
  display: flex;
3801
3771
  flex: 0 0 auto;
3802
3772
  gap: var(--kds-spacing-container-0-25x);
@@ -3804,21 +3774,21 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3804
3774
  margin-left: auto;
3805
3775
  }
3806
3776
  .kds-panel-body {
3807
- &[data-v-d3124a50] {
3777
+ &[data-v-64966fb2] {
3808
3778
  flex: 1 1 auto;
3809
3779
  min-height: 0;
3810
- overflow: var(--v2ddcad1c);
3780
+ overflow: var(--d76547d6);
3811
3781
  }
3812
- &[data-variant="padded"][data-v-d3124a50] {
3782
+ &[data-variant="padded"][data-v-64966fb2] {
3813
3783
  padding: var(--kds-spacing-container-0-75x);
3814
3784
  }
3815
- &[tabindex="0"][data-v-d3124a50]:focus-visible {
3785
+ &[tabindex="0"][data-v-64966fb2]:focus-visible {
3816
3786
  outline: var(--kds-border-action-focused);
3817
3787
  outline-offset: var(--kds-spacing-offset-focus);
3818
3788
  border-radius: var(--kds-border-radius-container-0-31x);
3819
3789
  }
3820
3790
  }
3821
- .kds-panel-footer[data-v-d3124a50] {
3791
+ .kds-panel-footer[data-v-64966fb2] {
3822
3792
  display: flex;
3823
3793
  flex: 0 0 auto;
3824
3794
  gap: var(--kds-spacing-container-0-25x);
@@ -3829,18 +3799,18 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3829
3799
  var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
3830
3800
  border-top: var(--kds-border-base-subtle);
3831
3801
  }
3832
- .kds-panel-footer-leading[data-v-d3124a50],
3833
- .kds-panel-footer-trailing[data-v-d3124a50] {
3802
+ .kds-panel-footer-leading[data-v-64966fb2],
3803
+ .kds-panel-footer-trailing[data-v-64966fb2] {
3834
3804
  display: flex;
3835
3805
  gap: var(--kds-spacing-container-0-25x);
3836
3806
  align-items: center;
3837
3807
  }
3838
3808
  }
3839
3809
 
3840
- .kds-tab-icon[data-v-9a4461cc] {
3810
+ .kds-tab-icon[data-v-91f95f5f] {
3841
3811
  flex-shrink: 0;
3842
3812
  }
3843
- .kds-tab-label[data-v-9a4461cc] {
3813
+ .kds-tab-label[data-v-91f95f5f] {
3844
3814
  min-width: 0;
3845
3815
  overflow: hidden;
3846
3816
  text-overflow: ellipsis;
@@ -3848,7 +3818,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3848
3818
  white-space: nowrap;
3849
3819
  }
3850
3820
  .kds-tab {
3851
- &[data-v-9a4461cc] {
3821
+ &[data-v-91f95f5f] {
3852
3822
  position: relative;
3853
3823
  display: flex;
3854
3824
  align-items: center;
@@ -3860,20 +3830,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3860
3830
  border: none;
3861
3831
  isolation: isolate;
3862
3832
  }
3863
- &[data-v-9a4461cc]:disabled {
3833
+ &[data-v-91f95f5f]:disabled {
3864
3834
  color: var(--kds-color-text-and-icon-disabled);
3865
3835
  cursor: not-allowed;
3866
3836
  }
3867
- &[data-v-9a4461cc]:focus-visible {
3837
+ &[data-v-91f95f5f]:focus-visible {
3868
3838
  outline: var(--kds-border-action-focused);
3869
3839
  outline-offset: var(--kds-spacing-offset-focus);
3870
3840
  border-radius: var(--kds-border-radius-container-0-12x);
3871
3841
  }
3872
3842
  &.kds-tab-selected {
3873
- &[data-v-9a4461cc] {
3843
+ &[data-v-91f95f5f] {
3874
3844
  color: var(--kds-color-text-and-icon-selected);
3875
3845
  }
3876
- & .kds-tab-indicator[data-v-9a4461cc] {
3846
+ & .kds-tab-indicator[data-v-91f95f5f] {
3877
3847
  position: absolute;
3878
3848
  right: 0;
3879
3849
  bottom: 0;
@@ -3886,12 +3856,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3886
3856
  border-top-right-radius: var(--kds-border-radius-container-0-12x);
3887
3857
  }
3888
3858
  }
3889
- &[data-v-9a4461cc]:hover:not(:disabled) {
3859
+ &[data-v-91f95f5f]:hover:not(:disabled) {
3890
3860
  color: var(--kds-color-text-and-icon-selected);
3891
3861
  }
3892
3862
  }
3893
3863
  .kds-tab-bar-wrapper {
3894
- &[data-v-9a4461cc] {
3864
+ &[data-v-91f95f5f] {
3895
3865
  --focus-ring-space: calc(
3896
3866
  2px + var(--kds-spacing-offset-focus)
3897
3867
  ); /* outline-width + outline-offset */
@@ -3900,7 +3870,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3900
3870
  display: flow-root;
3901
3871
  overflow: visible;
3902
3872
  }
3903
- &[data-v-9a4461cc]::before {
3873
+ &[data-v-91f95f5f]::before {
3904
3874
  position: absolute;
3905
3875
  right: 0;
3906
3876
  bottom: 0;
@@ -3912,7 +3882,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3912
3882
  }
3913
3883
  }
3914
3884
  .kds-tab-bar {
3915
- &[data-v-9a4461cc] {
3885
+ &[data-v-91f95f5f] {
3916
3886
  display: flex;
3917
3887
  flex-wrap: nowrap;
3918
3888
  padding: var(--focus-ring-space);
@@ -3921,43 +3891,43 @@ textarea[data-v-36211819]::-webkit-scrollbar {
3921
3891
  scrollbar-width: none;
3922
3892
  border-radius: var(--kds-border-radius-container-none);
3923
3893
  }
3924
- &[data-v-9a4461cc]::-webkit-scrollbar {
3894
+ &[data-v-91f95f5f]::-webkit-scrollbar {
3925
3895
  display: none;
3926
3896
  }
3927
- &:not(.kds-tab-bar-full-width) .kds-tab[data-v-9a4461cc] {
3897
+ &:not(.kds-tab-bar-full-width) .kds-tab[data-v-91f95f5f] {
3928
3898
  flex: 0 1 auto;
3929
- min-width: var(--v9ef1548e);
3899
+ min-width: var(--v09be89a3);
3930
3900
  }
3931
- &.kds-tab-bar-large .kds-tab-label[data-v-9a4461cc] {
3901
+ &.kds-tab-bar-large .kds-tab-label[data-v-91f95f5f] {
3932
3902
  font: var(--kds-font-base-interactive-large-strong);
3933
3903
  }
3934
- &.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-9a4461cc] {
3904
+ &.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-91f95f5f] {
3935
3905
  font: var(--kds-font-base-title-large);
3936
3906
  }
3937
3907
  &.kds-tab-bar-small,
3938
3908
  &.kds-tab-bar-large {
3939
- & .kds-tab-selected .kds-tab-icon[data-v-9a4461cc] {
3909
+ & .kds-tab-selected .kds-tab-icon[data-v-91f95f5f] {
3940
3910
  color: var(--kds-color-text-and-icon-selected);
3941
3911
  }
3942
3912
  }
3943
- &.kds-tab-bar-small .kds-tab[data-v-9a4461cc] {
3913
+ &.kds-tab-bar-small .kds-tab[data-v-91f95f5f] {
3944
3914
  gap: var(--kds-spacing-container-0-37x);
3945
3915
  height: var(--kds-dimension-component-height-1-75x);
3946
3916
  padding: 0 var(--kds-spacing-container-0-5x);
3947
3917
  }
3948
- &.kds-tab-bar-large .kds-tab[data-v-9a4461cc] {
3918
+ &.kds-tab-bar-large .kds-tab[data-v-91f95f5f] {
3949
3919
  gap: var(--kds-spacing-container-0-5x);
3950
3920
  height: var(--kds-dimension-component-height-2-25x);
3951
3921
  padding: 0 var(--kds-spacing-container-0-75x);
3952
3922
  }
3953
- &.kds-tab-bar-full-width .kds-tab[data-v-9a4461cc] {
3923
+ &.kds-tab-bar-full-width .kds-tab[data-v-91f95f5f] {
3954
3924
  flex: 1;
3955
3925
  justify-content: center;
3956
3926
  width: 100%;
3957
3927
  }
3958
3928
  }
3959
3929
 
3960
- @keyframes knight-rider-86829b28 {
3930
+ @keyframes knight-rider-b7565402 {
3961
3931
  from {
3962
3932
  background-position-x: 100%;
3963
3933
  }
@@ -3966,7 +3936,7 @@ to {
3966
3936
  }
3967
3937
  }
3968
3938
  .kds-loading-skeleton-item {
3969
- &[data-v-86829b28] {
3939
+ &[data-v-b7565402] {
3970
3940
  background-color: var(--kds-color-border-subtle);
3971
3941
  background-image: linear-gradient(
3972
3942
  90deg,
@@ -3980,98 +3950,98 @@ to {
3980
3950
  );
3981
3951
  background-repeat: no-repeat;
3982
3952
  background-size: 200% 100%;
3983
- animation: knight-rider-86829b28 2s linear 200ms infinite;
3953
+ animation: knight-rider-b7565402 2s linear 200ms infinite;
3984
3954
  }
3985
- &.text[data-v-86829b28] {
3955
+ &.text[data-v-b7565402] {
3986
3956
  height: var(--kds-dimension-component-height-0-75x);
3987
3957
  border-radius: var(--kds-border-radius-container-pill);
3988
3958
  }
3989
- &.icon-large[data-v-86829b28],
3990
- &.icon-medium[data-v-86829b28],
3991
- &.icon-small[data-v-86829b28] {
3959
+ &.icon-large[data-v-b7565402],
3960
+ &.icon-medium[data-v-b7565402],
3961
+ &.icon-small[data-v-b7565402] {
3992
3962
  border-radius: var(--kds-border-radius-container-pill);
3993
3963
  }
3994
- &.icon-large[data-v-86829b28] {
3964
+ &.icon-large[data-v-b7565402] {
3995
3965
  width: var(--kds-dimension-component-width-1-25x);
3996
3966
  height: var(--kds-dimension-component-height-1-25x);
3997
3967
  }
3998
- &.icon-medium[data-v-86829b28] {
3968
+ &.icon-medium[data-v-b7565402] {
3999
3969
  width: var(--kds-dimension-component-width-1x);
4000
3970
  height: var(--kds-dimension-component-height-1x);
4001
3971
  }
4002
- &.icon-small[data-v-86829b28] {
3972
+ &.icon-small[data-v-b7565402] {
4003
3973
  width: var(--kds-dimension-component-width-0-75x);
4004
3974
  height: var(--kds-dimension-component-height-0-75x);
4005
3975
  }
4006
- &.button-large[data-v-86829b28] {
3976
+ &.button-large[data-v-b7565402] {
4007
3977
  width: var(--kds-dimension-component-width-4x);
4008
3978
  height: var(--kds-dimension-component-height-2-25x);
4009
3979
  border-radius: var(--kds-border-radius-container-0-50x);
4010
3980
  }
4011
- &.button-medium[data-v-86829b28] {
3981
+ &.button-medium[data-v-b7565402] {
4012
3982
  width: var(--kds-dimension-component-width-4x);
4013
3983
  height: var(--kds-dimension-component-height-1-75x);
4014
3984
  border-radius: var(--kds-border-radius-container-0-37x);
4015
3985
  }
4016
- &.button-small[data-v-86829b28] {
3986
+ &.button-small[data-v-b7565402] {
4017
3987
  width: var(--kds-dimension-component-width-4x);
4018
3988
  height: var(--kds-dimension-component-height-1-5x);
4019
3989
  border-radius: var(--kds-border-radius-container-0-37x);
4020
3990
  }
4021
- &.button-xsmall[data-v-86829b28] {
3991
+ &.button-xsmall[data-v-b7565402] {
4022
3992
  width: var(--kds-dimension-component-width-4x);
4023
3993
  height: var(--kds-dimension-component-height-1-25x);
4024
3994
  border-radius: var(--kds-border-radius-container-0-25x);
4025
3995
  }
4026
- &.input-with-label[data-v-86829b28] {
3996
+ &.input[data-v-b7565402] {
4027
3997
  height: var(--kds-dimension-component-height-1-75x);
4028
3998
  border-radius: var(--kds-border-radius-container-0-37x);
4029
3999
  }
4030
- &.label[data-v-86829b28] {
4000
+ &.label[data-v-b7565402] {
4031
4001
  width: 35%;
4032
4002
  height: var(--kds-dimension-component-height-0-75x);
4033
4003
  border-radius: var(--kds-border-radius-container-0-50x);
4034
4004
  }
4035
- &.card[data-v-86829b28] {
4005
+ &.card[data-v-b7565402] {
4036
4006
  height: 100%;
4037
4007
  min-height: var(--kds-dimension-component-height-12x);
4038
4008
  border-radius: var(--kds-border-radius-container-0-37x);
4039
4009
  }
4040
4010
  }
4041
4011
 
4042
- .kds-loading-skeleton[data-v-e6597718] {
4012
+ .kds-loading-skeleton[data-v-326c25f0] {
4043
4013
  display: flex;
4044
4014
  flex-direction: column;
4045
- gap: var(--v59c08829);
4015
+ gap: var(--v18b57ee8);
4046
4016
  }
4047
4017
  .kds-loading-skeleton-headline-with-paragraph {
4048
- &[data-v-e6597718] {
4018
+ &[data-v-326c25f0] {
4049
4019
  display: grid;
4050
4020
  gap: var(--kds-spacing-container-1-25x);
4051
4021
  }
4052
- & .headline[data-v-e6597718] {
4022
+ & .headline[data-v-326c25f0] {
4053
4023
  width: 50%;
4054
4024
  height: var(--kds-dimension-component-height-1x);
4055
4025
  }
4056
4026
  & .kds-loading-skeleton-paragraph-lines {
4057
- &[data-v-e6597718] {
4027
+ &[data-v-326c25f0] {
4058
4028
  display: grid;
4059
4029
  gap: var(--kds-spacing-container-0-75x);
4060
4030
  }
4061
- &[data-v-e6597718] > *:nth-child(2) {
4031
+ &[data-v-326c25f0] > *:nth-child(2) {
4062
4032
  width: 75%;
4063
4033
  }
4064
- &[data-v-e6597718] > *:nth-child(3) {
4034
+ &[data-v-326c25f0] > *:nth-child(3) {
4065
4035
  width: 50%;
4066
4036
  }
4067
4037
  }
4068
4038
  }
4069
- .kds-loading-skeleton-input-with-label[data-v-e6597718] {
4039
+ .kds-loading-skeleton-input-with-label[data-v-326c25f0] {
4070
4040
  display: grid;
4071
4041
  gap: var(--kds-spacing-container-0-75x);
4072
4042
  }
4073
4043
  .kds-loading-skeleton-list-item {
4074
- &[data-v-e6597718] {
4044
+ &[data-v-326c25f0] {
4075
4045
  display: flex;
4076
4046
  gap: var(--kds-spacing-container-0-5x);
4077
4047
  align-items: center;
@@ -4079,7 +4049,7 @@ to {
4079
4049
  min-width: var(--kds-dimension-component-width-12x);
4080
4050
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
4081
4051
  }
4082
- & .kds-loading-skeleton-list-item-text[data-v-e6597718] {
4052
+ & .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
4083
4053
  display: flex;
4084
4054
  flex: 1 1 auto;
4085
4055
  flex-direction: column;
@@ -4087,20 +4057,20 @@ to {
4087
4057
  min-width: 0;
4088
4058
  }
4089
4059
  &.kds-loading-skeleton-list-item-large {
4090
- &[data-v-e6597718] {
4060
+ &[data-v-326c25f0] {
4091
4061
  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
4092
4062
  }
4093
4063
  & .kds-loading-skeleton-list-item-text {
4094
- &[data-v-e6597718] {
4064
+ &[data-v-326c25f0] {
4095
4065
  justify-content: center;
4096
4066
  }
4097
- & .text[data-v-e6597718] {
4067
+ & .text[data-v-326c25f0] {
4098
4068
  height: var(--kds-dimension-component-height-0-88x);
4099
4069
  }
4100
4070
  }
4101
4071
  }
4102
4072
  &.kds-loading-skeleton-list-item-small {
4103
- &[data-v-e6597718] {
4073
+ &[data-v-326c25f0] {
4104
4074
  gap: var(--kds-spacing-container-0-5x);
4105
4075
  align-items: start;
4106
4076
  padding: calc(
@@ -4108,19 +4078,19 @@ to {
4108
4078
  )
4109
4079
  var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
4110
4080
  }
4111
- & .kds-loading-skeleton-list-item-text[data-v-e6597718] {
4081
+ & .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
4112
4082
  justify-content: flex-start;
4113
4083
  }
4114
4084
  }
4115
4085
  &.kds-loading-skeleton-list-item-large-with-subtext {
4116
- &[data-v-e6597718] {
4086
+ &[data-v-326c25f0] {
4117
4087
  align-items: center;
4118
4088
  }
4119
4089
  & .kds-loading-skeleton-list-item-text {
4120
- &[data-v-e6597718] {
4090
+ &[data-v-326c25f0] {
4121
4091
  justify-content: center;
4122
4092
  }
4123
- & .text[data-v-e6597718] {
4093
+ & .text[data-v-326c25f0] {
4124
4094
  height: var(--kds-dimension-component-height-0-75x);
4125
4095
  }
4126
4096
  }
@@ -4128,19 +4098,19 @@ to {
4128
4098
  }
4129
4099
 
4130
4100
  .kds-nav-item {
4131
- &[data-v-3d410fd0] {
4101
+ &[data-v-17711664] {
4132
4102
  position: relative;
4133
4103
  height: var(--kds-dimension-component-height-1-75x);
4134
4104
  min-height: var(--kds-dimension-component-height-1-5x);
4135
4105
  background: var(--kds-color-background-neutral-initial);
4136
4106
  border-radius: var(--kds-border-radius-container-0-31x);
4137
4107
  }
4138
- &[data-v-3d410fd0]:has(.kds-nav-button:focus-visible) {
4108
+ &[data-v-17711664]:has(.kds-nav-button:focus-visible) {
4139
4109
  outline: var(--kds-border-action-focused);
4140
4110
  outline-offset: calc(-1 * var(--kds-core-border-width-m));
4141
4111
  }
4142
4112
  & .kds-nav-button {
4143
- &[data-v-3d410fd0] {
4113
+ &[data-v-17711664] {
4144
4114
 
4145
4115
  display: flex;
4146
4116
  flex-direction: row;
@@ -4148,7 +4118,7 @@ to {
4148
4118
  align-items: center;
4149
4119
  width: 100%;
4150
4120
  height: 100%;
4151
- padding: 0 var(--b532af5e) 0 var(--kds-spacing-container-0-75x);
4121
+ padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
4152
4122
  color: var(--kds-color-text-and-icon-neutral);
4153
4123
  text-decoration: none;
4154
4124
  cursor: pointer;
@@ -4156,10 +4126,10 @@ to {
4156
4126
  background: transparent;
4157
4127
  border: none;
4158
4128
  }
4159
- &[data-v-3d410fd0]:focus-visible {
4129
+ &[data-v-17711664]:focus-visible {
4160
4130
  outline: none;
4161
4131
  }
4162
- & .label[data-v-3d410fd0] {
4132
+ & .label[data-v-17711664] {
4163
4133
  flex: 1 1 auto;
4164
4134
  min-width: 0;
4165
4135
  overflow: hidden;
@@ -4169,7 +4139,7 @@ to {
4169
4139
  white-space: nowrap;
4170
4140
  }
4171
4141
  }
4172
- & .trailing-items[data-v-3d410fd0] {
4142
+ & .trailing-items[data-v-17711664] {
4173
4143
  position: absolute;
4174
4144
  top: 0;
4175
4145
  right: var(--kds-spacing-container-0-75x);
@@ -4181,23 +4151,23 @@ to {
4181
4151
  height: 100%;
4182
4152
  color: var(--kds-color-text-and-icon-neutral);
4183
4153
  }
4184
- &[data-v-3d410fd0]:hover:not(.disabled) {
4154
+ &[data-v-17711664]:hover:not(.disabled) {
4185
4155
  background: var(--kds-color-background-neutral-hover);
4186
4156
  }
4187
- &[data-v-3d410fd0]:has(.kds-nav-button:active):not(.disabled) {
4157
+ &[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
4188
4158
  background: var(--kds-color-background-neutral-active);
4189
4159
  }
4190
4160
  &.selected {
4191
- &[data-v-3d410fd0] {
4161
+ &[data-v-17711664] {
4192
4162
  background: var(--kds-color-background-selected-initial);
4193
4163
  }
4194
- & .kds-nav-button[data-v-3d410fd0] {
4164
+ & .kds-nav-button[data-v-17711664] {
4195
4165
  color: var(--kds-color-text-and-icon-selected);
4196
4166
  }
4197
- & .trailing-items[data-v-3d410fd0] {
4167
+ & .trailing-items[data-v-17711664] {
4198
4168
  color: var(--kds-color-text-and-icon-selected);
4199
4169
  }
4200
- &[data-v-3d410fd0]::before {
4170
+ &[data-v-17711664]::before {
4201
4171
  position: absolute;
4202
4172
  top: var(--kds-spacing-container-0-37x);
4203
4173
  left: 0;
@@ -4208,22 +4178,22 @@ to {
4208
4178
  border-top-right-radius: var(--kds-border-radius-container-0-12x);
4209
4179
  border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
4210
4180
  }
4211
- &[data-v-3d410fd0]:hover:not(.disabled) {
4181
+ &[data-v-17711664]:hover:not(.disabled) {
4212
4182
  background: var(--kds-color-background-selected-hover);
4213
4183
  }
4214
- &[data-v-3d410fd0]:has(.kds-nav-button:active):not(.disabled) {
4184
+ &[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
4215
4185
  background: var(--kds-color-background-selected-active);
4216
4186
  }
4217
4187
  }
4218
4188
  &.disabled {
4219
- &[data-v-3d410fd0] {
4189
+ &[data-v-17711664] {
4220
4190
  cursor: default;
4221
4191
  }
4222
- & .kds-nav-button[data-v-3d410fd0] {
4192
+ & .kds-nav-button[data-v-17711664] {
4223
4193
  color: var(--kds-color-text-and-icon-disabled);
4224
4194
  cursor: default;
4225
4195
  }
4226
- & .trailing-items[data-v-3d410fd0] {
4196
+ & .trailing-items[data-v-17711664] {
4227
4197
  color: var(--kds-color-text-and-icon-disabled);
4228
4198
  }
4229
4199
  }
@@ -4242,7 +4212,7 @@ to {
4242
4212
  }
4243
4213
  }
4244
4214
 
4245
- .kds-breadcrumb-item[data-v-6fd3d680] {
4215
+ .kds-breadcrumb-item[data-v-fd7537fc] {
4246
4216
  display: flex;
4247
4217
  gap: var(--kds-spacing-container-0-25x);
4248
4218
  align-items: center;
@@ -4259,7 +4229,7 @@ to {
4259
4229
  background: none;
4260
4230
  border: none;
4261
4231
  }
4262
- .breadcrumb-label[data-v-6fd3d680] {
4232
+ .breadcrumb-label[data-v-fd7537fc] {
4263
4233
  display: block;
4264
4234
  flex: 1 1 auto;
4265
4235
  min-width: 0;
@@ -4269,28 +4239,28 @@ to {
4269
4239
  color: inherit;
4270
4240
  white-space: nowrap;
4271
4241
  }
4272
- .breadcrumb-icon[data-v-6fd3d680] {
4242
+ .breadcrumb-icon[data-v-fd7537fc] {
4273
4243
  flex-shrink: 0;
4274
4244
  }
4275
- span.kds-breadcrumb-item[data-v-6fd3d680] {
4245
+ span.kds-breadcrumb-item[data-v-fd7537fc] {
4276
4246
  cursor: default;
4277
4247
  }
4278
4248
  a.kds-breadcrumb-item,
4279
4249
  button.kds-breadcrumb-item {
4280
- &[data-v-6fd3d680] {
4250
+ &[data-v-fd7537fc] {
4281
4251
  cursor: pointer;
4282
4252
  border-radius: var(--kds-border-radius-container-0-12x);
4283
4253
  }
4284
- &[data-v-6fd3d680]:hover {
4254
+ &[data-v-fd7537fc]:hover {
4285
4255
  color: var(--kds-color-text-and-icon-neutral);
4286
4256
  }
4287
- &[data-v-6fd3d680]:focus-visible {
4257
+ &[data-v-fd7537fc]:focus-visible {
4288
4258
  outline: var(--kds-border-action-focused);
4289
4259
  outline-offset: var(--kds-spacing-offset-focus);
4290
4260
  }
4291
4261
  }
4292
- .kds-breadcrumb-item:hover .breadcrumb-label[data-v-6fd3d680],
4293
- .kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-6fd3d680] {
4262
+ .kds-breadcrumb-item:hover .breadcrumb-label[data-v-fd7537fc],
4263
+ .kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-fd7537fc] {
4294
4264
  text-overflow: clip;
4295
4265
  }
4296
4266
 
@@ -4377,7 +4347,7 @@ li {
4377
4347
  }
4378
4348
 
4379
4349
  .modal-header {
4380
- &[data-v-62740dc9] {
4350
+ &[data-v-36cbff95] {
4381
4351
  display: flex;
4382
4352
  gap: var(--kds-spacing-container-0-5x);
4383
4353
  align-items: center;
@@ -4386,12 +4356,16 @@ li {
4386
4356
  font: var(--kds-font-base-title-medium-strong);
4387
4357
  color: var(--kds-color-text-and-icon-neutral);
4388
4358
  }
4389
- & .modal-header-headline[data-v-62740dc9] {
4359
+ & .modal-header-headline[data-v-36cbff95] {
4390
4360
  flex: 1 1 auto;
4361
+ min-width: 0;
4362
+ overflow: hidden;
4363
+ text-overflow: ellipsis;
4364
+ white-space: nowrap;
4391
4365
  }
4392
4366
  }
4393
4367
  .modal-body {
4394
- &[data-v-62740dc9] {
4368
+ &[data-v-36cbff95] {
4395
4369
  --modal-padding-left: var(--kds-spacing-container-1-5x);
4396
4370
  --modal-padding-right: var(--kds-spacing-container-1-5x);
4397
4371
  --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -4401,17 +4375,17 @@ li {
4401
4375
  display: flex;
4402
4376
  flex-grow: 1;
4403
4377
  flex-direction: column;
4404
- overflow: var(--v81addf0a);
4378
+ overflow: var(--d8a22254);
4405
4379
  font: var(--kds-font-base-body-small);
4406
4380
  color: var(--kds-color-text-and-icon-neutral);
4407
4381
  }
4408
- &[data-variant="padded"][data-v-62740dc9] {
4382
+ &[data-variant="padded"][data-v-36cbff95] {
4409
4383
  gap: var(--modal-gap);
4410
4384
  padding: var(--modal-padding-top) var(--modal-padding-right)
4411
4385
  var(--modal-padding-bottom) var(--modal-padding-left);
4412
4386
  }
4413
4387
  }
4414
- .modal-footer[data-v-62740dc9] {
4388
+ .modal-footer[data-v-36cbff95] {
4415
4389
  display: flex;
4416
4390
  gap: var(--kds-spacing-container-0-5x);
4417
4391
  justify-content: right;
@@ -4533,6 +4507,36 @@ body:has(dialog.modal[open]) {
4533
4507
  .flush-left[data-v-41fc8d84] {
4534
4508
  margin-right: auto;
4535
4509
  }
4510
+ .kds-tooltip {
4511
+ inset: auto auto anchor(top);
4512
+ justify-self: anchor-center;
4513
+ max-width: var(--kds-dimension-component-width-16x);
4514
+ padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-5x);
4515
+ margin: var(--kds-spacing-container-0-25x) 0
4516
+ var(--kds-spacing-container-0-25x) 0;
4517
+ position-try-fallbacks:
4518
+ --kds-tooltip-try-bottom-center, --kds-tooltip-try-top-center;
4519
+ font: var(--kds-font-base-subtext-small);
4520
+ color: var(--kds-color-tooltip-text-and-icon-neutral);
4521
+ overflow-wrap: anywhere;
4522
+ white-space: pre-line;
4523
+ background-color: var(--kds-color-tooltip-background-default);
4524
+ border: none;
4525
+ border-radius: var(--kds-border-radius-container-0-37x);
4526
+ box-shadow: var(--kds-elevation-level-3);
4527
+ }
4528
+
4529
+ @position-try --kds-tooltip-try-top-center {
4530
+ inset: auto auto anchor(top);
4531
+ margin: var(--kds-spacing-container-0-25x) 0
4532
+ var(--kds-spacing-container-0-25x) 0;
4533
+ }
4534
+
4535
+ @position-try --kds-tooltip-try-bottom-center {
4536
+ inset: anchor(bottom) auto auto;
4537
+ margin: var(--kds-spacing-container-0-25x) 0
4538
+ var(--kds-spacing-container-0-25x) 0;
4539
+ }
4536
4540
 
4537
4541
  .kds-button-group-measure[data-v-a945c295] {
4538
4542
  position: absolute;