@knime/kds-components 0.6.7 → 0.8.0

package/dist/index.css

@@ -1,5 +1,57 @@
+
+.kds-avatar[data-v-4a34a186] {
+  position: relative;
+  display: inline-block;
+  inline-size: var(--kds-dimension-component-width-1-5x);
+  block-size: var(--kds-dimension-component-width-1-5x);
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  vertical-align: middle;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+.kds-avatar[data-v-4a34a186]::after {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  pointer-events: none;
+  content: "";
+  border: var(--kds-border-base-muted);
+  border-radius: inherit;
+}
+.kds-avatar-image[data-v-4a34a186] {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.kds-avatar-initials[data-v-4a34a186] {
+  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: var(--kds-color-text-and-icon-primary-inverted);
+  user-select: none;
+  background: var(--kds-color-background-primary-bold-initial);
+}
+.kds-avatar-initials > span[data-v-4a34a186] {
+  font-size: calc(1em + calc(100cqi - 2em) / 2);
+}
+
+.kds-color-swatch[data-v-c8fc7e8e] {
+  display: inline-block;
+  width: var(--kds-dimension-icon-0-75x);
+  height: var(--kds-dimension-icon-0-75x);
+  overflow: hidden;
+  line-height: 0;
+  border: var(--kds-border-base-muted);
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
 .kds-icon {
-&[data-v-d965b88c] {
+&[data-v-3a57d423] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -14,7 +66,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-d965b88c] {
+&.xsmall[data-v-3a57d423] {
     --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);
@@ -23,7 +75,7 @@
       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-d965b88c] {
+&[data-v-3a57d423] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -34,19 +86,19 @@
 }
 }
 }
-&.small[data-v-d965b88c] {
+&.small[data-v-3a57d423] {
     --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-d965b88c] {
+&.large[data-v-3a57d423] {
     --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 {
-&[data-v-f7d93fdf] {
+&[data-v-d7166d18] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -61,7 +113,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-f7d93fdf] {
+&.xsmall[data-v-d7166d18] {
     --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);
@@ -70,7 +122,7 @@
       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-f7d93fdf] {
+&[data-v-d7166d18] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -81,19 +133,19 @@
 }
 }
 }
-&.small[data-v-f7d93fdf] {
+&.small[data-v-d7166d18] {
     --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-f7d93fdf] {
+&.large[data-v-d7166d18] {
     --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-f7d93fdf] {
+&[data-v-d7166d18] {
   --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);
@@ -111,31 +163,149 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.small[data-v-f7d93fdf] {
+&.small[data-v-d7166d18] {
     --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-f7d93fdf] {
+&.large[data-v-d7166d18] {
     --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-f7d93fdf] {
+&.small[data-v-d7166d18] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-f7d93fdf] {
+&.medium[data-v-d7166d18] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 }
 
+.kds-live-status {
+&[data-v-8bf6a94a] {
+  --dot-color: var(--kds-color-text-and-icon-disabled);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0; /* gap already included in dot */
+  align-items: center;
+  line-height: 0;
+}
+&.red[data-v-8bf6a94a] {
+    --dot-color: var(--kds-color-text-and-icon-danger);
+}
+&.orange[data-v-8bf6a94a] {
+    --dot-color: var(--kds-color-text-and-icon-warning);
+}
+&.green[data-v-8bf6a94a] {
+    --dot-color: var(--kds-color-text-and-icon-success);
+}
+.dot {
+&[data-v-8bf6a94a] {
+    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-8bf6a94a]::after {
+      display: block;
+      width: 50%;
+      height: 50%;
+      content: "";
+      background-color: var(--dot-color);
+      border-radius: var(--kds-border-radius-container-pill);
+}
+}
+.label[data-v-8bf6a94a] {
+    font: var(--kds-font-base-subtext-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
+}
+&.size-medium {
+.dot[data-v-8bf6a94a] {
+      width: var(--kds-dimension-icon-1x);
+      height: var(--kds-dimension-icon-1x);
+}
+.label[data-v-8bf6a94a] {
+      font: var(--kds-font-base-subtext-small);
+}
+}
+&.size-small {
+.dot[data-v-8bf6a94a] {
+      width: var(--kds-dimension-icon-0-75x);
+      height: var(--kds-dimension-icon-0-75x);
+}
+.label[data-v-8bf6a94a] {
+      font: var(--kds-font-base-subtext-xsmall);
+}
+}
+}
+
+.kds-loading-spinner {
+&[data-v-74bb7c3d] {
+  --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-74bb7c3d] {
+    --icon-width: var(--kds-dimension-icon-0-56x);
+    --icon-height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-74bb7c3d] {
+    --icon-width: var(--kds-dimension-icon-0-75x);
+    --icon-height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-74bb7c3d] {
+    --icon-width: var(--kds-dimension-icon-1-25x);
+    --icon-height: var(--kds-dimension-icon-1-25x);
+}
+&[data-style="onPrimary"][data-v-74bb7c3d] {
+    --color-track: var(--kds-color-loading-spinner-track-on-primary);
+    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
+}
+& .track[data-v-74bb7c3d] {
+    fill: none;
+    stroke: var(--color-track);
+    stroke-width: var(--icon-stroke-width);
+}
+& .loader[data-v-74bb7c3d] {
+    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-74bb7c3d 1.2s linear infinite;
+}
+}
+@keyframes spin-74bb7c3d {
+from {
+    transform: rotate(-90deg);
+}
+to {
+    transform: rotate(270deg);
+}
+}
+
 html.kds-legacy {
   --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
 }
 
 .button {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -149,143 +319,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-ab4824cd]:is(a) {
+&[data-v-b0f9559f]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
     cursor: default;
 }
-&[data-v-ab4824cd]:focus-visible {
+&[data-v-b0f9559f]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
     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-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
     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-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
     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-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
     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-ab4824cd] {
+&.disabled[data-v-b0f9559f] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-ab4824cd]:hover {
+&[data-v-b0f9559f]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-ab4824cd]:active {
+&[data-v-b0f9559f]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-ab4824cd] {
+& .label[data-v-b0f9559f] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -293,7 +463,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-ab4824cd] {
+&.xsmall[data-v-b0f9559f] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -305,7 +475,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-ab4824cd] {
+&.small[data-v-b0f9559f] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -317,7 +487,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-ab4824cd] {
+&.medium[data-v-b0f9559f] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -330,7 +500,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-ab4824cd] {
+&[data-v-b0f9559f] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -342,11 +512,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-ab4824cd] {
+& .label[data-v-b0f9559f] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-ab4824cd] {
+&.success[data-v-b0f9559f] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -355,7 +525,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-ab4824cd] {
+&.error[data-v-b0f9559f] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -366,238 +536,170 @@ html.kds-legacy {
 }
 }
 
-.kds-empty-state[data-v-34b52d0e] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
+.leading {
+&[data-v-ec08a9ba] {
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
+  justify-content: center;
+  width: var(--kds-dimension-icon-1x);
+  height: var(--kds-dimension-icon-1x);
 }
-.kds-empty-state-headline[data-v-34b52d0e] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+&.xsmall[data-v-ec08a9ba] {
+    width: var(--kds-dimension-icon-0-56x);
+    height: var(--kds-dimension-icon-0-56x);
 }
-.kds-empty-state-description[data-v-34b52d0e] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+&.small[data-v-ec08a9ba] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
 }
-.kds-empty-state-action[data-v-34b52d0e] {
-  margin-top: var(--kds-spacing-container-0-12x);
+&.large[data-v-ec08a9ba] {
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
 }
-
-.modal-header {
-&[data-v-583e34fe] {
-  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-title[data-v-583e34fe] {
-    flex: 1 1 auto;
+.leading-icon[data-v-ec08a9ba],
+.spinner[data-v-ec08a9ba] {
+  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-ec08a9ba],
+.spinner[data-visible="true"][data-v-ec08a9ba] {
+  opacity: 1;
 }
-.modal-body {
-&[data-v-583e34fe] {
-  --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-direction: column;
-  overflow: var(--c5a8c866);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
+.info-toggle-button {
+&[data-v-ad020a5d] {
+  --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-0-75x);
+  height: var(--kds-dimension-component-height-0-75x);
+  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;
 }
-&[data-variant="padded"][data-v-583e34fe] {
-    gap: var(--modal-gap);
-    padding: var(--modal-padding-top) var(--modal-padding-right)
-      var(--modal-padding-bottom) var(--modal-padding-left);
+&.hidden[data-v-ad020a5d]:not(:focus-visible, :hover, .disabled) {
+    opacity: 0;
 }
+&[data-v-ad020a5d]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-.modal-footer[data-v-583e34fe] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  justify-content: right;
-  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
+&[data-v-ad020a5d]:hover:not(.disabled) {
+    background-color: var(--bg-hover);
+}
+&[data-v-ad020a5d]:active:not(.disabled) {
+    background-color: var(--bg-active);
+}
+&.selected[data-v-ad020a5d] {
+    --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);
 }
+&.disabled[data-v-ad020a5d] {
+    --icon-color: var(--kds-color-text-and-icon-disabled);
 
-/** see: https://github.com/whatwg/html/issues/7732  */
-body:has(dialog.modal[open]) {
-  overflow: hidden;
+    cursor: default;
+}
+&.selected.disabled[data-v-ad020a5d] {
+    --border: var(--kds-border-action-disabled);
+}
 }
 
-.kds-modal {
-&[data-v-6fc6d7dd] {
-  /* 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;
+.variable-toggle-button {
+&[data-v-968c795f] {
+  --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: flex;
-  flex-direction: column;
-  width: min(var(--modal-full-size), var(--modal-width));
-  height: var(--modal-height);
-  max-height: var(--modal-full-size);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-0-75x);
+  height: var(--kds-dimension-component-height-0-75x);
   padding: 0;
-  overflow: var(--v22ecc8a4);
-  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 */
+  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;
 }
-&.width-small[data-v-6fc6d7dd] {
-    --modal-width: var(--kds-dimension-component-width-25x);
-    --modal-animation-time: 100ms;
-    --modal-scale-base: 0.85;
+&.hidden[data-v-968c795f]:not(:focus-visible, :hover, .disabled) {
+    opacity: 0;
 }
-&.width-medium[data-v-6fc6d7dd] {
-    --modal-width: var(--kds-dimension-component-width-32x);
-    --modal-animation-time: 140ms;
-    --modal-scale-base: 0.88;
+&[data-v-968c795f]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&.width-large[data-v-6fc6d7dd] {
-    --modal-width: var(--kds-dimension-component-width-45x);
-    --modal-animation-time: 210ms;
-    --modal-scale-base: 0.88;
+&[data-v-968c795f]:hover:not(.disabled) {
+    background-color: var(--bg-hover);
 }
-&.width-xlarge[data-v-6fc6d7dd] {
-    --modal-width: var(--kds-dimension-component-width-61x);
-    --modal-animation-time: 300ms;
-    --modal-scale-base: 0.88;
-}
-&.width-full[data-v-6fc6d7dd] {
-    --modal-width: var(--modal-full-size);
-    --modal-animation-time: 350ms;
-    --modal-scale-base: 0.92;
-}
-&.height-full[data-v-6fc6d7dd] {
-    --modal-height: var(--modal-full-size);
-}
-&.height-auto[data-v-6fc6d7dd] {
-    --modal-height: fit-content;
-}
-&[data-v-6fc6d7dd]:not([open]) {
-    display: none;
-}
-&[data-v-6fc6d7dd]:focus-visible,
-  &[data-v-6fc6d7dd]:focus {
-    outline: none;
-}
-&[data-v-6fc6d7dd]::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-6fc6d7dd]::backdrop {
-    opacity: 1;
-}
-&[open][data-v-6fc6d7dd] {
-    opacity: 1;
-    transform: scale(1);
-}
-}
-
-/** Animation starting styles */
-@starting-style {
-.kds-modal {
-&[data-v-6fc6d7dd] {
-    opacity: 1;
-    transform: scale(1);
-}
-&[open][data-v-6fc6d7dd] {
-      opacity: 0;
-      transform: scale(var(--modal-scale-base));
-}
-&[data-v-6fc6d7dd]::backdrop {
-      opacity: 1;
-}
-&[open][data-v-6fc6d7dd]::backdrop {
-      opacity: 0;
+&[data-v-968c795f]:active:not(.disabled) {
+    background-color: var(--bg-active);
 }
+&.pressed-or-set[data-v-968c795f] {
+    --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-968c795f] {
+    --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);
 }
+&.disabled {
+&[data-v-968c795f] {
+    --icon-color: var(--kds-color-text-and-icon-disabled);
 
-.kds-loading-spinner {
-&[data-v-13c830ad] {
-  --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-13c830ad] {
-    --icon-width: var(--kds-dimension-icon-0-56x);
-    --icon-height: var(--kds-dimension-icon-0-56x);
-}
-&.small[data-v-13c830ad] {
-    --icon-width: var(--kds-dimension-icon-0-75x);
-    --icon-height: var(--kds-dimension-icon-0-75x);
+    cursor: default;
 }
-&.large[data-v-13c830ad] {
-    --icon-width: var(--kds-dimension-icon-1-25x);
-    --icon-height: var(--kds-dimension-icon-1-25x);
+&.pressed-or-set[data-v-968c795f] {
+      --border: var(--kds-border-action-disabled);
 }
-&[data-style="onPrimary"][data-v-13c830ad] {
-    --color-track: var(--kds-color-loading-spinner-track-on-primary);
-    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
 }
-& .track[data-v-13c830ad] {
-    fill: none;
-    stroke: var(--color-track);
-    stroke-width: var(--icon-stroke-width);
 }
-& .loader[data-v-13c830ad] {
-    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-13c830ad 1.2s linear infinite;
-}
-}
-@keyframes spin-13c830ad {
-from {
-    transform: rotate(-90deg);
-}
-to {
-    transform: rotate(270deg);
-}
+.label[data-v-76bdc306] {
+  display: block;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+  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-e524cc8f] {
+&[data-v-58a95aa3] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   min-height: 1lh;
@@ -605,16 +707,16 @@ to {
   font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-muted);
 }
-&.error[data-v-e524cc8f] {
+&.error[data-v-58a95aa3] {
     color: var(--kds-color-text-and-icon-danger);
 }
-& .subtext-text[data-v-e524cc8f] {
+& .subtext-text[data-v-58a95aa3] {
     min-width: 0;
 }
 }
 
 .checkbox {
-&[data-v-65cb29d7] {
+&[data-v-3751dc60] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -634,7 +736,7 @@ to {
   background: none;
   border: none;
 }
-.control[data-v-65cb29d7] {
+.control[data-v-3751dc60] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -647,41 +749,41 @@ to {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-65cb29d7] {
+&:focus-visible .control[data-v-3751dc60] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-65cb29d7] {
+&:hover:not(.disabled) .control[data-v-3751dc60] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-65cb29d7] {
+&:active:not(.disabled) .control[data-v-3751dc60] {
     background: var(--bg-active);
 }
-&.checked[data-v-65cb29d7],
-  &.indeterminate[data-v-65cb29d7] {
+&.checked[data-v-3751dc60],
+  &.indeterminate[data-v-3751dc60] {
     --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-65cb29d7] {
+&[data-v-3751dc60] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     text-rendering: geometricprecision;
 }
-& .label[data-v-65cb29d7] {
+& .label[data-v-3751dc60] {
       padding-top: var(--kds-spacing-container-0-10x);
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-65cb29d7] {
+& .helper-text[data-v-3751dc60] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-65cb29d7] {
+&.disabled[data-v-3751dc60] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -690,195 +792,26 @@ to {
     cursor: default;
 }
 &.error {
-&[data-v-65cb29d7] {
+&[data-v-3751dc60] {
     --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-65cb29d7],
-    &.indeterminate[data-v-65cb29d7] {
+&.checked[data-v-3751dc60],
+    &.indeterminate[data-v-3751dc60] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-65cb29d7] {
+.subtext-wrapper[data-v-3751dc60] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
   );
 }
 
-.ask-again[data-v-c0769cfd] {
-  padding: var(--kds-spacing-container-0-5x) 0 0 0;
-}
-.flush-left[data-v-c0769cfd] {
-  margin-right: auto;
-}
-
-.variable-toggle-button {
-&[data-v-8b6f8b81] {
-  --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-0-75x);
-  height: var(--kds-dimension-component-height-0-75x);
-  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-8b6f8b81]:not(:focus-visible, :hover, .disabled) {
-    opacity: 0;
-}
-&[data-v-8b6f8b81]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
-&[data-v-8b6f8b81]:hover:not(.disabled) {
-    background-color: var(--bg-hover);
-}
-&[data-v-8b6f8b81]:active:not(.disabled) {
-    background-color: var(--bg-active);
-}
-&.pressed-or-set[data-v-8b6f8b81] {
-    --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-8b6f8b81] {
-    --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);
-}
-&.disabled {
-&[data-v-8b6f8b81] {
-    --icon-color: var(--kds-color-text-and-icon-disabled);
-
-    cursor: default;
-}
-&.pressed-or-set[data-v-8b6f8b81] {
-      --border: var(--kds-border-action-disabled);
-}
-}
-}
-
-.info-toggle-button {
-&[data-v-24b40e36] {
-  --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-0-75x);
-  height: var(--kds-dimension-component-height-0-75x);
-  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-24b40e36]:not(:focus-visible, :hover, .disabled) {
-    opacity: 0;
-}
-&[data-v-24b40e36]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
-&[data-v-24b40e36]:hover:not(.disabled) {
-    background-color: var(--bg-hover);
-}
-&[data-v-24b40e36]:active:not(.disabled) {
-    background-color: var(--bg-active);
-}
-&.selected[data-v-24b40e36] {
-    --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);
-}
-&.disabled[data-v-24b40e36] {
-    --icon-color: var(--kds-color-text-and-icon-disabled);
-
-    cursor: default;
-}
-&.selected.disabled[data-v-24b40e36] {
-    --border: var(--kds-border-action-disabled);
-}
-}
-
-.leading {
-&[data-v-6648b2f8] {
-  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-6648b2f8] {
-    width: var(--kds-dimension-icon-0-56x);
-    height: var(--kds-dimension-icon-0-56x);
-}
-&.small[data-v-6648b2f8] {
-    width: var(--kds-dimension-icon-0-75x);
-    height: var(--kds-dimension-icon-0-75x);
-}
-&.large[data-v-6648b2f8] {
-    width: var(--kds-dimension-icon-1-25x);
-    height: var(--kds-dimension-icon-1-25x);
-}
-}
-.leading-icon[data-v-6648b2f8],
-.spinner[data-v-6648b2f8] {
-  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-6648b2f8],
-.spinner[data-visible="true"][data-v-6648b2f8] {
-  opacity: 1;
-}
-
-.label[data-v-174d476a] {
-  display: block;
-  max-width: 100%;
-  min-height: var(--kds-dimension-component-height-0-75x);
-  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;
-}
-
 .checkbox-group[data-v-538e7d4c] {
   padding: 0;
   margin: 0;
@@ -995,23 +928,23 @@ to {
 }
 }
 
-.radio-button-group[data-v-b0e27ba1] {
+.radio-button-group[data-v-15fb8864] {
   padding: 0;
   margin: 0;
   border: none;
 }
-.options[data-v-b0e27ba1] {
+.options[data-v-15fb8864] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
-.options.horizontal[data-v-b0e27ba1] {
+.options.horizontal[data-v-15fb8864] {
   flex-flow: row wrap;
   align-items: flex-start;
 }
 
 .option {
-&[data-v-469c6983] {
+&[data-v-93f3f577] {
   display: flex;
   flex: 0 1 auto;
   gap: var(--kds-spacing-container-0-25x);
@@ -1033,54 +966,54 @@ to {
   border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.size-small[data-v-469c6983] {
+&.size-small[data-v-93f3f577] {
     height: var(--kds-dimension-component-height-1-25x);
     font: var(--kds-font-base-interactive-small-strong);
 }
-&[data-v-469c6983]:focus-visible {
+&[data-v-93f3f577]:focus-visible {
     outline: none;
 }
-&[data-v-469c6983]:hover:not(:disabled) {
+&[data-v-93f3f577]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-469c6983]:active:not(:disabled) {
+&[data-v-93f3f577]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-469c6983] {
+&[data-v-93f3f577] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&[data-v-469c6983]:hover:not(:disabled) {
+&[data-v-93f3f577]:hover:not(:disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-469c6983]:active:not(:disabled) {
+&[data-v-93f3f577]:active:not(:disabled) {
       background: var(--kds-color-background-selected-active);
 }
 &.variant-muted {
-&[data-v-469c6983] {
+&[data-v-93f3f577] {
       color: var(--kds-color-text-and-icon-neutral);
       background: var(--kds-color-background-input-initial);
 }
-&[data-v-469c6983]:hover:not(:disabled) {
+&[data-v-93f3f577]:hover:not(:disabled) {
         background: var(--kds-color-background-input-hover);
 }
-&[data-v-469c6983]:active:not(:disabled) {
+&[data-v-93f3f577]:active:not(:disabled) {
         background: var(--kds-color-background-input-active);
 }
 }
 }
-&.disabled[data-v-469c6983] {
+&.disabled[data-v-93f3f577] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&.disabled.selected[data-v-469c6983] {
+&.disabled.selected[data-v-93f3f577] {
     color: var(--kds-color-text-and-icon-disabled);
     border: var(--kds-border-action-disabled);
 }
 }
-.option-label[data-v-469c6983] {
+.option-label[data-v-93f3f577] {
   min-width: 0;
   padding: 0 var(--kds-spacing-container-0-12x);
   overflow: hidden;
@@ -1089,7 +1022,7 @@ to {
   white-space: nowrap;
 }
 
-.value-switch[data-v-e5da4485] {
+.value-switch[data-v-56b594ad] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1098,7 +1031,7 @@ to {
   border: none;
 }
 .options {
-&[data-v-e5da4485] {
+&[data-v-56b594ad] {
   display: flex;
   flex-flow: row nowrap;
   gap: var(--kds-spacing-container-none);
@@ -1115,71 +1048,74 @@ to {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-fake-border-xs-muted);
   }
-&[data-v-e5da4485]:has(:focus-visible) {
+&[data-v-56b594ad]: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-e5da4485] {
+&.error[data-v-56b594ad] {
     border: var(--kds-border-action-error);
     box-shadow: none;
 }
 }
 
-.kds-form-field[data-v-016a46e9] {
+.kds-form-field[data-v-52b1df11] {
   display: flex;
   flex-direction: column;
 }
 
 .container {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
   display: flex;
   align-items: center;
   width: 100%;
   height: var(--kds-dimension-component-height-1-75x);
   padding: 0 var(--kds-spacing-container-0-25x);
+  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-60e4edf6]:has(input:focus:not(:disabled)) {
+&[data-v-cf72eb5a]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-60e4edf6]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-cf72eb5a]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-60e4edf6] {
+&.error[data-v-cf72eb5a] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-60e4edf6] {
+&.disabled[data-v-cf72eb5a] {
+    cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-60e4edf6] {
+&.leading[data-v-cf72eb5a] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-60e4edf6] {
+&.trailing[data-v-cf72eb5a] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-60e4edf6] {
+.container.disabled &[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
 }
-.container:focus-within &[data-v-60e4edf6],
-  .container:has(.input-field.has-value) &[data-v-60e4edf6] {
+.container:focus-within &[data-v-cf72eb5a],
+  .container:has(.input-field.has-value) &[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1198,33 +1134,33 @@ to {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
     appearance: textfield;
 }
-&[data-v-60e4edf6]::-webkit-outer-spin-button,
-    &[data-v-60e4edf6]::-webkit-inner-spin-button {
+&[data-v-cf72eb5a]::-webkit-outer-spin-button,
+    &[data-v-cf72eb5a]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-60e4edf6]::-webkit-search-cancel-button {
+&[type="search"][data-v-cf72eb5a]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-60e4edf6]::placeholder {
+&[data-v-cf72eb5a]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-60e4edf6]::placeholder {
+&[data-v-cf72eb5a]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-60e4edf6] {
+&[data-v-cf72eb5a] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1234,23 +1170,446 @@ to {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-60e4edf6] {
+&.placeholder[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-60e4edf6] {
+&.disabled[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-60e4edf6] {
+.container:focus-within &[data-v-cf72eb5a] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-60e4edf6] {
+.clear-button[data-v-cf72eb5a] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.trailing-slot[data-v-60e4edf6] {
+.trailing-slot[data-v-cf72eb5a] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
   margin-left: var(--kds-spacing-container-0-12x);
 }
+
+textarea {
+&[data-v-f0055631] {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--kds-spacing-container-0-5x);
+  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-f0055631] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-f0055631]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-f0055631] {
+    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-f0055631]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+&[data-v-f0055631]:hover:not(:disabled, :focus) {
+    background: var(--kds-color-background-input-hover);
+}
+&[data-v-f0055631]:focus:not(:disabled) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+textarea[data-v-f0055631]::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-header {
+&[data-v-7dbd159b] {
+  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-title[data-v-7dbd159b] {
+    flex: 1 1 auto;
+}
+}
+.modal-body {
+&[data-v-7dbd159b] {
+  --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-direction: column;
+  overflow: var(--v3305d0f4);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-variant="padded"][data-v-7dbd159b] {
+    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-7dbd159b] {
+  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-c95b809a] {
+  /* 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(--v085a353b);
+  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-c95b809a] {
+    --modal-width: var(--kds-dimension-component-width-25x);
+    --modal-animation-time: 100ms;
+    --modal-scale-base: 0.85;
+}
+&.width-medium[data-v-c95b809a] {
+    --modal-width: var(--kds-dimension-component-width-32x);
+    --modal-animation-time: 140ms;
+    --modal-scale-base: 0.88;
+}
+&.width-large[data-v-c95b809a] {
+    --modal-width: var(--kds-dimension-component-width-45x);
+    --modal-animation-time: 210ms;
+    --modal-scale-base: 0.88;
+}
+&.width-xlarge[data-v-c95b809a] {
+    --modal-width: var(--kds-dimension-component-width-61x);
+    --modal-animation-time: 300ms;
+    --modal-scale-base: 0.88;
+}
+&.width-full[data-v-c95b809a] {
+    --modal-width: var(--modal-full-size);
+    --modal-animation-time: 350ms;
+    --modal-scale-base: 0.92;
+}
+&.height-full[data-v-c95b809a] {
+    --modal-height: var(--modal-full-size);
+}
+&.height-auto[data-v-c95b809a] {
+    --modal-height: fit-content;
+}
+&[data-v-c95b809a]:not([open]) {
+    display: none;
+}
+&[data-v-c95b809a]:focus-visible,
+  &[data-v-c95b809a]:focus {
+    outline: none;
+}
+&[data-v-c95b809a]::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-c95b809a]::backdrop {
+    opacity: 1;
+}
+&[open][data-v-c95b809a] {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+
+/** Animation starting styles */
+@starting-style {
+.kds-modal {
+&[data-v-c95b809a] {
+    opacity: 1;
+    transform: scale(1);
+}
+&[open][data-v-c95b809a] {
+      opacity: 0;
+      transform: scale(var(--modal-scale-base));
+}
+&[data-v-c95b809a]::backdrop {
+      opacity: 1;
+}
+&[open][data-v-c95b809a]::backdrop {
+      opacity: 0;
+}
+}
+}
+
+.ask-again[data-v-67e036b5] {
+  padding: var(--kds-spacing-container-0-5x) 0 0 0;
+}
+.flush-left[data-v-67e036b5] {
+  margin-right: auto;
+}
+
+.kds-popover {
+&[data-v-6bc7ef3b] {
+  padding: 0;
+  overflow: visible;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background: var(--kds-color-surface-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+}
+&.floating.top-left[data-v-6bc7ef3b] {
+    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-right, --kds-popover-try-bottom-left,
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
+}
+&.floating.top-right[data-v-6bc7ef3b] {
+    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-left, --kds-popover-try-bottom-right,
+      --kds-popover-try-bottom-left, --kds-popover-try-top-right;
+}
+&.floating.bottom-left[data-v-6bc7ef3b] {
+    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-right, --kds-popover-try-top-left,
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
+}
+&.floating.bottom-right[data-v-6bc7ef3b] {
+    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-left, --kds-popover-try-top-right,
+      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
+}
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-left {
+  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-right {
+  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-left {
+  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-right {
+  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-card {
+&[data-v-c64f0e2e] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  outline: none;
+  border-style: solid;
+  border-radius: var(--kds-border-radius-container-0-50x);
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+&[data-v-c64f0e2e]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-56x);
+}
+&.disabled[data-v-c64f0e2e] {
+    cursor: default;
+}
+}
+
+/* Variant: Filled, Value: False */
+.variant-filled {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-base-subtle);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: False */
+.variant-outlined {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-base-muted);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: False */
+.variant-transparent {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Filled, Value: True */
+.variant-filled.selected {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: True */
+.variant-outlined.selected {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: True */
+.variant-transparent.selected {
+&[data-v-c64f0e2e] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-c64f0e2e]:hover:not(.disabled) {
+    background: var(--kds-color-background-selected-initial);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-c64f0e2e]:active:not(.disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+.kds-empty-state[data-v-059bb01e] {
+  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-059bb01e] {
+  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-059bb01e] {
+  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-059bb01e] {
+  margin-top: var(--kds-spacing-container-0-12x);
+}