@knime/kds-table 0.1.0

package/dist/index.css

@@ -0,0 +1,4663 @@
+:root,
+:host {
+  --z-index-cell-selection-overlay: 1;
+  --z-index-sticky-header: 3;
+  --z-index-column-resize-drag-handle: 4;
+}
+
+tbody[data-v-70f2c330] {
+  outline: none;
+}
+
+.kds-avatar {
+&[data-v-9e1a5abe] {
+  display: inline-block;
+  flex-shrink: 0;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  vertical-align: middle;
+  outline: 1px solid var(--kds-color-border-muted);
+  outline-offset: -1px;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+&.small[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-icon-0-75x);
+    block-size: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-icon-1x);
+    block-size: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-component-width-1-25x);
+    block-size: var(--kds-dimension-component-height-1-25x);
+}
+&.xlarge[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-component-width-1-5x);
+    block-size: var(--kds-dimension-component-height-1-5x);
+}
+&[data-color="red"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-red);
+    background: var(--kds-color-avatar-background-red);
+}
+&[data-color="orange"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-orange);
+    background: var(--kds-color-avatar-background-orange);
+}
+&[data-color="yellow"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-yellow);
+    background: var(--kds-color-avatar-background-yellow);
+}
+&[data-color="green"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-green);
+    background: var(--kds-color-avatar-background-green);
+}
+&[data-color="teal"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-teal);
+    background: var(--kds-color-avatar-background-teal);
+}
+&[data-color="blue"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-blue);
+    background: var(--kds-color-avatar-background-blue);
+}
+&[data-color="purple"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-purple);
+    background: var(--kds-color-avatar-background-purple);
+}
+&[data-color="aquamarine"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-aquamarine);
+    background: var(--kds-color-avatar-background-aquamarine);
+}
+&[data-color="grassgreen"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-grassgreen);
+    background: var(--kds-color-avatar-background-grassgreen);
+}
+&[data-color="brown"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-brown);
+    background: var(--kds-color-avatar-background-brown);
+}
+&[data-color="empty"][data-v-9e1a5abe] {
+    color: transparent;
+    background-color: var(--kds-color-avatar-background-empty);
+}
+}
+.kds-avatar-image[data-v-9e1a5abe] {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.kds-avatar-initials[data-v-9e1a5abe] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  container-type: inline-size;
+  font: var(--kds-font-base-body-small-strong);
+  color: inherit;
+  user-select: none;
+}
+.kds-avatar-initials > span[data-v-9e1a5abe] {
+  font-size: calc(1em + calc(100cqi - 2em) / 2);
+}
+
+.kds-avatar-counter {
+&[data-v-1aef516d] {
+  display: flex;
+  align-items: center;
+  isolation: isolate;
+}
+& .avatars[data-v-1aef516d] {
+    display: flex;
+}
+& .avatar {
+&[data-v-1aef516d] {
+    position: relative;
+}
+&[data-v-1aef516d]:not(:first-child) {
+      margin-left: calc(-1 * var(--kds-spacing-container-0-25x));
+}
+}
+& .more-count[data-v-1aef516d] {
+    margin-left: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+}
+}
+.kds-icon {
+&[data-v-bff4f419] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+
+  display: inline-block;
+  width: var(--icon-width);
+  /* min sizes, otherwise they might collapse if there is not enough space */
+  min-width: var(--icon-width);
+  height: var(--icon-height);
+  min-height: var(--icon-height);
+  vertical-align: middle;
+  stroke-width: var(--icon-stroke-width);
+  shape-rendering: geometricPrecision;
+}
+&.xsmall[data-v-bff4f419] {
+    --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);
+@media (max-resolution: 1.5dppx) {
+      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
+      rendering issues which manifests in misaligned or 'jumping' svg content.
+      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
+      CSS transform. Thus the position of the SVG elements stays intact. */
+&[data-v-bff4f419] {
+        --scaling-factor: 0.75;
+        --icon-width: var(--kds-dimension-icon-0-75x);
+        --icon-height: var(--kds-dimension-icon-0-75x);
+        --icon-stroke-width: calc(
+          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
+        );
+        transform: scale(var(--scaling-factor));
+}
+}
+}
+&.small[data-v-bff4f419] {
+    --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] {
+    --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] {
+  color: var(--kds-color-text-and-icon-disabled);
+}
+.kds-icon {
+&[data-v-38e9537f] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+
+  display: inline-block;
+  width: var(--icon-width);
+  /* min sizes, otherwise they might collapse if there is not enough space */
+  min-width: var(--icon-width);
+  height: var(--icon-height);
+  min-height: var(--icon-height);
+  vertical-align: middle;
+  stroke-width: var(--icon-stroke-width);
+  shape-rendering: geometricPrecision;
+}
+&.xsmall[data-v-38e9537f] {
+    --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);
+@media (max-resolution: 1.5dppx) {
+      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
+      rendering issues which manifests in misaligned or 'jumping' svg content.
+      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
+      CSS transform. Thus the position of the SVG elements stays intact. */
+&[data-v-38e9537f] {
+        --scaling-factor: 0.75;
+        --icon-width: var(--kds-dimension-icon-0-75x);
+        --icon-height: var(--kds-dimension-icon-0-75x);
+        --icon-stroke-width: calc(
+          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
+        );
+        transform: scale(var(--scaling-factor));
+}
+}
+}
+&.small[data-v-38e9537f] {
+    --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-38e9537f] {
+    --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-38e9537f] {
+  --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);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--data-type-width);
+  height: var(--data-type-height);
+  padding: var(--data-type-padding);
+  color: var(--kds-color-desktop-header-text-and-icon-muted);
+  background-color: var(--kds-color-page-default);
+  border: var(--kds-border-base-muted);
+  border-radius: var(--kds-border-radius-container-0-12x);
+
+  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
+}
+&.disabled[data-v-38e9537f] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+&.small[data-v-38e9537f] {
+    --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-38e9537f] {
+    --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-38e9537f] {
+      --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+}
+&.medium[data-v-38e9537f] {
+      --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
+}
+}
+}
+
+.kds-badge {
+&[data-v-df64f7cf] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .label-wrapper[data-v-df64f7cf] {
+    min-width: 0;
+    max-width: var(--kds-dimension-component-width-16x);
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+&.xxsmall[data-v-df64f7cf] {
+    height: var(--kds-dimension-component-height-1x);
+    padding: 0 var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-title-xsmall);
+}
+&.xsmall[data-v-df64f7cf] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: 0 var(--kds-spacing-container-0-37x);
+    font: var(--kds-font-base-title-small);
+}
+&.neutral[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-bold-initial);
+    border: var(--kds-border-base-subtle);
+}
+&.info[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-info);
+    background-color: var(--kds-color-background-static-info);
+    border: var(--kds-border-base-info);
+}
+&.warning[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-warning);
+    background-color: var(--kds-color-background-static-warning);
+    border: var(--kds-border-base-warning);
+}
+&.success[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-success);
+    background-color: var(--kds-color-background-static-success);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-danger);
+    background-color: var(--kds-color-background-static-danger);
+    border: var(--kds-border-base-danger);
+}
+&.ghost[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: transparent;
+    border: var(--kds-border-base-subtle);
+}
+}
+
+.kds-color-swatch {
+&[data-v-91e0130d] {
+  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-91e0130d] {
+    --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-91e0130d] {
+    --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-91e0130d] {
+    --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-01555495] {
+  --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-01555495] {
+    --dot-color: var(--kds-color-state-error);
+    --dot-border-color: var(--kds-color-state-error-border);
+}
+&.orange[data-v-01555495] {
+    --dot-color: var(--kds-color-state-warning);
+    --dot-border-color: var(--kds-color-state-warning-border);
+}
+&.green[data-v-01555495] {
+    --dot-color: var(--kds-color-state-success);
+    --dot-border-color: var(--kds-color-state-success-border);
+}
+.dot {
+&[data-v-01555495] {
+    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-01555495]::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-01555495] {
+    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-01555495] {
+      width: var(--kds-dimension-icon-1x);
+      height: var(--kds-dimension-icon-1x);
+}
+&[data-v-01555495]::after {
+      border-width: var(--kds-border-width-icon-stroke-m);
+}
+.label[data-v-01555495] {
+      font: var(--kds-font-base-subtext-small);
+}
+}
+&.size-small {
+.dot[data-v-01555495] {
+      width: var(--kds-dimension-icon-0-75x);
+      height: var(--kds-dimension-icon-0-75x);
+}
+&[data-v-01555495]::after {
+      border-width: var(--kds-border-width-icon-stroke-s);
+}
+.label[data-v-01555495] {
+      font: var(--kds-font-base-subtext-xsmall);
+}
+}
+}
+
+.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);
+}
+}
+
+.kds-inline-message {
+&[data-v-af14056f] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: flex-start;
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
+  color: var(--kds-color-text-and-icon-neutral);
+  border-radius: var(--kds-border-radius-container-0-50x);
+}
+.header {
+&[data-v-af14056f] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: flex-start;
+}
+.icon[data-v-af14056f] {
+      align-self: flex-start;
+      margin-top: var(--kds-spacing-container-0-12x);
+      color: var(--icon-color);
+}
+.headline[data-v-af14056f] {
+      font: var(--kds-font-base-title-small-strong);
+}
+}
+.body[data-v-af14056f] {
+    align-self: stretch;
+    padding-left: var(--kds-spacing-container-1x);
+    font: var(--kds-font-base-body-small);
+    color: var(--kds-color-text-and-icon-muted);
+}
+&.info[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-info);
+
+    background-color: var(--kds-color-background-static-info-muted);
+    border: var(--kds-border-base-info);
+}
+&.success[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-success);
+
+    background-color: var(--kds-color-background-static-success-muted);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-danger);
+
+    background-color: var(--kds-color-background-static-danger-muted);
+    border: var(--kds-border-base-danger);
+}
+&.warning[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-warning);
+
+    background-color: var(--kds-color-background-static-warning-muted);
+    border: var(--kds-border-base-warning);
+}
+}
+
+.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-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-190ac311] {
+  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-190ac311]:is(a) {
+    text-decoration: none;
+}
+&.disabled[data-v-190ac311] {
+    cursor: default;
+}
+&[data-v-190ac311]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&.filled {
+&[data-v-190ac311] {
+    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-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled-inverted);
+      background-color: var(--kds-color-background-disabled-primary);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-primary-bold-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-primary-bold-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger-inverted);
+      background-color: var(--kds-color-background-danger-bold-initial);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled-inverted);
+        background-color: var(--kds-color-background-disabled-danger);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-bold-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-bold-active);
+}
+}
+}
+}
+&.outlined {
+&[data-v-190ac311] {
+    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-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+      border: var(--kds-border-action-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger);
+      border: var(--kds-border-action-error);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled);
+        border: var(--kds-border-action-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-active);
+}
+}
+}
+}
+&.transparent {
+&[data-v-190ac311] {
+    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-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-active);
+}
+}
+}
+}
+&.toggled {
+&[data-v-190ac311] {
+    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-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-selected-active);
+}
+}
+}
+& .label[data-v-190ac311] {
+    max-width: 200px;
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-rendering: geometricprecision;
+}
+&.xsmall[data-v-190ac311] {
+    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-190ac311] {
+    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(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-37x)
+    );
+}
+&.medium[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-25x);
+    height: var(--kds-dimension-component-height-1-75x);
+    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-medium-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-37x)
+    );
+}
+&.large {
+&[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-25x);
+    height: var(--kds-dimension-component-height-2-25x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+
+    font: var(--kds-font-base-interactive-large-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-50x)
+    );
+}
+& .label[data-v-190ac311] {
+      padding: 0 var(--kds-spacing-container-0-25x);
+}
+}
+&.success[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-success-inverted);
+    background-color: var(--kds-color-background-success-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
+}
+&.error[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-danger-inverted);
+    background-color: var(--kds-color-background-danger-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
+}
+&.remove-border-radius-left[data-v-190ac311] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+&.remove-border-radius-right[data-v-190ac311] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+}
+
+.kds-link {
+&[data-v-56e748a8] {
+  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);
+}
+&[data-v-56e748a8]:is(a) {
+    cursor: pointer;
+}
+&[data-v-56e748a8]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-container-none);
+}
+& .label[data-v-56e748a8],
+  & .file-size[data-v-56e748a8] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+&.variant-internal {
+&[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&:not(.disabled) {
+&[data-v-56e748a8]:visited {
+        color: var(--kds-color-text-and-icon-info);
+}
+&[data-v-56e748a8]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-56e748a8]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+}
+&.variant-external[data-v-56e748a8] {
+    gap: var(--kds-spacing-container-0-12x);
+}
+&:is(.variant-external, .variant-document) {
+&[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-selected);
+}
+&:not(.disabled) {
+&[data-v-56e748a8]:visited {
+        color: var(--kds-color-text-and-icon-info);
+}
+&[data-v-56e748a8]:hover {
+        color: var(--kds-color-text-and-icon-primary-inverted);
+        background-color: var(--kds-color-background-primary-bold-hover);
+}
+&[data-v-56e748a8]:active {
+        color: var(--kds-color-text-and-icon-selected-inverted);
+        background-color: var(--kds-color-background-primary-bold-active);
+}
+}
+}
+&.disabled[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
+}
+}
+
+.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);
+}
+&.xsmall[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-0-56x);
+    height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
+}
+}
+.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;
+}
+
+.kds-list-item {
+&[data-v-a3d6c86f] {
+  position: relative;
+  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);
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.small {
+&[data-v-a3d6c86f] {
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: flex-start;
+    padding: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-5x);
+    font: var(--kds-font-base-interactive-small);
+}
+.accessory[data-v-a3d6c86f] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
+}
+}
+&.large {
+&[data-v-a3d6c86f] {
+    font: var(--kds-font-base-interactive-small-strong);
+}
+.accessory[data-v-a3d6c86f] {
+      display: flex;
+      align-items: center;
+}
+}
+.content {
+&[data-v-a3d6c86f] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    min-width: 0;
+}
+.large &[data-v-a3d6c86f] {
+      justify-content: center;
+      min-height: calc(
+        var(--kds-dimension-component-height-2-5x) - 2 *
+          var(--kds-spacing-container-0-25x)
+      );
+}
+.label {
+&[data-v-a3d6c86f] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+.prefix[data-v-a3d6c86f] {
+        flex-shrink: 0;
+}
+.special[data-v-a3d6c86f] {
+        font: var(--kds-font-base-interactive-small-italic);
+}
+}
+.subtext[data-v-a3d6c86f] {
+      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;
+}
+}
+.trailing-item {
+&[data-v-a3d6c86f] {
+    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-a3d6c86f] {
+      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-a3d6c86f] {
+      width: var(--kds-dimension-icon-0-75x);
+}
+}
+&[data-v-a3d6c86f]:hover:not(.disabled),
+  &.active[data-v-a3d6c86f]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-a3d6c86f]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+.subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-a3d6c86f]:active {
+      background: var(--kds-color-background-selected-active);
+}
+&.disabled[data-v-a3d6c86f] {
+      background: var(--kds-color-background-selected-initial);
+}
+}
+&.missing {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
+}
+.subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-a3d6c86f]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-a3d6c86f] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-a3d6c86f],
+    .subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-list-item-section-title {
+&[data-v-5eeb1226] {
+  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);
+}
+.icon[data-v-5eeb1226] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
+.label[data-v-5eeb1226] {
+    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-677d6ca6] {
+  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;
+}
+
+.kds-menu-container {
+&[data-v-cce3fc40] {
+  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-cce3fc40]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-popover {
+&[data-v-1e5f9d24] {
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+
+  /* noinspection CssInvalidFunction */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /*
+   * 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-1e5f9d24] {
+    min-inline-size: anchor-size(width);
+}
+&.floating.top-right[data-v-1e5f9d24] {
+    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-left[data-v-1e5f9d24] {
+    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-1e5f9d24] {
+    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-left[data-v-1e5f9d24] {
+    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-1e5f9d24] {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+}
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@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);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@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;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@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);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@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-1e5f9d24] {
+  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-split-button {
+&[data-v-8f48b87a] {
+  display: flex;
+}
+&.filled[data-v-8f48b87a] {
+    gap: var(--kds-spacing-container-0-10x);
+}
+&.outlined[data-v-8f48b87a] {
+    gap: var(--kds-spacing-container-none);
+}
+& .kds-split-button-primary.outlined[data-v-8f48b87a] {
+    border-right: none;
+}
+}
+.kds-split-button-primary[data-v-8f48b87a] {
+  flex-shrink: 1;
+  min-width: 0;
+}
+.kds-split-button-secondary[data-v-8f48b87a] {
+  flex-shrink: 0;
+}
+
+.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);
+}
+.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;
+}
+.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;
+}
+.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);
+}
+.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;
+}
+&.standalone[data-v-118706ad] {
+    border: var(--kds-border-base-subtle);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[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);
+}
+}
+.kds-list-container-empty[data-v-118706ad] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.kds-list-item-divider[data-v-118706ad] {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0;
+}
+
+.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);
+}
+.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);
+}
+.kds-preview-list-content[data-v-a11103f6] {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 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;
+}
+&[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);
+}
+}
+.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-a11103f6]:hover:not(.disabled),
+    &[data-v-a11103f6]:active:not(.disabled) {
+      background: transparent;
+}
+}
+.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%;
+}
+}
+}
+
+.kds-label-wrapper[data-v-efe3313e] {
+  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-efe3313e] {
+  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;
+}
+
+.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;
+}
+}
+
+.checkbox {
+&[data-v-7bfc5667] {
+  --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;
+  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;
+}
+.control[data-v-7bfc5667] {
+    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-7bfc5667] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-7bfc5667] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-7bfc5667] {
+    background: var(--bg-active);
+}
+&.checked[data-v-7bfc5667],
+  &.indeterminate[data-v-7bfc5667] {
+    --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-7bfc5667] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    text-rendering: geometricprecision;
+}
+& .label[data-v-7bfc5667] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-7bfc5667] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-7bfc5667] {
+    --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-7bfc5667] {
+    --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-7bfc5667],
+    &.indeterminate[data-v-7bfc5667] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+}
+}
+}
+.subtext-wrapper[data-v-7bfc5667] {
+  padding-left: calc(
+    var(--kds-dimension-component-height-0-88x) +
+      var(--kds-spacing-container-0-37x)
+  );
+}
+
+.kds-fieldset[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.kds-fieldset-legend[data-v-a44731da] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+  padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-fieldset-content[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.legend-text[data-v-a44731da] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+
+.options[data-v-c6536296] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+.options.horizontal[data-v-c6536296] {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.radio {
+&[data-v-f4f6392a] {
+  --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);
+  --dot-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;
+  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;
+}
+.control[data-v-f4f6392a] {
+    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);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: 50%;
+}
+.control .dot[data-v-f4f6392a] {
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+}
+.control .dot circle[data-v-f4f6392a] {
+    fill: var(--dot-color);
+    transform: scale(0.5);
+    transform-origin: center;
+    transform-box: fill-box;
+}
+&:focus-visible .control[data-v-f4f6392a] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-f4f6392a] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-f4f6392a] {
+    background: var(--bg-active);
+}
+&.selected[data-v-f4f6392a] {
+    --border: var(--kds-border-action-selected);
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+}
+.content {
+&[data-v-f4f6392a] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+& .label[data-v-f4f6392a] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-f4f6392a] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-f4f6392a] {
+    --bg-initial: var(--kds-color-background-input-initial);
+    --border: var(--kds-border-action-disabled);
+    --dot-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-f4f6392a] {
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+    --border: var(--kds-border-action-error);
+    --dot-color: var(--kds-color-text-and-icon-danger);
+    --text-color: var(--kds-color-text-and-icon-danger);
+}
+&.selected[data-v-f4f6392a] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+      --border: var(--kds-border-action-error);
+}
+}
+}
+
+.options[data-v-d78ed4a2] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+.options.horizontal[data-v-d78ed4a2] {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.option {
+&[data-v-5c6f0f1f] {
+  display: flex;
+  flex: 0 1 auto;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  justify-content: center;
+  min-width: calc(
+    var(--kds-dimension-icon-1x) + (2 * var(--kds-spacing-container-0-37x))
+  );
+  max-width: 100%;
+  height: var(--kds-dimension-component-height-1-5x);
+  padding: 0 var(--kds-spacing-container-0-37x);
+  font: var(--kds-font-base-interactive-medium-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: center;
+  cursor: pointer;
+
+  /* variant=default */
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.size-small[data-v-5c6f0f1f] {
+    height: var(--kds-dimension-component-height-1-25x);
+    font: var(--kds-font-base-interactive-small-strong);
+}
+&[data-v-5c6f0f1f]:focus-visible {
+    outline: none;
+}
+&[data-v-5c6f0f1f]:focus:not(.selected) {
+    border: var(--kds-border-action-selected);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+    border: var(--kds-border-action-selected);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+      background: var(--kds-color-background-selected-active);
+}
+&.variant-muted {
+&[data-v-5c6f0f1f] {
+      color: var(--kds-color-text-and-icon-neutral);
+      background: var(--kds-color-background-input-initial);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+        background: var(--kds-color-background-input-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+        background: var(--kds-color-background-input-active);
+}
+}
+}
+&.disabled[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+&.disabled.selected[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    border: var(--kds-border-action-disabled);
+}
+}
+.option-label[data-v-5c6f0f1f] {
+  min-width: 0;
+  padding: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.value-switch[data-v-f6d51795] {
+  align-items: flex-start;
+}
+.options {
+&[data-v-f6d51795] {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--kds-spacing-container-none);
+  align-items: flex-start;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  padding: calc(
+    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  background: var(--kds-color-surface-muted);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-fake-border-xs-muted);
+  }
+&[data-v-f6d51795]:has(:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-44x);
+}
+&.error[data-v-f6d51795] {
+    border: var(--kds-border-action-error);
+    box-shadow: none;
+}
+}
+
+.kds-form-field[data-v-5d99c134] {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+&[data-v-93daa14e] {
+  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);
+}
+&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
+    background: var(--kds-color-background-input-hover);
+}
+&.error[data-v-93daa14e] {
+    border: var(--kds-border-action-error);
+}
+&.disabled[data-v-93daa14e] {
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+}
+.icon-wrapper {
+&[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--kds-color-text-and-icon-subtle);
+}
+&.leading[data-v-93daa14e] {
+    padding-left: var(--kds-spacing-container-0-12x);
+}
+&.trailing[data-v-93daa14e] {
+    padding-right: var(--kds-spacing-container-0-12x);
+}
+.container.disabled &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.container:focus-within &[data-v-93daa14e],
+  .container:has(.input-field.has-value) &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.input-field {
+&[data-v-93daa14e] {
+  flex: 1 0 0;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+  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-93daa14e] {
+    appearance: textfield;
+}
+&[data-v-93daa14e]::-webkit-outer-spin-button,
+    &[data-v-93daa14e]::-webkit-inner-spin-button {
+      margin: 0;
+      appearance: none;
+}
+}
+&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
+    appearance: none;
+}
+&[data-v-93daa14e]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.empty-mask[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+&[data-v-93daa14e]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+.unit {
+&[data-v-93daa14e] {
+  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;
+}
+&.placeholder[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.disabled[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+.container:focus-within &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.clear-button[data-v-93daa14e] {
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.leading-slot[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+}
+.trailing-slot[data-v-93daa14e] {
+  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-83f45d15] {
+  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);
+}
+
+.kds-color-picker-slider {
+&[data-v-f4be2bd4] {
+  position: relative;
+  width: 100%;
+  height: var(--kds-dimension-component-height-0-75x);
+  touch-action: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .handle[data-v-f4be2bd4] {
+    position: absolute;
+    top: 50%;
+    left: var(--v087094b8);
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+    pointer-events: none;
+    border: var(--kds-border-color-picker-handle-initial);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-elevation-level-3);
+    transform: translate(-50%, -50%);
+}
+}
+.kds-color-picker-slider[data-v-f4be2bd4]:focus {
+  outline: none;
+}
+.kds-color-picker-slider:focus .handle[data-v-f4be2bd4],
+.kds-color-picker-slider:focus-visible .handle[data-v-f4be2bd4] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+
+.kds-color-picker[data-v-2daeaa68] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-1x);
+  width: calc(206px + 2 * var(--kds-spacing-container-0-75x));
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.colorspace[data-v-2daeaa68] {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  touch-action: none;
+  cursor: crosshair;
+  user-select: none;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.handle[data-v-2daeaa68] {
+  position: absolute;
+  width: var(--kds-dimension-icon-0-75x);
+  height: var(--kds-dimension-icon-0-75x);
+  pointer-events: none;
+  border: var(--kds-border-color-picker-handle-initial);
+  border-radius: var(--kds-border-radius-container-pill);
+  box-shadow: var(--kds-elevation-level-3);
+  transform: translate(-50%, -50%);
+}
+.colorspace[data-v-2daeaa68]:focus {
+  outline: none;
+}
+.colorspace:focus .handle[data-v-2daeaa68],
+.colorspace:focus-visible .handle[data-v-2daeaa68] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+.hue[data-v-2daeaa68] {
+  background: linear-gradient(
+    90deg,
+    hsl(0deg 100% 50%) 0%,
+    hsl(60deg 100% 50%) 17%,
+    hsl(120deg 100% 50%) 33%,
+    hsl(180deg 100% 50%) 50%,
+    hsl(240deg 100% 50%) 67%,
+    hsl(300deg 100% 50%) 83%,
+    hsl(360deg 100% 50%) 100%
+  );
+}
+.alpha[data-v-2daeaa68] {
+  background-image: var(--v535b907d);
+  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] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  }
+&[data-v-2daeaa68] > * {
+    flex: 1 1 0;
+    min-width: 0;
+}
+}
+
+.kds-date-picker-grid[data-v-51807b35] {
+  width: 100%;
+}
+.kds-date-picker-header-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kds-date-picker-day-grid[data-v-51807b35] {
+  display: grid;
+  row-gap: var(--kds-spacing-container-0-5x);
+}
+.kds-date-picker-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-items: center;
+}
+.kds-date-picker-weekday[data-v-51807b35] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--kds-dimension-component-height-1-5x);
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.kds-date-picker-day {
+&[data-v-51807b35] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1-5x);
+  height: var(--kds-dimension-component-height-1-5x);
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-51807b35]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-51807b35]:hover:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-day-offset[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-subtle);
+}
+.kds-date-picker-day-disabled[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-day-today[data-v-51807b35] {
+  font-style: italic;
+  color: var(--kds-color-text-and-icon-selected);
+}
+.kds-date-picker-day-selected {
+&[data-v-51807b35] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-51807b35]:hover:not(:disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker-grid-simple[data-v-63d96e84] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--kds-spacing-container-0-75x);
+  width: 100%;
+  height: 100%;
+}
+.kds-date-picker-grid-row[data-v-63d96e84] {
+  display: contents;
+}
+.kds-date-picker-cell {
+&[data-v-63d96e84] {
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-63d96e84]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-cell-disabled[data-v-63d96e84] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-cell-selected {
+&[data-v-63d96e84] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker-grid-simple[data-v-270d55b9] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--kds-spacing-container-0-5x);
+  width: 100%;
+  height: 100%;
+}
+.kds-date-picker-grid-row[data-v-270d55b9] {
+  display: contents;
+}
+.kds-date-picker-cell {
+&[data-v-270d55b9] {
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-270d55b9]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-cell-disabled[data-v-270d55b9] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-cell-selected {
+&[data-v-270d55b9] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker[data-v-e46d7e18] {
+  width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-75x);
+  font-family: var(--kds-core-font-family-roboto);
+  font-size: var(--kds-core-font-size-0-75x);
+  color: var(--kds-color-text-and-icon-neutral);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-date-picker-header[data-v-e46d7e18] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-container-0-75x);
+}
+.kds-date-picker-nav-block[data-v-e46d7e18] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+}
+.kds-date-picker-header-label[data-v-e46d7e18] {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+.kds-date-picker-header-static-label[data-v-e46d7e18] {
+  flex: 1;
+  min-width: 0;
+  font-weight: var(--kds-core-font-weight-medium);
+  text-align: center;
+}
+.kds-date-picker-body[data-v-e46d7e18] {
+  display: flex;
+
+  /* Lock height to the day grid footprint:
+     7 rows of height-1-5x (1 header + 6 day rows) + 5 row gaps of 0-5x
+     (no gap between header and first day row). */
+  height: calc(
+    7 * var(--kds-dimension-component-height-1-5x) + 5 *
+      var(--kds-spacing-container-0-5x)
+  );
+}
+
+.kds-date-time-format-popover[data-v-8c697d02] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background-color: var(--kds-color-surface-default);
+  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] {
+  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-aec3e3d0] {
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+textarea {
+&[data-v-36211819] {
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  resize: none;
+  outline: none;
+  scrollbar-width: none;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  -ms-overflow-style: none;
+}
+&.invalid[data-v-36211819] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-36211819]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-36211819] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+&[data-v-36211819]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+&[data-v-36211819]:hover:not(:disabled, :focus) {
+    background: var(--kds-color-background-input-hover);
+}
+&[data-v-36211819]:focus:not(:disabled) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+textarea[data-v-36211819]::-webkit-scrollbar {
+  display: none;
+}
+
+.kds-time-picker[data-v-c2bc1234] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+  width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-time-picker-fields[data-v-c2bc1234] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: flex-start;
+}
+.kds-time-picker-field[data-v-c2bc1234] {
+  flex: 1;
+  min-width: var(--kds-dimension-component-width-4x);
+}
+.kds-time-picker-field-trash[data-v-c2bc1234] {
+  margin-top: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+}
+.kds-time-picker-divider[data-v-c2bc1234] {
+  width: 100%;
+}
+.kds-time-picker-actions[data-v-c2bc1234] {
+  display: flex;
+  justify-content: center;
+}
+
+.kds-interval-popover[data-v-02541fd1] {
+  display: flex;
+  flex-direction: column;
+  width: var(--kds-dimension-component-width-17-5x);
+  max-width: 100%;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-interval-popover-header {
+&[data-v-02541fd1] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: space-between;
+  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] {
+    font: var(--kds-font-base-title-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.kds-interval-popover-divider[data-v-02541fd1] {
+  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] {
+  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] {
+    align-self: center;
+}
+.kds-interval-popover-grid[data-v-02541fd1] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+}
+
+.kds-dropdown-trigger-button {
+&[data-v-1bb2d375] {
+  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));
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&[data-v-1bb2d375]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&.error[data-v-1bb2d375] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-1bb2d375]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+&[data-v-1bb2d375]:not(:disabled, :focus):hover {
+    background: var(--kds-color-background-input-hover);
+}
+}
+.leading[data-v-1bb2d375] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-width-1x);
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.text {
+&[data-v-1bb2d375] {
+  flex: 1 0 0;
+  min-width: 0;
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: nowrap;
+}
+&.placeholder[data-v-1bb2d375] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.missing[data-v-1bb2d375] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+}
+.trailing[data-v-1bb2d375] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding-right: calc(
+    var(--kds-spacing-container-0-12x) + 2 * var(--kds-core-border-width-xs)
+  );
+}
+
+.kds-dropdown-container[data-v-cdb20fd2] {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-dropdown-container-sticky-top[data-v-cdb20fd2] {
+  padding: var(--kds-spacing-container-0-25x);
+  background-color: var(--kds-color-surface-default);
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-dropdown-container-list {
+&[data-v-cdb20fd2] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-cdb20fd2] {
+    max-height: var(--kds-dimension-component-height-20x);
+}
+}
+
+.kds-list-item-button {
+&[data-v-21fb5571] {
+  position: relative;
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+.label[data-v-21fb5571] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+&[data-v-21fb5571]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
+}
+&[data-v-21fb5571]:focus-visible:not(:disabled) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-21fb5571]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-21fb5571]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+}
+
+.kds-multi-select-dropdown-options[data-v-68fe366f] {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--kds-dimension-component-width-12x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-multi-select-dropdown-search[data-v-68fe366f] {
+  padding: var(--kds-spacing-container-0-25x);
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-multi-select-dropdown-list {
+&[data-v-68fe366f] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-68fe366f] {
+    max-height: var(--kds-dimension-component-height-20x);
+}
+}
+.kds-multi-select-dropdown-footer[data-v-68fe366f] {
+  padding: var(--kds-spacing-container-0-25x);
+  border-top: var(--kds-border-base-subtle);
+}
+
+.kds-resize-handle-area[data-v-df3803d4] {
+  display: flex;
+  gap: var(--v1dcb931e);
+  justify-content: space-around;
+}
+.kds-resize-handle {
+&[data-v-df3803d4] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--v4bcf7fe4);
+  block-size: calc(2 * var(--kds-spacing-container-0-37x));
+  padding: 0;
+  appearance: none;
+  touch-action: none;
+  cursor: row-resize;
+  user-select: none;
+  background: none;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  -webkit-touch-callout: none;
+  }
+&[data-v-df3803d4]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+& .kds-resize-handle-line[data-v-df3803d4] {
+    inline-size: 100%;
+    block-size: 0;
+    border-top: var(--kds-border-resize-handle-initial);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:hover > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-hover);
+}
+&:active > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-active);
+}
+}
+.kds-resize-handle-area:hover > .kds-resize-handle > .kds-resize-handle-line[data-v-df3803d4] {
+  border-top: var(--kds-border-resize-handle-hover);
+}
+
+.kds-resize-container {
+&[data-v-46b33b01] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+&.dragging[data-v-46b33b01] {
+    user-select: none;
+}
+}
+.kds-resize-container-content[data-v-46b33b01] {
+  inline-size: 100%;
+}
+
+.kds-multiselect-list-box {
+&[data-v-2c5e2dda] {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-block-size: 0;
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.disabled[data-v-2c5e2dda] {
+    border: var(--kds-border-action-disabled);
+}
+&.error[data-v-2c5e2dda] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-2c5e2dda]:has(:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-multiselect-list-box-list {
+&[data-v-2c5e2dda] {
+  position: relative;
+  flex-grow: 1;
+  padding: calc(
+    var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)
+  );
+  margin: 0;
+  overflow-y: auto;
+}
+&[data-v-2c5e2dda]:focus {
+    outline: none;
+}
+}
+.kds-multiselect-list-box-item {
+&[data-v-2c5e2dda] {
+  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] {
+    margin-top: 0;
+}
+}
+.kds-multiselect-list-box-content-grid[data-v-2c5e2dda] {
+  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] {
+  min-width: 0;
+}
+.kds-multiselect-sticky-bottom[data-v-2c5e2dda] {
+  position: sticky;
+  bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  min-width: 0;
+  padding: var(--kds-spacing-container-0-25x) 0;
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  background: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-subtle);
+}
+.kds-multiselect-empty[data-v-2c5e2dda] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.kds-twin-list-body[data-v-11062d8e] {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
+    minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-list-column {
+&[data-v-11062d8e] {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  }
+& .kds-list-box[data-v-11062d8e] {
+    flex: 1;
+    min-block-size: 0;
+}
+}
+.kds-list-header[data-v-11062d8e] {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-list-label[data-v-11062d8e] {
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+.kds-list-count[data-v-11062d8e] {
+  font: var(--kds-font-base-title-xsmall);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.kds-button-column[data-v-11062d8e] {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--kds-spacing-container-4x);
+}
+
+.kds-twin-list[data-v-1a9327b5] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+
+.kds-sortable-list-box-wrapper[data-v-ee7b63e2] {
+  display: flex;
+  flex-direction: column;
+}
+.kds-sortable-top-buttons[data-v-ee7b63e2] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--kds-spacing-container-0-75x);
+  padding-bottom: var(--kds-spacing-container-0-37x);
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-sortable-top-buttons-left[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-sortable-footer-buttons[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: center;
+  padding: var(--kds-spacing-container-0-5x) 0;
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+
+.kds-info-popover-content[data-v-951f2a2b] {
+  max-width: var(--kds-dimension-component-width-25x);
+  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);
+}
+
+.info-toggle-button {
+&[data-v-2e9ef96a] {
+  --bg-initial: transparent;
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-height-1x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-2e9ef96a] {
+    opacity: 0;
+}
+&[data-v-2e9ef96a]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-2e9ef96a]:hover {
+    background-color: var(--bg-hover);
+}
+&[data-v-2e9ef96a]:active {
+    background-color: var(--bg-active);
+}
+&.selected[data-v-2e9ef96a] {
+    --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-selected);
+}
+}
+
+.kds-variable-popover {
+&[data-v-8a0c56d0] {
+  width: var(--kds-dimension-component-width-25x);
+  max-width: 100%;
+  max-height: var(--kds-dimension-component-height-20x);
+  padding: var(--kds-spacing-container-0-75x);
+  overflow-y: auto;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: pre-wrap;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-8a0c56d0]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.variable-toggle-button {
+&[data-v-b6d29842] {
+  --bg-initial: var(--kds-color-background-neutral-initial);
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-height-1x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-b6d29842] {
+    opacity: 0;
+}
+&[data-v-b6d29842]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-b6d29842]:hover {
+    background-color: var(--bg-hover);
+}
+&[data-v-b6d29842]:active {
+    background-color: var(--bg-active);
+}
+&.pressed-or-set[data-v-b6d29842] {
+    --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-b6d29842] {
+    --bg-initial: var(--kds-color-background-danger-initial);
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+    --border: var(--kds-border-action-error);
+    --icon-color: var(--kds-color-text-and-icon-danger);
+}
+}
+
+.kds-accordion[data-v-0beea165] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-1-25x);
+  width: 100%;
+}
+.kds-accordion-item[data-v-0beea165] {
+  padding: var(--kds-spacing-container-0-25x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-accordion-header {
+&[data-v-0beea165] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-2-25x);
+  padding: 0 var(--kds-spacing-container-0-75x) 0
+    var(--kds-spacing-container-1x);
+  font: inherit;
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  cursor: pointer;
+  list-style: none;
+  background: transparent;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  }
+&[data-v-0beea165]::-webkit-details-marker {
+    display: none;
+}
+&[data-v-0beea165]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:not([aria-disabled="true"]) {
+&[data-v-0beea165]:hover {
+      background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-0beea165]:active {
+      background: var(--kds-color-background-neutral-active);
+}
+}
+&[aria-disabled="true"][data-v-0beea165] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: not-allowed;
+    background: var(--kds-color-background-neutral-initial);
+}
+}
+.kds-accordion-headline[data-v-0beea165] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  white-space: nowrap;
+}
+.kds-accordion-headline-container[data-v-0beea165] {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  min-width: 0;
+}
+.kds-accordion-content[data-v-0beea165] {
+  padding: var(--kds-spacing-container-1x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+
+.kds-card-header {
+&[data-v-09093cc0] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-75x);
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
+
+  /* push actions to the right if its the only element */
+}
+.actions[data-v-09093cc0],
+  .accessory[data-v-09093cc0] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-37x);
+}
+.actions[data-v-09093cc0] {
+    margin-left: auto;
+}
+& h6[data-v-09093cc0] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-large-strong);
+    white-space: nowrap;
+}
+}
+
+.kds-base-card {
+&[data-v-a1aff6d6] {
+  --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
+  --kds-base-card-primary-action-z-index: 1;
+  --kds-base-card-secondary-action-z-index: 2;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  outline: none;
+  border-style: solid;
+  border-radius: var(--kds-base-card-border-radius);
+  isolation: isolate;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+&[data-v-a1aff6d6] [data-kds-card-primary-action] {
+    z-index: var(--kds-base-card-primary-action-z-index);
+    border-radius: var(--kds-base-card-border-radius);
+}
+&[data-v-a1aff6d6] [data-kds-card-secondary-action] {
+    position: relative;
+    z-index: var(--kds-base-card-secondary-action-z-index);
+}
+}
+
+/* Variant: Filled, Value: False */
+.variant-filled {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-base-subtle);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: False */
+.variant-outlined {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-base-muted);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: False */
+.variant-transparent {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    background: var(--kds-color-background-neutral-hover);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Filled, Value: True */
+.variant-filled.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: True */
+.variant-outlined.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: True */
+.variant-transparent.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    background: var(--kds-color-background-selected-initial);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+.kds-clickable-card {
+&[data-v-04004cbf] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-04004cbf] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-04004cbf]:disabled {
+      cursor: default;
+}
+&[data-v-04004cbf]:focus {
+      outline: none;
+}
+}
+&[data-v-04004cbf]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-link-card {
+&[data-v-1696fd9e] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-1696fd9e] {
+    position: absolute;
+    inset: 0;
+    text-decoration: none;
+}
+&[data-v-1696fd9e]:focus {
+      outline: none;
+}
+}
+&[data-v-1696fd9e]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-selectable-card {
+&[data-v-af9b9bf6] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-af9b9bf6] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-af9b9bf6]:disabled {
+      cursor: default;
+}
+&[data-v-af9b9bf6]:focus {
+      outline: none;
+}
+}
+&[data-v-af9b9bf6]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-panel {
+&[data-v-d3124a50] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--kds-color-surface-default);
+}
+.kds-panel-header[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-75x)
+      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
+    border-bottom: var(--kds-border-base-subtle);
+}
+.kds-panel-headline[data-v-d3124a50] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+}
+.kds-panel-headline-text[data-v-d3124a50] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-medium-strong);
+    white-space: nowrap;
+}
+.kds-panel-header-trailing[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    margin-left: auto;
+}
+.kds-panel-body {
+&[data-v-d3124a50] {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: var(--v2ddcad1c);
+}
+&[data-variant="padded"][data-v-d3124a50] {
+      padding: var(--kds-spacing-container-0-75x);
+}
+&[tabindex="0"][data-v-d3124a50]:focus-visible {
+      outline: var(--kds-border-action-focused);
+      outline-offset: var(--kds-spacing-offset-focus);
+      border-radius: var(--kds-border-radius-container-0-31x);
+}
+}
+.kds-panel-footer[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    justify-content: space-between;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    border-top: var(--kds-border-base-subtle);
+}
+.kds-panel-footer-leading[data-v-d3124a50],
+  .kds-panel-footer-trailing[data-v-d3124a50] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+}
+}
+
+.kds-tab-icon[data-v-91f95f5f] {
+  flex-shrink: 0;
+}
+.kds-tab-label[data-v-91f95f5f] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-interactive-medium-strong);
+  white-space: nowrap;
+}
+.kds-tab {
+&[data-v-91f95f5f] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font: inherit;
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  isolation: isolate;
+  }
+&[data-v-91f95f5f]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: not-allowed;
+}
+&[data-v-91f95f5f]: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-91f95f5f] {
+    color: var(--kds-color-text-and-icon-selected);
+    }
+& .kds-tab-indicator[data-v-91f95f5f] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      height: var(--kds-dimension-component-height-0-125x);
+      background: var(--kds-color-background-selected-bold-initial);
+      border: var(--kds-border-action-selected);
+      border-top-left-radius: var(--kds-border-radius-container-0-12x);
+      border-top-right-radius: var(--kds-border-radius-container-0-12x);
+}
+}
+&[data-v-91f95f5f]:hover:not(:disabled) {
+    color: var(--kds-color-text-and-icon-selected);
+}
+}
+.kds-tab-bar-wrapper {
+&[data-v-91f95f5f] {
+  --focus-ring-space: calc(
+    2px + var(--kds-spacing-offset-focus)
+  ); /* outline-width + outline-offset */
+
+  position: relative;
+  display: flow-root;
+  overflow: visible;
+  }
+&[data-v-91f95f5f]::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--kds-core-border-width-m);
+    pointer-events: none;
+    content: "";
+    background: var(--kds-color-border-subtle);
+}
+}
+.kds-tab-bar {
+&[data-v-91f95f5f] {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: var(--focus-ring-space);
+  margin: calc(-1 * var(--focus-ring-space));
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-radius: var(--kds-border-radius-container-none);
+  }
+&[data-v-91f95f5f]::-webkit-scrollbar {
+    display: none;
+}
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-91f95f5f] {
+    flex: 0 1 auto;
+    min-width: var(--v09be89a3);
+}
+&.kds-tab-bar-large .kds-tab-label[data-v-91f95f5f] {
+    font: var(--kds-font-base-interactive-large-strong);
+}
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-91f95f5f] {
+    font: var(--kds-font-base-title-large);
+}
+&.kds-tab-bar-small,
+  &.kds-tab-bar-large {
+& .kds-tab-selected .kds-tab-icon[data-v-91f95f5f] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+}
+&.kds-tab-bar-small .kds-tab[data-v-91f95f5f] {
+    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-91f95f5f] {
+    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-91f95f5f] {
+    flex: 1;
+    justify-content: center;
+    width: 100%;
+}
+}
+
+@keyframes knight-rider-86829b28 {
+from {
+    background-position-x: 100%;
+}
+to {
+    background-position-x: -100%;
+}
+}
+.kds-loading-skeleton-item {
+&[data-v-86829b28] {
+  background-color: var(--kds-color-border-subtle);
+  background-image: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      0%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 15%, transparent)
+      25%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      50%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 200% 100%;
+  animation: knight-rider-86829b28 2s linear 200ms infinite;
+}
+&.text[data-v-86829b28] {
+    height: var(--kds-dimension-component-height-0-75x);
+    border-radius: var(--kds-border-radius-container-pill);
+}
+&.icon-large[data-v-86829b28],
+  &.icon-medium[data-v-86829b28],
+  &.icon-small[data-v-86829b28] {
+    border-radius: var(--kds-border-radius-container-pill);
+}
+&.icon-large[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+&.icon-medium[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.icon-small[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.button-large[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-2-25x);
+    border-radius: var(--kds-border-radius-container-0-50x);
+}
+&.button-medium[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-75x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.button-small[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-5x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.button-xsmall[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-25x);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.input-with-label[data-v-86829b28] {
+    height: var(--kds-dimension-component-height-1-75x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.label[data-v-86829b28] {
+    width: 35%;
+    height: var(--kds-dimension-component-height-0-75x);
+    border-radius: var(--kds-border-radius-container-0-50x);
+}
+&.card[data-v-86829b28] {
+    height: 100%;
+    min-height: var(--kds-dimension-component-height-12x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+}
+
+.kds-loading-skeleton[data-v-e6597718] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v59c08829);
+}
+.kds-loading-skeleton-headline-with-paragraph {
+&[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-1-25x);
+  }
+& .headline[data-v-e6597718] {
+    width: 50%;
+    height: var(--kds-dimension-component-height-1x);
+}
+& .kds-loading-skeleton-paragraph-lines {
+&[data-v-e6597718] {
+    display: grid;
+    gap: var(--kds-spacing-container-0-75x);
+    }
+&[data-v-e6597718] > *:nth-child(2) {
+      width: 75%;
+}
+&[data-v-e6597718] > *:nth-child(3) {
+      width: 50%;
+}
+}
+}
+.kds-loading-skeleton-input-with-label[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.kds-loading-skeleton-list-item {
+&[data-v-e6597718] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  }
+& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+    min-width: 0;
+}
+&.kds-loading-skeleton-list-item-large {
+&[data-v-e6597718] {
+    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-88x);
+}
+}
+}
+&.kds-loading-skeleton-list-item-small {
+&[data-v-e6597718] {
+    gap: var(--kds-spacing-container-0-5x);
+    align-items: start;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
+    }
+& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+      justify-content: flex-start;
+}
+}
+&.kds-loading-skeleton-list-item-large-with-subtext {
+&[data-v-e6597718] {
+    align-items: center;
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-75x);
+}
+}
+}
+}
+
+.kds-nav-item {
+&[data-v-17711664] {
+  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-17711664]: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-17711664] {
+
+    display: flex;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
+    color: var(--kds-color-text-and-icon-neutral);
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    border: none;
+}
+&[data-v-17711664]:focus-visible {
+      outline: none;
+}
+& .label[data-v-17711664] {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-interactive-medium);
+      text-align: left;
+      white-space: nowrap;
+}
+}
+& .trailing-items[data-v-17711664] {
+    position: absolute;
+    top: 0;
+    right: var(--kds-spacing-container-0-75x);
+    display: flex;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-v-17711664]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-17711664] {
+    background: var(--kds-color-background-selected-initial);
+}
+& .kds-nav-button[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+& .trailing-items[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-17711664]::before {
+      position: absolute;
+      top: var(--kds-spacing-container-0-37x);
+      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);
+}
+&[data-v-17711664]:hover:not(.disabled) {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+      background: var(--kds-color-background-selected-active);
+}
+}
+&.disabled {
+&[data-v-17711664] {
+    cursor: default;
+}
+& .kds-nav-button[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-disabled);
+      cursor: default;
+}
+& .trailing-items[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-navigation {
+&[data-v-6cc9519f] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.nav-items[data-v-6cc9519f] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+}
+
+.kds-breadcrumb-item[data-v-fd7537fc] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  margin: 0;
+  font: var(--kds-font-base-interactive-small);
+  color: var(
+    --kds-breadcrumb-item-color,
+    var(--kds-color-text-and-icon-subtle)
+  );
+  text-decoration: none;
+  background: none;
+  border: none;
+}
+.breadcrumb-label[data-v-fd7537fc] {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+  white-space: nowrap;
+}
+.breadcrumb-icon[data-v-fd7537fc] {
+  flex-shrink: 0;
+}
+span.kds-breadcrumb-item[data-v-fd7537fc] {
+  cursor: default;
+}
+a.kds-breadcrumb-item,
+button.kds-breadcrumb-item {
+&[data-v-fd7537fc] {
+  cursor: pointer;
+  border-radius: var(--kds-border-radius-container-0-12x);
+  }
+&[data-v-fd7537fc]:hover {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-v-fd7537fc]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-breadcrumb-item:hover .breadcrumb-label[data-v-fd7537fc],
+.kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-fd7537fc] {
+  text-overflow: clip;
+}
+
+ol[data-v-e93667af] {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: var(--kds-spacing-container-none);
+  padding-top: var(--kds-spacing-container-0-12x);
+  padding-bottom: var(--kds-spacing-container-0-12x);
+  padding-left: var(--kds-spacing-container-0-25x);
+  margin: var(--kds-spacing-container-none);
+  overflow-x: hidden;
+  white-space: nowrap;
+  list-style: none;
+}
+li {
+&[data-v-e93667af] {
+  /*
+     * Width is controlled by `useBreadcrumbAdaptiveLayout()` via the CSS
+     * custom properties `--kds-bc-max-width` (resting cap) and
+     * `--kds-bc-natural-width` (full width used while hovered/focused). Flex
+     * shrink/grow is disabled so the script is the single source of truth.
+     */
+  --kds-bc-floor: calc(
+    var(--kds-dimension-icon-1x) /* leading icon */ +
+      var(--kds-spacing-container-0-25x) /* item gap */ +
+      var(--kds-dimension-icon-0-75x) /* chevron */ + 2 *
+      var(--kds-spacing-container-0-12x) /* chevron margin */
+  );
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: var(--kds-bc-floor);
+  max-width: var(--kds-bc-max-width, fit-content);
+  min-height: var(--kds-dimension-component-height-1-25x);
+  font: var(--kds-font-base-subtext-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+  transition: max-width 0.1s;
+
+  /*
+     * Hover/focus expands an ellipsed item back to its natural width. The
+     * surrounding items keep their resting widths and are simply pushed out to
+     * the right; `ol { overflow: hidden }` clips the overflow so the
+     * breadcrumb never grows beyond its container. Releasing the hover/focus
+     * snaps everything back into place via the `max-width` transition.
+     */
+
+  /* Current item: override the item color token so a/button inherit it. */
+  }
+&[data-v-e93667af]:last-child {
+    --kds-bc-floor: calc(
+      var(--kds-dimension-icon-1x) /* leading icon */ +
+        var(--kds-spacing-container-0-25x) /* item gap */
+    );
+}
+&[data-v-e93667af]:hover,
+  &[data-v-e93667af]:focus-within {
+    max-width: var(--kds-bc-natural-width, fit-content);
+}
+&.current[data-v-e93667af] {
+    --kds-breadcrumb-item-color: var(--kds-color-text-and-icon-neutral);
+}
+.path-separator[data-v-e93667af] {
+    flex-shrink: 0;
+    align-self: center;
+    margin-inline: var(--kds-spacing-container-0-12x);
+    color: var(--kds-color-text-and-icon-muted);
+}
+}
+
+.modal-header {
+&[data-v-62740dc9] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  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);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+& .modal-header-headline[data-v-62740dc9] {
+    flex: 1 1 auto;
+}
+}
+.modal-body {
+&[data-v-62740dc9] {
+  --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(--v81addf0a);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-variant="padded"][data-v-62740dc9] {
+    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-62740dc9] {
+  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;
+}
+
+.kds-modal {
+&[data-v-f4a6776f] {
+  /* 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(--v5b2d4b6a);
+  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 */
+}
+&.width-small[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-25x);
+    --modal-animation-time: 100ms;
+    --modal-scale-base: 0.85;
+}
+&.width-medium[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-32x);
+    --modal-animation-time: 140ms;
+    --modal-scale-base: 0.88;
+}
+&.width-large[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-45x);
+    --modal-animation-time: 210ms;
+    --modal-scale-base: 0.88;
+}
+&.width-xlarge[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-61x);
+    --modal-animation-time: 300ms;
+    --modal-scale-base: 0.88;
+}
+&.width-full[data-v-f4a6776f] {
+    --modal-width: var(--modal-full-size);
+    --modal-animation-time: 350ms;
+    --modal-scale-base: 0.92;
+}
+&.height-full[data-v-f4a6776f] {
+    --modal-height: var(--modal-full-size);
+}
+&.height-auto[data-v-f4a6776f] {
+    --modal-height: fit-content;
+}
+&[data-v-f4a6776f]:not([open]) {
+    display: none;
+}
+&[data-v-f4a6776f]:focus-visible,
+  &[data-v-f4a6776f]:focus {
+    outline: none;
+}
+&[data-v-f4a6776f]::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-f4a6776f]::backdrop {
+    opacity: 1;
+}
+&[open][data-v-f4a6776f] {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+
+/** Animation starting styles */
+@starting-style {
+.kds-modal {
+&[data-v-f4a6776f] {
+    opacity: 1;
+    transform: scale(1);
+}
+&[open][data-v-f4a6776f] {
+      opacity: 0;
+      transform: scale(var(--modal-scale-base));
+}
+&[data-v-f4a6776f]::backdrop {
+      opacity: 1;
+}
+&[open][data-v-f4a6776f]::backdrop {
+      opacity: 0;
+}
+}
+}
+
+.ask-again[data-v-41fc8d84] {
+  padding: var(--kds-spacing-container-0-5x) 0 0 0;
+}
+.flush-left[data-v-41fc8d84] {
+  margin-right: auto;
+}
+
+.kds-button-group-measure[data-v-a945c295] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-a945c295] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-a945c295] {
+    justify-content: flex-start;
+}
+&.right[data-v-a945c295] {
+    justify-content: flex-end;
+}
+&.middle[data-v-a945c295] {
+    justify-content: center;
+}
+}
+
+tr {
+&[data-v-b1ac99a6] {
+  display: flex;
+  border-bottom: var(--kds-border-base-subtle);
+}
+& td {
+&.deletion-cell-spacer[data-v-b1ac99a6] {
+      width: var(--kds-dimension-component-width-2x);
+      min-width: var(--kds-dimension-component-width-2x);
+}
+& .skeleton[data-v-b1ac99a6] {
+      padding: var(--kds-spacing-container-0-12x) 0;
+}
+&.select-cell {
+&[data-v-b1ac99a6] {
+      display: flex;
+      justify-content: center;
+      width: var(--kds-dimension-component-width-2x);
+      min-width: var(--kds-dimension-component-width-2x);
+}
+& .select-checkbox[data-v-b1ac99a6] {
+        /* With this added padding the checkbox appears centered initially */
+        padding: var(--kds-spacing-container-0-10x);
+}
+}
+}
+}
+
+.dots {
+&[data-v-df158652] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font: var(--kds-font-base-interactive-large);
+  color: var(--kds-color-text-and-icon-neutral);
+  border-bottom: var(--kds-border-base-subtle);
+}
+& span[data-v-df158652] {
+    text-align: center;
+    pointer-events: none;
+}
+}
+
+.container {
+&[data-v-4c5d7018] {
+  flex: 1 1 0;
+}
+&.fit-content[data-v-4c5d7018] {
+    flex: 0 0 auto;
+}
+& .header-container[data-v-4c5d7018] {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index-sticky-header);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
+& tbody[data-v-4c5d7018] {
+    /**
+      * Necessary for the absolutely placed elements inside of it (e.g. cell selection overlay)
+      * to scroll with the body.
+    */
+    position: relative;
+
+    /**
+      * Otherwise there is a small margin from the left that leads to an unnecessary scrollbar
+    */
+    display: block;
+
+    /**
+     * Necessary so that non-virtual elements (like drag handles) are wide enough
+    */
+    width: fit-content;
+}
+}
+
+.page-navigation {
+&[data-v-f8714af0] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+}
+& .navigation-buttons[data-v-f8714af0] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+}
+& .page-count[data-v-f8714af0] {
+    font: var(--kds-font-base-title-small);
+    color: var(--kds-color-text-and-icon-subtle);
+}
+}
+
+.subtle[data-v-6cdf0c06] {
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-subtle);
+}
+.muted[data-v-6cdf0c06] {
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.row-range-container[data-v-6cdf0c06] {
+  display: flex;
+  flex: 1 0 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  align-self: stretch;
+}
+
+.page-controls {
+&[data-v-0c85eb71] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
+}
+& .page-row-range[data-v-0c85eb71],
+  & .page-size-menu[data-v-0c85eb71] {
+    flex-grow: 1;
+    flex-basis: 0;
+}
+.page-size-menu[data-v-0c85eb71] {
+    display: flex;
+    justify-content: flex-end;
+}
+}
+
+.rows[data-v-9653892f] {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+}
+.row[data-v-9653892f] {
+  display: contents;
+}
+.column[data-v-9653892f],
+.mode[data-v-9653892f],
+.value[data-v-9653892f] {
+  min-width: 0;
+}
+.add[data-v-9653892f] {
+  margin-top: var(--kds-spacing-container-0-5x);
+}
+
+.popover {
+&[data-v-349cd3ba] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: flex-start;
+  max-height: var(--kds-dimension-component-height-25x);
+  padding: var(--kds-spacing-container-0-75x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+& .header[data-v-349cd3ba] {
+    font: var(--kds-font-base-title-xsmall);
+    color: var(--kds-color-text-and-icon-muted);
+}
+& .body[data-v-349cd3ba] {
+    width: 100%;
+}
+}
+
+.filter-popover[data-v-178504c8] {
+  position-try-order: most-inline-size;
+}
+
+.sort-popover[data-v-e540d3eb] {
+  position-try-order: most-inline-size;
+}
+.popover-container {
+.body {
+&[data-v-e540d3eb] {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: var(--kds-spacing-container-0-5x);
+    }
+&[data-v-e540d3eb] > * {
+      min-width: 0;
+}
+}
+}
+
+.kds-table-action-bar {
+&[data-v-4a75b4b1] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-5x);
+  padding-right: var(--kds-spacing-container-0-25x);
+  padding-left: var(--kds-spacing-container-0-5x);
+  border-top: var(--kds-border-base-subtle);
+}
+&.temporary-view[data-v-4a75b4b1] {
+    background-color: var(--kds-color-background-static-info-muted);
+}
+& .left {
+&[data-v-4a75b4b1] {
+    display: flex;
+    flex: 1 0 0;
+    gap: var(--kds-spacing-container-0-5x);
+    align-items: center;
+    padding: var(--kds-spacing-container-0-12x) 0;
+}
+& .title[data-v-4a75b4b1] {
+      font: var(--kds-font-base-title-medium-strong);
+      color: var(--kds-color-text-and-icon-neutral);
+}
+& .dimension[data-v-4a75b4b1] {
+      font: var(--kds-font-base-title-small);
+      color: var(--kds-color-text-and-icon-muted);
+      white-space: pre;
+}
+}
+& .right[data-v-4a75b4b1] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--kds-spacing-container-0-12x) 0;
+}
+}
+
+thead {
+&[data-v-3fabfb11] {
+  background-color: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-subtle);
+  border-bottom: var(--kds-border-base-subtle);
+}
+& tr {
+&[data-v-3fabfb11] {
+    display: flex;
+    height: 100%;
+    transition:
+      height 0.3s,
+      box-shadow 0.15s;
+}
+& th {
+&[data-v-3fabfb11] {
+      min-height: var(--kds-dimension-component-height-2-5x);
+      max-height: var(--kds-dimension-component-height-5x);
+      text-align: left;
+      white-space: nowrap;
+}
+&.deletion-cell-spacer[data-v-3fabfb11] {
+        width: var(--kds-dimension-component-width-2x);
+}
+&.header-focused[data-v-3fabfb11] {
+        background-color: var(--kds-color-focus-background);
+}
+&.select-cell {
+&[data-v-3fabfb11] {
+        display: flex;
+        justify-content: center;
+        width: var(--kds-dimension-component-width-2x);
+        padding: var(--kds-spacing-container-0-75x);
+}
+& .select-checkbox[data-v-3fabfb11] {
+          /* With this added padding the checkbox appears centered initially */
+          padding: var(--kds-spacing-container-0-10x);
+}
+}
+&.colored-header[data-v-3fabfb11] {
+        /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+        background-image: linear-gradient(
+          90deg,
+          var(--data-cell-color),
+          var(--data-cell-color)
+        );
+        background-repeat: no-repeat;
+        background-size: var(--kds-spacing-container-0-25x);
+}
+&.column-header {
+&[data-v-3fabfb11] {
+        /* Need to set position relative here to position the resize handle absolutely within the header cell */
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-right: var(--kds-spacing-container-0-37x);
+        padding-left: var(--kds-spacing-container-0-5x);
+        color: var(--kds-color-text-and-icon-neutral);
+}
+& .column-header-content {
+&[data-v-3fabfb11] {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          width: 100%;
+}
+&[data-v-3fabfb11]:focus {
+            outline: none;
+}
+&.with-button-in-header[data-v-3fabfb11] {
+            width: calc(
+              100% - var(--kds-dimension-component-width-1-5x)
+            ); /* due to .sub-menu-select-header / .delete-column-button: width */
+}
+& .main-header {
+&[data-v-3fabfb11] {
+            display: flex;
+}
+& .header-text-container[data-v-3fabfb11] {
+              max-width: 100%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font: var(--kds-font-base-title-medium-strong);
+}
+}
+& .sub-header-text-container[data-v-3fabfb11] {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font: var(--kds-font-base-subtext-small);
+}
+}
+& .delete-column-button[data-v-3fabfb11] {
+          display: flex;
+          align-items: center;
+          width: var(--kds-dimension-component-width-2x);
+}
+& .resize-handle-area {
+&[data-v-3fabfb11] {
+          position: absolute;
+
+          /* resize handle should range into top border */
+          top: calc(-1 * var(--kds-core-border-width-xs));
+
+          /* resize handle should be at the very right of the header cell, but not range into the next cell, which is 
+          why we need to remove half of the .resize-handles' border */
+          right: calc(
+            -1 *
+              (
+                var(--kds-spacing-container-0-25x) -
+                  var(--kds-core-border-width-l) / 2
+              )
+          );
+
+          /* otherwise the handle will be behind rows when virtual scrolling */
+          z-index: var(--z-index-column-resize-drag-handle);
+          display: flex;
+          justify-content: center;
+          width: 0;
+          height: 100%;
+          padding-inline: var(--kds-spacing-container-0-25x);
+          cursor: col-resize;
+          opacity: 0;
+}
+& .resize-handle[data-v-3fabfb11] {
+            border-right: var(--kds-border-resize-handle-hover);
+            border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.hover[data-v-3fabfb11] {
+            opacity: 1;
+}
+&.drag[data-v-3fabfb11] {
+            opacity: 1;
+}
+}
+}
+&.new-column-head[data-v-3fabfb11] {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: var(--kds-spacing-container-0-5x);
+}
+}
+&[data-v-3fabfb11]:hover {
+      outline: none;
+}
+}
+&.sub-menu-active tr[data-v-3fabfb11] {
+    padding-right: var(--kds-dimension-component-width-2x);
+}
+}
+.header-selection-overlay {
+&[data-v-3fabfb11] {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+  border: var(--kds-border-action-selected-accent);
+}
+&.header-focused[data-v-3fabfb11] {
+    border: var(--kds-border-action-focused);
+}
+}
+
+.sticky-container {
+&[data-v-7934e820] {
+  position: sticky;
+  left: 0;
+  width: fit-content;
+}
+& .add-button[data-v-7934e820] {
+    margin: var(--kds-spacing-container-0-25x);
+}
+}
+
+.expand-button {
+&[data-v-5cde8e39] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-height-1x);
+  padding: 0;
+  color: var(--kds-color-text-and-icon-info);
+  cursor: pointer;
+  background-color: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-12x);
+}
+&[data-v-5cde8e39]:hover {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-5cde8e39]:active {
+    background-color: var(--kds-color-background-neutral-active);
+}
+&.toggled {
+&[data-v-5cde8e39] {
+    color: var(--kds-color-text-and-icon-neutral-inverted);
+    background-color: var(--kds-color-background-info-bold-initial);
+    border: var(--kds-border-action-transparent);
+}
+&[data-v-5cde8e39]:hover {
+      background-color: var(--kds-color-background-info-bold-hover);
+}
+&[data-v-5cde8e39]:active {
+      background-color: var(--kds-color-background-info-bold-active);
+}
+}
+}
+
+.data-cell {
+&[data-v-cf791d20] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+  user-select: none;
+  background-clip: border-box;
+}
+&.in-cell-selection[data-v-cf791d20] {
+    background-color: var(--kds-color-focus-background);
+}
+&.colored-cell[data-v-cf791d20] {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+    background-image: linear-gradient(
+      90deg,
+      var(--data-cell-color),
+      var(--data-cell-color)
+    );
+    background-repeat: no-repeat;
+    background-size: var(--kds-spacing-container-0-25x);
+}
+&.inline-block span[data-v-cf791d20] {
+    display: inline-block;
+}
+& .cell-text[data-v-cf791d20] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+}
+
+tr[data-v-981795db] {
+  display: flex;
+}
+tr.row {
+&[data-v-981795db] {
+  border-bottom: var(--kds-border-base-subtle);
+  }
+& td {
+&[data-v-981795db] {
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+&.select-cell {
+&[data-v-981795db] {
+      display: flex;
+      justify-content: center;
+      width: var(--kds-dimension-component-width-2x);
+      min-width: var(--kds-dimension-component-width-2x);
+      }
+& .select-checkbox[data-v-981795db] {
+        /* With this added padding the checkbox appears centered initially */
+        padding: var(--kds-spacing-container-0-10x);
+}
+}
+&.deletion-cell {
+&[data-v-981795db] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--kds-dimension-component-width-2x);
+      min-width: var(--kds-dimension-component-width-2x);
+      opacity: 0;
+      }
+&[data-v-981795db]:focus-within {
+        opacity: 1;
+}
+}
+&.action[data-v-981795db] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--kds-dimension-component-width-2x);
+      min-width: var(--kds-dimension-component-width-2x);
+}
+}
+&:hover {
+&[data-v-981795db] {
+    outline: none;
+    background-color: var(--kds-color-background-neutral-hover);
+    }
+& .deletion-cell[data-v-981795db] {
+      opacity: 1;
+}
+}
+& a[data-v-981795db] {
+    outline: none;
+}
+}
+.row-drag-handle[data-v-981795db] {
+  position: relative;
+  bottom: var(--kds-spacing-container-0-37x);
+  height: var(--kds-spacing-container-0-37x);
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-37x));
+  cursor: row-resize;
+  opacity: 0;
+}
+
+.overlay {
+&[data-v-f7862e17] {
+  position: absolute;
+  z-index: var(--z-index-cell-selection-overlay);
+  pointer-events: none;
+  border: var(--kds-border-action-selected-accent);
+}
+&.virtual-focus[data-v-f7862e17] {
+    border: var(--kds-border-action-focused);
+}
+}
+
+.wrapper[data-v-829ae68c] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+@media screen {
+    /* height 100% does not mix well with flex-box on print (https://issues.chromium.org/issues/365922171) */
+    height: 100%;
+}
+}
+table {
+&[data-v-829ae68c] {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  }
+&[data-v-829ae68c]:focus {
+    outline: none;
+}
+& .new-row-footer[data-v-829ae68c] {
+    width: 100%;
+}
+}
+
+.table-column-size-calculation[data-v-b93f03c7] {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  visibility: hidden;
+}