@knime/kds-components 1.1.4 → 1.2.0

package/dist/index.css

@@ -30,7 +30,7 @@
 }
 
 .kds-avatar {
-&[data-v-a75804e1] {
+&[data-v-4da85666] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
@@ -40,75 +40,75 @@
   outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-a75804e1] {
+&.small[data-v-4da85666] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-a75804e1] {
+&.medium[data-v-4da85666] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-a75804e1] {
+&.large[data-v-4da85666] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-a75804e1] {
+&.xlarge[data-v-4da85666] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
-&[data-color="red"][data-v-a75804e1] {
+&[data-color="red"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-red);
     background: var(--kds-color-avatar-background-red);
 }
-&[data-color="orange"][data-v-a75804e1] {
+&[data-color="orange"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-orange);
     background: var(--kds-color-avatar-background-orange);
 }
-&[data-color="yellow"][data-v-a75804e1] {
+&[data-color="yellow"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-yellow);
     background: var(--kds-color-avatar-background-yellow);
 }
-&[data-color="green"][data-v-a75804e1] {
+&[data-color="green"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-green);
     background: var(--kds-color-avatar-background-green);
 }
-&[data-color="teal"][data-v-a75804e1] {
+&[data-color="teal"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-teal);
     background: var(--kds-color-avatar-background-teal);
 }
-&[data-color="blue"][data-v-a75804e1] {
+&[data-color="blue"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-blue);
     background: var(--kds-color-avatar-background-blue);
 }
-&[data-color="purple"][data-v-a75804e1] {
+&[data-color="purple"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-purple);
     background: var(--kds-color-avatar-background-purple);
 }
-&[data-color="aquamarine"][data-v-a75804e1] {
+&[data-color="aquamarine"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-aquamarine);
     background: var(--kds-color-avatar-background-aquamarine);
 }
-&[data-color="grassgreen"][data-v-a75804e1] {
+&[data-color="grassgreen"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-grassgreen);
     background: var(--kds-color-avatar-background-grassgreen);
 }
-&[data-color="brown"][data-v-a75804e1] {
+&[data-color="brown"][data-v-4da85666] {
     color: var(--kds-color-avatar-text-and-icon-brown);
     background: var(--kds-color-avatar-background-brown);
 }
-&[data-color="empty"][data-v-a75804e1] {
+&[data-color="empty"][data-v-4da85666] {
     color: transparent;
     background-color: var(--kds-color-avatar-background-empty);
 }
 }
-.kds-avatar-image[data-v-a75804e1] {
+.kds-avatar-image[data-v-4da85666] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-a75804e1] {
+.kds-avatar-initials[data-v-4da85666] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -119,34 +119,34 @@
   color: inherit;
   user-select: none;
 }
-.kds-avatar-initials > span[data-v-a75804e1] {
+.kds-avatar-initials > span[data-v-4da85666] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
 .kds-avatar-counter {
-&[data-v-1aef516d] {
+&[data-v-d3a7b887] {
   display: flex;
   align-items: center;
   isolation: isolate;
 }
-& .avatars[data-v-1aef516d] {
+& .avatars[data-v-d3a7b887] {
     display: flex;
 }
 & .avatar {
-&[data-v-1aef516d] {
+&[data-v-d3a7b887] {
     position: relative;
 }
-&[data-v-1aef516d]:not(:first-child) {
+&[data-v-d3a7b887]:not(:first-child) {
       margin-left: calc(-1 * var(--kds-spacing-container-0-25x));
 }
 }
-& .more-count[data-v-1aef516d] {
+& .more-count[data-v-d3a7b887] {
     margin-left: var(--kds-spacing-container-0-25x);
     font: var(--kds-font-base-subtext-small);
 }
 }
 .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);
 }
 }
@@ -309,493 +309,185 @@
 }
 }
 
-.kds-progress-bar {
-&[data-v-06930dc4] {
-  --progress-bar-background-color: var(--kds-color-surface-subtle);
-  --progress-bar-foreground-color: var(
-    --kds-color-background-primary-bold-initial
-  );
-  --progress-bar-radius: var(--kds-border-radius-container-pill);
-  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+html.kds-legacy {
+  --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
+}
 
+.button {
+&[data-v-6fbab10f] {
   position: relative;
-  width: 100%;
-  height: var(--progress-bar-height);
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-width: 15px;
+  max-width: 100%;
   overflow: hidden;
-  border-radius: var(--progress-bar-radius);
-
-  /* Firefox uses this to target the bar that represents the value of the progress element */
-
-  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
-}
-& .progress[data-v-06930dc4] {
-    display: block;
-    width: 100%;
-    height: var(--progress-bar-height);
-    padding: 0;
-    overflow: hidden;
-    appearance: none;
+  cursor: pointer;
 
-    /* Firefox sets the background of the bar from here  */
-    background-color: var(--progress-bar-background-color);
-    border: none;
-    border-radius: var(--progress-bar-radius);
+  /* for LinkButton */
 }
-& .progress[data-v-06930dc4]::-webkit-progress-bar {
-    background-color: var(--progress-bar-background-color);
+&[data-v-6fbab10f]:is(a) {
+    text-decoration: none;
 }
-& .progress[data-v-06930dc4]::-webkit-progress-value {
-    background-color: var(--progress-bar-foreground-color);
-    border-radius: var(--progress-bar-radius);
-    transition: width var(--progress-bar-transition-duration, 0.5s);
+&.disabled[data-v-6fbab10f] {
+    cursor: default;
 }
-& .progress[data-v-06930dc4]::-moz-progress-bar {
-    background-color: var(--progress-bar-foreground-color);
+&[data-v-6fbab10f]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-& .progress[data-v-06930dc4]:indeterminate {
-    background-color: var(--progress-bar-background-color);
-    background-image: none;
+&.filled {
+&[data-v-6fbab10f] {
+    color: var(--kds-color-text-and-icon-primary-inverted);
+    background-color: var(--kds-color-background-primary-bold-initial);
+    border: var(--kds-border-action-transparent);
 }
-& .progress[data-v-06930dc4]:indeterminate::-webkit-progress-bar {
-    background-color: transparent;
+&.disabled[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-disabled-inverted);
+      background-color: var(--kds-color-background-disabled-primary);
 }
-& .progress[data-v-06930dc4]:indeterminate::-moz-progress-bar {
-    background-color: transparent;
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+        background-color: var(--kds-color-background-primary-bold-hover);
 }
-& .indeterminate-bar[data-v-06930dc4] {
-    position: absolute;
-    inset-block: 0;
-    width: 35%;
-    pointer-events: none;
-    background-color: var(--progress-bar-foreground-color);
-    border-radius: var(--kds-border-radius-container-pill);
-    animation: move-indeterminate-06930dc4 1.5s linear infinite;
+&[data-v-6fbab10f]:active {
+        background-color: var(--kds-color-background-primary-bold-active);
 }
 }
-.kds-progress-bar-medium[data-v-06930dc4] {
-  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+&.destructive {
+&[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-danger-inverted);
+      background-color: var(--kds-color-background-danger-bold-initial);
 }
-.kds-progress-bar-large[data-v-06930dc4] {
-  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
+&.disabled[data-v-6fbab10f] {
+        color: var(--kds-color-text-and-icon-disabled-inverted);
+        background-color: var(--kds-color-background-disabled-danger);
 }
-@keyframes move-indeterminate-06930dc4 {
-0% {
-    transform: translateX(-120%);
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+          background-color: var(--kds-color-background-danger-bold-hover);
 }
-100% {
-    transform: translateX(320%);
+&[data-v-6fbab10f]:active {
+          background-color: var(--kds-color-background-danger-bold-active);
 }
 }
-
-.kds-color-swatch {
-&[data-v-b91cf470] {
-  display: inline-block;
-  flex-shrink: 0;
-  overflow: hidden;
-  line-height: 0;
-  background-origin: border-box;
-  border: var(--kds-border-base-muted);
-  border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.small[data-v-b91cf470] {
-    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
-
-    width: var(--kds-dimension-icon-0-75x);
-    height: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-b91cf470] {
-    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
-
-    width: var(--kds-dimension-icon-1x);
-    height: var(--kds-dimension-icon-1x);
+&.outlined {
+&[data-v-6fbab10f] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-initial);
+    border: var(--kds-border-action-default);
 }
-&.large[data-v-b91cf470] {
-    --kds-color-swatch-checker-size: calc(
-      var(--kds-dimension-component-width-1-25x) / 4
-    );
-
-    width: var(--kds-dimension-component-width-1-25x);
-    height: var(--kds-dimension-component-height-1-25x);
+&.disabled[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-disabled);
+      border: var(--kds-border-action-disabled);
 }
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
 }
-
-.kds-live-status {
-&[data-v-e67b29f5] {
-  --dot-color: var(--kds-color-state-disabled);
-  --dot-border-color: var(--kds-color-state-disabled-border);
-
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 0; /* gap already included in dot */
-  align-items: center;
-  max-width: 100%;
-  line-height: 0;
+&[data-v-6fbab10f]:active {
+        background-color: var(--kds-color-background-neutral-active);
 }
-&.red[data-v-e67b29f5] {
-    --dot-color: var(--kds-color-state-error);
-    --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-e67b29f5] {
-    --dot-color: var(--kds-color-state-warning);
-    --dot-border-color: var(--kds-color-state-warning-border);
+&.destructive {
+&[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-danger);
+      border: var(--kds-border-action-error);
 }
-&.green[data-v-e67b29f5] {
-    --dot-color: var(--kds-color-state-success);
-    --dot-border-color: var(--kds-color-state-success-border);
+&.disabled[data-v-6fbab10f] {
+        color: var(--kds-color-text-and-icon-disabled);
+        border: var(--kds-border-action-disabled);
 }
-.dot {
-&[data-v-e67b29f5] {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: var(--kds-dimension-icon-1-25x);
-    height: var(--kds-dimension-icon-1-25x);
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+          background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-e67b29f5]::after {
-      display: block;
-      width: 50%;
-      height: 50%;
-      content: "";
-      background-color: var(--dot-color);
-      border-color: var(--dot-border-color);
-      border-style: solid;
-      border-width: var(--kds-border-width-icon-stroke-l);
-      border-radius: var(--kds-border-radius-container-pill);
+&[data-v-6fbab10f]:active {
+          background-color: var(--kds-color-background-danger-active);
 }
 }
-.label[data-v-e67b29f5] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font: var(--kds-font-base-subtext-medium);
-    color: var(--kds-color-text-and-icon-neutral);
-    white-space: nowrap;
 }
-&.size-medium {
-.dot[data-v-e67b29f5] {
-      width: var(--kds-dimension-icon-1x);
-      height: var(--kds-dimension-icon-1x);
 }
-&[data-v-e67b29f5]::after {
-      border-width: var(--kds-border-width-icon-stroke-m);
+&.transparent {
+&[data-v-6fbab10f] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-initial);
+    border: var(--kds-border-action-transparent);
 }
-.label[data-v-e67b29f5] {
-      font: var(--kds-font-base-subtext-small);
+&.disabled[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-disabled);
 }
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
 }
-&.size-small {
-.dot[data-v-e67b29f5] {
-      width: var(--kds-dimension-icon-0-75x);
-      height: var(--kds-dimension-icon-0-75x);
+&[data-v-6fbab10f]:active {
+        background-color: var(--kds-color-background-neutral-active);
 }
-&[data-v-e67b29f5]::after {
-      border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-e67b29f5] {
-      font: var(--kds-font-base-subtext-xsmall);
+&.destructive {
+&[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-danger);
 }
+&.disabled[data-v-6fbab10f] {
+        color: var(--kds-color-text-and-icon-disabled);
 }
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+          background-color: var(--kds-color-background-danger-hover);
 }
-
-.kds-loading-spinner {
-&[data-v-54835dc0] {
-  --icon-width: var(--kds-dimension-icon-1x);
-  --icon-height: var(--kds-dimension-icon-1x);
-  --icon-stroke-width: 12; /* 10% of size */
-
-  width: var(--icon-width);
-  height: var(--icon-height);
-
-  --color-track: var(--kds-color-loading-spinner-track-on-surface);
-  --color-loader: var(--kds-color-loading-spinner-progress-on-surface);
+&[data-v-6fbab10f]:active {
+          background-color: var(--kds-color-background-danger-active);
 }
-&.xsmall[data-v-54835dc0] {
-    --icon-width: var(--kds-dimension-icon-0-56x);
-    --icon-height: var(--kds-dimension-icon-0-56x);
 }
-&.small[data-v-54835dc0] {
-    --icon-width: var(--kds-dimension-icon-0-75x);
-    --icon-height: var(--kds-dimension-icon-0-75x);
 }
-&.large[data-v-54835dc0] {
-    --icon-width: var(--kds-dimension-icon-1-25x);
-    --icon-height: var(--kds-dimension-icon-1-25x);
 }
-&[data-style="onPrimary"][data-v-54835dc0] {
-    --color-track: var(--kds-color-loading-spinner-track-on-primary);
-    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
+&.toggled {
+&[data-v-6fbab10f] {
+    color: var(--kds-color-text-and-icon-selected);
+    background-color: var(--kds-color-background-selected-initial);
+    border: var(--kds-border-action-selected);
 }
-& .track[data-v-54835dc0] {
-    fill: none;
-    stroke: var(--color-track);
-    stroke-width: var(--icon-stroke-width);
+&.disabled[data-v-6fbab10f] {
+      color: var(--kds-color-text-and-icon-disabled);
 }
-& .loader[data-v-54835dc0] {
-    fill: none;
-    stroke: var(--color-loader);
-    stroke-width: var(--icon-stroke-width);
-    stroke-linecap: round;
-    stroke-dasharray: 80 240;
-    transform: rotate(-90deg);
-    transform-origin: center;
-
-    /* REQUIRED for SVG rotation */
-    transform-box: fill-box;
-    animation: spin-54835dc0 1.2s linear infinite;
+&:not(.disabled, .success, .error) {
+&[data-v-6fbab10f]:hover {
+        background-color: var(--kds-color-background-selected-hover);
 }
+&[data-v-6fbab10f]:active {
+        background-color: var(--kds-color-background-selected-active);
 }
-@keyframes spin-54835dc0 {
-from {
-    transform: rotate(-90deg);
 }
-to {
-    transform: rotate(270deg);
 }
+& .label[data-v-6fbab10f] {
+    max-width: 200px;
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+&.xsmall[data-v-6fbab10f] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
 
-.kds-missing-value-icon[data-v-df682150] {
-  color: var(--kds-color-text-and-icon-danger);
-  stroke-width: var(--kds-border-width-icon-stroke-s);
+    font: var(--kds-font-base-interactive-xsmall-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-25x)
+    );
 }
-
-.donut-container {
-&[data-v-f5faf61c] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-75x);
-  align-items: center;
-}
-& .donut-chart {
-&[data-v-f5faf61c] {
-    display: block;
-    flex-shrink: 0;
-}
-& .background-circle[data-v-f5faf61c] {
-      stroke: var(--kds-color-background-static-chart-0);
-}
-& .primary-circle[data-v-f5faf61c] {
-      stroke: var(--kds-color-background-static-chart-1);
-}
-& .secondary-circle[data-v-f5faf61c] {
-      stroke: var(--kds-color-background-static-chart-2);
-}
-& .value-wedge {
-&.animate[data-v-f5faf61c] {
-        transition:
-          stroke-dashoffset 0.5s,
-          stroke 0.5s;
-}
-}
-}
-& .donut-text {
-&[data-v-f5faf61c] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kds-spacing-container-0-12x);
-    overflow: hidden;
-    color: var(--kds-color-text-and-icon-neutral);
-}
-& .title[data-v-f5faf61c] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font: var(--kds-font-base-title-medium-strong);
-      white-space: nowrap;
-}
-& .sub-text[data-v-f5faf61c] {
-      display: -webkit-box;
-      overflow: hidden;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      font: var(--kds-font-base-subtext-medium);
-      -webkit-box-orient: vertical;
-}
-}
-}
-
-.kds-divider[data-v-4d059bd3] {
-  margin: 0 0 var(--kds-spacing-container-0-12x);
-  border: none;
-  border-bottom: var(--kds-border-base-subtle);
-}
-
-html.kds-legacy {
-  --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
-}
-
-.button {
-&[data-v-ee3f8b5d] {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  min-width: 15px;
-  max-width: 100%;
-  overflow: hidden;
-  cursor: pointer;
-
-  /* for LinkButton */
-}
-&[data-v-ee3f8b5d]:is(a) {
-    text-decoration: none;
-}
-&.disabled[data-v-ee3f8b5d] {
-    cursor: default;
-}
-&[data-v-ee3f8b5d]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
-&.filled {
-&[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-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-disabled-inverted);
-      background-color: var(--kds-color-background-disabled-primary);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-        background-color: var(--kds-color-background-primary-bold-hover);
-}
-&[data-v-ee3f8b5d]:active {
-        background-color: var(--kds-color-background-primary-bold-active);
-}
-}
-&.destructive {
-&[data-v-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-danger-inverted);
-      background-color: var(--kds-color-background-danger-bold-initial);
-}
-&.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-ee3f8b5d]:hover {
-          background-color: var(--kds-color-background-danger-bold-hover);
-}
-&[data-v-ee3f8b5d]:active {
-          background-color: var(--kds-color-background-danger-bold-active);
-}
-}
-}
-}
-&.outlined {
-&[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-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-disabled);
-      border: var(--kds-border-action-disabled);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-        background-color: var(--kds-color-background-neutral-hover);
-}
-&[data-v-ee3f8b5d]:active {
-        background-color: var(--kds-color-background-neutral-active);
-}
-}
-&.destructive {
-&[data-v-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-danger);
-      border: var(--kds-border-action-error);
-}
-&.disabled[data-v-ee3f8b5d] {
-        color: var(--kds-color-text-and-icon-disabled);
-        border: var(--kds-border-action-disabled);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-          background-color: var(--kds-color-background-danger-hover);
-}
-&[data-v-ee3f8b5d]:active {
-          background-color: var(--kds-color-background-danger-active);
-}
-}
-}
-}
-&.transparent {
-&[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-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-disabled);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-        background-color: var(--kds-color-background-neutral-hover);
-}
-&[data-v-ee3f8b5d]:active {
-        background-color: var(--kds-color-background-neutral-active);
-}
-}
-&.destructive {
-&[data-v-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-danger);
-}
-&.disabled[data-v-ee3f8b5d] {
-        color: var(--kds-color-text-and-icon-disabled);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-          background-color: var(--kds-color-background-danger-hover);
-}
-&[data-v-ee3f8b5d]:active {
-          background-color: var(--kds-color-background-danger-active);
-}
-}
-}
-}
-&.toggled {
-&[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-ee3f8b5d] {
-      color: var(--kds-color-text-and-icon-disabled);
-}
-&:not(.disabled, .success, .error) {
-&[data-v-ee3f8b5d]:hover {
-        background-color: var(--kds-color-background-selected-hover);
-}
-&[data-v-ee3f8b5d]:active {
-        background-color: var(--kds-color-background-selected-active);
-}
-}
-}
-& .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-ee3f8b5d] {
-    gap: var(--kds-spacing-container-0-12x);
-    height: var(--kds-dimension-component-height-1-25x);
-    padding: 0
-      calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
-
-    font: var(--kds-font-base-interactive-xsmall-strong);
-    border-radius: var(
-      --kds-legacy-button-border-radius,
-      var(--kds-border-radius-container-0-25x)
-    );
-}
-&.small[data-v-ee3f8b5d] {
-    gap: var(--kds-spacing-container-0-12x);
-    height: var(--kds-dimension-component-height-1-5x);
-    padding: 0
-      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+&.small[data-v-6fbab10f] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-5x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
 
     font: var(--kds-font-base-interactive-small-strong);
     border-radius: var(
@@ -803,7 +495,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-ee3f8b5d] {
+&.medium[data-v-6fbab10f] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -816,7 +508,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-ee3f8b5d] {
+&[data-v-6fbab10f] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -828,11 +520,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-ee3f8b5d] {
+& .label[data-v-6fbab10f] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-ee3f8b5d] {
+&.success[data-v-6fbab10f] {
     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 +533,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-ee3f8b5d] {
+&.error[data-v-6fbab10f] {
     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 +542,18 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-ee3f8b5d] {
+&.remove-border-radius-left[data-v-6fbab10f] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-ee3f8b5d] {
+&.remove-border-radius-right[data-v-6fbab10f] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 }
 
 .modal-header {
-&[data-v-3b9d0ae0] {
+&[data-v-5129eb03] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -870,7 +562,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-3b9d0ae0] {
+& .modal-header-headline[data-v-5129eb03] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -879,7 +571,7 @@ html.kds-legacy {
 }
 }
 .modal-body {
-&[data-v-3b9d0ae0] {
+&[data-v-5129eb03] {
   --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 +581,17 @@ html.kds-legacy {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v6361116e);
+  overflow: var(--v0cb7acbb);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-3b9d0ae0] {
+&[data-variant="padded"][data-v-5129eb03] {
     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-3b9d0ae0] {
+.modal-footer[data-v-5129eb03] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -1015,6 +707,62 @@ body:has(dialog.modal[open]) {
 }
 }
 
+.kds-loading-spinner {
+&[data-v-54835dc0] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: 12; /* 10% of size */
+
+  width: var(--icon-width);
+  height: var(--icon-height);
+
+  --color-track: var(--kds-color-loading-spinner-track-on-surface);
+  --color-loader: var(--kds-color-loading-spinner-progress-on-surface);
+}
+&.xsmall[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-0-56x);
+    --icon-height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-0-75x);
+    --icon-height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-1-25x);
+    --icon-height: var(--kds-dimension-icon-1-25x);
+}
+&[data-style="onPrimary"][data-v-54835dc0] {
+    --color-track: var(--kds-color-loading-spinner-track-on-primary);
+    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
+}
+& .track[data-v-54835dc0] {
+    fill: none;
+    stroke: var(--color-track);
+    stroke-width: var(--icon-stroke-width);
+}
+& .loader[data-v-54835dc0] {
+    fill: none;
+    stroke: var(--color-loader);
+    stroke-width: var(--icon-stroke-width);
+    stroke-linecap: round;
+    stroke-dasharray: 80 240;
+    transform: rotate(-90deg);
+    transform-origin: center;
+
+    /* REQUIRED for SVG rotation */
+    transform-box: fill-box;
+    animation: spin-54835dc0 1.2s linear infinite;
+}
+}
+@keyframes spin-54835dc0 {
+from {
+    transform: rotate(-90deg);
+}
+to {
+    transform: rotate(270deg);
+}
+}
+
 .subtext {
 &[data-v-2e6ba10c] {
   display: flex;
@@ -1033,7 +781,7 @@ body:has(dialog.modal[open]) {
 }
 
 .checkbox {
-&[data-v-5138a023] {
+&[data-v-cc0338d9] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -1053,7 +801,7 @@ body:has(dialog.modal[open]) {
   background: none;
   border: none;
 }
-.control[data-v-5138a023] {
+.control[data-v-cc0338d9] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -1066,39 +814,39 @@ body:has(dialog.modal[open]) {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-5138a023] {
+&:focus-visible .control[data-v-cc0338d9] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-5138a023] {
+&:hover:not(.disabled) .control[data-v-cc0338d9] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-5138a023] {
+&:active:not(.disabled) .control[data-v-cc0338d9] {
     background: var(--bg-active);
 }
-&.checked[data-v-5138a023],
-  &.indeterminate[data-v-5138a023] {
+&.checked[data-v-cc0338d9],
+  &.indeterminate[data-v-cc0338d9] {
     --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);
 }
 .content {
-&[data-v-5138a023] {
+&[data-v-cc0338d9] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
 }
-& .label[data-v-5138a023] {
+& .label[data-v-cc0338d9] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-5138a023] {
+& .helper-text[data-v-cc0338d9] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-5138a023] {
+&.disabled[data-v-cc0338d9] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -1107,20 +855,20 @@ body:has(dialog.modal[open]) {
     cursor: default;
 }
 &.error {
-&[data-v-5138a023] {
+&[data-v-cc0338d9] {
     --border: var(--kds-border-action-error);
     --icon-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
 }
-&.checked[data-v-5138a023],
-    &.indeterminate[data-v-5138a023] {
+&.checked[data-v-cc0338d9],
+    &.indeterminate[data-v-cc0338d9] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-5138a023] {
+.subtext-wrapper[data-v-cc0338d9] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
@@ -1130,162 +878,414 @@ body:has(dialog.modal[open]) {
 .ask-again[data-v-41fc8d84] {
   padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-.flush-left[data-v-41fc8d84] {
-  margin-right: auto;
+.flush-left[data-v-41fc8d84] {
+  margin-right: auto;
+}
+
+.kds-popover {
+&[data-v-3d51a946] {
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+
+  /*
+   * For custom placement the popover is positioned statically via inline
+   * left/top styles. Explicitly clear the UA default `inset: 0` so the
+   * popover doesn't stretch to the viewport edges (which would break
+   * light-dismiss / click-outside behavior).
+   */
+}
+&.full-width[data-v-3d51a946] {
+    min-inline-size: anchor-size(width);
+    max-inline-size: anchor-size(width);
+}
+&.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);
+    position-try-fallbacks:
+      --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-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-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;
+    position-try-fallbacks:
+      --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-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);
+    position-try-fallbacks:
+      --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-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-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;
+    position-try-fallbacks:
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
+}
+&.floating.custom[data-v-3d51a946] {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+}
+}
+@position-try --kds-popover-try-top-right {
+  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);
+}
+@position-try --kds-popover-try-top-center {
+  inset: auto auto anchor(top);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
+@position-try --kds-popover-try-top-left {
+  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;
+}
+@position-try --kds-popover-try-bottom-right {
+  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);
+}
+@position-try --kds-popover-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
+@position-try --kds-popover-try-bottom-left {
+  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;
+}
+.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);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.kds-side-drawer {
+&[data-v-2ee82be5] {
+  inset: 0;
+  width: var(--kds-side-drawer-size);
+  height: 100%;
+  padding: 0;
+
+  /* Reset popover defaults */
+  margin: 0;
+  overflow: visible;
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  box-shadow: var(--kds-elevation-level-3);
+
+  /* Hidden state */
+  transform: translateX(var(--kds-side-drawer-hidden));
+  transition:
+    transform 0.15s ease-in-out,
+    overlay 0.15s ease-in-out allow-discrete,
+    display 0.15s ease-in-out allow-discrete;
+
+  /** full is default - mobile first */
+  --kds-side-drawer-size: 100%;
+
+  /** + 28 px to hide the shadow  */
+  --kds-side-drawer-hidden: calc(100vw + 28px);
+}
+@media (width > 640px) {
+&[data-v-2ee82be5]:is([data-width="default"]) {
+      --kds-side-drawer-size: var(--kds-width-side-drawer-default);
+}
+}
+&[data-v-2ee82be5]:popover-open {
+    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
+@starting-style {
+      transform: translateX(var(--kds-side-drawer-hidden));
+}
+}
+}
+
+.kds-progress-bar {
+&[data-v-a8563140] {
+  --progress-bar-background-color: var(--kds-color-surface-subtle);
+  --progress-bar-foreground-color: var(
+    --kds-color-background-primary-bold-initial
+  );
+  --progress-bar-radius: var(--kds-border-radius-container-pill);
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+
+  position: relative;
+  width: 100%;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  border-radius: var(--progress-bar-radius);
+
+  /* Firefox uses this to target the bar that represents the value of the progress element */
+
+  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
+}
+& .progress[data-v-a8563140] {
+    display: block;
+    width: 100%;
+    height: var(--progress-bar-height);
+    padding: 0;
+    overflow: hidden;
+    appearance: none;
+
+    /* Firefox sets the background of the bar from here  */
+    background-color: var(--progress-bar-background-color);
+    border: none;
+    border-radius: var(--progress-bar-radius);
+}
+& .progress[data-v-a8563140]::-webkit-progress-bar {
+    background-color: var(--progress-bar-background-color);
+}
+& .progress[data-v-a8563140]::-webkit-progress-value {
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--progress-bar-radius);
+    transition: width var(--progress-bar-transition-duration, 0.5s);
+}
+& .progress[data-v-a8563140]::-moz-progress-bar {
+    background-color: var(--progress-bar-foreground-color);
+}
+& .progress[data-v-a8563140]:indeterminate {
+    background-color: var(--progress-bar-background-color);
+    background-image: none;
+}
+& .progress[data-v-a8563140]:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+}
+& .progress[data-v-a8563140]:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+& .indeterminate-bar[data-v-a8563140] {
+    position: absolute;
+    inset-block: 0;
+    width: 35%;
+    pointer-events: none;
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    animation: move-indeterminate-a8563140 1.5s linear infinite;
+}
+}
+.kds-progress-bar-medium[data-v-a8563140] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+}
+.kds-progress-bar-large[data-v-a8563140] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
+}
+@keyframes move-indeterminate-a8563140 {
+0% {
+    transform: translateX(-120%);
+}
+100% {
+    transform: translateX(320%);
+}
+}
+
+.kds-color-swatch {
+&[data-v-dd4ddfb5] {
+  display: inline-block;
+  flex-shrink: 0;
+  overflow: hidden;
+  line-height: 0;
+  background-origin: border-box;
+  border: var(--kds-border-base-muted);
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.small[data-v-dd4ddfb5] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
+
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-dd4ddfb5] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
+
+    width: var(--kds-dimension-icon-1x);
+    height: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-dd4ddfb5] {
+    --kds-color-swatch-checker-size: calc(
+      var(--kds-dimension-component-width-1-25x) / 4
+    );
+
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+}
+
+.kds-live-status {
+&[data-v-a158abc8] {
+  --dot-color: var(--kds-color-state-disabled);
+  --dot-border-color: var(--kds-color-state-disabled-border);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0; /* gap already included in dot */
+  align-items: center;
+  max-width: 100%;
+  line-height: 0;
+}
+&.red[data-v-a158abc8] {
+    --dot-color: var(--kds-color-state-error);
+    --dot-border-color: var(--kds-color-state-error-border);
+}
+&.orange[data-v-a158abc8] {
+    --dot-color: var(--kds-color-state-warning);
+    --dot-border-color: var(--kds-color-state-warning-border);
+}
+&.green[data-v-a158abc8] {
+    --dot-color: var(--kds-color-state-success);
+    --dot-border-color: var(--kds-color-state-success-border);
+}
+.dot {
+&[data-v-a158abc8] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
+}
+&[data-v-a158abc8]::after {
+      display: block;
+      width: 50%;
+      height: 50%;
+      content: "";
+      background-color: var(--dot-color);
+      border-color: var(--dot-border-color);
+      border-style: solid;
+      border-width: var(--kds-border-width-icon-stroke-l);
+      border-radius: var(--kds-border-radius-container-pill);
+}
+}
+.label[data-v-a158abc8] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-subtext-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
+}
+&.size-medium {
+.dot[data-v-a158abc8] {
+      width: var(--kds-dimension-icon-1x);
+      height: var(--kds-dimension-icon-1x);
 }
-
-.kds-popover {
-&[data-v-3d51a946] {
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  font: inherit;
-  color: inherit;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-
-  /*
-   * For custom placement the popover is positioned statically via inline
-   * left/top styles. Explicitly clear the UA default `inset: 0` so the
-   * popover doesn't stretch to the viewport edges (which would break
-   * light-dismiss / click-outside behavior).
-   */
+&[data-v-a158abc8]::after {
+      border-width: var(--kds-border-width-icon-stroke-m);
 }
-&.full-width[data-v-3d51a946] {
-    min-inline-size: anchor-size(width);
-    max-inline-size: anchor-size(width);
+.label[data-v-a158abc8] {
+      font: var(--kds-font-base-subtext-small);
 }
-&.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);
-    position-try-fallbacks:
-      --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-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;
+&.size-small {
+.dot[data-v-a158abc8] {
+      width: var(--kds-dimension-icon-0-75x);
+      height: var(--kds-dimension-icon-0-75x);
 }
-&.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;
-    position-try-fallbacks:
-      --kds-popover-try-top-right, --kds-popover-try-bottom-left,
-      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
+&[data-v-a158abc8]::after {
+      border-width: var(--kds-border-width-icon-stroke-s);
 }
-&.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);
-    position-try-fallbacks:
-      --kds-popover-try-bottom-left, --kds-popover-try-top-right,
-      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
+.label[data-v-a158abc8] {
+      font: var(--kds-font-base-subtext-xsmall);
 }
-&.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-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;
-    position-try-fallbacks:
-      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
-      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
 }
-&.floating.custom[data-v-3d51a946] {
-    position: fixed;
-    inset: auto;
-    margin: 0;
+
+.kds-missing-value-icon[data-v-df682150] {
+  color: var(--kds-color-text-and-icon-danger);
+  stroke-width: var(--kds-border-width-icon-stroke-s);
 }
+
+.donut-container {
+&[data-v-3cea3ddf] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-75x);
+  align-items: center;
 }
-@position-try --kds-popover-try-top-right {
-  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);
+& .donut-chart {
+&[data-v-3cea3ddf] {
+    display: block;
+    flex-shrink: 0;
 }
-@position-try --kds-popover-try-top-center {
-  inset: auto auto anchor(top);
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) 0;
+& .background-circle[data-v-3cea3ddf] {
+      stroke: var(--kds-color-background-static-chart-0);
 }
-@position-try --kds-popover-try-top-left {
-  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;
+& .primary-circle[data-v-3cea3ddf] {
+      stroke: var(--kds-color-background-static-chart-1);
 }
-@position-try --kds-popover-try-bottom-right {
-  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);
+& .secondary-circle[data-v-3cea3ddf] {
+      stroke: var(--kds-color-background-static-chart-2);
 }
-@position-try --kds-popover-try-bottom-center {
-  inset: anchor(bottom) auto auto;
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) 0;
+& .value-wedge {
+&.animate[data-v-3cea3ddf] {
+        transition:
+          stroke-dashoffset 0.5s,
+          stroke 0.5s;
 }
-@position-try --kds-popover-try-bottom-left {
-  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;
 }
-.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);
-  background-color: var(--kds-color-surface-default);
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-elevation-level-3);
 }
-
-.kds-side-drawer {
-&[data-v-2ee82be5] {
-  inset: 0;
-  width: var(--kds-side-drawer-size);
-  height: 100%;
-  padding: 0;
-
-  /* Reset popover defaults */
-  margin: 0;
-  overflow: visible;
-  background-color: var(--kds-color-surface-default);
-  border: none;
-  box-shadow: var(--kds-elevation-level-3);
-
-  /* Hidden state */
-  transform: translateX(var(--kds-side-drawer-hidden));
-  transition:
-    transform 0.15s ease-in-out,
-    overlay 0.15s ease-in-out allow-discrete,
-    display 0.15s ease-in-out allow-discrete;
-
-  /** full is default - mobile first */
-  --kds-side-drawer-size: 100%;
-
-  /** + 28 px to hide the shadow  */
-  --kds-side-drawer-hidden: calc(100vw + 28px);
+& .donut-text {
+&[data-v-3cea3ddf] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    color: var(--kds-color-text-and-icon-neutral);
 }
-@media (width > 640px) {
-&[data-v-2ee82be5]:is([data-width="default"]) {
-      --kds-side-drawer-size: var(--kds-width-side-drawer-default);
+& .title[data-v-3cea3ddf] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-title-medium-strong);
+      white-space: nowrap;
 }
+& .sub-text[data-v-3cea3ddf] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-medium);
+      -webkit-box-orient: vertical;
 }
-&[data-v-2ee82be5]:popover-open {
-    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
-@starting-style {
-      transform: translateX(var(--kds-side-drawer-hidden));
 }
 }
+
+.kds-divider[data-v-4d059bd3] {
+  margin: 0 0 var(--kds-spacing-container-0-12x);
+  border: none;
+  border-bottom: var(--kds-border-base-subtle);
 }
 
 .kds-link {
@@ -1363,7 +1363,7 @@ body:has(dialog.modal[open]) {
 }
 
 .leading {
-&[data-v-ca9c134c] {
+&[data-v-a639a0ef] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -1371,21 +1371,21 @@ body:has(dialog.modal[open]) {
   width: var(--kds-dimension-icon-1x);
   height: var(--kds-dimension-icon-1x);
 }
-&.xsmall[data-v-ca9c134c] {
+&.xsmall[data-v-a639a0ef] {
     width: var(--kds-dimension-icon-0-56x);
     height: var(--kds-dimension-icon-0-56x);
 }
-&.small[data-v-ca9c134c] {
+&.small[data-v-a639a0ef] {
     width: var(--kds-dimension-icon-0-75x);
     height: var(--kds-dimension-icon-0-75x);
 }
-&.large[data-v-ca9c134c] {
+&.large[data-v-a639a0ef] {
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
 }
-.leading-icon[data-v-ca9c134c],
-.spinner[data-v-ca9c134c] {
+.leading-icon[data-v-a639a0ef],
+.spinner[data-v-a639a0ef] {
   position: absolute;
   inset: 0;
   display: inline-flex;
@@ -1394,8 +1394,8 @@ body:has(dialog.modal[open]) {
   opacity: 0;
   transition: opacity 200ms ease-out;
 }
-.leading-icon[data-visible="true"][data-v-ca9c134c],
-.spinner[data-visible="true"][data-v-ca9c134c] {
+.leading-icon[data-visible="true"][data-v-a639a0ef],
+.spinner[data-visible="true"][data-v-a639a0ef] {
   opacity: 1;
 }
 
@@ -1786,7 +1786,7 @@ body:has(dialog.modal[open]) {
 }
 
 .container {
-&[data-v-3455a62d] {
+&[data-v-829e352d] {
   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-3455a62d]:has(input:focus:not(:disabled)) {
+&[data-v-829e352d]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-3455a62d]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-829e352d]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-3455a62d] {
+&.error[data-v-829e352d] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-3455a62d] {
+&.disabled[data-v-829e352d] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-3455a62d] {
+&[data-v-829e352d] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-3455a62d] {
+&.leading[data-v-829e352d] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-3455a62d] {
+&.trailing[data-v-829e352d] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-3455a62d] {
+.container.disabled &[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-3455a62d],
-  .container:has(.input-field.has-value) &[data-v-3455a62d] {
+.container:focus-within &[data-v-829e352d],
+  .container:has(.input-field.has-value) &[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-3455a62d] {
+&[data-v-829e352d] {
   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-3455a62d] {
+&[data-v-829e352d] {
     appearance: textfield;
 }
-&[data-v-3455a62d]::-webkit-outer-spin-button,
-    &[data-v-3455a62d]::-webkit-inner-spin-button {
+&[data-v-829e352d]::-webkit-outer-spin-button,
+    &[data-v-829e352d]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-3455a62d]::-webkit-search-cancel-button {
+&[type="search"][data-v-829e352d]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-3455a62d]::placeholder {
+&[data-v-829e352d]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-3455a62d] {
+&.empty-mask[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-3455a62d] {
+&[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-3455a62d]::placeholder {
+&[data-v-829e352d]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-3455a62d] {
+&[data-v-829e352d] {
   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-3455a62d] {
+&.placeholder[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-3455a62d] {
+&.disabled[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-3455a62d] {
+.container:focus-within &[data-v-829e352d] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-3455a62d] {
+.clear-button[data-v-829e352d] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-3455a62d] {
+.leading-slot[data-v-829e352d] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-3455a62d] {
+.trailing-slot[data-v-829e352d] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -2076,7 +2076,7 @@ body:has(dialog.modal[open]) {
   cursor: pointer;
 }
 
-.file-explorer[data-v-e6617d12] {
+.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-e6617d12] {
-  height: var(--v4f198f8d);
+.file-explorer-item[data-v-10e65eb3] {
+  height: var(--v4225dc64);
 }
-thead[data-v-e6617d12] {
+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-e6617d12] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-e6617d12] {
+table[data-v-10e65eb3] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -2110,31 +2110,31 @@ table[data-v-e6617d12] {
 }
 table,
 tbody {
-&[data-v-e6617d12] {
+&[data-v-10e65eb3] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-e6617d12]:not(:has(.empty)) {
+&[data-v-10e65eb3]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-e6617d12] {
+&[data-v-10e65eb3] {
   outline: none;
   }
-&.keyboard-focus[data-v-e6617d12] {
+&.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-e6617d12] {
+.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-e6617d12] {
+.custom-preview[data-v-10e65eb3] {
   position: fixed;
   top: 0;
   left: 0;
@@ -2532,7 +2532,7 @@ table:focus {
 }
 
 .option {
-&[data-v-158bc82b] {
+&[data-v-4ef3315b] {
   display: flex;
   flex: 0 1 auto;
   gap: var(--kds-spacing-container-0-25x);
@@ -2554,57 +2554,57 @@ table:focus {
   border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.size-small[data-v-158bc82b] {
+&.size-small[data-v-4ef3315b] {
     height: var(--kds-dimension-component-height-1-25x);
     font: var(--kds-font-base-interactive-small-strong);
 }
-&[data-v-158bc82b]:focus-visible {
+&[data-v-4ef3315b]:focus-visible {
     outline: none;
 }
-&[data-v-158bc82b]:focus:not(.selected) {
+&[data-v-4ef3315b]:focus:not(.selected) {
     border: var(--kds-border-action-selected);
 }
-&[data-v-158bc82b]:hover:not(:disabled) {
+&[data-v-4ef3315b]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-158bc82b]:active:not(:disabled) {
+&[data-v-4ef3315b]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-158bc82b] {
+&[data-v-4ef3315b] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&[data-v-158bc82b]:hover:not(:disabled) {
+&[data-v-4ef3315b]:hover:not(:disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-158bc82b]:active:not(:disabled) {
+&[data-v-4ef3315b]:active:not(:disabled) {
       background: var(--kds-color-background-selected-active);
 }
 &.variant-muted {
-&[data-v-158bc82b] {
+&[data-v-4ef3315b] {
       color: var(--kds-color-text-and-icon-neutral);
       background: var(--kds-color-background-input-initial);
 }
-&[data-v-158bc82b]:hover:not(:disabled) {
+&[data-v-4ef3315b]:hover:not(:disabled) {
         background: var(--kds-color-background-input-hover);
 }
-&[data-v-158bc82b]:active:not(:disabled) {
+&[data-v-4ef3315b]:active:not(:disabled) {
         background: var(--kds-color-background-input-active);
 }
 }
 }
-&.disabled[data-v-158bc82b] {
+&.disabled[data-v-4ef3315b] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&.disabled.selected[data-v-158bc82b] {
+&.disabled.selected[data-v-4ef3315b] {
     color: var(--kds-color-text-and-icon-disabled);
     border: var(--kds-border-action-disabled);
 }
 }
-.option-label[data-v-158bc82b] {
+.option-label[data-v-4ef3315b] {
   min-width: 0;
   padding: 0 var(--kds-spacing-container-0-12x);
   overflow: hidden;
@@ -3051,7 +3051,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   display: none;
 }
 
-.kds-time-picker[data-v-0b8a4eba] {
+.kds-time-picker[data-v-2033a969] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
@@ -3061,30 +3061,30 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-time-picker-fields[data-v-0b8a4eba] {
+.kds-time-picker-fields[data-v-2033a969] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: flex-start;
 }
-.kds-time-picker-field[data-v-0b8a4eba] {
+.kds-time-picker-field[data-v-2033a969] {
   flex: 1;
   min-width: var(--kds-dimension-component-width-4x);
 }
-.kds-time-picker-field-trash[data-v-0b8a4eba] {
+.kds-time-picker-field-trash[data-v-2033a969] {
   margin-top: calc(
     var(--kds-dimension-component-height-1x) +
       var(--kds-spacing-input-label-spacing-bottom)
   );
 }
-.kds-time-picker-divider[data-v-0b8a4eba] {
+.kds-time-picker-divider[data-v-2033a969] {
   width: 100%;
 }
-.kds-time-picker-actions[data-v-0b8a4eba] {
+.kds-time-picker-actions[data-v-2033a969] {
   display: flex;
   justify-content: center;
 }
 
-.kds-interval-popover[data-v-02541fd1] {
+.kds-interval-popover[data-v-3d64537f] {
   display: flex;
   flex-direction: column;
   width: var(--kds-dimension-component-width-17-5x);
@@ -3094,7 +3094,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   box-shadow: var(--kds-elevation-level-3);
 }
 .kds-interval-popover-header {
-&[data-v-02541fd1] {
+&[data-v-3d64537f] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -3102,28 +3102,28 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-37x)
     var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
   }
-.kds-interval-popover-title[data-v-02541fd1] {
+.kds-interval-popover-title[data-v-3d64537f] {
     font: var(--kds-font-base-title-medium);
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.kds-interval-popover-divider[data-v-02541fd1] {
+.kds-interval-popover-divider[data-v-3d64537f] {
   padding-bottom: calc(
     var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
   );
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-interval-popover-content {
-&[data-v-02541fd1] {
+&[data-v-3d64537f] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x);
   padding: var(--kds-spacing-container-0-75x);
   }
-.kds-interval-popover-direction-switch[data-v-02541fd1] {
+.kds-interval-popover-direction-switch[data-v-3d64537f] {
     align-self: center;
 }
-.kds-interval-popover-grid[data-v-02541fd1] {
+.kds-interval-popover-grid[data-v-3d64537f] {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
@@ -3433,7 +3433,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-eb1bc043] {
+.kds-twin-list-body[data-v-f3ed8f85] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3441,31 +3441,31 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-eb1bc043] {
+&[data-v-f3ed8f85] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-eb1bc043] {
+& .kds-list-box[data-v-f3ed8f85] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-eb1bc043] {
+.kds-list-header[data-v-f3ed8f85] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-eb1bc043] {
+.kds-list-label[data-v-f3ed8f85] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-eb1bc043] {
+.kds-list-count[data-v-f3ed8f85] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-eb1bc043] {
+.kds-button-column[data-v-f3ed8f85] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);
@@ -3477,11 +3477,11 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-37x);
 }
 
-.kds-sortable-list-box-wrapper[data-v-ee7b63e2] {
+.kds-sortable-list-box-wrapper[data-v-586d5e52] {
   display: flex;
   flex-direction: column;
 }
-.kds-sortable-top-buttons[data-v-ee7b63e2] {
+.kds-sortable-top-buttons[data-v-586d5e52] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3491,11 +3491,11 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.kds-sortable-top-buttons-left[data-v-ee7b63e2] {
+.kds-sortable-top-buttons-left[data-v-586d5e52] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
 }
-.kds-sortable-footer-buttons[data-v-ee7b63e2] {
+.kds-sortable-footer-buttons[data-v-586d5e52] {
   display: flex;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
@@ -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);