@knime/kds-components 0.19.0 → 0.20.1

package/dist/index.css

@@ -1,6 +1,6 @@
 
 .kds-avatar {
-&[data-v-d6a313f1] {
+&[data-v-c90668bf] {
   position: relative;
   display: inline-block;
   flex-shrink: 0;
@@ -9,24 +9,24 @@
   vertical-align: middle;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-d6a313f1] {
+&.small[data-v-c90668bf] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-d6a313f1] {
+&.medium[data-v-c90668bf] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-d6a313f1] {
+&.large[data-v-c90668bf] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-d6a313f1] {
+&.xlarge[data-v-c90668bf] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
 }
-.kds-avatar[data-v-d6a313f1]::after {
+.kds-avatar[data-v-c90668bf]::after {
   position: absolute;
   inset: 0;
   box-sizing: border-box;
@@ -35,14 +35,14 @@
   border: var(--kds-border-base-muted);
   border-radius: inherit;
 }
-.kds-avatar-image[data-v-d6a313f1] {
+.kds-avatar-image[data-v-c90668bf] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-d6a313f1] {
+.kds-avatar-initials[data-v-c90668bf] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,11 +54,11 @@
   user-select: none;
   background: var(--kds-color-background-primary-bold-initial);
 }
-.kds-avatar-initials > span[data-v-d6a313f1] {
+.kds-avatar-initials > span[data-v-c90668bf] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 .kds-icon {
-&[data-v-4da5bf3e] {
+&[data-v-fb124eb6] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -73,7 +73,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-4da5bf3e] {
+&.xsmall[data-v-fb124eb6] {
     --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);
@@ -82,7 +82,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-4da5bf3e] {
+&[data-v-fb124eb6] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -93,22 +93,22 @@
 }
 }
 }
-&.small[data-v-4da5bf3e] {
+&.small[data-v-fb124eb6] {
     --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-4da5bf3e] {
+&.large[data-v-fb124eb6] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
-.kds-icon.disabled[data-v-4da5bf3e] {
+.kds-icon.disabled[data-v-fb124eb6] {
   color: var(--kds-color-text-and-icon-disabled);
 }
 .kds-icon {
-&[data-v-806087da] {
+&[data-v-3b8ebdbd] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -123,7 +123,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-806087da] {
+&.xsmall[data-v-3b8ebdbd] {
     --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);
@@ -132,7 +132,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-806087da] {
+&[data-v-3b8ebdbd] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -143,19 +143,19 @@
 }
 }
 }
-&.small[data-v-806087da] {
+&.small[data-v-3b8ebdbd] {
     --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-806087da] {
+&.large[data-v-3b8ebdbd] {
     --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-806087da] {
+&[data-v-3b8ebdbd] {
   --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);
@@ -173,36 +173,36 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.disabled[data-v-806087da] {
+&.disabled[data-v-3b8ebdbd] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-&.small[data-v-806087da] {
+&.small[data-v-3b8ebdbd] {
     --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-806087da] {
+&.large[data-v-3b8ebdbd] {
     --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-806087da] {
+&.small[data-v-3b8ebdbd] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-806087da] {
+&.medium[data-v-3b8ebdbd] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 }
 
 .kds-badge {
-&[data-v-0dc42bfc] {
+&[data-v-df64f7cf] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   border-radius: var(--kds-border-radius-container-pill);
 }
-& .label-wrapper[data-v-0dc42bfc] {
+& .label-wrapper[data-v-df64f7cf] {
     min-width: 0;
     max-width: var(--kds-dimension-component-width-16x);
     padding: 0 var(--kds-spacing-container-0-12x);
@@ -210,43 +210,43 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&.xxsmall[data-v-0dc42bfc] {
+&.xxsmall[data-v-df64f7cf] {
     height: var(--kds-dimension-component-height-1x);
     padding: 0 var(--kds-spacing-container-0-25x);
     font: var(--kds-font-base-title-xsmall);
 }
-&.xsmall[data-v-0dc42bfc] {
+&.xsmall[data-v-df64f7cf] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0 var(--kds-spacing-container-0-37x);
     font: var(--kds-font-base-title-small);
 }
-&.neutral[data-v-0dc42bfc] {
+&.neutral[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-bold-initial);
     border: var(--kds-border-base-subtle);
 }
-&.info[data-v-0dc42bfc] {
+&.info[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-info);
     background-color: var(--kds-color-background-static-info);
     border: var(--kds-border-base-info);
 }
-&.warning[data-v-0dc42bfc] {
+&.warning[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-warning);
     background-color: var(--kds-color-background-static-warning);
     border: var(--kds-border-base-warning);
 }
-&.success[data-v-0dc42bfc] {
+&.success[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-success);
     background-color: var(--kds-color-background-static-success);
     border: var(--kds-border-base-success);
 }
-&.error[data-v-0dc42bfc] {
+&.error[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-danger);
     background-color: var(--kds-color-background-static-danger);
     border: var(--kds-border-base-danger);
 }
-&.ghost[data-v-0dc42bfc] {
+&.ghost[data-v-df64f7cf] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: transparent;
     border: var(--kds-border-base-subtle);
@@ -254,7 +254,7 @@
 }
 
 .kds-color-swatch {
-&[data-v-bdb3dd24] {
+&[data-v-2e300e76] {
   display: inline-block;
   flex-shrink: 0;
   overflow: hidden;
@@ -262,22 +262,22 @@
   border: var(--kds-border-base-muted);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.small[data-v-bdb3dd24] {
+&.small[data-v-2e300e76] {
     width: var(--kds-dimension-icon-0-75x);
     height: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-bdb3dd24] {
+&.medium[data-v-2e300e76] {
     width: var(--kds-dimension-icon-1x);
     height: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-bdb3dd24] {
+&.large[data-v-2e300e76] {
     width: var(--kds-dimension-component-width-1-25x);
     height: var(--kds-dimension-component-height-1-25x);
 }
 }
 
 .kds-live-status {
-&[data-v-3bd44b22] {
+&[data-v-01555495] {
   --dot-color: var(--kds-color-state-disabled);
   --dot-border-color: var(--kds-color-state-disabled-border);
 
@@ -288,20 +288,20 @@
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-3bd44b22] {
+&.red[data-v-01555495] {
     --dot-color: var(--kds-color-state-error);
     --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-3bd44b22] {
+&.orange[data-v-01555495] {
     --dot-color: var(--kds-color-state-warning);
     --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-3bd44b22] {
+&.green[data-v-01555495] {
     --dot-color: var(--kds-color-state-success);
     --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-3bd44b22] {
+&[data-v-01555495] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -309,7 +309,7 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-3bd44b22]::after {
+&[data-v-01555495]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -321,7 +321,7 @@
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-3bd44b22] {
+.label[data-v-01555495] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -329,33 +329,33 @@
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-3bd44b22] {
+.dot[data-v-01555495] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-&[data-v-3bd44b22]::after {
+&[data-v-01555495]::after {
       border-width: var(--kds-border-width-icon-stroke-m);
 }
-.label[data-v-3bd44b22] {
+.label[data-v-01555495] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-3bd44b22] {
+.dot[data-v-01555495] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-&[data-v-3bd44b22]::after {
+&[data-v-01555495]::after {
       border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-3bd44b22] {
+.label[data-v-01555495] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
 }
 
 .kds-loading-spinner {
-&[data-v-74bb7c3d] {
+&[data-v-54835dc0] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: 12; /* 10% of size */
@@ -366,28 +366,28 @@
   --color-track: var(--kds-color-loading-spinner-track-on-surface);
   --color-loader: var(--kds-color-loading-spinner-progress-on-surface);
 }
-&.xsmall[data-v-74bb7c3d] {
+&.xsmall[data-v-54835dc0] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
 }
-&.small[data-v-74bb7c3d] {
+&.small[data-v-54835dc0] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
 }
-&.large[data-v-74bb7c3d] {
+&.large[data-v-54835dc0] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
 }
-&[data-style="onPrimary"][data-v-74bb7c3d] {
+&[data-style="onPrimary"][data-v-54835dc0] {
     --color-track: var(--kds-color-loading-spinner-track-on-primary);
     --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
 }
-& .track[data-v-74bb7c3d] {
+& .track[data-v-54835dc0] {
     fill: none;
     stroke: var(--color-track);
     stroke-width: var(--icon-stroke-width);
 }
-& .loader[data-v-74bb7c3d] {
+& .loader[data-v-54835dc0] {
     fill: none;
     stroke: var(--color-loader);
     stroke-width: var(--icon-stroke-width);
@@ -398,10 +398,10 @@
 
     /* REQUIRED for SVG rotation */
     transform-box: fill-box;
-    animation: spin-74bb7c3d 1.2s linear infinite;
+    animation: spin-54835dc0 1.2s linear infinite;
 }
 }
-@keyframes spin-74bb7c3d {
+@keyframes spin-54835dc0 {
 from {
     transform: rotate(-90deg);
 }
@@ -411,7 +411,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-3d79be7c] {
+&[data-v-af14056f] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -423,45 +423,45 @@ to {
   border-radius: var(--kds-border-radius-container-0-50x);
 }
 .header {
-&[data-v-3d79be7c] {
+&[data-v-af14056f] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: flex-start;
 }
-.icon[data-v-3d79be7c] {
+.icon[data-v-af14056f] {
       align-self: flex-start;
       margin-top: var(--kds-spacing-container-0-12x);
       color: var(--icon-color);
 }
-.headline[data-v-3d79be7c] {
+.headline[data-v-af14056f] {
       font: var(--kds-font-base-title-small-strong);
 }
 }
-.body[data-v-3d79be7c] {
+.body[data-v-af14056f] {
     align-self: stretch;
     padding-left: var(--kds-spacing-container-1x);
     font: var(--kds-font-base-body-small);
     color: var(--kds-color-text-and-icon-muted);
 }
-&.info[data-v-3d79be7c] {
+&.info[data-v-af14056f] {
     --icon-color: var(--kds-color-text-and-icon-info);
 
     background-color: var(--kds-color-background-static-info-muted);
     border: var(--kds-border-base-info);
 }
-&.success[data-v-3d79be7c] {
+&.success[data-v-af14056f] {
     --icon-color: var(--kds-color-text-and-icon-success);
 
     background-color: var(--kds-color-background-static-success-muted);
     border: var(--kds-border-base-success);
 }
-&.error[data-v-3d79be7c] {
+&.error[data-v-af14056f] {
     --icon-color: var(--kds-color-text-and-icon-danger);
 
     background-color: var(--kds-color-background-static-danger-muted);
     border: var(--kds-border-base-danger);
 }
-&.warning[data-v-3d79be7c] {
+&.warning[data-v-af14056f] {
     --icon-color: var(--kds-color-text-and-icon-warning);
 
     background-color: var(--kds-color-background-static-warning-muted);
@@ -474,7 +474,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -488,143 +488,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-b0f9559f]:is(a) {
+&[data-v-20cfd7e3]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
     cursor: default;
 }
-&[data-v-b0f9559f]:focus-visible {
+&[data-v-20cfd7e3]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
     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-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
     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-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
     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-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
     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-b0f9559f] {
+&.disabled[data-v-20cfd7e3] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-b0f9559f]:hover {
+&[data-v-20cfd7e3]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-b0f9559f]:active {
+&[data-v-20cfd7e3]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-b0f9559f] {
+& .label[data-v-20cfd7e3] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -632,7 +632,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-b0f9559f] {
+&.xsmall[data-v-20cfd7e3] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -644,7 +644,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-b0f9559f] {
+&.small[data-v-20cfd7e3] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -656,7 +656,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-b0f9559f] {
+&.medium[data-v-20cfd7e3] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -669,7 +669,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-b0f9559f] {
+&[data-v-20cfd7e3] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -681,11 +681,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-b0f9559f] {
+& .label[data-v-20cfd7e3] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-b0f9559f] {
+&.success[data-v-20cfd7e3] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -694,7 +694,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-b0f9559f] {
+&.error[data-v-20cfd7e3] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -706,7 +706,7 @@ html.kds-legacy {
 }
 
 .leading {
-&[data-v-ec08a9ba] {
+&[data-v-d38d7ade] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -714,21 +714,21 @@ html.kds-legacy {
   width: var(--kds-dimension-icon-1x);
   height: var(--kds-dimension-icon-1x);
 }
-&.xsmall[data-v-ec08a9ba] {
+&.xsmall[data-v-d38d7ade] {
     width: var(--kds-dimension-icon-0-56x);
     height: var(--kds-dimension-icon-0-56x);
 }
-&.small[data-v-ec08a9ba] {
+&.small[data-v-d38d7ade] {
     width: var(--kds-dimension-icon-0-75x);
     height: var(--kds-dimension-icon-0-75x);
 }
-&.large[data-v-ec08a9ba] {
+&.large[data-v-d38d7ade] {
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
 }
-.leading-icon[data-v-ec08a9ba],
-.spinner[data-v-ec08a9ba] {
+.leading-icon[data-v-d38d7ade],
+.spinner[data-v-d38d7ade] {
   position: absolute;
   inset: 0;
   display: inline-flex;
@@ -737,8 +737,8 @@ html.kds-legacy {
   opacity: 0;
   transition: opacity 200ms ease-out;
 }
-.leading-icon[data-visible="true"][data-v-ec08a9ba],
-.spinner[data-visible="true"][data-v-ec08a9ba] {
+.leading-icon[data-visible="true"][data-v-d38d7ade],
+.spinner[data-visible="true"][data-v-d38d7ade] {
   opacity: 1;
 }
 
@@ -767,7 +767,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
@@ -783,36 +783,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     gap: var(--kds-spacing-container-0-25x);
     align-items: flex-start;
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-7fba4bc1] {
+.accessory[data-v-3dac6df5] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-7fba4bc1] {
+.accessory[data-v-3dac6df5] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-7fba4bc1] {
+.large &[data-v-3dac6df5] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -820,19 +820,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-7fba4bc1] {
+.prefix[data-v-3dac6df5] {
         flex-shrink: 0;
 }
-.special[data-v-7fba4bc1] {
+.special[data-v-3dac6df5] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-7fba4bc1] {
+.subtext[data-v-3dac6df5] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -843,7 +843,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -851,69 +851,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-7fba4bc1] {
+.shortcut[data-v-3dac6df5] {
       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-7fba4bc1] {
+.trailing-item-reserve-space[data-v-3dac6df5] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-7fba4bc1]:hover:not(.disabled),
-  &.active[data-v-7fba4bc1]:not(.disabled) {
+&[data-v-3dac6df5]:hover:not(.disabled),
+  &.active[data-v-3dac6df5]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-7fba4bc1]:active:not(.disabled) {
+&[data-v-3dac6df5]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-7fba4bc1] {
+.subtext[data-v-3dac6df5] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-7fba4bc1]:hover,
-    &.active[data-v-7fba4bc1] {
+&[data-v-3dac6df5]:hover,
+    &.active[data-v-3dac6df5] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-7fba4bc1]:active {
+&[data-v-3dac6df5]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-7fba4bc1] {
+&.disabled[data-v-3dac6df5] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-7fba4bc1] {
+.subtext[data-v-3dac6df5] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-7fba4bc1]:hover,
-    &.active[data-v-7fba4bc1] {
+&[data-v-3dac6df5]:hover,
+    &.active[data-v-3dac6df5] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-7fba4bc1]:active {
+&[data-v-3dac6df5]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-7fba4bc1] {
+&.disabled[data-v-3dac6df5] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-7fba4bc1] {
+&[data-v-3dac6df5] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-7fba4bc1],
-    .subtext[data-v-7fba4bc1] {
+.shortcut[data-v-3dac6df5],
+    .subtext[data-v-3dac6df5] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -953,7 +953,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-9b505d0b] {
+&[data-v-710126a1] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -962,17 +962,17 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-9b505d0b] {
+&.standalone[data-v-710126a1] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-9b505d0b]:focus-visible {
+&[data-v-710126a1]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.kds-list-container-empty[data-v-9b505d0b] {
+.kds-list-container-empty[data-v-710126a1] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -980,7 +980,7 @@ html.kds-legacy {
 }
 
 .kds-popover {
-&[data-v-6e5d3976] {
+&[data-v-914e6d2e] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1001,10 +1001,10 @@ html.kds-legacy {
 
   /* noinspection CssInvalidFunction,CssInvalidAtRule */
 }
-&.full-width[data-v-6e5d3976] {
+&.full-width[data-v-914e6d2e] {
     min-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-6e5d3976] {
+&.floating.top-right[data-v-914e6d2e] {
     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);
@@ -1012,7 +1012,7 @@ html.kds-legacy {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-left[data-v-6e5d3976] {
+&.floating.top-left[data-v-914e6d2e] {
     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;
@@ -1020,7 +1020,7 @@ html.kds-legacy {
       --kds-popover-try-top-right, --kds-popover-try-bottom-left,
       --kds-popover-try-bottom-right, --kds-popover-try-top-left;
 }
-&.floating.bottom-right[data-v-6e5d3976] {
+&.floating.bottom-right[data-v-914e6d2e] {
     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);
@@ -1028,7 +1028,7 @@ html.kds-legacy {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-left[data-v-6e5d3976] {
+&.floating.bottom-left[data-v-914e6d2e] {
     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;
@@ -1065,7 +1065,7 @@ html.kds-legacy {
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-6e5d3976] {
+.kds-popover-default-content[data-v-914e6d2e] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1074,21 +1074,21 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-menu-container[data-v-b9edc498] {
+.kds-menu-container[data-v-0257e1cd] {
   max-width: var(--kds-dimension-component-width-20x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-label-wrapper[data-v-11fbd55f] {
+.kds-label-wrapper[data-v-13bea091] {
   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-11fbd55f] {
+.label[data-v-13bea091] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
@@ -1101,7 +1101,7 @@ html.kds-legacy {
 }
 
 .subtext {
-&[data-v-df9a85a4] {
+&[data-v-2e6ba10c] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   min-height: 1lh;
@@ -1109,16 +1109,16 @@ html.kds-legacy {
   font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-muted);
 }
-&.error[data-v-df9a85a4] {
+&.error[data-v-2e6ba10c] {
     color: var(--kds-color-text-and-icon-danger);
 }
-& .subtext-text[data-v-df9a85a4] {
+& .subtext-text[data-v-2e6ba10c] {
     min-width: 0;
 }
 }
 
 .checkbox {
-&[data-v-32f17780] {
+&[data-v-7bfc5667] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -1138,7 +1138,7 @@ html.kds-legacy {
   background: none;
   border: none;
 }
-.control[data-v-32f17780] {
+.control[data-v-7bfc5667] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -1151,40 +1151,40 @@ html.kds-legacy {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-32f17780] {
+&:focus-visible .control[data-v-7bfc5667] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-32f17780] {
+&:hover:not(.disabled) .control[data-v-7bfc5667] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-32f17780] {
+&:active:not(.disabled) .control[data-v-7bfc5667] {
     background: var(--bg-active);
 }
-&.checked[data-v-32f17780],
-  &.indeterminate[data-v-32f17780] {
+&.checked[data-v-7bfc5667],
+  &.indeterminate[data-v-7bfc5667] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
 }
 .content {
-&[data-v-32f17780] {
+&[data-v-7bfc5667] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     text-rendering: geometricprecision;
 }
-& .label[data-v-32f17780] {
+& .label[data-v-7bfc5667] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-32f17780] {
+& .helper-text[data-v-7bfc5667] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-32f17780] {
+&.disabled[data-v-7bfc5667] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -1193,43 +1193,70 @@ html.kds-legacy {
     cursor: default;
 }
 &.error {
-&[data-v-32f17780] {
+&[data-v-7bfc5667] {
     --border: var(--kds-border-action-error);
     --icon-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
 }
-&.checked[data-v-32f17780],
-    &.indeterminate[data-v-32f17780] {
+&.checked[data-v-7bfc5667],
+    &.indeterminate[data-v-7bfc5667] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-32f17780] {
+.subtext-wrapper[data-v-7bfc5667] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
   );
 }
 
-.checkbox-group[data-v-c38eeda5] {
+.kds-fieldset[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
 }
-.options[data-v-c38eeda5] {
+.kds-fieldset-legend[data-v-a44731da] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+  padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-fieldset-content[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.legend-text[data-v-a44731da] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+
+.options[data-v-c6536296] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
-.options.horizontal[data-v-c38eeda5] {
+.options.horizontal[data-v-c6536296] {
   flex-flow: row wrap;
   align-items: flex-start;
 }
 
 .radio {
-&[data-v-27c361e4] {
+&[data-v-f4f6392a] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -1249,7 +1276,7 @@ html.kds-legacy {
   background: none;
   border: none;
 }
-.control[data-v-27c361e4] {
+.control[data-v-f4f6392a] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -1261,50 +1288,50 @@ html.kds-legacy {
     border: var(--border);
     border-radius: 50%;
 }
-.control .dot[data-v-27c361e4] {
+.control .dot[data-v-f4f6392a] {
     display: block;
     flex-shrink: 0;
     width: 100%;
     height: 100%;
 }
-.control .dot circle[data-v-27c361e4] {
+.control .dot circle[data-v-f4f6392a] {
     fill: var(--dot-color);
     transform: scale(0.5);
     transform-origin: center;
     transform-box: fill-box;
 }
-&:focus-visible .control[data-v-27c361e4] {
+&:focus-visible .control[data-v-f4f6392a] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-27c361e4] {
+&:hover:not(.disabled) .control[data-v-f4f6392a] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-27c361e4] {
+&:active:not(.disabled) .control[data-v-f4f6392a] {
     background: var(--bg-active);
 }
-&.selected[data-v-27c361e4] {
+&.selected[data-v-f4f6392a] {
     --border: var(--kds-border-action-selected);
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
 }
 .content {
-&[data-v-27c361e4] {
+&[data-v-f4f6392a] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);
 }
-& .label[data-v-27c361e4] {
+& .label[data-v-f4f6392a] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-27c361e4] {
+& .helper-text[data-v-f4f6392a] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-27c361e4] {
+&.disabled[data-v-f4f6392a] {
     --bg-initial: var(--kds-color-background-input-initial);
     --border: var(--kds-border-action-disabled);
     --dot-color: var(--kds-color-text-and-icon-disabled);
@@ -1314,37 +1341,32 @@ html.kds-legacy {
     cursor: default;
 }
 &.error {
-&[data-v-27c361e4] {
+&[data-v-f4f6392a] {
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
     --border: var(--kds-border-action-error);
     --dot-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
 }
-&.selected[data-v-27c361e4] {
+&.selected[data-v-f4f6392a] {
       --bg-initial: var(--kds-color-background-danger-initial);
       --border: var(--kds-border-action-error);
 }
 }
 }
 
-.radio-button-group[data-v-9cc4dcdd] {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-.options[data-v-9cc4dcdd] {
+.options[data-v-d78ed4a2] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
-.options.horizontal[data-v-9cc4dcdd] {
+.options.horizontal[data-v-d78ed4a2] {
   flex-flow: row wrap;
   align-items: flex-start;
 }
 
 .option {
-&[data-v-93f3f577] {
+&[data-v-5c6f0f1f] {
   display: flex;
   flex: 0 1 auto;
   gap: var(--kds-spacing-container-0-25x);
@@ -1366,54 +1388,57 @@ html.kds-legacy {
   border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.size-small[data-v-93f3f577] {
+&.size-small[data-v-5c6f0f1f] {
     height: var(--kds-dimension-component-height-1-25x);
     font: var(--kds-font-base-interactive-small-strong);
 }
-&[data-v-93f3f577]:focus-visible {
+&[data-v-5c6f0f1f]:focus-visible {
     outline: none;
 }
-&[data-v-93f3f577]:hover:not(:disabled) {
+&[data-v-5c6f0f1f]:focus:not(.selected) {
+    border: var(--kds-border-action-selected);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-93f3f577]:active:not(:disabled) {
+&[data-v-5c6f0f1f]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-93f3f577] {
+&[data-v-5c6f0f1f] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&[data-v-93f3f577]:hover:not(:disabled) {
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-93f3f577]:active:not(:disabled) {
+&[data-v-5c6f0f1f]:active:not(:disabled) {
       background: var(--kds-color-background-selected-active);
 }
 &.variant-muted {
-&[data-v-93f3f577] {
+&[data-v-5c6f0f1f] {
       color: var(--kds-color-text-and-icon-neutral);
       background: var(--kds-color-background-input-initial);
 }
-&[data-v-93f3f577]:hover:not(:disabled) {
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
         background: var(--kds-color-background-input-hover);
 }
-&[data-v-93f3f577]:active:not(:disabled) {
+&[data-v-5c6f0f1f]:active:not(:disabled) {
         background: var(--kds-color-background-input-active);
 }
 }
 }
-&.disabled[data-v-93f3f577] {
+&.disabled[data-v-5c6f0f1f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&.disabled.selected[data-v-93f3f577] {
+&.disabled.selected[data-v-5c6f0f1f] {
     color: var(--kds-color-text-and-icon-disabled);
     border: var(--kds-border-action-disabled);
 }
 }
-.option-label[data-v-93f3f577] {
+.option-label[data-v-5c6f0f1f] {
   min-width: 0;
   padding: 0 var(--kds-spacing-container-0-12x);
   overflow: hidden;
@@ -1422,16 +1447,11 @@ html.kds-legacy {
   white-space: nowrap;
 }
 
-.value-switch[data-v-666d4c10] {
-  display: flex;
-  flex-direction: column;
+.value-switch[data-v-640271e0] {
   align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  border: none;
 }
 .options {
-&[data-v-666d4c10] {
+&[data-v-640271e0] {
   display: flex;
   flex-flow: row nowrap;
   gap: var(--kds-spacing-container-none);
@@ -1448,12 +1468,12 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-fake-border-xs-muted);
   }
-&[data-v-666d4c10]:has(:focus-visible) {
+&[data-v-640271e0]: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-666d4c10] {
+&.error[data-v-640271e0] {
     border: var(--kds-border-action-error);
     box-shadow: none;
 }
@@ -1465,7 +1485,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-380127b2] {
+&[data-v-92291903] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1477,46 +1497,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-380127b2]:has(input:focus:not(:disabled)) {
+&[data-v-92291903]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-380127b2]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-92291903]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-380127b2] {
+&.error[data-v-92291903] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-380127b2] {
+&.disabled[data-v-92291903] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-380127b2] {
+&[data-v-92291903] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-380127b2] {
+&.leading[data-v-92291903] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-380127b2] {
+&.trailing[data-v-92291903] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-380127b2] {
+.container.disabled &[data-v-92291903] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-380127b2],
-  .container:has(.input-field.has-value) &[data-v-380127b2] {
+.container:focus-within &[data-v-92291903],
+  .container:has(.input-field.has-value) &[data-v-92291903] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-380127b2] {
+&[data-v-92291903] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1535,33 +1555,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-380127b2] {
+&[data-v-92291903] {
     appearance: textfield;
 }
-&[data-v-380127b2]::-webkit-outer-spin-button,
-    &[data-v-380127b2]::-webkit-inner-spin-button {
+&[data-v-92291903]::-webkit-outer-spin-button,
+    &[data-v-92291903]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-380127b2]::-webkit-search-cancel-button {
+&[type="search"][data-v-92291903]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-380127b2]::placeholder {
+&[data-v-92291903]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-380127b2] {
+&[data-v-92291903] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-380127b2]::placeholder {
+&[data-v-92291903]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-380127b2] {
+&[data-v-92291903] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1571,26 +1591,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-380127b2] {
+&.placeholder[data-v-92291903] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-380127b2] {
+&.disabled[data-v-92291903] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-380127b2] {
+.container:focus-within &[data-v-92291903] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-380127b2] {
+.clear-button[data-v-92291903] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-380127b2] {
+.leading-slot[data-v-92291903] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-380127b2] {
+.trailing-slot[data-v-92291903] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1598,14 +1618,14 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-e06ba773] {
+.kds-text-input-suggestions[data-v-1740ce83] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-color-picker[data-v-2a488ace] {
+.kds-color-picker[data-v-74392b20] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1x);
@@ -1616,7 +1636,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.colorspace[data-v-2a488ace] {
+.colorspace[data-v-74392b20] {
   position: relative;
   width: 100%;
   height: 200px;
@@ -1624,7 +1644,7 @@ html.kds-legacy {
   outline: none;
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.handle[data-v-2a488ace] {
+.handle[data-v-74392b20] {
   position: absolute;
   width: var(--kds-dimension-icon-0-75x);
   height: var(--kds-dimension-icon-0-75x);
@@ -1635,7 +1655,7 @@ html.kds-legacy {
   transform: translate(-50%, -50%);
 }
 .hue {
-&[data-v-2a488ace] {
+&[data-v-74392b20] {
   position: relative;
   width: 100%;
   height: var(--kds-dimension-component-height-0-75x);
@@ -1653,18 +1673,18 @@ html.kds-legacy {
   );
   border-radius: var(--kds-border-radius-container-pill);
   }
-& .handle[data-v-2a488ace] {
+& .handle[data-v-74392b20] {
     top: 50%;
 }
 }
-.colorspace[data-v-2a488ace]:focus,
-.hue[data-v-2a488ace]:focus {
+.colorspace[data-v-74392b20]:focus,
+.hue[data-v-74392b20]:focus {
   outline: none;
 }
-.colorspace:focus .handle[data-v-2a488ace],
-.colorspace:focus-visible .handle[data-v-2a488ace],
-.hue:focus .handle[data-v-2a488ace],
-.hue:focus-visible .handle[data-v-2a488ace] {
+.colorspace:focus .handle[data-v-74392b20],
+.colorspace:focus-visible .handle[data-v-74392b20],
+.hue:focus .handle[data-v-74392b20],
+.hue:focus-visible .handle[data-v-74392b20] {
   outline: var(--kds-border-action-focused);
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
@@ -3118,14 +3138,14 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-622ba27e] {
+.kds-search-results-container[data-v-580aa83e] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
 textarea {
-&[data-v-7a6592b5] {
+&[data-v-bdf12ef9] {
   box-sizing: border-box;
   width: 100%;
   padding: calc(
@@ -3142,37 +3162,37 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-7a6592b5] {
+&.invalid[data-v-bdf12ef9] {
     border: var(--kds-border-action-error);
 }
-&[data-v-7a6592b5]::placeholder {
+&[data-v-bdf12ef9]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-7a6592b5] {
+&[data-v-bdf12ef9] {
     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-7a6592b5]::placeholder {
+&[data-v-bdf12ef9]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-7a6592b5]:hover:not(:disabled, :focus) {
+&[data-v-bdf12ef9]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-7a6592b5]:focus:not(:disabled) {
+&[data-v-bdf12ef9]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-7a6592b5]::-webkit-scrollbar {
+textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   display: none;
 }
 
 .kds-dropdown-trigger-button {
-&[data-v-bdb9c0d3] {
+&[data-v-cf3becf9] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -3186,24 +3206,24 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-bdb9c0d3]:focus-visible {
+&[data-v-cf3becf9]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&.error[data-v-bdb9c0d3] {
+&.error[data-v-cf3becf9] {
     border: var(--kds-border-action-error);
 }
-&[data-v-bdb9c0d3]:disabled {
+&[data-v-cf3becf9]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
-&[data-v-bdb9c0d3]:not(:disabled, :focus):hover {
+&[data-v-cf3becf9]:not(:disabled, :focus):hover {
     background: var(--kds-color-background-input-hover);
 }
 }
-.leading[data-v-bdb9c0d3] {
+.leading[data-v-cf3becf9] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -3212,7 +3232,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 .text {
-&[data-v-bdb9c0d3] {
+&[data-v-cf3becf9] {
   flex: 1 0 0;
   min-width: 0;
   padding: var(--kds-spacing-container-0-25x);
@@ -3221,14 +3241,14 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   text-align: left;
   white-space: nowrap;
 }
-&.placeholder[data-v-bdb9c0d3] {
+&.placeholder[data-v-cf3becf9] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.missing[data-v-bdb9c0d3] {
+&.missing[data-v-cf3becf9] {
     color: var(--kds-color-text-and-icon-danger);
 }
 }
-.trailing[data-v-bdb9c0d3] {
+.trailing[data-v-cf3becf9] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -3260,7 +3280,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .kds-list-item-button {
-&[data-v-ba674605] {
+&[data-v-13945d12] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
@@ -3277,31 +3297,31 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-.label[data-v-ba674605] {
+.label[data-v-13945d12] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&[data-v-ba674605]:disabled {
+&[data-v-13945d12]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
 }
-&[data-v-ba674605]:focus-visible:not(:disabled) {
+&[data-v-13945d12]:focus-visible:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-ba674605]:hover:not(:disabled) {
+&[data-v-13945d12]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-ba674605]:active:not(:disabled) {
+&[data-v-13945d12]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 }
 
-.kds-multi-select-dropdown-options[data-v-be1b84c3] {
+.kds-multi-select-dropdown-options[data-v-9b631765] {
   display: flex;
   flex-direction: column;
   min-width: var(--kds-dimension-component-width-12x);
@@ -3309,23 +3329,147 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-multi-select-dropdown-search[data-v-be1b84c3] {
+.kds-multi-select-dropdown-search[data-v-9b631765] {
   padding: var(--kds-spacing-container-0-25x);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-multi-select-dropdown-list {
-&[data-v-be1b84c3] {
+&[data-v-9b631765] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-be1b84c3] {
+&.multiline[data-v-9b631765] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
-.kds-multi-select-dropdown-footer[data-v-be1b84c3] {
+.kds-multi-select-dropdown-footer[data-v-9b631765] {
   padding: var(--kds-spacing-container-0-25x);
   border-top: var(--kds-border-base-subtle);
 }
 
+.kds-resize-handle-area[data-v-df3803d4] {
+  display: flex;
+  gap: var(--v1dcb931e);
+  justify-content: space-around;
+}
+.kds-resize-handle {
+&[data-v-df3803d4] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--v4bcf7fe4);
+  block-size: calc(2 * var(--kds-spacing-container-0-37x));
+  padding: 0;
+  appearance: none;
+  touch-action: none;
+  cursor: row-resize;
+  user-select: none;
+  background: none;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  -webkit-touch-callout: none;
+  }
+&[data-v-df3803d4]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+& .kds-resize-handle-line[data-v-df3803d4] {
+    inline-size: 100%;
+    block-size: 0;
+    border-top: var(--kds-border-resize-handle-initial);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:hover > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-hover);
+}
+&:active > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-active);
+}
+}
+.kds-resize-handle-area:hover > .kds-resize-handle > .kds-resize-handle-line[data-v-df3803d4] {
+  border-top: var(--kds-border-resize-handle-hover);
+}
+
+.kds-resize-container {
+&[data-v-403e065b] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+&.dragging[data-v-403e065b] {
+    user-select: none;
+}
+}
+.kds-resize-container-content[data-v-403e065b] {
+  inline-size: 100%;
+}
+
+.kds-multiselect-list-box {
+&[data-v-6266eeb5] {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-block-size: 0;
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-6266eeb5]:has(:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-multiselect-list-box-list {
+&[data-v-6266eeb5] {
+  position: relative;
+  flex-grow: 1;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: calc(
+    var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)
+  );
+  margin: 0;
+  overflow-y: auto;
+}
+&[data-v-6266eeb5]:focus {
+    outline: none;
+}
+}
+.kds-multiselect-list-box-item {
+&[data-v-6266eeb5] {
+  height: var(--kds-dimension-component-height-1-5x);
+  margin-top: var(--kds-spacing-container-0-10x);
+}
+&.kds-multiselect-list-box-item-first[data-v-6266eeb5] {
+    margin-top: 0;
+}
+}
+.kds-multiselect-list-box-content-grid[data-v-6266eeb5] {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
+}
+.kds-multiselect-list-box-content[data-v-6266eeb5] {
+  min-width: 0;
+}
+.kds-multiselect-sticky-bottom[data-v-6266eeb5] {
+  position: sticky;
+  bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  padding: var(--kds-spacing-container-0-25x) 0;
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  background: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-subtle);
+}
+.kds-multiselect-empty[data-v-6266eeb5] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
 .kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
@@ -3337,7 +3481,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-b1e3f011] {
+&[data-v-2e9ef96a] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3358,20 +3502,20 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-b1e3f011] {
+&.hidden[data-v-2e9ef96a] {
     opacity: 0;
 }
-&[data-v-b1e3f011]:focus-visible {
+&[data-v-2e9ef96a]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-b1e3f011]:hover {
+&[data-v-2e9ef96a]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-b1e3f011]:active {
+&[data-v-2e9ef96a]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-b1e3f011] {
+&.selected[data-v-2e9ef96a] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -3401,7 +3545,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-f4f626d4] {
+&[data-v-b6d29842] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3422,27 +3566,27 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-f4f626d4] {
+&.hidden[data-v-b6d29842] {
     opacity: 0;
 }
-&[data-v-f4f626d4]:focus-visible {
+&[data-v-b6d29842]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-f4f626d4]:hover {
+&[data-v-b6d29842]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-f4f626d4]:active {
+&[data-v-b6d29842]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-f4f626d4] {
+&.pressed-or-set[data-v-b6d29842] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
     --icon-color: var(--kds-color-text-and-icon-success);
 }
-&.error[data-v-f4f626d4] {
+&.error[data-v-b6d29842] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
@@ -3572,10 +3716,10 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 }
 
-.kds-tab-icon[data-v-5cb2cbc0] {
+.kds-tab-icon[data-v-d5737ccf] {
   flex-shrink: 0;
 }
-.kds-tab-label[data-v-5cb2cbc0] {
+.kds-tab-label[data-v-d5737ccf] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3583,7 +3727,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   white-space: nowrap;
 }
 .kds-tab {
-&[data-v-5cb2cbc0] {
+&[data-v-d5737ccf] {
   position: relative;
   display: flex;
   align-items: center;
@@ -3594,20 +3738,20 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   background: var(--kds-color-background-neutral-initial);
   border: none;
   }
-&[data-v-5cb2cbc0]:disabled {
+&[data-v-d5737ccf]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
 }
-&[data-v-5cb2cbc0]:focus-visible {
+&[data-v-d5737ccf]: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-5cb2cbc0] {
+&[data-v-d5737ccf] {
     color: var(--kds-color-text-and-icon-selected);
     }
-& .kds-tab-indicator[data-v-5cb2cbc0] {
+& .kds-tab-indicator[data-v-d5737ccf] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -3620,12 +3764,12 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
 }
 }
-&[data-v-5cb2cbc0]:hover:not(:disabled) {
+&[data-v-d5737ccf]:hover:not(:disabled) {
     color: var(--kds-color-text-and-icon-selected);
 }
 }
 .kds-tab-bar-wrapper {
-&[data-v-5cb2cbc0] {
+&[data-v-d5737ccf] {
   --focus-ring-space: calc(
     2px + var(--kds-spacing-offset-focus)
   ); /* outline-width + outline-offset */
@@ -3634,7 +3778,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   display: flow-root;
   overflow: visible;
   }
-&[data-v-5cb2cbc0]::before {
+&[data-v-d5737ccf]::before {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -3646,7 +3790,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 }
 .kds-tab-bar {
-&[data-v-5cb2cbc0] {
+&[data-v-d5737ccf] {
   display: flex;
   flex-wrap: nowrap;
   padding: var(--focus-ring-space);
@@ -3655,36 +3799,36 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   scrollbar-width: none;
   border-radius: var(--kds-border-radius-container-none);
   }
-&[data-v-5cb2cbc0]::-webkit-scrollbar {
+&[data-v-d5737ccf]::-webkit-scrollbar {
     display: none;
 }
-&:not(.kds-tab-bar-full-width) .kds-tab[data-v-5cb2cbc0] {
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-d5737ccf] {
     flex: 0 1 auto;
-    min-width: var(--v6a57ab00);
+    min-width: var(--c97fca9c);
 }
-&.kds-tab-bar-large .kds-tab-label[data-v-5cb2cbc0] {
+&.kds-tab-bar-large .kds-tab-label[data-v-d5737ccf] {
     font: var(--kds-font-base-interactive-large-strong);
 }
-&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-5cb2cbc0] {
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-d5737ccf] {
     font: var(--kds-font-base-title-large);
 }
 &.kds-tab-bar-small,
   &.kds-tab-bar-large {
-& .kds-tab-selected .kds-tab-icon[data-v-5cb2cbc0] {
+& .kds-tab-selected .kds-tab-icon[data-v-d5737ccf] {
       color: var(--kds-color-text-and-icon-selected);
 }
 }
-&.kds-tab-bar-small .kds-tab[data-v-5cb2cbc0] {
+&.kds-tab-bar-small .kds-tab[data-v-d5737ccf] {
     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-5cb2cbc0] {
+&.kds-tab-bar-large .kds-tab[data-v-d5737ccf] {
     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-5cb2cbc0] {
+&.kds-tab-bar-full-width .kds-tab[data-v-d5737ccf] {
     flex: 1;
     justify-content: center;
     width: 100%;
@@ -3692,7 +3836,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .modal-header {
-&[data-v-b2e57108] {
+&[data-v-62740dc9] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -3701,12 +3845,12 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-headline[data-v-b2e57108] {
+& .modal-header-headline[data-v-62740dc9] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-b2e57108] {
+&[data-v-62740dc9] {
   --modal-padding-left: var(--kds-spacing-container-1-5x);
   --modal-padding-right: var(--kds-spacing-container-1-5x);
   --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -3716,17 +3860,17 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v55fe64da);
+  overflow: var(--v81addf0a);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-b2e57108] {
+&[data-variant="padded"][data-v-62740dc9] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
 }
 }
-.modal-footer[data-v-b2e57108] {
+.modal-footer[data-v-62740dc9] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -3739,7 +3883,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-5a8d7ce3] {
+&[data-v-f4a6776f] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -3751,7 +3895,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v073dd16a);
+  overflow: var(--v5b2d4b6a);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -3768,55 +3912,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-5a8d7ce3] {
+&.width-small[data-v-f4a6776f] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-5a8d7ce3] {
+&.width-medium[data-v-f4a6776f] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-5a8d7ce3] {
+&.width-large[data-v-f4a6776f] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-5a8d7ce3] {
+&.width-xlarge[data-v-f4a6776f] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-5a8d7ce3] {
+&.width-full[data-v-f4a6776f] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-5a8d7ce3] {
+&.height-full[data-v-f4a6776f] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-5a8d7ce3] {
+&.height-auto[data-v-f4a6776f] {
     --modal-height: fit-content;
 }
-&[data-v-5a8d7ce3]:not([open]) {
+&[data-v-f4a6776f]:not([open]) {
     display: none;
 }
-&[data-v-5a8d7ce3]:focus-visible,
-  &[data-v-5a8d7ce3]:focus {
+&[data-v-f4a6776f]:focus-visible,
+  &[data-v-f4a6776f]:focus {
     outline: none;
 }
-&[data-v-5a8d7ce3]::backdrop {
+&[data-v-f4a6776f]::backdrop {
     background: var(--kds-color-blanket-default);
     opacity: 0;
     transition: var(--modal-animation-time) allow-discrete;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-property: display, opacity, overlay;
 }
-&[open][data-v-5a8d7ce3]::backdrop {
+&[open][data-v-f4a6776f]::backdrop {
     opacity: 1;
 }
-&[open][data-v-5a8d7ce3] {
+&[open][data-v-f4a6776f] {
     opacity: 1;
     transform: scale(1);
 }
@@ -3825,18 +3969,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-5a8d7ce3] {
+&[data-v-f4a6776f] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-5a8d7ce3] {
+&[open][data-v-f4a6776f] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-5a8d7ce3]::backdrop {
+&[data-v-f4a6776f]::backdrop {
       opacity: 1;
 }
-&[open][data-v-5a8d7ce3]::backdrop {
+&[open][data-v-f4a6776f]::backdrop {
       opacity: 0;
 }
 }