@knime/kds-components 1.1.2 → 1.1.3

package/dist/index.css

@@ -860,357 +860,278 @@ html.kds-legacy {
 }
 }
 
-.kds-link {
-&[data-v-3d5dda8c] {
-  display: inline-flex;
+.modal-header {
+&[data-v-36cbff95] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
   align-items: center;
-  justify-content: center;
-  width: fit-content;
-  max-width: 100%;
-  padding: var(--kds-spacing-container-none) var(--kds-spacing-container-0-10x);
-  font: var(--kds-font-base-body-small);
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
+  font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
-  text-decoration-line: underline;
-  border-radius: var(--kds-border-radius-container-0-12x);
-}
-&.size-small[data-v-3d5dda8c] {
-    font: var(--kds-font-base-subtext-small);
-}
-&[data-v-3d5dda8c]:is(a) {
-    cursor: pointer;
-}
-&[data-v-3d5dda8c]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-container-none);
 }
-& .label[data-v-3d5dda8c],
-  & .file-size[data-v-3d5dda8c] {
+& .modal-header-headline[data-v-36cbff95] {
+    flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
-&.variant-internal {
-&[data-v-3d5dda8c] {
-    color: var(--kds-color-text-and-icon-neutral);
 }
-&:not(.disabled) {
-&[data-v-3d5dda8c]:visited {
-        color: var(--kds-color-text-and-icon-info);
+.modal-body {
+&[data-v-36cbff95] {
+  --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);
+  --modal-padding-bottom: var(--kds-spacing-container-1x);
+  --modal-gap: var(--kds-spacing-container-1x);
+
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: var(--d8a22254);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-v-3d5dda8c]:hover {
-        background-color: var(--kds-color-background-neutral-hover);
+&[data-variant="padded"][data-v-36cbff95] {
+    gap: var(--modal-gap);
+    padding: var(--modal-padding-top) var(--modal-padding-right)
+      var(--modal-padding-bottom) var(--modal-padding-left);
 }
-&[data-v-3d5dda8c]:active {
-        background-color: var(--kds-color-background-neutral-active);
 }
+.modal-footer[data-v-36cbff95] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  justify-content: right;
+  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
 }
+
+/** see: https://github.com/whatwg/html/issues/7732  */
+body:has(dialog.modal[open]) {
+  overflow: hidden;
 }
-&.variant-external[data-v-3d5dda8c] {
-    gap: var(--kds-spacing-container-0-12x);
+
+.kds-modal {
+&[data-v-d4ff271c] {
+  /* rule is broken it complains about local variables for no reason */
+  /* stylelint-disable csstools/value-no-unknown-custom-properties */
+  --modal-full-size: 95%;
+  --modal-backdrop-animation-time: 125ms;
+
+  display: flex;
+  flex-direction: column;
+  width: min(var(--modal-full-size), var(--modal-width));
+  height: var(--modal-height);
+  max-height: var(--modal-full-size);
+  padding: 0;
+  overflow: var(--ef11ed42);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+
+  /** Animation */
+  opacity: 0;
+  transform: scale(var(--modal-scale-base));
+  transition: var(--modal-animation-time) allow-discrete;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: display, opacity, overlay, transform;
+
+  /* hide if its not open */
 }
-&:is(.variant-external, .variant-document) {
-&[data-v-3d5dda8c] {
-    color: var(--kds-color-text-and-icon-selected);
+&.width-small[data-v-d4ff271c] {
+    --modal-width: var(--kds-dimension-component-width-25x);
+    --modal-animation-time: 100ms;
+    --modal-scale-base: 0.85;
 }
-&:not(.disabled) {
-&[data-v-3d5dda8c]:visited {
-        color: var(--kds-color-text-and-icon-info);
+&.width-medium[data-v-d4ff271c] {
+    --modal-width: var(--kds-dimension-component-width-32x);
+    --modal-animation-time: 140ms;
+    --modal-scale-base: 0.88;
 }
-&[data-v-3d5dda8c]:hover {
-        color: var(--kds-color-text-and-icon-primary-inverted);
-        background-color: var(--kds-color-background-primary-bold-hover);
+&.width-large[data-v-d4ff271c] {
+    --modal-width: var(--kds-dimension-component-width-45x);
+    --modal-animation-time: 210ms;
+    --modal-scale-base: 0.88;
 }
-&[data-v-3d5dda8c]:active {
-        color: var(--kds-color-text-and-icon-selected-inverted);
-        background-color: var(--kds-color-background-primary-bold-active);
+&.width-xlarge[data-v-d4ff271c] {
+    --modal-width: var(--kds-dimension-component-width-61x);
+    --modal-animation-time: 300ms;
+    --modal-scale-base: 0.88;
+}
+&.width-full[data-v-d4ff271c] {
+    --modal-width: var(--modal-full-size);
+    --modal-animation-time: 350ms;
+    --modal-scale-base: 0.92;
 }
+&.height-full[data-v-d4ff271c] {
+    --modal-height: var(--modal-full-size);
 }
+&.height-auto[data-v-d4ff271c] {
+    --modal-height: fit-content;
 }
-&.disabled[data-v-3d5dda8c] {
-    color: var(--kds-color-text-and-icon-disabled);
-    pointer-events: none;
-    cursor: default;
+&[data-v-d4ff271c]:not([open]) {
+    display: none;
+}
+&[data-v-d4ff271c]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-d4ff271c]::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 {
+    opacity: 1;
+}
+&[open][data-v-d4ff271c] {
+    opacity: 1;
+    transform: scale(1);
 }
 }
 
-.leading {
-&[data-v-d38d7ade] {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kds-dimension-icon-1x);
-  height: var(--kds-dimension-icon-1x);
+/** Animation starting styles */
+@starting-style {
+.kds-modal {
+&[data-v-d4ff271c] {
+    opacity: 1;
+    transform: scale(1);
 }
-&.xsmall[data-v-d38d7ade] {
-    width: var(--kds-dimension-icon-0-56x);
-    height: var(--kds-dimension-icon-0-56x);
+&[open][data-v-d4ff271c] {
+      opacity: 0;
+      transform: scale(var(--modal-scale-base));
 }
-&.small[data-v-d38d7ade] {
-    width: var(--kds-dimension-icon-0-75x);
-    height: var(--kds-dimension-icon-0-75x);
+&[data-v-d4ff271c]::backdrop {
+      opacity: 1;
 }
-&.large[data-v-d38d7ade] {
-    width: var(--kds-dimension-icon-1-25x);
-    height: var(--kds-dimension-icon-1-25x);
+&[open][data-v-d4ff271c]::backdrop {
+      opacity: 0;
 }
 }
-.leading-icon[data-v-d38d7ade],
-.spinner[data-v-d38d7ade] {
-  position: absolute;
-  inset: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 200ms ease-out;
 }
-.leading-icon[data-visible="true"][data-v-d38d7ade],
-.spinner[data-visible="true"][data-v-d38d7ade] {
-  opacity: 1;
+
+.subtext {
+&[data-v-2e6ba10c] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  min-height: 1lh;
+  margin-top: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-text-and-icon-muted);
+}
+&.error[data-v-2e6ba10c] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+& .subtext-text[data-v-2e6ba10c] {
+    min-width: 0;
+}
 }
 
-.kds-list-item {
-&[data-v-d2e6e4eb] {
-  position: relative;
+.checkbox {
+&[data-v-5138a023] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --icon-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
   display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  width: 100%;
-  min-height: var(--kds-dimension-component-height-1-5x);
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
-  color: var(--kds-color-text-and-icon-neutral);
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
   cursor: pointer;
-  user-select: none;
-  background: var(--kds-color-background-neutral-initial);
+  outline: none;
+  background: none;
   border: none;
-  border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.small {
-&[data-v-d2e6e4eb] {
-    gap: var(--kds-spacing-container-0-25x);
-    padding: var(--kds-spacing-container-0-25x)
-      var(--kds-spacing-container-0-5x);
-    font: var(--kds-font-base-interactive-small);
-}
-.accessory[data-v-d2e6e4eb] {
-      display: flex;
-      padding: var(--kds-spacing-container-0-12x) 0;
-      margin-bottom: auto;
+.control[data-v-5138a023] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    color: var(--icon-color);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-0-25x);
 }
+&:focus-visible .control[data-v-5138a023] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&.large {
-&[data-v-d2e6e4eb] {
-    font: var(--kds-font-base-interactive-small-strong);
+&:hover:not(.disabled) .control[data-v-5138a023] {
+    background: var(--bg-hover);
 }
-.accessory[data-v-d2e6e4eb] {
-      display: flex;
-      align-items: center;
+&:active:not(.disabled) .control[data-v-5138a023] {
+    background: var(--bg-active);
 }
+&.checked[data-v-5138a023],
+  &.indeterminate[data-v-5138a023] {
+    --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-d2e6e4eb] {
+&[data-v-5138a023] {
     display: flex;
-    flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
-    min-width: 0;
-}
-.large &[data-v-d2e6e4eb] {
-      justify-content: center;
-      min-height: calc(
-        var(--kds-dimension-component-height-2-5x) - 2 *
-          var(--kds-spacing-container-0-25x)
-      );
-}
-.label {
-&[data-v-d2e6e4eb] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-}
-.prefix[data-v-d2e6e4eb] {
-        flex-shrink: 0;
-}
-.special[data-v-d2e6e4eb] {
-        font: var(--kds-font-base-interactive-small-italic);
 }
+& .label[data-v-5138a023] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
 }
-.subtext[data-v-d2e6e4eb] {
-      display: -webkit-box;
-      overflow: hidden;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
+& .helper-text[data-v-5138a023] {
       font: var(--kds-font-base-subtext-small);
-      color: var(--kds-color-text-and-icon-muted);
-      -webkit-box-orient: vertical;
-}
-}
-.trailing-item {
-&[data-v-d2e6e4eb] {
-    display: flex;
-    flex-shrink: 0;
-    gap: var(--kds-spacing-container-0-12x);
-    align-items: center;
-    align-self: center;
-    justify-content: flex-end;
-}
-.shortcut[data-v-d2e6e4eb] {
-      flex-shrink: 0;
-      font: var(--kds-font-base-interactive-xsmall-strong);
-      color: var(--kds-color-text-and-icon-muted);
-      text-align: right;
-      white-space: nowrap;
-}
-.trailing-item-reserve-space[data-v-d2e6e4eb] {
-      width: var(--kds-dimension-icon-0-75x);
-}
-}
-&[data-v-d2e6e4eb]:hover:not(.disabled),
-  &.active[data-v-d2e6e4eb]:not(.disabled) {
-    background: var(--kds-color-background-neutral-hover);
-}
-&[data-v-d2e6e4eb]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-}
-&.selected {
-&[data-v-d2e6e4eb] {
-    color: var(--kds-color-text-and-icon-selected);
-    background: var(--kds-color-background-selected-initial);
-}
-.subtext[data-v-d2e6e4eb] {
-      color: var(--kds-color-text-and-icon-selected);
-}
-&[data-v-d2e6e4eb]:hover,
-    &.active[data-v-d2e6e4eb] {
-      background: var(--kds-color-background-selected-hover);
-}
-&[data-v-d2e6e4eb]:active {
-      background: var(--kds-color-background-selected-active);
-}
-&.disabled[data-v-d2e6e4eb] {
-      background: var(--kds-color-background-selected-initial);
-}
-}
-&.missing {
-&[data-v-d2e6e4eb] {
-    color: var(--kds-color-text-and-icon-danger);
-    background: var(--kds-color-background-danger-initial);
-}
-.subtext[data-v-d2e6e4eb] {
-      color: var(--kds-color-text-and-icon-danger);
-}
-&[data-v-d2e6e4eb]:hover,
-    &.active[data-v-d2e6e4eb] {
-      background: var(--kds-color-background-danger-hover);
-}
-&[data-v-d2e6e4eb]:active {
-      background: var(--kds-color-background-danger-active);
-}
-&.disabled[data-v-d2e6e4eb] {
-      background: var(--kds-color-background-danger-initial);
+      color: var(--helper-text-color);
 }
 }
-&.disabled {
-&[data-v-d2e6e4eb] {
-    color: var(--kds-color-text-and-icon-disabled);
+&.disabled[data-v-5138a023] {
+    --border: var(--kds-border-action-disabled);
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+    --helper-text-color: var(--kds-color-text-and-icon-disabled);
+
     cursor: default;
 }
-.shortcut[data-v-d2e6e4eb],
-    .subtext[data-v-d2e6e4eb] {
-      color: var(--kds-color-text-and-icon-disabled);
-}
-}
-}
-
-.kds-list-item-section-title {
-&[data-v-9a2c8038] {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
-  width: 100%;
-  min-height: var(--kds-dimension-component-height-1-5x);
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
-  color: var(--kds-color-text-and-icon-muted);
+&.error {
+&[data-v-5138a023] {
+    --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);
 }
-.icon[data-v-9a2c8038] {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
+&.checked[data-v-5138a023],
+    &.indeterminate[data-v-5138a023] {
+      --bg-initial: var(--kds-color-background-danger-initial);
 }
-.label[data-v-9a2c8038] {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font: var(--kds-font-base-title-xsmall);
-    white-space: nowrap;
 }
 }
-
-.kds-menu-item-link[data-v-96d9cfba] {
-  display: block;
-  color: inherit;
-  text-decoration: none;
-
-  /*
-   * Keyboard navigation never focuses the anchor itself: the `KdsMenuContainer`
-   * keeps focus on the wrapping `[role="menu"]` and signals the active item via
-   * `aria-activedescendant`. The visual highlight is then rendered by the inner
-   * `KdsListItem`'s `active` prop. Because of that, suppressing the native
-   * `:focus` ring on mouse interaction is intentional — there is no companion
-   * indicator we'd be hiding.
-   */
-  outline: none;
+.subtext-wrapper[data-v-5138a023] {
+  padding-left: calc(
+    var(--kds-dimension-component-height-0-88x) +
+      var(--kds-spacing-container-0-37x)
+  );
 }
 
-.kds-menu-container {
-&[data-v-ae4f1dab] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-10x);
-  min-width: var(--kds-dimension-component-width-12x);
-  max-width: var(--kds-dimension-component-width-20x);
-  padding: var(--kds-spacing-container-0-25x);
-  overflow-y: auto;
-  background-color: var(--kds-color-surface-default);
-  border-radius: var(--kds-border-radius-container-0-50x);
-  box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-ae4f1dab]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
-}
-.submenu-popover[data-v-ae4f1dab] {
-  inset: anchor(top) auto auto anchor(right);
-  padding: 0 var(--kds-spacing-container-0-25x);
-  margin: 0;
-  position-try-fallbacks:
-    --kds-popover-try-right-dropdown, --kds-popover-try-left-dropdown,
-    --kds-popover-try-right-dropup, --kds-popover-try-left-dropup;
-  overflow: visible;
-  font: inherit;
-  color: inherit;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-}
-@position-try --kds-popover-try-right-dropdown {
-  inset: anchor(top) auto auto anchor(right);
-}
-@position-try --kds-popover-try-left-dropdown {
-  inset: anchor(top) anchor(left) auto auto;
-}
-@position-try --kds-popover-try-right-dropup {
-  inset: auto auto anchor(bottom) anchor(right);
+.ask-again[data-v-41fc8d84] {
+  padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-@position-try --kds-popover-try-left-dropup {
-  inset: auto anchor(left) anchor(bottom) auto;
+.flush-left[data-v-41fc8d84] {
+  margin-right: auto;
 }
 
 .kds-popover {
@@ -1327,917 +1248,995 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-split-button {
-&[data-v-ebc30e66] {
-  display: flex;
-}
-&.filled[data-v-ebc30e66] {
-    gap: var(--kds-spacing-container-0-10x);
+.kds-side-drawer {
+&[data-v-059d2b2d] {
+  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);
 }
-&.outlined[data-v-ebc30e66] {
-    gap: var(--kds-spacing-container-none);
+@media (width > 640px) {
+&[data-v-059d2b2d]:is([data-width="default"]) {
+      --kds-side-drawer-size: var(--kds-width-side-drawer-default);
 }
-& .kds-split-button-primary.outlined[data-v-ebc30e66] {
-    border-right: none;
 }
+&[data-v-059d2b2d]:popover-open {
+    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
+@starting-style {
+      transform: translateX(var(--kds-side-drawer-hidden));
 }
-.kds-split-button-primary[data-v-ebc30e66] {
-  flex-shrink: 1;
-  min-width: 0;
 }
-.kds-split-button-secondary[data-v-ebc30e66] {
-  flex-shrink: 0;
 }
 
-.kds-button-group-measure[data-v-59d058df] {
-  position: absolute;
-  display: flex;
-  visibility: hidden;
-  gap: var(--kds-spacing-container-0-5x);
+.kds-link {
+&[data-v-7e5b55c9] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--kds-spacing-container-none) var(--kds-spacing-container-0-10x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
+  text-decoration-line: underline;
+  border-radius: var(--kds-border-radius-container-0-12x);
 }
-.kds-button-group {
-&[data-v-59d058df] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  }
-&.left[data-v-59d058df] {
-    justify-content: flex-start;
+&.size-small[data-v-7e5b55c9] {
+    font: var(--kds-font-base-subtext-small);
 }
-&.right[data-v-59d058df] {
-    justify-content: flex-end;
+&[data-v-7e5b55c9]:is(a) {
+    cursor: pointer;
 }
-&.middle[data-v-59d058df] {
-    justify-content: center;
+&[data-v-7e5b55c9]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-container-none);
 }
+& .label[data-v-7e5b55c9],
+  & .file-size[data-v-7e5b55c9] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-
-.kds-empty-state[data-v-e913660a] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
+&.variant-internal {
+&[data-v-7e5b55c9] {
+    color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-empty-state-headline[data-v-e913660a] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+&:not(.disabled) {
+&[data-v-7e5b55c9]:visited {
+        color: var(--kds-color-text-and-icon-info);
 }
-.kds-empty-state-description[data-v-e913660a] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+&[data-v-7e5b55c9]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
 }
-.kds-empty-state-action[data-v-e913660a] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  margin-top: var(--kds-spacing-container-0-12x);
+&[data-v-7e5b55c9]:active {
+        background-color: var(--kds-color-background-neutral-active);
 }
-.kds-empty-state.disabled {
-& .kds-empty-state-headline[data-v-e913660a],
-  & .kds-empty-state-description[data-v-e913660a] {
-    color: var(--kds-color-text-and-icon-disabled);
 }
 }
-
-.kds-list-container {
-&[data-v-118706ad] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-10x);
-  min-width: var(--kds-dimension-component-width-12x);
-  padding: var(--kds-spacing-container-0-25x);
-  overflow-y: auto;
+&.variant-external[data-v-7e5b55c9] {
+    gap: var(--kds-spacing-container-0-12x);
 }
-&.standalone[data-v-118706ad] {
-    border: var(--kds-border-base-subtle);
-    border-radius: var(--kds-border-radius-container-0-31x);
+&:is(.variant-external, .variant-document) {
+&[data-v-7e5b55c9] {
+    color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-118706ad]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-31x);
+&:not(.disabled) {
+&[data-v-7e5b55c9]:visited {
+        color: var(--kds-color-text-and-icon-info);
 }
+&[data-v-7e5b55c9]:hover {
+        color: var(--kds-color-text-and-icon-primary-inverted);
+        background-color: var(--kds-color-background-primary-bold-hover);
 }
-.kds-list-container-empty[data-v-118706ad] {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
+&[data-v-7e5b55c9]:active {
+        color: var(--kds-color-text-and-icon-selected-inverted);
+        background-color: var(--kds-color-background-primary-bold-active);
 }
-.kds-list-item-divider[data-v-118706ad] {
-  flex-shrink: 0;
-  width: 100%;
-  padding: 0;
 }
-
-.kds-label-wrapper[data-v-9b0cb89b] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: flex-start;
-  max-width: 100%;
-  min-height: var(--kds-dimension-component-height-0-75x);
 }
-.label[data-v-9b0cb89b] {
-  display: block;
-  flex-grow: 1;
-  max-width: 100%;
-  height: calc(
-    var(--kds-dimension-component-height-1x) +
-      var(--kds-spacing-input-label-spacing-bottom)
-  );
-  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-title-small-strong);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
+&.disabled[data-v-7e5b55c9] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
+}
 }
 
-.subtext {
-&[data-v-2e6ba10c] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  min-height: 1lh;
-  margin-top: var(--kds-spacing-container-0-25x);
-  font: var(--kds-font-base-subtext-small);
-  color: var(--kds-color-text-and-icon-muted);
+.leading {
+&[data-v-ca9c134c] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-icon-1x);
+  height: var(--kds-dimension-icon-1x);
 }
-&.error[data-v-2e6ba10c] {
-    color: var(--kds-color-text-and-icon-danger);
+&.xsmall[data-v-ca9c134c] {
+    width: var(--kds-dimension-icon-0-56x);
+    height: var(--kds-dimension-icon-0-56x);
 }
-& .subtext-text[data-v-2e6ba10c] {
-    min-width: 0;
+&.small[data-v-ca9c134c] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
 }
+&.large[data-v-ca9c134c] {
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
 }
-
-.kds-form-field[data-v-5d99c134] {
-  display: flex;
-  flex-direction: column;
+}
+.leading-icon[data-v-ca9c134c],
+.spinner[data-v-ca9c134c] {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.leading-icon[data-visible="true"][data-v-ca9c134c],
+.spinner[data-visible="true"][data-v-ca9c134c] {
+  opacity: 1;
 }
 
-.container {
-&[data-v-a45e012a] {
+.kds-list-item {
+&[data-v-634ca251] {
+  position: relative;
   display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   width: 100%;
-  height: var(--kds-dimension-component-height-1-75x);
-  padding: 0
-    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
-  cursor: text;
-  background: var(--kds-color-background-input-initial);
-  border: var(--kds-border-action-input);
-  border-radius: var(--kds-border-radius-container-0-37x);
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-a45e012a]:has(input:focus:not(:disabled)) {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
+&.small {
+&[data-v-634ca251] {
+    gap: var(--kds-spacing-container-0-25x);
+    padding: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-5x);
+    font: var(--kds-font-base-interactive-small);
 }
-&[data-v-a45e012a]:has(.input-field:hover:not(:disabled, :focus)) {
-    background: var(--kds-color-background-input-hover);
+.accessory[data-v-634ca251] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
+      margin-bottom: auto;
 }
-&.error[data-v-a45e012a] {
-    border: var(--kds-border-action-error);
 }
-&.disabled[data-v-a45e012a] {
-    cursor: default;
-    border: var(--kds-border-action-disabled);
-    border-color: var(--kds-color-border-disabled);
+&.large {
+&[data-v-634ca251] {
+    font: var(--kds-font-base-interactive-small-strong);
 }
+.accessory[data-v-634ca251] {
+      display: flex;
+      align-items: center;
 }
-.icon-wrapper {
-&[data-v-a45e012a] {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-a45e012a] {
-    padding-left: var(--kds-spacing-container-0-12x);
+.content {
+&[data-v-634ca251] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    min-width: 0;
 }
-&.trailing[data-v-a45e012a] {
-    padding-right: var(--kds-spacing-container-0-12x);
+.large &[data-v-634ca251] {
+      justify-content: center;
+      min-height: calc(
+        var(--kds-dimension-component-height-2-5x) - 2 *
+          var(--kds-spacing-container-0-25x)
+      );
 }
-.container.disabled &[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-disabled);
-    cursor: default;
+.label {
+&[data-v-634ca251] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 }
-.container:focus-within &[data-v-a45e012a],
-  .container:has(.input-field.has-value) &[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-neutral);
+.prefix[data-v-634ca251] {
+        flex-shrink: 0;
 }
+.special[data-v-634ca251] {
+        font: var(--kds-font-base-interactive-small-italic);
 }
-.input-field {
-&[data-v-a45e012a] {
-  flex: 1 0 0;
-  min-width: 0;
-  height: var(--kds-dimension-component-height-1-75x);
-  padding: var(--kds-spacing-container-0-25x);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  outline: none;
-  background: transparent;
-  border: none;
-
-  /* hide native steppers, we provide our own in NumberInput */
-
-  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
-&[type="number"] {
-&[data-v-a45e012a] {
-    appearance: textfield;
+.subtext[data-v-634ca251] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-small);
+      color: var(--kds-color-text-and-icon-muted);
+      -webkit-box-orient: vertical;
 }
-&[data-v-a45e012a]::-webkit-outer-spin-button,
-    &[data-v-a45e012a]::-webkit-inner-spin-button {
-      margin: 0;
-      appearance: none;
 }
+.trailing-item {
+&[data-v-634ca251] {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: center;
+    align-self: center;
+    justify-content: flex-end;
 }
-&[type="search"][data-v-a45e012a]::-webkit-search-cancel-button {
-    appearance: none;
+.shortcut[data-v-634ca251] {
+      flex-shrink: 0;
+      font: var(--kds-font-base-interactive-xsmall-strong);
+      color: var(--kds-color-text-and-icon-muted);
+      text-align: right;
+      white-space: nowrap;
 }
-&[data-v-a45e012a]::placeholder {
-    color: var(--kds-color-text-and-icon-subtle);
+.trailing-item-reserve-space[data-v-634ca251] {
+      width: var(--kds-dimension-icon-0-75x);
 }
-&.empty-mask[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-subtle);
 }
-&:disabled {
-&[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-disabled);
-    cursor: default;
+&[data-v-634ca251]:hover:not(.disabled),
+  &.active[data-v-634ca251]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a45e012a]::placeholder {
-      color: var(--kds-color-text-and-icon-disabled);
+&[data-v-634ca251]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
 }
+&.selected {
+&[data-v-634ca251] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
 }
+.subtext[data-v-634ca251] {
+      color: var(--kds-color-text-and-icon-selected);
 }
-.unit {
-&[data-v-a45e012a] {
-  flex-shrink: 0;
-  min-width: 0;
-  margin: 0 var(--kds-spacing-container-0-12x);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
+&[data-v-634ca251]:hover,
+    &.active[data-v-634ca251] {
+      background: var(--kds-color-background-selected-hover);
 }
-&.placeholder[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-subtle);
+&[data-v-634ca251]:active {
+      background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-disabled);
+&.disabled[data-v-634ca251] {
+      background: var(--kds-color-background-selected-initial);
 }
-.container:focus-within &[data-v-a45e012a] {
-    color: var(--kds-color-text-and-icon-neutral);
 }
+&.missing {
+&[data-v-634ca251] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
 }
-.clear-button[data-v-a45e012a] {
-  margin-left: var(--kds-spacing-container-0-12x);
+.subtext[data-v-634ca251] {
+      color: var(--kds-color-text-and-icon-danger);
 }
-.leading-slot[data-v-a45e012a] {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: center;
+&[data-v-634ca251]:hover,
+    &.active[data-v-634ca251] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-634ca251]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-634ca251] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-634ca251] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-634ca251],
+    .subtext[data-v-634ca251] {
+      color: var(--kds-color-text-and-icon-disabled);
 }
-.trailing-slot[data-v-a45e012a] {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: center;
-  margin-left: var(--kds-spacing-container-0-12x);
 }
-
-.kds-text-input-suggestions[data-v-dd35e2a4] {
-  max-height: var(--kds-dimension-component-height-12x);
-  background-color: var(--kds-color-surface-default);
-  border-radius: var(--kds-border-radius-container-0-50x);
-  box-shadow: var(--kds-elevation-level-3);
 }
 
-.file-explorer-item-base {
-&[data-v-aad38d13] {
-  /* required for positioning of renaming (.item-error) */
-  position: relative;
+.kds-list-item-section-title {
+&[data-v-9a2c8038] {
   display: flex;
-  flex-flow: row nowrap;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
   align-items: center;
   width: 100%;
-  padding: var(--kds-spacing-container-0-12x) var(--kds-spacing-container-0-5x)
-    var(--kds-spacing-container-0-10x);
-  font: var(--kds-font-base-interactive-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  user-select: none;
-  background: var(--kds-color-background-neutral-initial);
-  border-bottom: var(--kds-border-base-subtle);
-}
-&:focus {
-&[data-v-aad38d13] {
-    outline: none;
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-muted);
 }
-&.keyboard-focus[data-v-aad38d13] {
-      padding: 0 var(--kds-spacing-container-0-37x);
-      border: var(--kds-border-action-focused);
-      border-radius: var(--kds-border-radius-container-0-25x);
+.icon[data-v-9a2c8038] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
 }
+.label[data-v-9a2c8038] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-xsmall);
+    white-space: nowrap;
 }
-&[data-v-aad38d13]:hover:not(.disabled) {
-    background: var(--kds-color-background-neutral-hover);
 }
-&.selected,
-  &.dragging {
-&[data-v-aad38d13] {
-    color: var(--kds-color-text-and-icon-selected);
-    background: var(--kds-color-background-selected-initial);
+
+.kds-menu-item-link[data-v-5462bdbc] {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+
+  /*
+   * Keyboard navigation never focuses the anchor itself: the `KdsMenuContainer`
+   * keeps focus on the wrapping `[role="menu"]` and signals the active item via
+   * `aria-activedescendant`. The visual highlight is then rendered by the inner
+   * `KdsListItem`'s `active` prop. Because of that, suppressing the native
+   * `:focus` ring on mouse interaction is intentional — there is no companion
+   * indicator we'd be hiding.
+   */
+  outline: none;
 }
-&[data-v-aad38d13]::before {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: var(--kds-dimension-component-width-0-125x);
-      height: calc(2 / 3 * 100%);
-      pointer-events: none;
-      content: "";
-      background: var(--kds-color-background-selected-bold-initial);
-      border-radius: 0 var(--kds-border-radius-container-0-12x)
-        var(--kds-border-radius-container-0-12x) 0;
-      transform: translateY(-50%);
+
+.kds-menu-container {
+&[data-v-5b299c60] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  min-width: var(--kds-dimension-component-width-12x);
+  max-width: var(--kds-dimension-component-width-20x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
 }
+&[data-v-5b299c60]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&.selected[data-v-aad38d13]:hover {
-    background: var(--kds-color-background-selected-hover);
 }
-&.dragging-over[data-v-aad38d13] {
-    padding: var(--kds-spacing-container-0-10x)
-      calc(
-        var(--kds-spacing-container-0-37x) + var(--kds-spacing-container-0-10x)
-      );
-    background: var(--kds-color-focus-background);
-    border: var(--kds-border-action-selected-accent);
-    border-radius: var(--kds-border-radius-container-0-25x);
+.submenu-popover[data-v-5b299c60] {
+  inset: anchor(top) auto auto anchor(right);
+  padding: 0 var(--kds-spacing-container-0-25x);
+  margin: 0;
+  position-try-fallbacks:
+    --kds-popover-try-right-dropdown, --kds-popover-try-left-dropdown,
+    --kds-popover-try-right-dropup, --kds-popover-try-left-dropup;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
 }
-&.anything-is-dragged {
-& td[data-v-aad38d13],
-    & td[data-v-aad38d13-s] {
-      /* Prevent children from interfering with drag events */
-      pointer-events: none;
+@position-try --kds-popover-try-right-dropdown {
+  inset: anchor(top) auto auto anchor(right);
 }
+@position-try --kds-popover-try-left-dropdown {
+  inset: anchor(top) anchor(left) auto auto;
 }
-&.disabled[data-v-aad38d13] {
-    color: var(--kds-color-text-and-icon-disabled);
-    pointer-events: none;
+@position-try --kds-popover-try-right-dropup {
+  inset: auto auto anchor(bottom) anchor(right);
 }
+@position-try --kds-popover-try-left-dropup {
+  inset: auto anchor(left) anchor(bottom) auto;
 }
 
-.file-explorer-item {
-&[data-v-4811e8e8] {
-  display: grid;
-
-  /* first two cols - icon + name */
-  grid-template-columns: min-content var(--file-explorer-item-grid, 1fr);
-  grid-auto-columns: auto; /* middle ones are auto */
-  grid-auto-flow: column;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
-
-  /* style the last column if the options menu is visible */
-}
-&.has-options-menu > td[data-v-4811e8e8]:last-child {
-    width: min-content;
-}
-& .column {
-&[data-v-4811e8e8] {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    overflow: hidden;
-    white-space: nowrap;
+.kds-split-button {
+&[data-v-e4c177cd] {
+  display: flex;
 }
-& .inner[data-v-4811e8e8] {
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
+&.filled[data-v-e4c177cd] {
+    gap: var(--kds-spacing-container-0-10x);
 }
-&.dynamic-column[data-v-4811e8e8]:empty {
-      display: none;
+&.outlined[data-v-e4c177cd] {
+    gap: var(--kds-spacing-container-none);
 }
+& .kds-split-button-primary.outlined[data-v-e4c177cd] {
+    border-right: none;
 }
-& .item-error[data-v-4811e8e8] {
-    position: absolute;
-    bottom: 0;
-    z-index: 10;
-    padding: var(--kds-spacing-container-0-5x)
-      var(--kds-spacing-container-0-25x);
-    margin-top: var(--kds-spacing-container-0-25x);
-    font: var(--kds-font-base-subtext-small);
-    white-space: normal;
-    backdrop-filter: blur(10px);
-    transform: translateY(100%);
 }
-& td.rename-active {
-&[data-v-4811e8e8] {
-    padding: 0 var(--kds-spacing-container-0-25x);
+.kds-split-button-primary[data-v-e4c177cd] {
+  flex-shrink: 1;
+  min-width: 0;
 }
-& .rename-input-container[data-v-4811e8e8] {
-      flex: 1;
+.kds-split-button-secondary[data-v-e4c177cd] {
+  flex-shrink: 0;
 }
+
+.kds-button-group-measure[data-v-59d058df] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
 }
-& .item-icon {
-&[data-v-4811e8e8] {
-    position: relative;
+.kds-button-group {
+&[data-v-59d058df] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-59d058df] {
+    justify-content: flex-start;
 }
-& .open-indicator[data-v-4811e8e8] {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: var(--kds-spacing-container-0-37x);
-      height: var(--kds-spacing-container-0-37x);
-      background: var(--kds-color-text-and-icon-selected);
-      border-radius: 50%;
+&.right[data-v-59d058df] {
+    justify-content: flex-end;
 }
+&.middle[data-v-59d058df] {
+    justify-content: center;
 }
 }
 
-.hidden[data-v-6053576d] {
-  display: none;
-}
-.file-explorer-item-back[data-v-6053576d] {
-  cursor: pointer;
-}
-
-.file-explorer[data-v-da0e6dab] {
+.kds-empty-state[data-v-f5b36ba8] {
   display: flex;
-  flex: 1 0 0%;
   flex-direction: column;
-  height: 100%;
-
-  /* needed so that the virtualization container can size the wrapper properly */
-  min-height: 0;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
 }
-.file-explorer-item[data-v-da0e6dab] {
-  height: var(--v44ee6cb4);
+.kds-empty-state-headline[data-v-f5b36ba8] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
 }
-thead[data-v-da0e6dab] {
-  /* Hide table head for better readability but keeping it for a11y reasons */
-  position: absolute;
-
-  /* move far far enough outside view, just in case */
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap; /* added line */
+.kds-empty-state-description[data-v-f5b36ba8] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
 }
-table[data-v-da0e6dab] {
-  height: 100%;
-  overflow: hidden auto;
-  scrollbar-gutter: stable;
-  table-layout: fixed;
-  border: var(--kds-border-base-subtle);
-  border-radius: var(--kds-border-radius-container-0-31x);
-  isolation: isolate;
+.kds-empty-state-action[data-v-f5b36ba8] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  margin-top: var(--kds-spacing-container-0-12x);
 }
-table,
-tbody {
-&[data-v-da0e6dab] {
-  width: 100%;
-  border-spacing: 0;
-  }
-&[data-v-da0e6dab]:not(:has(.empty)) {
-    display: block;
+.kds-empty-state.disabled {
+& .kds-empty-state-headline[data-v-f5b36ba8],
+  & .kds-empty-state-description[data-v-f5b36ba8] {
+    color: var(--kds-color-text-and-icon-disabled);
 }
 }
-table:focus {
-&[data-v-da0e6dab] {
-  outline: none;
-  }
-&.keyboard-focus[data-v-da0e6dab] {
-    outline: 2px solid var(--kds-color-focus-outline);
-    border-radius: var(--kds-border-radius-container-0-25x);
+
+.kds-list-container {
+&[data-v-05f72bc6] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+}
+&.standalone[data-v-05f72bc6] {
+    border: var(--kds-border-base-subtle);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-05f72bc6]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.empty[data-v-da0e6dab] {
+.kds-list-container-empty[data-v-05f72bc6] {
   display: flex;
+  flex: 1;
   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] {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 70px;
-  height: 70px;
-  pointer-events: none;
+.kds-list-item-divider[data-v-05f72bc6] {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0;
 }
 
-.kds-preview-list {
-&[data-v-a11103f6] {
+.kds-label-wrapper[data-v-9b0cb89b] {
   display: flex;
-  flex-direction: column;
-  background: var(--kds-color-surface-muted);
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-fake-border-xs-muted);
-}
-.kds-preview-list-title-row[data-v-a11103f6] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-25x);
-    align-items: center;
-    min-height: calc(
-      var(--kds-dimension-component-height-1-25x) + 2 *
-        var(--kds-spacing-container-0-25x)
-    );
-    padding: var(--kds-spacing-container-0-25x);
-    padding-left: var(--kds-spacing-container-0-5x);
-    border-top-left-radius: var(--kds-border-radius-container-0-37x);
-    border-top-right-radius: var(--kds-border-radius-container-0-37x);
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: flex-start;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
 }
-.kds-preview-list-content[data-v-a11103f6] {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    justify-content: center;
-    min-width: 0;
+.label[data-v-9b0cb89b] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  height: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
 }
-.kds-preview-list-headline[data-v-a11103f6] {
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font: var(--kds-font-base-interactive-small-strong);
-    color: var(--kds-color-text-and-icon-neutral);
-    white-space: nowrap;
+
+.kds-form-field[data-v-5d99c134] {
+  display: flex;
+  flex-direction: column;
 }
-.kds-preview-list-body[data-v-a11103f6] {
-    display: flex;
-    flex-direction: column;
-    height: calc(
-      var(--kds-dimension-component-height-1-5x) * var(--a76a77a8) +
-        (var(--a76a77a8) - 1) * var(--kds-spacing-container-0-10x) +
-        var(--kds-spacing-container-0-25x) * 2
-    );
-    background: var(--kds-color-surface-default);
+
+.container {
+&[data-v-a45e012a] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
+  cursor: text;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
 }
-.kds-preview-list-items {
-&[data-v-a11103f6] {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: var(--kds-spacing-container-0-10x);
-    padding: var(--kds-spacing-container-0-25x);
-    margin: 0;
-    overflow-y: auto;
-    list-style: none;
+&[data-v-a45e012a]:has(input:focus:not(:disabled)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-a11103f6]:focus-visible {
-      outline: var(--kds-border-action-focused);
-      outline-offset: var(--kds-spacing-offset-focus);
-      border-radius: var(--kds-border-radius-container-0-31x);
+&[data-v-a45e012a]:has(.input-field:hover:not(:disabled, :focus)) {
+    background: var(--kds-color-background-input-hover);
 }
+&.error[data-v-a45e012a] {
+    border: var(--kds-border-action-error);
 }
-.kds-preview-list-item {
-&[data-v-a11103f6] {
-    /* Items are non-interactive (preview only): no pointer cursor, no hover
-       highlight, but text remains selectable. */
-    cursor: text;
-    user-select: text;
+&.disabled[data-v-a45e012a] {
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
 }
-&[data-v-a11103f6]:hover:not(.disabled),
-    &[data-v-a11103f6]:active:not(.disabled) {
-      background: transparent;
 }
+.icon-wrapper {
+&[data-v-a45e012a] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--kds-color-text-and-icon-subtle);
 }
-.kds-preview-list-empty[data-v-a11103f6],
-  .kds-preview-list-loading[data-v-a11103f6] {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
+&.leading[data-v-a45e012a] {
+    padding-left: var(--kds-spacing-container-0-12x);
 }
-.kds-preview-list-show-hide {
-&[data-v-a11103f6] {
-    padding: var(--kds-spacing-container-0-25x);
-    border-top: var(--kds-border-base-subtle);
-    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
-    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+&.trailing[data-v-a45e012a] {
+    padding-right: var(--kds-spacing-container-0-12x);
 }
-.kds-preview-list-toggle[data-v-a11103f6] {
-      width: 100%;
+.container.disabled &[data-v-a45e012a] {
+    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] {
+    color: var(--kds-color-text-and-icon-neutral);
 }
 }
+.input-field {
+&[data-v-a45e012a] {
+  flex: 1 0 0;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  outline: none;
+  background: transparent;
+  border: none;
 
-.checkbox {
-&[data-v-5138a023] {
-  --bg-initial: var(--kds-color-background-input-initial);
-  --bg-hover: var(--kds-color-background-input-hover);
-  --bg-active: var(--kds-color-background-input-active);
-  --border: var(--kds-border-action-input);
-  --icon-color: var(--kds-color-text-and-icon-selected);
-  --text-color: var(--kds-color-text-and-icon-neutral);
-  --helper-text-color: var(--kds-color-text-and-icon-muted);
+  /* hide native steppers, we provide our own in NumberInput */
 
-  display: flex;
-  gap: var(--kds-spacing-container-0-37x);
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  border: none;
+  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
-.control[data-v-5138a023] {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: var(--kds-dimension-component-height-0-88x);
-    height: var(--kds-dimension-component-height-0-88x);
-    color: var(--icon-color);
-    background: var(--bg-initial);
-    border: var(--border);
-    border-radius: var(--kds-border-radius-container-0-25x);
+&[type="number"] {
+&[data-v-a45e012a] {
+    appearance: textfield;
 }
-&:focus-visible .control[data-v-5138a023] {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
+&[data-v-a45e012a]::-webkit-outer-spin-button,
+    &[data-v-a45e012a]::-webkit-inner-spin-button {
+      margin: 0;
+      appearance: none;
 }
-&:hover:not(.disabled) .control[data-v-5138a023] {
-    background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-5138a023] {
-    background: var(--bg-active);
+&[type="search"][data-v-a45e012a]::-webkit-search-cancel-button {
+    appearance: none;
 }
-&.checked[data-v-5138a023],
-  &.indeterminate[data-v-5138a023] {
-    --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);
+&[data-v-a45e012a]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
 }
-.content {
-&[data-v-5138a023] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kds-spacing-container-0-12x);
+&.empty-mask[data-v-a45e012a] {
+    color: var(--kds-color-text-and-icon-subtle);
 }
-& .label[data-v-5138a023] {
-      font: var(--kds-font-base-interactive-small);
-      color: var(--text-color);
+&:disabled {
+&[data-v-a45e012a] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
 }
-& .helper-text[data-v-5138a023] {
-      font: var(--kds-font-base-subtext-small);
-      color: var(--helper-text-color);
+&[data-v-a45e012a]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&.disabled[data-v-5138a023] {
-    --border: var(--kds-border-action-disabled);
-    --icon-color: var(--kds-color-text-and-icon-disabled);
-    --text-color: var(--kds-color-text-and-icon-disabled);
-    --helper-text-color: var(--kds-color-text-and-icon-disabled);
-
-    cursor: default;
 }
-&.error {
-&[data-v-5138a023] {
-    --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);
+.unit {
+&[data-v-a45e012a] {
+  flex-shrink: 0;
+  min-width: 0;
+  margin: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
 }
-&.checked[data-v-5138a023],
-    &.indeterminate[data-v-5138a023] {
-      --bg-initial: var(--kds-color-background-danger-initial);
+&.placeholder[data-v-a45e012a] {
+    color: var(--kds-color-text-and-icon-subtle);
 }
+&.disabled[data-v-a45e012a] {
+    color: var(--kds-color-text-and-icon-disabled);
 }
+.container:focus-within &[data-v-a45e012a] {
+    color: var(--kds-color-text-and-icon-neutral);
 }
-.subtext-wrapper[data-v-5138a023] {
-  padding-left: calc(
-    var(--kds-dimension-component-height-0-88x) +
-      var(--kds-spacing-container-0-37x)
-  );
+}
+.clear-button[data-v-a45e012a] {
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.leading-slot[data-v-a45e012a] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+}
+.trailing-slot[data-v-a45e012a] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.modal-header {
-&[data-v-36cbff95] {
+.kds-text-input-suggestions[data-v-dd35e2a4] {
+  max-height: var(--kds-dimension-component-height-12x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.file-explorer-item-base {
+&[data-v-aad38d13] {
+  /* required for positioning of renaming (.item-error) */
+  position: relative;
   display: flex;
-  gap: var(--kds-spacing-container-0-5x);
+  flex-flow: row nowrap;
   align-items: center;
-  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
-    var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
-  font: var(--kds-font-base-title-medium-strong);
+  width: 100%;
+  padding: var(--kds-spacing-container-0-12x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-10x);
+  font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border-bottom: var(--kds-border-base-subtle);
 }
-& .modal-header-headline[data-v-36cbff95] {
-    flex: 1 1 auto;
-    min-width: 0;
+&:focus {
+&[data-v-aad38d13] {
+    outline: none;
+}
+&.keyboard-focus[data-v-aad38d13] {
+      padding: 0 var(--kds-spacing-container-0-37x);
+      border: var(--kds-border-action-focused);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+}
+&[data-v-aad38d13]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&.selected,
+  &.dragging {
+&[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+&[data-v-aad38d13]::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: var(--kds-dimension-component-width-0-125x);
+      height: calc(2 / 3 * 100%);
+      pointer-events: none;
+      content: "";
+      background: var(--kds-color-background-selected-bold-initial);
+      border-radius: 0 var(--kds-border-radius-container-0-12x)
+        var(--kds-border-radius-container-0-12x) 0;
+      transform: translateY(-50%);
+}
+}
+&.selected[data-v-aad38d13]:hover {
+    background: var(--kds-color-background-selected-hover);
+}
+&.dragging-over[data-v-aad38d13] {
+    padding: var(--kds-spacing-container-0-10x)
+      calc(
+        var(--kds-spacing-container-0-37x) + var(--kds-spacing-container-0-10x)
+      );
+    background: var(--kds-color-focus-background);
+    border: var(--kds-border-action-selected-accent);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.anything-is-dragged {
+& td[data-v-aad38d13],
+    & td[data-v-aad38d13-s] {
+      /* Prevent children from interfering with drag events */
+      pointer-events: none;
+}
+}
+&.disabled[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+}
+}
+
+.file-explorer-item {
+&[data-v-4811e8e8] {
+  display: grid;
+
+  /* first two cols - icon + name */
+  grid-template-columns: min-content var(--file-explorer-item-grid, 1fr);
+  grid-auto-columns: auto; /* middle ones are auto */
+  grid-auto-flow: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+
+  /* style the last column if the options menu is visible */
+}
+&.has-options-menu > td[data-v-4811e8e8]:last-child {
+    width: min-content;
+}
+& .column {
+&[data-v-4811e8e8] {
+    display: flex;
+    align-items: center;
+    height: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
 }
+& .inner[data-v-4811e8e8] {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
 }
-.modal-body {
-&[data-v-36cbff95] {
-  --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);
-  --modal-padding-bottom: var(--kds-spacing-container-1x);
-  --modal-gap: var(--kds-spacing-container-1x);
-
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow: var(--d8a22254);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
+&.dynamic-column[data-v-4811e8e8]:empty {
+      display: none;
+}
+}
+& .item-error[data-v-4811e8e8] {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-25x);
+    margin-top: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+    white-space: normal;
+    backdrop-filter: blur(10px);
+    transform: translateY(100%);
+}
+& td.rename-active {
+&[data-v-4811e8e8] {
+    padding: 0 var(--kds-spacing-container-0-25x);
+}
+& .rename-input-container[data-v-4811e8e8] {
+      flex: 1;
+}
+}
+& .item-icon {
+&[data-v-4811e8e8] {
+    position: relative;
 }
-&[data-variant="padded"][data-v-36cbff95] {
-    gap: var(--modal-gap);
-    padding: var(--modal-padding-top) var(--modal-padding-right)
-      var(--modal-padding-bottom) var(--modal-padding-left);
+& .open-indicator[data-v-4811e8e8] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: var(--kds-spacing-container-0-37x);
+      height: var(--kds-spacing-container-0-37x);
+      background: var(--kds-color-text-and-icon-selected);
+      border-radius: 50%;
 }
 }
-.modal-footer[data-v-36cbff95] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  justify-content: right;
-  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
 }
 
-/** see: https://github.com/whatwg/html/issues/7732  */
-body:has(dialog.modal[open]) {
-  overflow: hidden;
+.hidden[data-v-6053576d] {
+  display: none;
+}
+.file-explorer-item-back[data-v-6053576d] {
+  cursor: pointer;
 }
 
-.kds-modal {
-&[data-v-1d030523] {
-  /* rule is broken it complains about local variables for no reason */
-  /* stylelint-disable csstools/value-no-unknown-custom-properties */
-  --modal-full-size: 95%;
-  --modal-backdrop-animation-time: 125ms;
-
+.file-explorer[data-v-da0e6dab] {
   display: flex;
+  flex: 1 0 0%;
   flex-direction: column;
-  width: min(var(--modal-full-size), var(--modal-width));
-  height: var(--modal-height);
-  max-height: var(--modal-full-size);
-  padding: 0;
-  overflow: var(--v36f0df94);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  background-color: var(--kds-color-surface-default);
-  border: none;
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-elevation-level-3);
-
-  /** Animation */
-  opacity: 0;
-  transform: scale(var(--modal-scale-base));
-  transition: var(--modal-animation-time) allow-discrete;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-property: display, opacity, overlay, transform;
+  height: 100%;
 
-  /* hide if its not open */
-}
-&.width-small[data-v-1d030523] {
-    --modal-width: var(--kds-dimension-component-width-25x);
-    --modal-animation-time: 100ms;
-    --modal-scale-base: 0.85;
-}
-&.width-medium[data-v-1d030523] {
-    --modal-width: var(--kds-dimension-component-width-32x);
-    --modal-animation-time: 140ms;
-    --modal-scale-base: 0.88;
-}
-&.width-large[data-v-1d030523] {
-    --modal-width: var(--kds-dimension-component-width-45x);
-    --modal-animation-time: 210ms;
-    --modal-scale-base: 0.88;
-}
-&.width-xlarge[data-v-1d030523] {
-    --modal-width: var(--kds-dimension-component-width-61x);
-    --modal-animation-time: 300ms;
-    --modal-scale-base: 0.88;
+  /* needed so that the virtualization container can size the wrapper properly */
+  min-height: 0;
 }
-&.width-full[data-v-1d030523] {
-    --modal-width: var(--modal-full-size);
-    --modal-animation-time: 350ms;
-    --modal-scale-base: 0.92;
+.file-explorer-item[data-v-da0e6dab] {
+  height: var(--v44ee6cb4);
 }
-&.height-full[data-v-1d030523] {
-    --modal-height: var(--modal-full-size);
+thead[data-v-da0e6dab] {
+  /* Hide table head for better readability but keeping it for a11y reasons */
+  position: absolute;
+
+  /* move far far enough outside view, just in case */
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap; /* added line */
 }
-&.height-auto[data-v-1d030523] {
-    --modal-height: fit-content;
+table[data-v-da0e6dab] {
+  height: 100%;
+  overflow: hidden auto;
+  scrollbar-gutter: stable;
+  table-layout: fixed;
+  border: var(--kds-border-base-subtle);
+  border-radius: var(--kds-border-radius-container-0-31x);
+  isolation: isolate;
 }
-&[data-v-1d030523]:not([open]) {
-    display: none;
+table,
+tbody {
+&[data-v-da0e6dab] {
+  width: 100%;
+  border-spacing: 0;
+  }
+&[data-v-da0e6dab]:not(:has(.empty)) {
+    display: block;
 }
-&[data-v-1d030523]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-1d030523]::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;
+table:focus {
+&[data-v-da0e6dab] {
+  outline: none;
+  }
+&.keyboard-focus[data-v-da0e6dab] {
+    outline: 2px solid var(--kds-color-focus-outline);
+    border-radius: var(--kds-border-radius-container-0-25x);
 }
-&[open][data-v-1d030523]::backdrop {
-    opacity: 1;
 }
-&[open][data-v-1d030523] {
-    opacity: 1;
-    transform: scale(1);
+.empty[data-v-da0e6dab] {
+  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] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 70px;
+  height: 70px;
+  pointer-events: none;
 }
 
-/** Animation starting styles */
-@starting-style {
-.kds-modal {
-&[data-v-1d030523] {
-    opacity: 1;
-    transform: scale(1);
+.kds-preview-list {
+&[data-v-a11103f6] {
+  display: flex;
+  flex-direction: column;
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-fake-border-xs-muted);
 }
-&[open][data-v-1d030523] {
-      opacity: 0;
-      transform: scale(var(--modal-scale-base));
+.kds-preview-list-title-row[data-v-a11103f6] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    min-height: calc(
+      var(--kds-dimension-component-height-1-25x) + 2 *
+        var(--kds-spacing-container-0-25x)
+    );
+    padding: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-0-5x);
+    border-top-left-radius: var(--kds-border-radius-container-0-37x);
+    border-top-right-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-1d030523]::backdrop {
-      opacity: 1;
+.kds-preview-list-content[data-v-a11103f6] {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
 }
-&[open][data-v-1d030523]::backdrop {
-      opacity: 0;
+.kds-preview-list-headline[data-v-a11103f6] {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-interactive-small-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
 }
+.kds-preview-list-body[data-v-a11103f6] {
+    display: flex;
+    flex-direction: column;
+    height: calc(
+      var(--kds-dimension-component-height-1-5x) * var(--a76a77a8) +
+        (var(--a76a77a8) - 1) * var(--kds-spacing-container-0-10x) +
+        var(--kds-spacing-container-0-25x) * 2
+    );
+    background: var(--kds-color-surface-default);
 }
+.kds-preview-list-items {
+&[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-10x);
+    padding: var(--kds-spacing-container-0-25x);
+    margin: 0;
+    overflow-y: auto;
+    list-style: none;
 }
-
-.ask-again[data-v-41fc8d84] {
-  padding: var(--kds-spacing-container-0-5x) 0 0 0;
+&[data-v-a11103f6]:focus-visible {
+      outline: var(--kds-border-action-focused);
+      outline-offset: var(--kds-spacing-offset-focus);
+      border-radius: var(--kds-border-radius-container-0-31x);
 }
-.flush-left[data-v-41fc8d84] {
-  margin-right: auto;
 }
-
-.kds-side-drawer {
-&[data-v-33b66da9] {
-  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;
-  --kds-side-drawer-hidden: calc(100vw + 28px);
+.kds-preview-list-item {
+&[data-v-a11103f6] {
+    /* Items are non-interactive (preview only): no pointer cursor, no hover
+       highlight, but text remains selectable. */
+    cursor: text;
+    user-select: text;
 }
-&[data-v-33b66da9]:is([data-width="full"]) {
-    --kds-side-drawer-size: 100%;
+&[data-v-a11103f6]:hover:not(.disabled),
+    &[data-v-a11103f6]:active:not(.disabled) {
+      background: transparent;
 }
-&[data-v-33b66da9]:is([data-width="default"]) {
-    --kds-side-drawer-size: var(--kds-width-side-drawer-default);
 }
-&[data-v-33b66da9]:popover-open {
-    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
-@starting-style {
-      transform: translateX(var(--kds-side-drawer-hidden));
+.kds-preview-list-empty[data-v-a11103f6],
+  .kds-preview-list-loading[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
 }
+.kds-preview-list-show-hide {
+&[data-v-a11103f6] {
+    padding: var(--kds-spacing-container-0-25x);
+    border-top: var(--kds-border-base-subtle);
+    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
 }
+.kds-preview-list-toggle[data-v-a11103f6] {
+      width: 100%;
 }
-@media only screen and (width <= 900px) {
-.kds-side-drawer[data-v-33b66da9] {
-    width: 100%;
 }
 }
 
@@ -2679,7 +2678,7 @@ body:has(dialog.modal[open]) {
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
 
-.kds-color-picker[data-v-2daeaa68] {
+.kds-color-picker[data-v-6728e280] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1x);
@@ -2690,7 +2689,7 @@ body:has(dialog.modal[open]) {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.colorspace[data-v-2daeaa68] {
+.colorspace[data-v-6728e280] {
   position: relative;
   width: 100%;
   height: 200px;
@@ -2700,7 +2699,7 @@ body:has(dialog.modal[open]) {
   outline: none;
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.handle[data-v-2daeaa68] {
+.handle[data-v-6728e280] {
   position: absolute;
   width: var(--kds-dimension-icon-0-75x);
   height: var(--kds-dimension-icon-0-75x);
@@ -2710,15 +2709,15 @@ body:has(dialog.modal[open]) {
   box-shadow: var(--kds-elevation-level-3);
   transform: translate(-50%, -50%);
 }
-.colorspace[data-v-2daeaa68]:focus {
+.colorspace[data-v-6728e280]:focus {
   outline: none;
 }
-.colorspace:focus .handle[data-v-2daeaa68],
-.colorspace:focus-visible .handle[data-v-2daeaa68] {
+.colorspace:focus .handle[data-v-6728e280],
+.colorspace:focus-visible .handle[data-v-6728e280] {
   outline: var(--kds-border-action-focused);
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
-.hue[data-v-2daeaa68] {
+.hue[data-v-6728e280] {
   background: linear-gradient(
     90deg,
     hsl(0deg 100% 50%) 0%,
@@ -2730,19 +2729,19 @@ body:has(dialog.modal[open]) {
     hsl(360deg 100% 50%) 100%
   );
 }
-.alpha[data-v-2daeaa68] {
-  background-image: var(--v535b907d);
+.alpha[data-v-6728e280] {
+  background-image: var(--v692ad1f1);
   background-size:
     100% 100%,
     calc(var(--kds-dimension-component-height-0-75x) / 2)
       calc(var(--kds-dimension-component-height-0-75x) / 2);
 }
 .value-inputs {
-&[data-v-2daeaa68] {
+&[data-v-6728e280] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   }
-&[data-v-2daeaa68] > * {
+&[data-v-6728e280] > * {
     flex: 1 1 0;
     min-width: 0;
 }
@@ -2981,7 +2980,7 @@ body:has(dialog.modal[open]) {
   );
 }
 
-.kds-date-time-format-popover[data-v-8c697d02] {
+.kds-date-time-format-popover[data-v-5c547e68] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x);
@@ -2992,14 +2991,14 @@ body:has(dialog.modal[open]) {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-date-time-format-popover-list[data-v-8c697d02] {
+.kds-date-time-format-popover-list[data-v-5c547e68] {
   width: var(--kds-dimension-component-width-16x);
   min-width: 100%;
   max-width: 100%;
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-f7236e9c] {
+.kds-search-results-container[data-v-37efab14] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3052,7 +3051,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   display: none;
 }
 
-.kds-time-picker[data-v-c2bc1234] {
+.kds-time-picker[data-v-0b8a4eba] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
@@ -3062,25 +3061,25 @@ 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-c2bc1234] {
+.kds-time-picker-fields[data-v-0b8a4eba] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: flex-start;
 }
-.kds-time-picker-field[data-v-c2bc1234] {
+.kds-time-picker-field[data-v-0b8a4eba] {
   flex: 1;
   min-width: var(--kds-dimension-component-width-4x);
 }
-.kds-time-picker-field-trash[data-v-c2bc1234] {
+.kds-time-picker-field-trash[data-v-0b8a4eba] {
   margin-top: calc(
     var(--kds-dimension-component-height-1x) +
       var(--kds-spacing-input-label-spacing-bottom)
   );
 }
-.kds-time-picker-divider[data-v-c2bc1234] {
+.kds-time-picker-divider[data-v-0b8a4eba] {
   width: 100%;
 }
-.kds-time-picker-actions[data-v-c2bc1234] {
+.kds-time-picker-actions[data-v-0b8a4eba] {
   display: flex;
   justify-content: center;
 }
@@ -3238,7 +3237,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-list-item-button {
-&[data-v-ee6c4aba] {
+&[data-v-12d42f4a] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
@@ -3255,26 +3254,26 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-.label[data-v-ee6c4aba] {
+.label[data-v-12d42f4a] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&[data-v-ee6c4aba]:disabled {
+&[data-v-12d42f4a]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
 }
-&[data-v-ee6c4aba]:focus-visible:not(:disabled) {
+&[data-v-12d42f4a]:focus-visible:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-ee6c4aba]:hover:not(:disabled) {
+&[data-v-12d42f4a]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-ee6c4aba]:active:not(:disabled) {
+&[data-v-12d42f4a]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 }
@@ -3363,7 +3362,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-2c5e2dda] {
+&[data-v-06a9fd0e] {
   position: relative;
   display: flex;
   flex: 1;
@@ -3374,19 +3373,19 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.disabled[data-v-2c5e2dda] {
+&.disabled[data-v-06a9fd0e] {
     border: var(--kds-border-action-disabled);
 }
-&.error[data-v-2c5e2dda] {
+&.error[data-v-06a9fd0e] {
     border: var(--kds-border-action-error);
 }
-&[data-v-2c5e2dda]:has(:focus-visible) {
+&[data-v-06a9fd0e]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-2c5e2dda] {
+&[data-v-06a9fd0e] {
   position: relative;
   flex-grow: 1;
   padding: calc(
@@ -3395,28 +3394,28 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-2c5e2dda]:focus {
+&[data-v-06a9fd0e]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-2c5e2dda] {
+&[data-v-06a9fd0e] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-2c5e2dda] {
+&.kds-multiselect-list-box-item-first[data-v-06a9fd0e] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-2c5e2dda] {
+.kds-multiselect-list-box-content-grid[data-v-06a9fd0e] {
   display: grid;
   grid-template-rows: 1fr auto;
   min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
 }
-.kds-multiselect-list-box-content[data-v-2c5e2dda] {
+.kds-multiselect-list-box-content[data-v-06a9fd0e] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-2c5e2dda] {
+.kds-multiselect-sticky-bottom[data-v-06a9fd0e] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   min-width: 0;
@@ -3425,7 +3424,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   background: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
 }
-.kds-multiselect-empty[data-v-2c5e2dda] {
+.kds-multiselect-empty[data-v-06a9fd0e] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3582,7 +3581,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-5403c06f] {
+&[data-v-cd9186f9] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3603,27 +3602,27 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-5403c06f] {
+&.hidden[data-v-cd9186f9] {
     opacity: 0;
 }
-&[data-v-5403c06f]:focus-visible {
+&[data-v-cd9186f9]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-5403c06f]:hover {
+&[data-v-cd9186f9]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-5403c06f]:active {
+&[data-v-cd9186f9]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-5403c06f] {
+&.pressed-or-set[data-v-cd9186f9] {
     --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-5403c06f] {
+&.error[data-v-cd9186f9] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
@@ -3854,11 +3853,11 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-clickable-card {
-&[data-v-04004cbf] {
+&[data-v-e1cdfe9d] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-04004cbf] {
+&[data-v-e1cdfe9d] {
     position: absolute;
     inset: 0;
     padding: 0;
@@ -3871,14 +3870,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     background: none;
     border: none;
 }
-&[data-v-04004cbf]:disabled {
+&[data-v-e1cdfe9d]:disabled {
       cursor: default;
 }
-&[data-v-04004cbf]:focus {
+&[data-v-e1cdfe9d]:focus {
       outline: none;
 }
 }
-&[data-v-04004cbf]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-e1cdfe9d]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -4010,10 +4009,10 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-.kds-tab-icon[data-v-9a4461cc] {
+.kds-tab-icon[data-v-b5cb982f] {
   flex-shrink: 0;
 }
-.kds-tab-label[data-v-9a4461cc] {
+.kds-tab-label[data-v-b5cb982f] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4021,7 +4020,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   white-space: nowrap;
 }
 .kds-tab {
-&[data-v-9a4461cc] {
+&[data-v-b5cb982f] {
   position: relative;
   display: flex;
   align-items: center;
@@ -4033,20 +4032,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   isolation: isolate;
   }
-&[data-v-9a4461cc]:disabled {
+&[data-v-b5cb982f]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
 }
-&[data-v-9a4461cc]:focus-visible {
+&[data-v-b5cb982f]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-12x);
 }
 &.kds-tab-selected {
-&[data-v-9a4461cc] {
+&[data-v-b5cb982f] {
     color: var(--kds-color-text-and-icon-selected);
     }
-& .kds-tab-indicator[data-v-9a4461cc] {
+& .kds-tab-indicator[data-v-b5cb982f] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -4059,12 +4058,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
 }
 }
-&[data-v-9a4461cc]:hover:not(:disabled) {
+&[data-v-b5cb982f]:hover:not(:disabled) {
     color: var(--kds-color-text-and-icon-selected);
 }
 }
 .kds-tab-bar-wrapper {
-&[data-v-9a4461cc] {
+&[data-v-b5cb982f] {
   --focus-ring-space: calc(
     2px + var(--kds-spacing-offset-focus)
   ); /* outline-width + outline-offset */
@@ -4073,7 +4072,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   display: flow-root;
   overflow: visible;
   }
-&[data-v-9a4461cc]::before {
+&[data-v-b5cb982f]::before {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -4085,7 +4084,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 .kds-tab-bar {
-&[data-v-9a4461cc] {
+&[data-v-b5cb982f] {
   display: flex;
   flex-wrap: nowrap;
   padding: var(--focus-ring-space);
@@ -4094,36 +4093,36 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   scrollbar-width: none;
   border-radius: var(--kds-border-radius-container-none);
   }
-&[data-v-9a4461cc]::-webkit-scrollbar {
+&[data-v-b5cb982f]::-webkit-scrollbar {
     display: none;
 }
-&:not(.kds-tab-bar-full-width) .kds-tab[data-v-9a4461cc] {
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-b5cb982f] {
     flex: 0 1 auto;
-    min-width: var(--v9ef1548e);
+    min-width: var(--v20051aca);
 }
-&.kds-tab-bar-large .kds-tab-label[data-v-9a4461cc] {
+&.kds-tab-bar-large .kds-tab-label[data-v-b5cb982f] {
     font: var(--kds-font-base-interactive-large-strong);
 }
-&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-9a4461cc] {
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-b5cb982f] {
     font: var(--kds-font-base-title-large);
 }
 &.kds-tab-bar-small,
   &.kds-tab-bar-large {
-& .kds-tab-selected .kds-tab-icon[data-v-9a4461cc] {
+& .kds-tab-selected .kds-tab-icon[data-v-b5cb982f] {
       color: var(--kds-color-text-and-icon-selected);
 }
 }
-&.kds-tab-bar-small .kds-tab[data-v-9a4461cc] {
+&.kds-tab-bar-small .kds-tab[data-v-b5cb982f] {
     gap: var(--kds-spacing-container-0-37x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0 var(--kds-spacing-container-0-5x);
 }
-&.kds-tab-bar-large .kds-tab[data-v-9a4461cc] {
+&.kds-tab-bar-large .kds-tab[data-v-b5cb982f] {
     gap: var(--kds-spacing-container-0-5x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0 var(--kds-spacing-container-0-75x);
 }
-&.kds-tab-bar-full-width .kds-tab[data-v-9a4461cc] {
+&.kds-tab-bar-full-width .kds-tab[data-v-b5cb982f] {
     flex: 1;
     justify-content: center;
     width: 100%;
@@ -4301,19 +4300,19 @@ to {
 }
 
 .kds-nav-item {
-&[data-v-98f1a1d0] {
+&[data-v-14836519] {
   position: relative;
   height: var(--kds-dimension-component-height-1-75x);
   min-height: var(--kds-dimension-component-height-1-5x);
   background: var(--kds-color-background-neutral-initial);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-98f1a1d0]:has(.kds-nav-button:focus-visible) {
+&[data-v-14836519]:has(.kds-nav-button:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: calc(-1 * var(--kds-core-border-width-m));
 }
 & .kds-nav-button {
-&[data-v-98f1a1d0] {
+&[data-v-14836519] {
 
     display: flex;
     flex-direction: row;
@@ -4321,7 +4320,7 @@ to {
     align-items: center;
     width: 100%;
     height: 100%;
-    padding: 0 var(--v9e34f8b2) 0 var(--kds-spacing-container-0-75x);
+    padding: 0 var(--v73a3d886) 0 var(--kds-spacing-container-0-75x);
     color: var(--kds-color-text-and-icon-neutral);
     text-decoration: none;
     cursor: pointer;
@@ -4329,10 +4328,10 @@ to {
     background: transparent;
     border: none;
 }
-&[data-v-98f1a1d0]:focus-visible {
+&[data-v-14836519]:focus-visible {
       outline: none;
 }
-& .label[data-v-98f1a1d0] {
+& .label[data-v-14836519] {
       flex: 1 1 auto;
       min-width: 0;
       overflow: hidden;
@@ -4342,7 +4341,7 @@ to {
       white-space: nowrap;
 }
 }
-& .trailing-items[data-v-98f1a1d0] {
+& .trailing-items[data-v-14836519] {
     position: absolute;
     top: 0;
     right: var(--kds-spacing-container-0-75x);
@@ -4354,23 +4353,23 @@ to {
     height: 100%;
     color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-v-98f1a1d0]:hover:not(.disabled) {
+&[data-v-14836519]:hover:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-98f1a1d0]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-14836519]:has(.kds-nav-button:active):not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-98f1a1d0] {
+&[data-v-14836519] {
     background: var(--kds-color-background-selected-initial);
 }
-& .kds-nav-button[data-v-98f1a1d0] {
+& .kds-nav-button[data-v-14836519] {
       color: var(--kds-color-text-and-icon-selected);
 }
-& .trailing-items[data-v-98f1a1d0] {
+& .trailing-items[data-v-14836519] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-98f1a1d0]::before {
+&[data-v-14836519]::before {
       position: absolute;
       top: var(--kds-spacing-container-0-37x);
       left: 0;
@@ -4381,34 +4380,34 @@ to {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
       border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-98f1a1d0]:hover:not(.disabled) {
+&[data-v-14836519]:hover:not(.disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-98f1a1d0]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-14836519]:has(.kds-nav-button:active):not(.disabled) {
       background: var(--kds-color-background-selected-active);
 }
 }
 &.disabled {
-&[data-v-98f1a1d0] {
+&[data-v-14836519] {
     cursor: default;
 }
-& .kds-nav-button[data-v-98f1a1d0] {
+& .kds-nav-button[data-v-14836519] {
       color: var(--kds-color-text-and-icon-disabled);
       cursor: default;
 }
-& .trailing-items[data-v-98f1a1d0] {
+& .trailing-items[data-v-14836519] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 
 .kds-navigation {
-&[data-v-6cc9519f] {
+&[data-v-ceb3e9ac] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
 }
-.nav-items[data-v-6cc9519f] {
+.nav-items[data-v-ceb3e9ac] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);