@knime/kds-components 1.0.0 → 1.1.1

package/dist/index.css

@@ -1,6 +1,36 @@
+.kds-tooltip {
+  inset: auto auto anchor(top);
+  justify-self: anchor-center;
+  max-width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-5x);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+  position-try-fallbacks:
+    --kds-tooltip-try-bottom-center, --kds-tooltip-try-top-center;
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-tooltip-text-and-icon-neutral);
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+  background-color: var(--kds-color-tooltip-background-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+@position-try --kds-tooltip-try-top-center {
+  inset: auto auto anchor(top);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
+
+@position-try --kds-tooltip-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 
 .kds-avatar {
-&[data-v-9e1a5abe] {
+&[data-v-a75804e1] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
@@ -10,86 +40,86 @@
   outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-9e1a5abe] {
+&.small[data-v-a75804e1] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-9e1a5abe] {
+&.medium[data-v-a75804e1] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-9e1a5abe] {
+&.large[data-v-a75804e1] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-9e1a5abe] {
+&.xlarge[data-v-a75804e1] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
-&[data-color="red"][data-v-9e1a5abe] {
+&[data-color="red"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-red);
     background: var(--kds-color-avatar-background-red);
 }
-&[data-color="orange"][data-v-9e1a5abe] {
+&[data-color="orange"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-orange);
     background: var(--kds-color-avatar-background-orange);
 }
-&[data-color="yellow"][data-v-9e1a5abe] {
+&[data-color="yellow"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-yellow);
     background: var(--kds-color-avatar-background-yellow);
 }
-&[data-color="green"][data-v-9e1a5abe] {
+&[data-color="green"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-green);
     background: var(--kds-color-avatar-background-green);
 }
-&[data-color="teal"][data-v-9e1a5abe] {
+&[data-color="teal"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-teal);
     background: var(--kds-color-avatar-background-teal);
 }
-&[data-color="blue"][data-v-9e1a5abe] {
+&[data-color="blue"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-blue);
     background: var(--kds-color-avatar-background-blue);
 }
-&[data-color="purple"][data-v-9e1a5abe] {
+&[data-color="purple"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-purple);
     background: var(--kds-color-avatar-background-purple);
 }
-&[data-color="aquamarine"][data-v-9e1a5abe] {
+&[data-color="aquamarine"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-aquamarine);
     background: var(--kds-color-avatar-background-aquamarine);
 }
-&[data-color="grassgreen"][data-v-9e1a5abe] {
+&[data-color="grassgreen"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-grassgreen);
     background: var(--kds-color-avatar-background-grassgreen);
 }
-&[data-color="brown"][data-v-9e1a5abe] {
+&[data-color="brown"][data-v-a75804e1] {
     color: var(--kds-color-avatar-text-and-icon-brown);
     background: var(--kds-color-avatar-background-brown);
 }
-&[data-color="empty"][data-v-9e1a5abe] {
+&[data-color="empty"][data-v-a75804e1] {
     color: transparent;
     background-color: var(--kds-color-avatar-background-empty);
 }
 }
-.kds-avatar-image[data-v-9e1a5abe] {
+.kds-avatar-image[data-v-a75804e1] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-9e1a5abe] {
+.kds-avatar-initials[data-v-a75804e1] {
   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);
+  font: var(--kds-font-base-title-small-strong);
   color: inherit;
   user-select: none;
 }
-.kds-avatar-initials > span[data-v-9e1a5abe] {
+.kds-avatar-initials > span[data-v-a75804e1] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
@@ -150,7 +180,7 @@
   color: var(--kds-color-text-and-icon-disabled);
 }
 .kds-icon {
-&[data-v-38e9537f] {
+&[data-v-667bceea] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -164,24 +194,24 @@
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
 }
-&.xsmall[data-v-38e9537f] {
+&.xsmall[data-v-667bceea] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.small[data-v-38e9537f] {
+&.small[data-v-667bceea] {
     --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] {
+&.large[data-v-667bceea] {
     --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-v-667bceea] {
   --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);
@@ -199,23 +229,23 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.disabled[data-v-38e9537f] {
+&.disabled[data-v-667bceea] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-&.small[data-v-38e9537f] {
+&.small[data-v-667bceea] {
     --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] {
+&.large[data-v-667bceea] {
     --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] {
+&.small[data-v-667bceea] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-38e9537f] {
+&.medium[data-v-667bceea] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
@@ -280,7 +310,7 @@
 }
 
 .kds-progress-bar {
-&[data-v-884d689a] {
+&[data-v-06930dc4] {
   --progress-bar-background-color: var(--kds-color-surface-subtle);
   --progress-bar-foreground-color: var(
     --kds-color-background-primary-bold-initial
@@ -298,7 +328,7 @@
 
   /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
 }
-& .progress[data-v-884d689a] {
+& .progress[data-v-06930dc4] {
     display: block;
     width: 100%;
     height: var(--progress-bar-height);
@@ -311,44 +341,44 @@
     border: none;
     border-radius: var(--progress-bar-radius);
 }
-& .progress[data-v-884d689a]::-webkit-progress-bar {
+& .progress[data-v-06930dc4]::-webkit-progress-bar {
     background-color: var(--progress-bar-background-color);
 }
-& .progress[data-v-884d689a]::-webkit-progress-value {
+& .progress[data-v-06930dc4]::-webkit-progress-value {
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--progress-bar-radius);
     transition: width var(--progress-bar-transition-duration, 0.5s);
 }
-& .progress[data-v-884d689a]::-moz-progress-bar {
+& .progress[data-v-06930dc4]::-moz-progress-bar {
     background-color: var(--progress-bar-foreground-color);
 }
-& .progress[data-v-884d689a]:indeterminate {
+& .progress[data-v-06930dc4]:indeterminate {
     background-color: var(--progress-bar-background-color);
     background-image: none;
 }
-& .progress[data-v-884d689a]:indeterminate::-webkit-progress-bar {
+& .progress[data-v-06930dc4]:indeterminate::-webkit-progress-bar {
     background-color: transparent;
 }
-& .progress[data-v-884d689a]:indeterminate::-moz-progress-bar {
+& .progress[data-v-06930dc4]:indeterminate::-moz-progress-bar {
     background-color: transparent;
 }
-& .indeterminate-bar[data-v-884d689a] {
+& .indeterminate-bar[data-v-06930dc4] {
     position: absolute;
     inset-block: 0;
     width: 35%;
     pointer-events: none;
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--kds-border-radius-container-pill);
-    animation: move-indeterminate-884d689a 1.5s linear infinite;
+    animation: move-indeterminate-06930dc4 1.5s linear infinite;
 }
 }
-.kds-progress-bar-medium[data-v-884d689a] {
+.kds-progress-bar-medium[data-v-06930dc4] {
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
 }
-.kds-progress-bar-large[data-v-884d689a] {
+.kds-progress-bar-large[data-v-06930dc4] {
   --progress-bar-height: var(--kds-dimension-component-height-0-75x);
 }
-@keyframes move-indeterminate-884d689a {
+@keyframes move-indeterminate-06930dc4 {
 0% {
     transform: translateX(-120%);
 }
@@ -358,7 +388,7 @@
 }
 
 .kds-color-swatch {
-&[data-v-91e0130d] {
+&[data-v-b91cf470] {
   display: inline-block;
   flex-shrink: 0;
   overflow: hidden;
@@ -367,19 +397,19 @@
   border: var(--kds-border-base-muted);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.small[data-v-91e0130d] {
+&.small[data-v-b91cf470] {
     --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
 
     width: var(--kds-dimension-icon-0-75x);
     height: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-91e0130d] {
+&.medium[data-v-b91cf470] {
     --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
 
     width: var(--kds-dimension-icon-1x);
     height: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-91e0130d] {
+&.large[data-v-b91cf470] {
     --kds-color-swatch-checker-size: calc(
       var(--kds-dimension-component-width-1-25x) / 4
     );
@@ -390,7 +420,7 @@
 }
 
 .kds-live-status {
-&[data-v-f20c5c00] {
+&[data-v-e67b29f5] {
   --dot-color: var(--kds-color-state-disabled);
   --dot-border-color: var(--kds-color-state-disabled-border);
 
@@ -401,20 +431,20 @@
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-f20c5c00] {
+&.red[data-v-e67b29f5] {
     --dot-color: var(--kds-color-state-error);
     --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-f20c5c00] {
+&.orange[data-v-e67b29f5] {
     --dot-color: var(--kds-color-state-warning);
     --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-f20c5c00] {
+&.green[data-v-e67b29f5] {
     --dot-color: var(--kds-color-state-success);
     --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-f20c5c00] {
+&[data-v-e67b29f5] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -422,7 +452,7 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-f20c5c00]::after {
+&[data-v-e67b29f5]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -434,7 +464,7 @@
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-f20c5c00] {
+.label[data-v-e67b29f5] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -442,26 +472,26 @@
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-f20c5c00] {
+.dot[data-v-e67b29f5] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-&[data-v-f20c5c00]::after {
+&[data-v-e67b29f5]::after {
       border-width: var(--kds-border-width-icon-stroke-m);
 }
-.label[data-v-f20c5c00] {
+.label[data-v-e67b29f5] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-f20c5c00] {
+.dot[data-v-e67b29f5] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-&[data-v-f20c5c00]::after {
+&[data-v-e67b29f5]::after {
       border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-f20c5c00] {
+.label[data-v-e67b29f5] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -523,63 +553,6 @@ to {
 }
 }
 
-.kds-inline-message {
-&[data-v-c54ea4b4] {
-  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-c54ea4b4] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-25x);
-    align-items: center;
-}
-.icon[data-v-c54ea4b4] {
-      color: var(--icon-color);
-}
-.headline[data-v-c54ea4b4] {
-      font: var(--kds-font-base-title-small-strong);
-}
-}
-.body[data-v-c54ea4b4] {
-    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-c54ea4b4] {
-    --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-c54ea4b4] {
-    --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-c54ea4b4] {
-    --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-c54ea4b4] {
-    --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);
@@ -649,7 +622,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -663,150 +636,150 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-24ade73a]:is(a) {
+&[data-v-83f63dc3]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-24ade73a] {
+&.disabled[data-v-83f63dc3] {
     cursor: default;
 }
-&[data-v-24ade73a]:focus-visible {
+&[data-v-83f63dc3]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
     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-24ade73a] {
+&.disabled[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-24ade73a] {
+&.disabled[data-v-83f63dc3] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
     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-24ade73a] {
+&.disabled[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-24ade73a] {
+&.disabled[data-v-83f63dc3] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
     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-24ade73a] {
+&.disabled[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-24ade73a] {
+&.disabled[data-v-83f63dc3] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
     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-24ade73a] {
+&.disabled[data-v-83f63dc3] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-24ade73a]:hover {
+&[data-v-83f63dc3]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-24ade73a]:active {
+&[data-v-83f63dc3]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-24ade73a] {
+& .label[data-v-83f63dc3] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&.xsmall[data-v-24ade73a] {
+&.xsmall[data-v-83f63dc3] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -818,7 +791,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-24ade73a] {
+&.small[data-v-83f63dc3] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -830,7 +803,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-24ade73a] {
+&.medium[data-v-83f63dc3] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -843,7 +816,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-24ade73a] {
+&[data-v-83f63dc3] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -855,11 +828,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-24ade73a] {
+& .label[data-v-83f63dc3] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-24ade73a] {
+&.success[data-v-83f63dc3] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -868,7 +841,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-24ade73a] {
+&.error[data-v-83f63dc3] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -877,18 +850,18 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-24ade73a] {
+&.remove-border-radius-left[data-v-83f63dc3] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-24ade73a] {
+&.remove-border-radius-right[data-v-83f63dc3] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 }
 
 .kds-link {
-&[data-v-56e748a8] {
+&[data-v-6f9a0cf6] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -901,57 +874,57 @@ html.kds-legacy {
   text-decoration-line: underline;
   border-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-56e748a8]:is(a) {
+&[data-v-6f9a0cf6]:is(a) {
     cursor: pointer;
 }
-&[data-v-56e748a8]:focus-visible {
+&[data-v-6f9a0cf6]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-container-none);
 }
-& .label[data-v-56e748a8],
-  & .file-size[data-v-56e748a8] {
+& .label[data-v-6f9a0cf6],
+  & .file-size[data-v-6f9a0cf6] {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 &.variant-internal {
-&[data-v-56e748a8] {
+&[data-v-6f9a0cf6] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 &:not(.disabled) {
-&[data-v-56e748a8]:visited {
+&[data-v-6f9a0cf6]:visited {
         color: var(--kds-color-text-and-icon-info);
 }
-&[data-v-56e748a8]:hover {
+&[data-v-6f9a0cf6]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-56e748a8]:active {
+&[data-v-6f9a0cf6]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 }
-&.variant-external[data-v-56e748a8] {
+&.variant-external[data-v-6f9a0cf6] {
     gap: var(--kds-spacing-container-0-12x);
 }
 &:is(.variant-external, .variant-document) {
-&[data-v-56e748a8] {
+&[data-v-6f9a0cf6] {
     color: var(--kds-color-text-and-icon-selected);
 }
 &:not(.disabled) {
-&[data-v-56e748a8]:visited {
+&[data-v-6f9a0cf6]:visited {
         color: var(--kds-color-text-and-icon-info);
 }
-&[data-v-56e748a8]:hover {
+&[data-v-6f9a0cf6]:hover {
         color: var(--kds-color-text-and-icon-primary-inverted);
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-56e748a8]:active {
+&[data-v-6f9a0cf6]:active {
         color: var(--kds-color-text-and-icon-selected-inverted);
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 }
-&.disabled[data-v-56e748a8] {
+&.disabled[data-v-6f9a0cf6] {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
@@ -996,7 +969,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -1013,36 +986,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     gap: var(--kds-spacing-container-0-25x);
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-a582a5cb] {
+.accessory[data-v-d2e6e4eb] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
       margin-bottom: auto;
 }
 }
 &.large {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-a582a5cb] {
+.accessory[data-v-d2e6e4eb] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-a582a5cb] {
+.large &[data-v-d2e6e4eb] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1050,19 +1023,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-a582a5cb] {
+.prefix[data-v-d2e6e4eb] {
         flex-shrink: 0;
 }
-.special[data-v-a582a5cb] {
+.special[data-v-d2e6e4eb] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-a582a5cb] {
+.subtext[data-v-d2e6e4eb] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -1073,7 +1046,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -1081,76 +1054,76 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-a582a5cb] {
+.shortcut[data-v-d2e6e4eb] {
       flex-shrink: 0;
       font: var(--kds-font-base-interactive-xsmall-strong);
       color: var(--kds-color-text-and-icon-muted);
       text-align: right;
       white-space: nowrap;
 }
-.trailing-item-reserve-space[data-v-a582a5cb] {
+.trailing-item-reserve-space[data-v-d2e6e4eb] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-a582a5cb]:hover:not(.disabled),
-  &.active[data-v-a582a5cb]:not(.disabled) {
+&[data-v-d2e6e4eb]:hover:not(.disabled),
+  &.active[data-v-d2e6e4eb]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a582a5cb]:active:not(.disabled) {
+&[data-v-d2e6e4eb]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-a582a5cb] {
+.subtext[data-v-d2e6e4eb] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-a582a5cb]:hover,
-    &.active[data-v-a582a5cb] {
+&[data-v-d2e6e4eb]:hover,
+    &.active[data-v-d2e6e4eb] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-a582a5cb]:active {
+&[data-v-d2e6e4eb]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-a582a5cb] {
+&.disabled[data-v-d2e6e4eb] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-a582a5cb] {
+.subtext[data-v-d2e6e4eb] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-a582a5cb]:hover,
-    &.active[data-v-a582a5cb] {
+&[data-v-d2e6e4eb]:hover,
+    &.active[data-v-d2e6e4eb] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-a582a5cb]:active {
+&[data-v-d2e6e4eb]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-a582a5cb] {
+&.disabled[data-v-d2e6e4eb] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-a582a5cb] {
+&[data-v-d2e6e4eb] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-a582a5cb],
-    .subtext[data-v-a582a5cb] {
+.shortcut[data-v-d2e6e4eb],
+    .subtext[data-v-d2e6e4eb] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 
 .kds-list-item-section-title {
-&[data-v-5eeb1226] {
+&[data-v-9a2c8038] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-25x);
@@ -1160,12 +1133,12 @@ html.kds-legacy {
   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] {
+.icon[data-v-9a2c8038] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
-.label[data-v-5eeb1226] {
+.label[data-v-9a2c8038] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -1373,6 +1346,32 @@ html.kds-legacy {
   flex-shrink: 0;
 }
 
+.kds-button-group-measure[data-v-59d058df] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-59d058df] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-59d058df] {
+    justify-content: flex-start;
+}
+&.right[data-v-59d058df] {
+    justify-content: flex-end;
+}
+&.middle[data-v-59d058df] {
+    justify-content: center;
+}
+}
+
 .kds-empty-state[data-v-e913660a] {
   display: flex;
   flex-direction: column;
@@ -1441,14 +1440,14 @@ html.kds-legacy {
   padding: 0;
 }
 
-.kds-label-wrapper[data-v-efe3313e] {
+.kds-label-wrapper[data-v-9b0cb89b] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
   align-items: flex-start;
   max-width: 100%;
   min-height: var(--kds-dimension-component-height-0-75x);
 }
-.label[data-v-efe3313e] {
+.label[data-v-9b0cb89b] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
@@ -1487,7 +1486,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1499,46 +1498,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
+&[data-v-2e12b7e4]: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)) {
+&[data-v-2e12b7e4]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-93daa14e] {
+&.error[data-v-2e12b7e4] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-93daa14e] {
+&.disabled[data-v-2e12b7e4] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-93daa14e] {
+&.leading[data-v-2e12b7e4] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-93daa14e] {
+&.trailing[data-v-2e12b7e4] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-93daa14e] {
+.container.disabled &[data-v-2e12b7e4] {
     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] {
+.container:focus-within &[data-v-2e12b7e4],
+  .container:has(.input-field.has-value) &[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1557,36 +1556,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
     appearance: textfield;
 }
-&[data-v-93daa14e]::-webkit-outer-spin-button,
-    &[data-v-93daa14e]::-webkit-inner-spin-button {
+&[data-v-2e12b7e4]::-webkit-outer-spin-button,
+    &[data-v-2e12b7e4]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
+&[type="search"][data-v-2e12b7e4]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-93daa14e]::placeholder {
+&[data-v-2e12b7e4]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-93daa14e] {
+&.empty-mask[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-93daa14e]::placeholder {
+&[data-v-2e12b7e4]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1596,26 +1595,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-93daa14e] {
+&.placeholder[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-93daa14e] {
+&.disabled[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-93daa14e] {
+.container:focus-within &[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-93daa14e] {
+.clear-button[data-v-2e12b7e4] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-93daa14e] {
+.leading-slot[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-93daa14e] {
+.trailing-slot[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1705,7 +1704,7 @@ html.kds-legacy {
 }
 
 .file-explorer-item {
-&[data-v-91cbcaae] {
+&[data-v-4811e8e8] {
   display: grid;
 
   /* first two cols - icon + name */
@@ -1717,27 +1716,27 @@ html.kds-legacy {
 
   /* style the last column if the options menu is visible */
 }
-&.has-options-menu > td[data-v-91cbcaae]:last-child {
+&.has-options-menu > td[data-v-4811e8e8]:last-child {
     width: min-content;
 }
 & .column {
-&[data-v-91cbcaae] {
+&[data-v-4811e8e8] {
     display: flex;
     align-items: center;
     height: 100%;
     overflow: hidden;
     white-space: nowrap;
 }
-& .inner[data-v-91cbcaae] {
+& .inner[data-v-4811e8e8] {
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
 }
-&.dynamic-column[data-v-91cbcaae]:empty {
+&.dynamic-column[data-v-4811e8e8]:empty {
       display: none;
 }
 }
-& .item-error[data-v-91cbcaae] {
+& .item-error[data-v-4811e8e8] {
     position: absolute;
     bottom: 0;
     z-index: 10;
@@ -1750,18 +1749,18 @@ html.kds-legacy {
     transform: translateY(100%);
 }
 & td.rename-active {
-&[data-v-91cbcaae] {
+&[data-v-4811e8e8] {
     padding: 0 var(--kds-spacing-container-0-25x);
 }
-& .rename-input-container[data-v-91cbcaae] {
+& .rename-input-container[data-v-4811e8e8] {
       flex: 1;
 }
 }
 & .item-icon {
-&[data-v-91cbcaae] {
+&[data-v-4811e8e8] {
     position: relative;
 }
-& .open-indicator[data-v-91cbcaae] {
+& .open-indicator[data-v-4811e8e8] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -1773,10 +1772,10 @@ html.kds-legacy {
 }
 }
 
-.hidden[data-v-a5de970a] {
+.hidden[data-v-6053576d] {
   display: none;
 }
-.file-explorer-item-back[data-v-a5de970a] {
+.file-explorer-item-back[data-v-6053576d] {
   cursor: pointer;
 }
 
@@ -1945,7 +1944,7 @@ table:focus {
 }
 
 .checkbox {
-&[data-v-0bec87ad] {
+&[data-v-5138a023] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -1965,7 +1964,7 @@ table:focus {
   background: none;
   border: none;
 }
-.control[data-v-0bec87ad] {
+.control[data-v-5138a023] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -1978,39 +1977,39 @@ table:focus {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-0bec87ad] {
+&:focus-visible .control[data-v-5138a023] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-0bec87ad] {
+&:hover:not(.disabled) .control[data-v-5138a023] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-0bec87ad] {
+&:active:not(.disabled) .control[data-v-5138a023] {
     background: var(--bg-active);
 }
-&.checked[data-v-0bec87ad],
-  &.indeterminate[data-v-0bec87ad] {
+&.checked[data-v-5138a023],
+  &.indeterminate[data-v-5138a023] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
 }
 .content {
-&[data-v-0bec87ad] {
+&[data-v-5138a023] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
 }
-& .label[data-v-0bec87ad] {
+& .label[data-v-5138a023] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-0bec87ad] {
+& .helper-text[data-v-5138a023] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-0bec87ad] {
+&.disabled[data-v-5138a023] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -2019,27 +2018,230 @@ table:focus {
     cursor: default;
 }
 &.error {
-&[data-v-0bec87ad] {
+&[data-v-5138a023] {
     --border: var(--kds-border-action-error);
     --icon-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
 }
-&.checked[data-v-0bec87ad],
-    &.indeterminate[data-v-0bec87ad] {
+&.checked[data-v-5138a023],
+    &.indeterminate[data-v-5138a023] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-0bec87ad] {
+.subtext-wrapper[data-v-5138a023] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
   );
 }
 
-.kds-fieldset[data-v-a44731da] {
+.modal-header {
+&[data-v-36cbff95] {
+  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-36cbff95] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+}
+.modal-body {
+&[data-v-36cbff95] {
+  --modal-padding-left: var(--kds-spacing-container-1-5x);
+  --modal-padding-right: var(--kds-spacing-container-1-5x);
+  --modal-padding-top: var(--kds-spacing-container-0-5x);
+  --modal-padding-bottom: var(--kds-spacing-container-1x);
+  --modal-gap: var(--kds-spacing-container-1x);
+
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: var(--d8a22254);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-variant="padded"][data-v-36cbff95] {
+    gap: var(--modal-gap);
+    padding: var(--modal-padding-top) var(--modal-padding-right)
+      var(--modal-padding-bottom) var(--modal-padding-left);
+}
+}
+.modal-footer[data-v-36cbff95] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  justify-content: right;
+  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
+}
+
+/** see: https://github.com/whatwg/html/issues/7732  */
+body:has(dialog.modal[open]) {
+  overflow: hidden;
+}
+
+.kds-modal {
+&[data-v-1d030523] {
+  /* rule is broken it complains about local variables for no reason */
+  /* stylelint-disable csstools/value-no-unknown-custom-properties */
+  --modal-full-size: 95%;
+  --modal-backdrop-animation-time: 125ms;
+
+  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(--v36f0df94);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+
+  /** Animation */
+  opacity: 0;
+  transform: scale(var(--modal-scale-base));
+  transition: var(--modal-animation-time) allow-discrete;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: display, opacity, overlay, transform;
+
+  /* hide if its not open */
+}
+&.width-small[data-v-1d030523] {
+    --modal-width: var(--kds-dimension-component-width-25x);
+    --modal-animation-time: 100ms;
+    --modal-scale-base: 0.85;
+}
+&.width-medium[data-v-1d030523] {
+    --modal-width: var(--kds-dimension-component-width-32x);
+    --modal-animation-time: 140ms;
+    --modal-scale-base: 0.88;
+}
+&.width-large[data-v-1d030523] {
+    --modal-width: var(--kds-dimension-component-width-45x);
+    --modal-animation-time: 210ms;
+    --modal-scale-base: 0.88;
+}
+&.width-xlarge[data-v-1d030523] {
+    --modal-width: var(--kds-dimension-component-width-61x);
+    --modal-animation-time: 300ms;
+    --modal-scale-base: 0.88;
+}
+&.width-full[data-v-1d030523] {
+    --modal-width: var(--modal-full-size);
+    --modal-animation-time: 350ms;
+    --modal-scale-base: 0.92;
+}
+&.height-full[data-v-1d030523] {
+    --modal-height: var(--modal-full-size);
+}
+&.height-auto[data-v-1d030523] {
+    --modal-height: fit-content;
+}
+&[data-v-1d030523]:not([open]) {
+    display: none;
+}
+&[data-v-1d030523]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-1d030523]::backdrop {
+    background: var(--kds-color-blanket-default);
+    opacity: 0;
+    transition: var(--modal-animation-time) allow-discrete;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-property: display, opacity, overlay;
+}
+&[open][data-v-1d030523]::backdrop {
+    opacity: 1;
+}
+&[open][data-v-1d030523] {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+
+/** Animation starting styles */
+@starting-style {
+.kds-modal {
+&[data-v-1d030523] {
+    opacity: 1;
+    transform: scale(1);
+}
+&[open][data-v-1d030523] {
+      opacity: 0;
+      transform: scale(var(--modal-scale-base));
+}
+&[data-v-1d030523]::backdrop {
+      opacity: 1;
+}
+&[open][data-v-1d030523]::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-side-drawer {
+&[data-v-33b66da9] {
+  inset: 0;
+  width: var(--kds-side-drawer-size);
+  height: 100%;
+  padding: 0;
+
+  /* Reset popover defaults */
+  margin: 0;
+  overflow: visible;
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  box-shadow: var(--kds-elevation-level-3);
+
+  /* Hidden state */
+  transform: translateX(var(--kds-side-drawer-hidden));
+  transition:
+    transform 0.15s ease-in-out,
+    overlay 0.15s ease-in-out allow-discrete,
+    display 0.15s ease-in-out allow-discrete;
+  --kds-side-drawer-hidden: calc(100vw + 28px);
+}
+&[data-v-33b66da9]:is([data-width="full"]) {
+    --kds-side-drawer-size: 100%;
+}
+&[data-v-33b66da9]:is([data-width="default"]) {
+    --kds-side-drawer-size: var(--kds-width-side-drawer-default);
+}
+&[data-v-33b66da9]:popover-open {
+    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
+@starting-style {
+      transform: translateX(var(--kds-side-drawer-hidden));
+}
+}
+}
+@media only screen and (width <= 900px) {
+.kds-side-drawer[data-v-33b66da9] {
+    width: 100%;
+}
+}
+
+.kds-fieldset[data-v-044d645d] {
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
@@ -2047,7 +2249,7 @@ table:focus {
   margin: 0;
   border: none;
 }
-.kds-fieldset-legend[data-v-a44731da] {
+.kds-fieldset-legend[data-v-044d645d] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
@@ -2055,12 +2257,13 @@ table:focus {
   min-height: var(--kds-dimension-component-height-0-75x);
   padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-fieldset-content[data-v-a44731da] {
+.kds-fieldset-content[data-v-044d645d] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
+  max-width: 100%;
 }
-.legend-text[data-v-a44731da] {
+.legend-text[data-v-044d645d] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
@@ -2330,7 +2533,7 @@ table:focus {
 }
 
 .option {
-&[data-v-5c6f0f1f] {
+&[data-v-158bc82b] {
   display: flex;
   flex: 0 1 auto;
   gap: var(--kds-spacing-container-0-25x);
@@ -2352,57 +2555,57 @@ table:focus {
   border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.size-small[data-v-5c6f0f1f] {
+&.size-small[data-v-158bc82b] {
     height: var(--kds-dimension-component-height-1-25x);
     font: var(--kds-font-base-interactive-small-strong);
 }
-&[data-v-5c6f0f1f]:focus-visible {
+&[data-v-158bc82b]:focus-visible {
     outline: none;
 }
-&[data-v-5c6f0f1f]:focus:not(.selected) {
+&[data-v-158bc82b]:focus:not(.selected) {
     border: var(--kds-border-action-selected);
 }
-&[data-v-5c6f0f1f]:hover:not(:disabled) {
+&[data-v-158bc82b]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-5c6f0f1f]:active:not(:disabled) {
+&[data-v-158bc82b]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-5c6f0f1f] {
+&[data-v-158bc82b] {
     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) {
+&[data-v-158bc82b]:hover:not(:disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-5c6f0f1f]:active:not(:disabled) {
+&[data-v-158bc82b]:active:not(:disabled) {
       background: var(--kds-color-background-selected-active);
 }
 &.variant-muted {
-&[data-v-5c6f0f1f] {
+&[data-v-158bc82b] {
       color: var(--kds-color-text-and-icon-neutral);
       background: var(--kds-color-background-input-initial);
 }
-&[data-v-5c6f0f1f]:hover:not(:disabled) {
+&[data-v-158bc82b]:hover:not(:disabled) {
         background: var(--kds-color-background-input-hover);
 }
-&[data-v-5c6f0f1f]:active:not(:disabled) {
+&[data-v-158bc82b]:active:not(:disabled) {
         background: var(--kds-color-background-input-active);
 }
 }
 }
-&.disabled[data-v-5c6f0f1f] {
+&.disabled[data-v-158bc82b] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&.disabled.selected[data-v-5c6f0f1f] {
+&.disabled.selected[data-v-158bc82b] {
     color: var(--kds-color-text-and-icon-disabled);
     border: var(--kds-border-action-disabled);
 }
 }
-.option-label[data-v-5c6f0f1f] {
+.option-label[data-v-158bc82b] {
   min-width: 0;
   padding: 0 var(--kds-spacing-container-0-12x);
   overflow: hidden;
@@ -3035,7 +3238,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-list-item-button {
-&[data-v-21fb5571] {
+&[data-v-ee6c4aba] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
@@ -3052,26 +3255,26 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-.label[data-v-21fb5571] {
+.label[data-v-ee6c4aba] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&[data-v-21fb5571]:disabled {
+&[data-v-ee6c4aba]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
 }
-&[data-v-21fb5571]:focus-visible:not(:disabled) {
+&[data-v-ee6c4aba]:focus-visible:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-21fb5571]:hover:not(:disabled) {
+&[data-v-ee6c4aba]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-21fb5571]:active:not(:disabled) {
+&[data-v-ee6c4aba]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 }
@@ -3315,7 +3518,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-67a8974e] {
+&[data-v-9916f7be] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3336,20 +3539,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-67a8974e] {
+&.hidden[data-v-9916f7be] {
     opacity: 0;
 }
-&[data-v-67a8974e]:focus-visible {
+&[data-v-9916f7be]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-67a8974e]:hover {
+&[data-v-9916f7be]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-67a8974e]:active {
+&[data-v-9916f7be]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-67a8974e] {
+&.selected[data-v-9916f7be] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -3379,7 +3582,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-b6d29842] {
+&[data-v-5403c06f] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3400,27 +3603,27 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-b6d29842] {
+&.hidden[data-v-5403c06f] {
     opacity: 0;
 }
-&[data-v-b6d29842]:focus-visible {
+&[data-v-5403c06f]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-b6d29842]:hover {
+&[data-v-5403c06f]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-b6d29842]:active {
+&[data-v-5403c06f]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-b6d29842] {
+&.pressed-or-set[data-v-5403c06f] {
     --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] {
+&.error[data-v-5403c06f] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
@@ -3682,20 +3885,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-link-card {
-&[data-v-1696fd9e] {
+&[data-v-c7e823e4] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-1696fd9e] {
+&[data-v-c7e823e4] {
     position: absolute;
     inset: 0;
     text-decoration: none;
 }
-&[data-v-1696fd9e]:focus {
+&[data-v-c7e823e4]:focus {
       outline: none;
 }
 }
-&[data-v-1696fd9e]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-c7e823e4]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -3807,10 +4010,10 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-.kds-tab-icon[data-v-91f95f5f] {
+.kds-tab-icon[data-v-9a4461cc] {
   flex-shrink: 0;
 }
-.kds-tab-label[data-v-91f95f5f] {
+.kds-tab-label[data-v-9a4461cc] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3818,7 +4021,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   white-space: nowrap;
 }
 .kds-tab {
-&[data-v-91f95f5f] {
+&[data-v-9a4461cc] {
   position: relative;
   display: flex;
   align-items: center;
@@ -3830,20 +4033,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   isolation: isolate;
   }
-&[data-v-91f95f5f]:disabled {
+&[data-v-9a4461cc]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
 }
-&[data-v-91f95f5f]:focus-visible {
+&[data-v-9a4461cc]: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] {
+&[data-v-9a4461cc] {
     color: var(--kds-color-text-and-icon-selected);
     }
-& .kds-tab-indicator[data-v-91f95f5f] {
+& .kds-tab-indicator[data-v-9a4461cc] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -3856,12 +4059,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
 }
 }
-&[data-v-91f95f5f]:hover:not(:disabled) {
+&[data-v-9a4461cc]:hover:not(:disabled) {
     color: var(--kds-color-text-and-icon-selected);
 }
 }
 .kds-tab-bar-wrapper {
-&[data-v-91f95f5f] {
+&[data-v-9a4461cc] {
   --focus-ring-space: calc(
     2px + var(--kds-spacing-offset-focus)
   ); /* outline-width + outline-offset */
@@ -3870,7 +4073,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   display: flow-root;
   overflow: visible;
   }
-&[data-v-91f95f5f]::before {
+&[data-v-9a4461cc]::before {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -3882,7 +4085,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 .kds-tab-bar {
-&[data-v-91f95f5f] {
+&[data-v-9a4461cc] {
   display: flex;
   flex-wrap: nowrap;
   padding: var(--focus-ring-space);
@@ -3891,36 +4094,36 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   scrollbar-width: none;
   border-radius: var(--kds-border-radius-container-none);
   }
-&[data-v-91f95f5f]::-webkit-scrollbar {
+&[data-v-9a4461cc]::-webkit-scrollbar {
     display: none;
 }
-&:not(.kds-tab-bar-full-width) .kds-tab[data-v-91f95f5f] {
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-9a4461cc] {
     flex: 0 1 auto;
-    min-width: var(--v09be89a3);
+    min-width: var(--v9ef1548e);
 }
-&.kds-tab-bar-large .kds-tab-label[data-v-91f95f5f] {
+&.kds-tab-bar-large .kds-tab-label[data-v-9a4461cc] {
     font: var(--kds-font-base-interactive-large-strong);
 }
-&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-91f95f5f] {
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-9a4461cc] {
     font: var(--kds-font-base-title-large);
 }
 &.kds-tab-bar-small,
   &.kds-tab-bar-large {
-& .kds-tab-selected .kds-tab-icon[data-v-91f95f5f] {
+& .kds-tab-selected .kds-tab-icon[data-v-9a4461cc] {
       color: var(--kds-color-text-and-icon-selected);
 }
 }
-&.kds-tab-bar-small .kds-tab[data-v-91f95f5f] {
+&.kds-tab-bar-small .kds-tab[data-v-9a4461cc] {
     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] {
+&.kds-tab-bar-large .kds-tab[data-v-9a4461cc] {
     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] {
+&.kds-tab-bar-full-width .kds-tab[data-v-9a4461cc] {
     flex: 1;
     justify-content: center;
     width: 100%;
@@ -4098,19 +4301,19 @@ to {
 }
 
 .kds-nav-item {
-&[data-v-17711664] {
+&[data-v-98f1a1d0] {
   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) {
+&[data-v-98f1a1d0]: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] {
+&[data-v-98f1a1d0] {
 
     display: flex;
     flex-direction: row;
@@ -4118,7 +4321,7 @@ to {
     align-items: center;
     width: 100%;
     height: 100%;
-    padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
+    padding: 0 var(--v9e34f8b2) 0 var(--kds-spacing-container-0-75x);
     color: var(--kds-color-text-and-icon-neutral);
     text-decoration: none;
     cursor: pointer;
@@ -4126,10 +4329,10 @@ to {
     background: transparent;
     border: none;
 }
-&[data-v-17711664]:focus-visible {
+&[data-v-98f1a1d0]:focus-visible {
       outline: none;
 }
-& .label[data-v-17711664] {
+& .label[data-v-98f1a1d0] {
       flex: 1 1 auto;
       min-width: 0;
       overflow: hidden;
@@ -4139,7 +4342,7 @@ to {
       white-space: nowrap;
 }
 }
-& .trailing-items[data-v-17711664] {
+& .trailing-items[data-v-98f1a1d0] {
     position: absolute;
     top: 0;
     right: var(--kds-spacing-container-0-75x);
@@ -4151,23 +4354,23 @@ to {
     height: 100%;
     color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-v-17711664]:hover:not(.disabled) {
+&[data-v-98f1a1d0]:hover:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-98f1a1d0]:has(.kds-nav-button:active):not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-17711664] {
+&[data-v-98f1a1d0] {
     background: var(--kds-color-background-selected-initial);
 }
-& .kds-nav-button[data-v-17711664] {
+& .kds-nav-button[data-v-98f1a1d0] {
       color: var(--kds-color-text-and-icon-selected);
 }
-& .trailing-items[data-v-17711664] {
+& .trailing-items[data-v-98f1a1d0] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-17711664]::before {
+&[data-v-98f1a1d0]::before {
       position: absolute;
       top: var(--kds-spacing-container-0-37x);
       left: 0;
@@ -4178,22 +4381,22 @@ to {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
       border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-17711664]:hover:not(.disabled) {
+&[data-v-98f1a1d0]:hover:not(.disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-98f1a1d0]:has(.kds-nav-button:active):not(.disabled) {
       background: var(--kds-color-background-selected-active);
 }
 }
 &.disabled {
-&[data-v-17711664] {
+&[data-v-98f1a1d0] {
     cursor: default;
 }
-& .kds-nav-button[data-v-17711664] {
+& .kds-nav-button[data-v-98f1a1d0] {
       color: var(--kds-color-text-and-icon-disabled);
       cursor: default;
 }
-& .trailing-items[data-v-17711664] {
+& .trailing-items[data-v-98f1a1d0] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -4212,7 +4415,7 @@ to {
 }
 }
 
-.kds-breadcrumb-item[data-v-fd7537fc] {
+.kds-breadcrumb-item[data-v-432d445a] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -4229,7 +4432,7 @@ to {
   background: none;
   border: none;
 }
-.breadcrumb-label[data-v-fd7537fc] {
+.breadcrumb-label[data-v-432d445a] {
   display: block;
   flex: 1 1 auto;
   min-width: 0;
@@ -4239,28 +4442,28 @@ to {
   color: inherit;
   white-space: nowrap;
 }
-.breadcrumb-icon[data-v-fd7537fc] {
+.breadcrumb-icon[data-v-432d445a] {
   flex-shrink: 0;
 }
-span.kds-breadcrumb-item[data-v-fd7537fc] {
+span.kds-breadcrumb-item[data-v-432d445a] {
   cursor: default;
 }
 a.kds-breadcrumb-item,
 button.kds-breadcrumb-item {
-&[data-v-fd7537fc] {
+&[data-v-432d445a] {
   cursor: pointer;
   border-radius: var(--kds-border-radius-container-0-12x);
   }
-&[data-v-fd7537fc]:hover {
+&[data-v-432d445a]:hover {
     color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-v-fd7537fc]:focus-visible {
+&[data-v-432d445a]: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] {
+.kds-breadcrumb-item:hover .breadcrumb-label[data-v-432d445a],
+.kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-432d445a] {
   text-overflow: clip;
 }
 
@@ -4346,221 +4549,66 @@ li {
 }
 }
 
-.modal-header {
-&[data-v-36cbff95] {
-  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-36cbff95] {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-}
-.modal-body {
-&[data-v-36cbff95] {
-  --modal-padding-left: var(--kds-spacing-container-1-5x);
-  --modal-padding-right: var(--kds-spacing-container-1-5x);
-  --modal-padding-top: var(--kds-spacing-container-0-5x);
-  --modal-padding-bottom: var(--kds-spacing-container-1x);
-  --modal-gap: var(--kds-spacing-container-1x);
-
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow: var(--d8a22254);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-}
-&[data-variant="padded"][data-v-36cbff95] {
-    gap: var(--modal-gap);
-    padding: var(--modal-padding-top) var(--modal-padding-right)
-      var(--modal-padding-bottom) var(--modal-padding-left);
-}
-}
-.modal-footer[data-v-36cbff95] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  justify-content: right;
-  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
-}
-
-/** see: https://github.com/whatwg/html/issues/7732  */
-body:has(dialog.modal[open]) {
-  overflow: hidden;
-}
-
-.kds-modal {
-&[data-v-5cf0b3d2] {
-  /* 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;
-
+.kds-inline-message {
+&[data-v-7573041c] {
   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(--v94ce1e22);
-  font: var(--kds-font-base-body-small);
+  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);
-  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-5cf0b3d2] {
-    --modal-width: var(--kds-dimension-component-width-25x);
-    --modal-animation-time: 100ms;
-    --modal-scale-base: 0.85;
-}
-&.width-medium[data-v-5cf0b3d2] {
-    --modal-width: var(--kds-dimension-component-width-32x);
-    --modal-animation-time: 140ms;
-    --modal-scale-base: 0.88;
-}
-&.width-large[data-v-5cf0b3d2] {
-    --modal-width: var(--kds-dimension-component-width-45x);
-    --modal-animation-time: 210ms;
-    --modal-scale-base: 0.88;
-}
-&.width-xlarge[data-v-5cf0b3d2] {
-    --modal-width: var(--kds-dimension-component-width-61x);
-    --modal-animation-time: 300ms;
-    --modal-scale-base: 0.88;
-}
-&.width-full[data-v-5cf0b3d2] {
-    --modal-width: var(--modal-full-size);
-    --modal-animation-time: 350ms;
-    --modal-scale-base: 0.92;
-}
-&.height-full[data-v-5cf0b3d2] {
-    --modal-height: var(--modal-full-size);
-}
-&.height-auto[data-v-5cf0b3d2] {
-    --modal-height: fit-content;
-}
-&[data-v-5cf0b3d2]:not([open]) {
-    display: none;
-}
-&[data-v-5cf0b3d2]:focus-visible,
-  &[data-v-5cf0b3d2]:focus {
-    outline: none;
-}
-&[data-v-5cf0b3d2]::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-5cf0b3d2]::backdrop {
-    opacity: 1;
-}
-&[open][data-v-5cf0b3d2] {
-    opacity: 1;
-    transform: scale(1);
-}
+  border-radius: var(--kds-border-radius-container-0-50x);
 }
-
-/** Animation starting styles */
-@starting-style {
-.kds-modal {
-&[data-v-5cf0b3d2] {
-    opacity: 1;
-    transform: scale(1);
+.header {
+&[data-v-7573041c] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
 }
-&[open][data-v-5cf0b3d2] {
-      opacity: 0;
-      transform: scale(var(--modal-scale-base));
+.icon[data-v-7573041c] {
+      color: var(--icon-color);
 }
-&[data-v-5cf0b3d2]::backdrop {
-      opacity: 1;
+.headline[data-v-7573041c] {
+      font: var(--kds-font-base-title-small-strong);
 }
-&[open][data-v-5cf0b3d2]::backdrop {
-      opacity: 0;
 }
+.body[data-v-7573041c] {
+    align-self: stretch;
+    padding-left: var(--kds-spacing-container-1x);
+    font: var(--kds-font-base-body-small);
+    white-space: pre-line;
 }
+.buttons[data-v-7573041c] {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-1x);
 }
+&.info[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-info);
 
-.ask-again[data-v-41fc8d84] {
-  padding: var(--kds-spacing-container-0-5x) 0 0 0;
-}
-.flush-left[data-v-41fc8d84] {
-  margin-right: auto;
-}
-.kds-tooltip {
-  inset: auto auto anchor(top);
-  justify-self: anchor-center;
-  max-width: var(--kds-dimension-component-width-16x);
-  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-5x);
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) 0;
-  position-try-fallbacks:
-    --kds-tooltip-try-bottom-center, --kds-tooltip-try-top-center;
-  font: var(--kds-font-base-subtext-small);
-  color: var(--kds-color-tooltip-text-and-icon-neutral);
-  overflow-wrap: anywhere;
-  white-space: pre-line;
-  background-color: var(--kds-color-tooltip-background-default);
-  border: none;
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-elevation-level-3);
+    background-color: var(--kds-color-background-static-info-muted);
+    border: var(--kds-border-base-info);
 }
+&.success[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-success);
 
-@position-try --kds-tooltip-try-top-center {
-  inset: auto auto anchor(top);
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) 0;
+    background-color: var(--kds-color-background-static-success-muted);
+    border: var(--kds-border-base-success);
 }
+&.error[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-danger);
 
-@position-try --kds-tooltip-try-bottom-center {
-  inset: anchor(bottom) auto auto;
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) 0;
+    background-color: var(--kds-color-background-static-danger-muted);
+    border: var(--kds-border-base-danger);
 }
+&.warning[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-warning);
 
-.kds-button-group-measure[data-v-ccdbc564] {
-  position: absolute;
-  display: flex;
-  visibility: hidden;
-  gap: var(--kds-spacing-container-0-5x);
-  white-space: nowrap;
-}
-.kds-button-group {
-&[data-v-ccdbc564] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  }
-&.left[data-v-ccdbc564] {
-    justify-content: flex-start;
-}
-&.right[data-v-ccdbc564] {
-    justify-content: flex-end;
-}
-&.middle[data-v-ccdbc564] {
-    justify-content: center;
+    background-color: var(--kds-color-background-static-warning-muted);
+    border: var(--kds-border-base-warning);
 }
 }