@knime/kds-components 1.1.3 → 1.1.5

package/dist/index.css

@@ -146,7 +146,7 @@
 }
 }
 .kds-icon {
-&[data-v-bff4f419] {
+&[data-v-9a9cd3e8] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -160,27 +160,27 @@
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
 }
-&.xsmall[data-v-bff4f419] {
+&.xsmall[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.small[data-v-bff4f419] {
+&.small[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-bff4f419] {
+&.large[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
-.kds-icon.disabled[data-v-bff4f419] {
+.kds-icon.disabled[data-v-9a9cd3e8] {
   color: var(--kds-color-text-and-icon-disabled);
 }
 .kds-icon {
-&[data-v-667bceea] {
+&[data-v-b929f2eb] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -194,24 +194,24 @@
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
 }
-&.xsmall[data-v-667bceea] {
+&.xsmall[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-667bceea] {
+&.large[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 .kds-data-type-icon-container {
-&[data-v-667bceea] {
+&[data-v-b929f2eb] {
   --data-type-height: var(--kds-dimension-component-height-1x);
   --data-type-width: var(--kds-dimension-component-width-1x);
   --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -229,23 +229,23 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.disabled[data-v-667bceea] {
+&.disabled[data-v-b929f2eb] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
     --data-type-height: var(--kds-dimension-icon-0-75x);
     --data-type-width: var(--kds-dimension-icon-0-75x);
     --data-type-padding: var(--kds-spacing-container-none);
 }
-&.large[data-v-667bceea] {
+&.large[data-v-b929f2eb] {
     --data-type-height: var(--kds-dimension-component-height-1-25x);
     --data-type-width: var(--kds-dimension-component-width-1-25x);
 }
 & .kds-icon.kds-data-type-icon {
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-667bceea] {
+&.medium[data-v-b929f2eb] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
@@ -622,7 +622,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -636,150 +636,150 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-83f63dc3]:is(a) {
+&[data-v-ee3f8b5d]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
     cursor: default;
 }
-&[data-v-83f63dc3]:focus-visible {
+&[data-v-ee3f8b5d]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-83f63dc3] {
+&.disabled[data-v-ee3f8b5d] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-83f63dc3]:hover {
+&[data-v-ee3f8b5d]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-83f63dc3]:active {
+&[data-v-ee3f8b5d]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-83f63dc3] {
+& .label[data-v-ee3f8b5d] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&.xsmall[data-v-83f63dc3] {
+&.xsmall[data-v-ee3f8b5d] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -791,7 +791,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-83f63dc3] {
+&.small[data-v-ee3f8b5d] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -803,7 +803,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-83f63dc3] {
+&.medium[data-v-ee3f8b5d] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -816,7 +816,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-83f63dc3] {
+&[data-v-ee3f8b5d] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -828,11 +828,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-83f63dc3] {
+& .label[data-v-ee3f8b5d] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-83f63dc3] {
+&.success[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -841,7 +841,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-83f63dc3] {
+&.error[data-v-ee3f8b5d] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -850,18 +850,18 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-83f63dc3] {
+&.remove-border-radius-left[data-v-ee3f8b5d] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-83f63dc3] {
+&.remove-border-radius-right[data-v-ee3f8b5d] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 }
 
 .modal-header {
-&[data-v-36cbff95] {
+&[data-v-3b9d0ae0] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -870,7 +870,7 @@ html.kds-legacy {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-headline[data-v-36cbff95] {
+& .modal-header-headline[data-v-3b9d0ae0] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -879,7 +879,7 @@ html.kds-legacy {
 }
 }
 .modal-body {
-&[data-v-36cbff95] {
+&[data-v-3b9d0ae0] {
   --modal-padding-left: var(--kds-spacing-container-1-5x);
   --modal-padding-right: var(--kds-spacing-container-1-5x);
   --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -889,17 +889,17 @@ html.kds-legacy {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--d8a22254);
+  overflow: var(--v6361116e);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-36cbff95] {
+&[data-variant="padded"][data-v-3b9d0ae0] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
 }
 }
-.modal-footer[data-v-36cbff95] {
+.modal-footer[data-v-3b9d0ae0] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -912,7 +912,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-d4ff271c] {
+&[data-v-1f306093] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -924,7 +924,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--ef11ed42);
+  overflow: var(--v8f271084);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -941,55 +941,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-d4ff271c] {
+&.width-small[data-v-1f306093] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-d4ff271c] {
+&.width-medium[data-v-1f306093] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-d4ff271c] {
+&.width-large[data-v-1f306093] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-d4ff271c] {
+&.width-xlarge[data-v-1f306093] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-d4ff271c] {
+&.width-full[data-v-1f306093] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-d4ff271c] {
+&.height-full[data-v-1f306093] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-d4ff271c] {
+&.height-auto[data-v-1f306093] {
     --modal-height: fit-content;
 }
-&[data-v-d4ff271c]:not([open]) {
+&[data-v-1f306093]:not([open]) {
     display: none;
 }
-&[data-v-d4ff271c]:focus-visible {
+&[data-v-1f306093]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-d4ff271c]::backdrop {
+&[data-v-1f306093]::backdrop {
     background: var(--kds-color-blanket-default);
     opacity: 0;
     transition: var(--modal-animation-time) allow-discrete;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-property: display, opacity, overlay;
 }
-&[open][data-v-d4ff271c]::backdrop {
+&[open][data-v-1f306093]::backdrop {
     opacity: 1;
 }
-&[open][data-v-d4ff271c] {
+&[open][data-v-1f306093] {
     opacity: 1;
     transform: scale(1);
 }
@@ -998,18 +998,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-d4ff271c] {
+&[data-v-1f306093] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-d4ff271c] {
+&[open][data-v-1f306093] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-d4ff271c]::backdrop {
+&[data-v-1f306093]::backdrop {
       opacity: 1;
 }
-&[open][data-v-d4ff271c]::backdrop {
+&[open][data-v-1f306093]::backdrop {
       opacity: 0;
 }
 }
@@ -1135,7 +1135,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-popover {
-&[data-v-f41f0af7] {
+&[data-v-3d51a946] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1153,11 +1153,11 @@ body:has(dialog.modal[open]) {
    * light-dismiss / click-outside behavior).
    */
 }
-&.full-width[data-v-f41f0af7] {
+&.full-width[data-v-3d51a946] {
     min-inline-size: anchor-size(width);
     max-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-f41f0af7] {
+&.floating.top-right[data-v-3d51a946] {
     inset: auto anchor(right) anchor(top) auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1165,14 +1165,14 @@ body:has(dialog.modal[open]) {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-center[data-v-f41f0af7] {
+&.floating.top-center[data-v-3d51a946] {
     inset: auto 0 anchor(top);
     justify-self: anchor-center;
     margin: var(--kds-spacing-container-0-25x);
     position-try-fallbacks:
       --kds-popover-try-bottom-center, --kds-popover-try-top-center;
 }
-&.floating.top-left[data-v-f41f0af7] {
+&.floating.top-left[data-v-3d51a946] {
     inset: auto auto anchor(top) anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1180,7 +1180,7 @@ body:has(dialog.modal[open]) {
       --kds-popover-try-top-right, --kds-popover-try-bottom-left,
       --kds-popover-try-bottom-right, --kds-popover-try-top-left;
 }
-&.floating.bottom-right[data-v-f41f0af7] {
+&.floating.bottom-right[data-v-3d51a946] {
     inset: anchor(bottom) anchor(right) auto auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1188,14 +1188,14 @@ body:has(dialog.modal[open]) {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-center[data-v-f41f0af7] {
+&.floating.bottom-center[data-v-3d51a946] {
     inset: anchor(bottom) 0 auto;
     justify-self: anchor-center;
     margin: var(--kds-spacing-container-0-25x);
     position-try-fallbacks:
       --kds-popover-try-top-center, --kds-popover-try-bottom-center;
 }
-&.floating.bottom-left[data-v-f41f0af7] {
+&.floating.bottom-left[data-v-3d51a946] {
     inset: anchor(bottom) auto auto anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1203,7 +1203,7 @@ body:has(dialog.modal[open]) {
       --kds-popover-try-bottom-right, --kds-popover-try-top-left,
       --kds-popover-try-top-right, --kds-popover-try-bottom-left;
 }
-&.floating.custom[data-v-f41f0af7] {
+&.floating.custom[data-v-3d51a946] {
     position: fixed;
     inset: auto;
     margin: 0;
@@ -1239,7 +1239,7 @@ body:has(dialog.modal[open]) {
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-f41f0af7] {
+.kds-popover-default-content[data-v-3d51a946] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1249,7 +1249,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-side-drawer {
-&[data-v-059d2b2d] {
+&[data-v-2ee82be5] {
   inset: 0;
   width: var(--kds-side-drawer-size);
   height: 100%;
@@ -1276,11 +1276,11 @@ body:has(dialog.modal[open]) {
   --kds-side-drawer-hidden: calc(100vw + 28px);
 }
 @media (width > 640px) {
-&[data-v-059d2b2d]:is([data-width="default"]) {
+&[data-v-2ee82be5]:is([data-width="default"]) {
       --kds-side-drawer-size: var(--kds-width-side-drawer-default);
 }
 }
-&[data-v-059d2b2d]:popover-open {
+&[data-v-2ee82be5]:popover-open {
     transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
 @starting-style {
       transform: translateX(var(--kds-side-drawer-hidden));
@@ -1579,7 +1579,7 @@ body:has(dialog.modal[open]) {
 }
 }
 
-.kds-menu-item-link[data-v-5462bdbc] {
+.kds-menu-item-link[data-v-a4ac96c7] {
   display: block;
   color: inherit;
   text-decoration: none;
@@ -1780,13 +1780,13 @@ body:has(dialog.modal[open]) {
   white-space: nowrap;
 }
 
-.kds-form-field[data-v-5d99c134] {
+.kds-form-field[data-v-49715bc1] {
   display: flex;
   flex-direction: column;
 }
 
 .container {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1798,46 +1798,46 @@ body:has(dialog.modal[open]) {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-a45e012a]:has(input:focus:not(:disabled)) {
+&[data-v-3455a62d]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-a45e012a]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-3455a62d]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-a45e012a] {
+&.error[data-v-3455a62d] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-a45e012a] {
+&.disabled[data-v-3455a62d] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-a45e012a] {
+&.leading[data-v-3455a62d] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-a45e012a] {
+&.trailing[data-v-3455a62d] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-a45e012a] {
+.container.disabled &[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-a45e012a],
-  .container:has(.input-field.has-value) &[data-v-a45e012a] {
+.container:focus-within &[data-v-3455a62d],
+  .container:has(.input-field.has-value) &[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1853,36 +1853,36 @@ body:has(dialog.modal[open]) {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
     appearance: textfield;
 }
-&[data-v-a45e012a]::-webkit-outer-spin-button,
-    &[data-v-a45e012a]::-webkit-inner-spin-button {
+&[data-v-3455a62d]::-webkit-outer-spin-button,
+    &[data-v-3455a62d]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-a45e012a]::-webkit-search-cancel-button {
+&[type="search"][data-v-3455a62d]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-a45e012a]::placeholder {
+&[data-v-3455a62d]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-a45e012a] {
+&.empty-mask[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-a45e012a]::placeholder {
+&[data-v-3455a62d]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-a45e012a] {
+&[data-v-3455a62d] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1892,26 +1892,26 @@ body:has(dialog.modal[open]) {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-a45e012a] {
+&.placeholder[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-a45e012a] {
+&.disabled[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-a45e012a] {
+.container:focus-within &[data-v-3455a62d] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-a45e012a] {
+.clear-button[data-v-3455a62d] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-a45e012a] {
+.leading-slot[data-v-3455a62d] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-a45e012a] {
+.trailing-slot[data-v-3455a62d] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -2001,7 +2001,7 @@ body:has(dialog.modal[open]) {
 }
 
 .file-explorer-item {
-&[data-v-4811e8e8] {
+&[data-v-dc2117b4] {
   display: grid;
 
   /* first two cols - icon + name */
@@ -2013,27 +2013,27 @@ body:has(dialog.modal[open]) {
 
   /* style the last column if the options menu is visible */
 }
-&.has-options-menu > td[data-v-4811e8e8]:last-child {
+&.has-options-menu > td[data-v-dc2117b4]:last-child {
     width: min-content;
 }
 & .column {
-&[data-v-4811e8e8] {
+&[data-v-dc2117b4] {
     display: flex;
     align-items: center;
     height: 100%;
     overflow: hidden;
     white-space: nowrap;
 }
-& .inner[data-v-4811e8e8] {
+& .inner[data-v-dc2117b4] {
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
 }
-&.dynamic-column[data-v-4811e8e8]:empty {
+&.dynamic-column[data-v-dc2117b4]:empty {
       display: none;
 }
 }
-& .item-error[data-v-4811e8e8] {
+& .item-error[data-v-dc2117b4] {
     position: absolute;
     bottom: 0;
     z-index: 10;
@@ -2046,18 +2046,18 @@ body:has(dialog.modal[open]) {
     transform: translateY(100%);
 }
 & td.rename-active {
-&[data-v-4811e8e8] {
+&[data-v-dc2117b4] {
     padding: 0 var(--kds-spacing-container-0-25x);
 }
-& .rename-input-container[data-v-4811e8e8] {
+& .rename-input-container[data-v-dc2117b4] {
       flex: 1;
 }
 }
 & .item-icon {
-&[data-v-4811e8e8] {
+&[data-v-dc2117b4] {
     position: relative;
 }
-& .open-indicator[data-v-4811e8e8] {
+& .open-indicator[data-v-dc2117b4] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -2076,7 +2076,7 @@ body:has(dialog.modal[open]) {
   cursor: pointer;
 }
 
-.file-explorer[data-v-da0e6dab] {
+.file-explorer[data-v-10e65eb3] {
   display: flex;
   flex: 1 0 0%;
   flex-direction: column;
@@ -2085,10 +2085,10 @@ body:has(dialog.modal[open]) {
   /* needed so that the virtualization container can size the wrapper properly */
   min-height: 0;
 }
-.file-explorer-item[data-v-da0e6dab] {
-  height: var(--v44ee6cb4);
+.file-explorer-item[data-v-10e65eb3] {
+  height: var(--v4225dc64);
 }
-thead[data-v-da0e6dab] {
+thead[data-v-10e65eb3] {
   /* Hide table head for better readability but keeping it for a11y reasons */
   position: absolute;
 
@@ -2099,7 +2099,7 @@ thead[data-v-da0e6dab] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-da0e6dab] {
+table[data-v-10e65eb3] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -2110,31 +2110,31 @@ table[data-v-da0e6dab] {
 }
 table,
 tbody {
-&[data-v-da0e6dab] {
+&[data-v-10e65eb3] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-da0e6dab]:not(:has(.empty)) {
+&[data-v-10e65eb3]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-da0e6dab] {
+&[data-v-10e65eb3] {
   outline: none;
   }
-&.keyboard-focus[data-v-da0e6dab] {
+&.keyboard-focus[data-v-10e65eb3] {
     outline: 2px solid var(--kds-color-focus-outline);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
 }
-.empty[data-v-da0e6dab] {
+.empty[data-v-10e65eb3] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--kds-spacing-container-0-37x);
   margin: var(--kds-spacing-container-4x) 0;
 }
-.custom-preview[data-v-da0e6dab] {
+.custom-preview[data-v-10e65eb3] {
   position: fixed;
   top: 0;
   left: 0;
@@ -2240,7 +2240,7 @@ table:focus {
 }
 }
 
-.kds-fieldset[data-v-044d645d] {
+.kds-fieldset[data-v-f3228e9e] {
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
@@ -2248,7 +2248,7 @@ table:focus {
   margin: 0;
   border: none;
 }
-.kds-fieldset-legend[data-v-044d645d] {
+.kds-fieldset-legend[data-v-f3228e9e] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
@@ -2256,13 +2256,13 @@ table:focus {
   min-height: var(--kds-dimension-component-height-0-75x);
   padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-fieldset-content[data-v-044d645d] {
+.kds-fieldset-content[data-v-f3228e9e] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
   max-width: 100%;
 }
-.legend-text[data-v-044d645d] {
+.legend-text[data-v-f3228e9e] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
@@ -3348,16 +3348,16 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-resize-container {
-&[data-v-46b33b01] {
+&[data-v-7aabab3a] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-37x);
 }
-&.dragging[data-v-46b33b01] {
+&.dragging[data-v-7aabab3a] {
     user-select: none;
 }
 }
-.kds-resize-container-content[data-v-46b33b01] {
+.kds-resize-container-content[data-v-7aabab3a] {
   inline-size: 100%;
 }
 
@@ -3506,7 +3506,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-37x);
 }
 
-.kds-info-popover-content[data-v-951f2a2b] {
+.kds-info-popover-content[data-v-92b68551] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
@@ -3517,7 +3517,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-9916f7be] {
+&[data-v-dbbdabd8] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3538,20 +3538,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-9916f7be] {
+&.hidden[data-v-dbbdabd8] {
     opacity: 0;
 }
-&[data-v-9916f7be]:focus-visible {
+&[data-v-dbbdabd8]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-9916f7be]:hover {
+&[data-v-dbbdabd8]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-9916f7be]:active {
+&[data-v-dbbdabd8]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-9916f7be] {
+&.selected[data-v-dbbdabd8] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -3561,7 +3561,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-variable-popover {
-&[data-v-8a0c56d0] {
+&[data-v-345e63f3] {
   width: var(--kds-dimension-component-width-25x);
   max-width: 100%;
   max-height: var(--kds-dimension-component-height-20x);
@@ -3574,14 +3574,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-8a0c56d0]:focus-visible {
+&[data-v-345e63f3]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
 .variable-toggle-button {
-&[data-v-cd9186f9] {
+&[data-v-d5057ed8] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3602,27 +3602,27 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-cd9186f9] {
+&.hidden[data-v-d5057ed8] {
     opacity: 0;
 }
-&[data-v-cd9186f9]:focus-visible {
+&[data-v-d5057ed8]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-cd9186f9]:hover {
+&[data-v-d5057ed8]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-cd9186f9]:active {
+&[data-v-d5057ed8]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-cd9186f9] {
+&.pressed-or-set[data-v-d5057ed8] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
     --icon-color: var(--kds-color-text-and-icon-success);
 }
-&.error[data-v-cd9186f9] {
+&.error[data-v-d5057ed8] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
@@ -3631,19 +3631,19 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-.kds-accordion[data-v-96dcd299] {
+.kds-accordion[data-v-35f28ed3] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
   width: 100%;
 }
-.kds-accordion-item[data-v-96dcd299] {
+.kds-accordion-item[data-v-35f28ed3] {
   padding: var(--kds-spacing-container-0-25x);
   background: var(--kds-color-surface-muted);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
 .kds-accordion-header {
-&[data-v-96dcd299] {
+&[data-v-35f28ed3] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -3660,28 +3660,28 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-25x);
   }
-&[data-v-96dcd299]::-webkit-details-marker {
+&[data-v-35f28ed3]::-webkit-details-marker {
     display: none;
 }
-&[data-v-96dcd299]:focus-visible {
+&[data-v-35f28ed3]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &:not([aria-disabled="true"]) {
-&[data-v-96dcd299]:hover {
+&[data-v-35f28ed3]:hover {
       background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-96dcd299]:active {
+&[data-v-35f28ed3]:active {
       background: var(--kds-color-background-neutral-active);
 }
 }
-&[aria-disabled="true"][data-v-96dcd299] {
+&[aria-disabled="true"][data-v-35f28ed3] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
     background: var(--kds-color-background-neutral-initial);
 }
 }
-.kds-accordion-headline[data-v-96dcd299] {
+.kds-accordion-headline[data-v-35f28ed3] {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -3689,21 +3689,21 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   font: var(--kds-font-base-title-small-strong);
   white-space: nowrap;
 }
-.kds-accordion-headline-container[data-v-96dcd299] {
+.kds-accordion-headline-container[data-v-35f28ed3] {
   display: flex;
   flex: 1 1 auto;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   min-width: 0;
 }
-.kds-accordion-content[data-v-96dcd299] {
+.kds-accordion-content[data-v-35f28ed3] {
   padding: var(--kds-spacing-container-1x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
 
 .kds-card-header {
-&[data-v-09093cc0] {
+&[data-v-aacb597b] {
   display: flex;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
@@ -3713,15 +3713,15 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
   /* push actions to the right if its the only element */
 }
-.actions[data-v-09093cc0],
-  .accessory[data-v-09093cc0] {
+.actions[data-v-aacb597b],
+  .accessory[data-v-aacb597b] {
     display: flex;
     gap: var(--kds-spacing-container-0-37x);
 }
-.actions[data-v-09093cc0] {
+.actions[data-v-aacb597b] {
     margin-left: auto;
 }
-& h6[data-v-09093cc0] {
+& h6[data-v-aacb597b] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3733,7 +3733,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-base-card {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
   --kds-base-card-primary-action-z-index: 1;
   --kds-base-card-secondary-action-z-index: 2;
@@ -3750,11 +3750,11 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     border-color 0.2s,
     box-shadow 0.2s;
 }
-&[data-v-a1aff6d6] [data-kds-card-primary-action] {
+&[data-v-7d838f91] [data-kds-card-primary-action] {
     z-index: var(--kds-base-card-primary-action-z-index);
     border-radius: var(--kds-base-card-border-radius);
 }
-&[data-v-a1aff6d6] [data-kds-card-secondary-action] {
+&[data-v-7d838f91] [data-kds-card-secondary-action] {
     position: relative;
     z-index: var(--kds-base-card-secondary-action-z-index);
 }
@@ -3762,14 +3762,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Filled, Value: False */
 .variant-filled {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-surface-default);
   border: var(--kds-border-base-subtle);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3777,14 +3777,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: False */
 .variant-outlined {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-base-muted);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3792,15 +3792,15 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: False */
 .variant-transparent {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-action-transparent);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     background: var(--kds-color-background-neutral-hover);
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3808,14 +3808,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Filled, Value: True */
 .variant-filled.selected {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3823,14 +3823,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: True */
 .variant-outlined.selected {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3838,26 +3838,26 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: True */
 .variant-transparent.selected {
-&[data-v-a1aff6d6] {
+&[data-v-7d838f91] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-a1aff6d6] {
+&:hover.clickable[data-v-7d838f91] {
     background: var(--kds-color-background-selected-initial);
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-7d838f91]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
 }
 
 .kds-clickable-card {
-&[data-v-e1cdfe9d] {
+&[data-v-8b314672] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-e1cdfe9d] {
+&[data-v-8b314672] {
     position: absolute;
     inset: 0;
     padding: 0;
@@ -3870,45 +3870,45 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     background: none;
     border: none;
 }
-&[data-v-e1cdfe9d]:disabled {
+&[data-v-8b314672]:disabled {
       cursor: default;
 }
-&[data-v-e1cdfe9d]:focus {
+&[data-v-8b314672]:focus {
       outline: none;
 }
 }
-&[data-v-e1cdfe9d]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-8b314672]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
 .kds-link-card {
-&[data-v-c7e823e4] {
+&[data-v-4b8002a1] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-c7e823e4] {
+&[data-v-4b8002a1] {
     position: absolute;
     inset: 0;
     text-decoration: none;
 }
-&[data-v-c7e823e4]:focus {
+&[data-v-4b8002a1]:focus {
       outline: none;
 }
 }
-&[data-v-c7e823e4]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-4b8002a1]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
 .kds-selectable-card {
-&[data-v-af9b9bf6] {
+&[data-v-ac11a0a2] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-af9b9bf6] {
+&[data-v-ac11a0a2] {
     position: absolute;
     inset: 0;
     padding: 0;
@@ -3921,14 +3921,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     background: none;
     border: none;
 }
-&[data-v-af9b9bf6]:disabled {
+&[data-v-ac11a0a2]:disabled {
       cursor: default;
 }
-&[data-v-af9b9bf6]:focus {
+&[data-v-ac11a0a2]:focus {
       outline: none;
 }
 }
-&[data-v-af9b9bf6]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-ac11a0a2]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -4211,39 +4211,39 @@ to {
 }
 }
 
-.kds-loading-skeleton[data-v-326c25f0] {
+.kds-loading-skeleton[data-v-b3b70d6e] {
   display: flex;
   flex-direction: column;
-  gap: var(--v18b57ee8);
+  gap: var(--v78e8b31c);
 }
 .kds-loading-skeleton-headline-with-paragraph {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
   display: grid;
   gap: var(--kds-spacing-container-1-25x);
   }
-& .headline[data-v-326c25f0] {
+& .headline[data-v-b3b70d6e] {
     width: 50%;
     height: var(--kds-dimension-component-height-1x);
 }
 & .kds-loading-skeleton-paragraph-lines {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
     display: grid;
     gap: var(--kds-spacing-container-0-75x);
     }
-&[data-v-326c25f0] > *:nth-child(2) {
+&[data-v-b3b70d6e] > *:nth-child(2) {
       width: 75%;
 }
-&[data-v-326c25f0] > *:nth-child(3) {
+&[data-v-b3b70d6e] > *:nth-child(3) {
       width: 50%;
 }
 }
 }
-.kds-loading-skeleton-input-with-label[data-v-326c25f0] {
+.kds-loading-skeleton-input-with-label[data-v-b3b70d6e] {
   display: grid;
   gap: var(--kds-spacing-container-0-75x);
 }
 .kds-loading-skeleton-list-item {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4251,7 +4251,7 @@ to {
   min-width: var(--kds-dimension-component-width-12x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   }
-& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
+& .kds-loading-skeleton-list-item-text[data-v-b3b70d6e] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -4259,20 +4259,20 @@ to {
     min-width: 0;
 }
 &.kds-loading-skeleton-list-item-large {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
     padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
       justify-content: center;
       }
-& .text[data-v-326c25f0] {
+& .text[data-v-b3b70d6e] {
         height: var(--kds-dimension-component-height-0-88x);
 }
 }
 }
 &.kds-loading-skeleton-list-item-small {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
     gap: var(--kds-spacing-container-0-5x);
     align-items: start;
     padding: calc(
@@ -4280,19 +4280,19 @@ to {
       )
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
     }
-& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
+& .kds-loading-skeleton-list-item-text[data-v-b3b70d6e] {
       justify-content: flex-start;
 }
 }
 &.kds-loading-skeleton-list-item-large-with-subtext {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
     align-items: center;
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-326c25f0] {
+&[data-v-b3b70d6e] {
       justify-content: center;
       }
-& .text[data-v-326c25f0] {
+& .text[data-v-b3b70d6e] {
         height: var(--kds-dimension-component-height-0-75x);
 }
 }
@@ -4611,6 +4611,127 @@ li {
 }
 }
 
+.tree-node-wrapper[data-v-5d13b0e7] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-5x);
+}
+.tree-node[data-v-5d13b0e7] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding-left: var(--kds-spacing-container-1x);
+  overflow: hidden;
+}
+.tree-node-label[data-v-5d13b0e7] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.expandable[data-v-5d13b0e7] {
+  padding-left: var(--kds-spacing-container-none);
+  font: var(--kds-font-base-interactive-small-strong);
+}
+.virtual-tree {
+&[data-v-5d13b0e7] {
+  --virtual-tree-indent: var(--kds-spacing-container-1x);
+  }
+&[data-v-5d13b0e7]:focus {
+    outline: none;
+}
+}
+
+.virtual-tree.keyboard-nav .virtual-tree-node.focused {
+  padding-right: var(--kds-spacing-container-0-37x);
+  padding-left: calc(
+    var(--virtual-tree-level, 0) * var(--virtual-tree-indent) +
+      var(--kds-spacing-container-0-12x)
+  );
+  border: var(--kds-border-action-focused);
+}
+.virtual-tree {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.virtual-tree-node {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--kds-dimension-component-width-0-75x) auto;
+  gap: var(--kds-spacing-container-0-25x);
+  height: var(--kds-dimension-component-height-1-5x);
+  padding-right: var(--kds-spacing-container-0-5x);
+  padding-left: calc(
+    var(--virtual-tree-level, 0) * var(--virtual-tree-indent) +
+      var(--kds-spacing-container-0-25x)
+  );
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+.virtual-tree-node:not(.disabled):hover {
+  background-color: var(--kds-color-background-neutral-hover);
+}
+.virtual-tree-node:not(.disabled):active {
+  background-color: var(--kds-color-background-neutral-active);
+}
+.virtual-tree-node.disabled {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.virtual-tree-node.selected {
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+}
+.virtual-tree-node.selected::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--kds-dimension-component-width-0-125x);
+  height: var(--kds-dimension-component-height-1x);
+  content: "";
+  background: var(--kds-color-background-selected-bold-initial);
+  border-top-right-radius: var(--kds-border-radius-container-0-12x);
+  border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
+  transform: translateY(-50%);
+}
+.virtual-tree-node.selected:hover {
+  background-color: var(--kds-color-background-selected-hover);
+}
+.virtual-tree-node.selected:active {
+  background-color: var(--kds-color-background-selected-active);
+}
+.virtual-tree-node .node-arrow {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+.virtual-tree-node .node-arrow:empty {
+  display: none;
+}
+.virtual-tree-node:has(.node-arrow:empty) {
+  grid-template-columns: 1fr;
+}
+.virtual-tree-node .node-arrow.expanded:not(.loading) {
+  transform: rotate(90deg);
+}
+.virtual-tree-node .node-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
 .description {
 &[data-v-ed6ba7bb] {
   font: var(--kds-font-base-body-small);