@knime/kds-components 0.16.0 → 0.17.0

package/dist/index.css

@@ -277,8 +277,9 @@
 }
 
 .kds-live-status {
-&[data-v-4dec8e94] {
-  --dot-color: var(--kds-color-text-and-icon-disabled);
+&[data-v-3bd44b22] {
+  --dot-color: var(--kds-color-state-disabled);
+  --dot-border-color: var(--kds-color-state-disabled-border);
 
   display: inline-flex;
   flex-shrink: 0;
@@ -287,17 +288,20 @@
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-4dec8e94] {
-    --dot-color: var(--kds-color-text-and-icon-danger);
+&.red[data-v-3bd44b22] {
+    --dot-color: var(--kds-color-state-error);
+    --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-4dec8e94] {
-    --dot-color: var(--kds-color-text-and-icon-warning);
+&.orange[data-v-3bd44b22] {
+    --dot-color: var(--kds-color-state-warning);
+    --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-4dec8e94] {
-    --dot-color: var(--kds-color-text-and-icon-success);
+&.green[data-v-3bd44b22] {
+    --dot-color: var(--kds-color-state-success);
+    --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-4dec8e94] {
+&[data-v-3bd44b22] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -305,16 +309,19 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-4dec8e94]::after {
+&[data-v-3bd44b22]::after {
       display: block;
       width: 50%;
       height: 50%;
       content: "";
       background-color: var(--dot-color);
+      border-color: var(--dot-border-color);
+      border-style: solid;
+      border-width: var(--kds-border-width-icon-stroke-l);
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-4dec8e94] {
+.label[data-v-3bd44b22] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -322,20 +329,26 @@
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-4dec8e94] {
+.dot[data-v-3bd44b22] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-.label[data-v-4dec8e94] {
+&[data-v-3bd44b22]::after {
+      border-width: var(--kds-border-width-icon-stroke-m);
+}
+.label[data-v-3bd44b22] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-4dec8e94] {
+.dot[data-v-3bd44b22] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-.label[data-v-4dec8e94] {
+&[data-v-3bd44b22]::after {
+      border-width: var(--kds-border-width-icon-stroke-s);
+}
+.label[data-v-3bd44b22] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -729,227 +742,566 @@ html.kds-legacy {
   opacity: 1;
 }
 
-.kds-label-wrapper[data-v-1a5dc1ba] {
+.kds-empty-state[data-v-02149081] {
   display: flex;
-  gap: var(--kds-spacing-container-0-12x);
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
   align-items: center;
-  max-width: 100%;
-  min-height: var(--kds-dimension-component-height-0-75x);
-  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
-}
-.label[data-v-1a5dc1ba] {
-  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;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
 }
-
-.subtext {
-&[data-v-df9a85a4] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  min-height: 1lh;
-  margin-top: var(--kds-spacing-container-0-25x);
-  font: var(--kds-font-base-subtext-small);
+.kds-empty-state-headline[data-v-02149081] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
 }
-&.error[data-v-df9a85a4] {
-    color: var(--kds-color-text-and-icon-danger);
-}
-& .subtext-text[data-v-df9a85a4] {
-    min-width: 0;
+.kds-empty-state-description[data-v-02149081] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
 }
+.kds-empty-state-action[data-v-02149081] {
+  margin-top: var(--kds-spacing-container-0-12x);
 }
 
-.checkbox {
-&[data-v-32f17780] {
-  --bg-initial: var(--kds-color-background-input-initial);
-  --bg-hover: var(--kds-color-background-input-hover);
-  --bg-active: var(--kds-color-background-input-active);
-  --border: var(--kds-border-action-input);
-  --icon-color: var(--kds-color-text-and-icon-selected);
-  --text-color: var(--kds-color-text-and-icon-neutral);
-  --helper-text-color: var(--kds-color-text-and-icon-muted);
-
+.kds-list-item {
+&[data-v-7fba4bc1] {
+  position: relative;
   display: flex;
-  gap: var(--kds-spacing-container-0-37x);
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  text-align: left;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
   cursor: pointer;
-  outline: none;
-  background: none;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
   border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
 }
-.control[data-v-32f17780] {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: var(--kds-dimension-component-height-0-88x);
-    height: var(--kds-dimension-component-height-0-88x);
-    color: var(--icon-color);
-    background: var(--bg-initial);
-    border: var(--border);
-    border-radius: var(--kds-border-radius-container-0-25x);
+&.small {
+&[data-v-7fba4bc1] {
+    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);
 }
-&:focus-visible .control[data-v-32f17780] {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
+.accessory[data-v-7fba4bc1] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
 }
-&:hover:not(.disabled) .control[data-v-32f17780] {
-    background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-32f17780] {
-    background: var(--bg-active);
+&.large {
+&[data-v-7fba4bc1] {
+    font: var(--kds-font-base-interactive-small-strong);
+}
+.accessory[data-v-7fba4bc1] {
+      display: flex;
+      align-items: center;
 }
-&.checked[data-v-32f17780],
-  &.indeterminate[data-v-32f17780] {
-    --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-7fba4bc1] {
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
-    text-rendering: geometricprecision;
-}
-& .label[data-v-32f17780] {
-      font: var(--kds-font-base-interactive-small);
-      color: var(--text-color);
-}
-& .helper-text[data-v-32f17780] {
-      font: var(--kds-font-base-subtext-small);
-      color: var(--helper-text-color);
-}
-}
-&.disabled[data-v-32f17780] {
-    --border: var(--kds-border-action-disabled);
-    --icon-color: var(--kds-color-text-and-icon-disabled);
-    --text-color: var(--kds-color-text-and-icon-disabled);
-    --helper-text-color: var(--kds-color-text-and-icon-disabled);
-
-    cursor: default;
-}
-&.error {
-&[data-v-32f17780] {
-    --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] {
-      --bg-initial: var(--kds-color-background-danger-initial);
+    min-width: 0;
 }
+.large &[data-v-7fba4bc1] {
+      justify-content: center;
+      min-height: calc(
+        var(--kds-dimension-component-height-2-5x) - 2 *
+          var(--kds-spacing-container-0-25x)
+      );
 }
+.label {
+&[data-v-7fba4bc1] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 }
-.subtext-wrapper[data-v-32f17780] {
-  padding-left: calc(
-    var(--kds-dimension-component-height-0-88x) +
-      var(--kds-spacing-container-0-37x)
-  );
+.prefix[data-v-7fba4bc1] {
+        flex-shrink: 0;
 }
-
-.checkbox-group[data-v-c38eeda5] {
-  padding: 0;
-  margin: 0;
-  border: none;
+.special[data-v-7fba4bc1] {
+        font: var(--kds-font-base-interactive-small-italic);
 }
-.options[data-v-c38eeda5] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
-.options.horizontal[data-v-c38eeda5] {
-  flex-flow: row wrap;
-  align-items: flex-start;
+.subtext[data-v-7fba4bc1] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-small);
+      color: var(--kds-color-text-and-icon-muted);
+      -webkit-box-orient: vertical;
 }
-
-.radio {
-&[data-v-27c361e4] {
-  --bg-initial: var(--kds-color-background-input-initial);
-  --bg-hover: var(--kds-color-background-input-hover);
-  --bg-active: var(--kds-color-background-input-active);
-  --border: var(--kds-border-action-input);
-  --dot-color: var(--kds-color-text-and-icon-selected);
-  --text-color: var(--kds-color-text-and-icon-neutral);
-  --helper-text-color: var(--kds-color-text-and-icon-muted);
-
-  display: flex;
-  gap: var(--kds-spacing-container-0-37x);
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  border: none;
 }
-.control[data-v-27c361e4] {
-    position: relative;
+.trailing-item {
+&[data-v-7fba4bc1] {
     display: flex;
     flex-shrink: 0;
+    gap: var(--kds-spacing-container-0-12x);
     align-items: center;
-    justify-content: center;
-    width: var(--kds-dimension-component-height-0-88x);
-    height: var(--kds-dimension-component-height-0-88x);
-    background: var(--bg-initial);
-    border: var(--border);
-    border-radius: 50%;
+    align-self: center;
+    justify-content: flex-end;
 }
-.control .dot[data-v-27c361e4] {
-    display: block;
-    flex-shrink: 0;
-    width: 100%;
-    height: 100%;
+.shortcut[data-v-7fba4bc1] {
+      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;
 }
-.control .dot circle[data-v-27c361e4] {
-    fill: var(--dot-color);
-    transform: scale(0.5);
-    transform-origin: center;
-    transform-box: fill-box;
+.trailing-item-reserve-space[data-v-7fba4bc1] {
+      width: var(--kds-dimension-icon-0-75x);
 }
-&:focus-visible .control[data-v-27c361e4] {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-27c361e4] {
-    background: var(--bg-hover);
+&[data-v-7fba4bc1]:hover:not(.disabled),
+  &.active[data-v-7fba4bc1]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
 }
-&:active:not(.disabled) .control[data-v-27c361e4] {
-    background: var(--bg-active);
+&[data-v-7fba4bc1]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
 }
-&.selected[data-v-27c361e4] {
-    --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);
+&.selected {
+&[data-v-7fba4bc1] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
 }
-.content {
-&[data-v-27c361e4] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kds-spacing-container-0-25x);
+.subtext[data-v-7fba4bc1] {
+      color: var(--kds-color-text-and-icon-selected);
 }
-& .label[data-v-27c361e4] {
-      font: var(--kds-font-base-interactive-small);
-      color: var(--text-color);
+&[data-v-7fba4bc1]:hover,
+    &.active[data-v-7fba4bc1] {
+      background: var(--kds-color-background-selected-hover);
 }
-& .helper-text[data-v-27c361e4] {
-      font: var(--kds-font-base-subtext-small);
-      color: var(--helper-text-color);
+&[data-v-7fba4bc1]:active {
+      background: var(--kds-color-background-selected-active);
+}
+&.disabled[data-v-7fba4bc1] {
+      background: var(--kds-color-background-selected-initial);
+}
+}
+&.missing {
+&[data-v-7fba4bc1] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
+}
+.subtext[data-v-7fba4bc1] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&[data-v-7fba4bc1]:hover,
+    &.active[data-v-7fba4bc1] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-7fba4bc1]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-7fba4bc1] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-7fba4bc1] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-7fba4bc1],
+    .subtext[data-v-7fba4bc1] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-list-item-divider[data-v-3ee92695] {
+  width: 100%;
+  padding: 0;
+  margin: 0 0 var(--kds-spacing-container-0-12x);
+  border: none;
+  border-bottom: var(--kds-border-base-subtle);
+}
+
+.kds-list-item-section-title {
+&[data-v-53382531] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.icon[data-v-53382531] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
+.label[data-v-53382531] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-xsmall);
+    white-space: nowrap;
+}
+}
+
+.kds-list-container {
+&[data-v-e3d86a4e] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+}
+&.standalone[data-v-e3d86a4e] {
+    border: var(--kds-border-base-subtle);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-e3d86a4e]: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-e3d86a4e] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.kds-popover {
+&[data-v-09124386] {
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+
+  /* noinspection CssInvalidFunction */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+}
+&.full-width[data-v-09124386] {
+    min-inline-size: anchor-size(width);
+}
+&.floating.top-right[data-v-09124386] {
+    inset: auto anchor(right) anchor(top) auto;
+    margin: var(--kds-spacing-container-0-25x) 0
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-top-left, --kds-popover-try-bottom-right,
+      --kds-popover-try-bottom-left, --kds-popover-try-top-right;
+}
+&.floating.top-left[data-v-09124386] {
+    inset: auto auto anchor(top) anchor(left);
+    margin: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
+    position-try-fallbacks:
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left,
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
+}
+&.floating.bottom-right[data-v-09124386] {
+    inset: anchor(bottom) anchor(right) auto auto;
+    margin: var(--kds-spacing-container-0-25x) 0
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-bottom-left, --kds-popover-try-top-right,
+      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
+}
+&.floating.bottom-left[data-v-09124386] {
+    inset: anchor(bottom) auto auto anchor(left);
+    margin: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
+    position-try-fallbacks:
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
+}
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-right {
+  inset: auto anchor(right) anchor(top) auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-left {
+  inset: auto auto anchor(top) anchor(left);
+  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
+    var(--kds-spacing-container-0-25x) 0;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-right {
+  inset: anchor(bottom) anchor(right) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-left {
+  inset: anchor(bottom) auto auto anchor(left);
+  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
+    var(--kds-spacing-container-0-25x) 0;
+}
+.kds-popover-default-content[data-v-09124386] {
+  padding: var(--kds-spacing-container-0-75x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.kds-menu-container[data-v-23e9404d] {
+  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-1a5dc1ba] {
+  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-bottom: var(--kds-spacing-input-label-spacing-bottom);
+}
+.label[data-v-1a5dc1ba] {
+  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;
+}
+
+.subtext {
+&[data-v-df9a85a4] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  min-height: 1lh;
+  margin-top: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-text-and-icon-muted);
+}
+&.error[data-v-df9a85a4] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+& .subtext-text[data-v-df9a85a4] {
+    min-width: 0;
+}
+}
+
+.checkbox {
+&[data-v-32f17780] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --icon-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+.control[data-v-32f17780] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    color: var(--icon-color);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:focus-visible .control[data-v-32f17780] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-32f17780] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-32f17780] {
+    background: var(--bg-active);
+}
+&.checked[data-v-32f17780],
+  &.indeterminate[data-v-32f17780] {
+    --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] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    text-rendering: geometricprecision;
+}
+& .label[data-v-32f17780] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-32f17780] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-32f17780] {
+    --border: var(--kds-border-action-disabled);
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+    --helper-text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.error {
+&[data-v-32f17780] {
+    --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] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+}
+}
+}
+.subtext-wrapper[data-v-32f17780] {
+  padding-left: calc(
+    var(--kds-dimension-component-height-0-88x) +
+      var(--kds-spacing-container-0-37x)
+  );
+}
+
+.checkbox-group[data-v-c38eeda5] {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.options[data-v-c38eeda5] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+.options.horizontal[data-v-c38eeda5] {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.radio {
+&[data-v-27c361e4] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --dot-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+.control[data-v-27c361e4] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: 50%;
+}
+.control .dot[data-v-27c361e4] {
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+}
+.control .dot circle[data-v-27c361e4] {
+    fill: var(--dot-color);
+    transform: scale(0.5);
+    transform-origin: center;
+    transform-box: fill-box;
+}
+&:focus-visible .control[data-v-27c361e4] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-27c361e4] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-27c361e4] {
+    background: var(--bg-active);
+}
+&.selected[data-v-27c361e4] {
+    --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] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+& .label[data-v-27c361e4] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-27c361e4] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
 }
 }
 &.disabled[data-v-27c361e4] {
@@ -1058,148 +1410,53 @@ html.kds-legacy {
 }
 &.disabled.selected[data-v-93f3f577] {
     color: var(--kds-color-text-and-icon-disabled);
-    border: var(--kds-border-action-disabled);
-}
-}
-.option-label[data-v-93f3f577] {
-  min-width: 0;
-  padding: 0 var(--kds-spacing-container-0-12x);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: inherit;
-  white-space: nowrap;
-}
-
-.value-switch[data-v-666d4c10] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-.options {
-&[data-v-666d4c10] {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: var(--kds-spacing-container-none);
-  align-items: flex-start;
-  width: fit-content;
-  min-width: 0;
-  max-width: 100%;
-  padding: calc(
-    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
-  );
-  overflow: hidden;
-  background: var(--kds-color-surface-muted);
-  border: var(--kds-border-action-transparent);
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-fake-border-xs-muted);
-  }
-&[data-v-666d4c10]: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] {
-    border: var(--kds-border-action-error);
-    box-shadow: none;
-}
-}
-
-.kds-popover {
-&[data-v-9125d023] {
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  font: inherit;
-  color: inherit;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-
-  /* noinspection CssInvalidFunction */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-}
-&.full-width[data-v-9125d023] {
-    min-inline-size: anchor-size(width);
-}
-&.floating.top-right[data-v-9125d023] {
-    inset: auto anchor(right) anchor(top) auto;
-    margin: var(--kds-spacing-container-0-25x) 0
-      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
-    position-try-fallbacks:
-      --kds-popover-try-top-left, --kds-popover-try-bottom-right,
-      --kds-popover-try-bottom-left, --kds-popover-try-top-right;
-}
-&.floating.top-left[data-v-9125d023] {
-    inset: auto auto anchor(top) anchor(left);
-    margin: var(--kds-spacing-container-0-25x)
-      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
-    position-try-fallbacks:
-      --kds-popover-try-top-right, --kds-popover-try-bottom-left,
-      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
-}
-&.floating.bottom-right[data-v-9125d023] {
-    inset: anchor(bottom) anchor(right) auto auto;
-    margin: var(--kds-spacing-container-0-25x) 0
-      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
-    position-try-fallbacks:
-      --kds-popover-try-bottom-left, --kds-popover-try-top-right,
-      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
-}
-&.floating.bottom-left[data-v-9125d023] {
-    inset: anchor(bottom) auto auto anchor(left);
-    margin: var(--kds-spacing-container-0-25x)
-      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
-    position-try-fallbacks:
-      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
-      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
-}
-}
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
-@position-try --kds-popover-try-top-right {
-  inset: auto anchor(right) anchor(top) auto;
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+    border: var(--kds-border-action-disabled);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
-@position-try --kds-popover-try-top-left {
-  inset: auto auto anchor(top) anchor(left);
-  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
-    var(--kds-spacing-container-0-25x) 0;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
-@position-try --kds-popover-try-bottom-right {
-  inset: anchor(bottom) anchor(right) auto auto;
-  margin: var(--kds-spacing-container-0-25x) 0
-    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+.option-label[data-v-93f3f577] {
+  min-width: 0;
+  padding: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: inherit;
+  white-space: nowrap;
 }
 
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
-@position-try --kds-popover-try-bottom-left {
-  inset: anchor(bottom) auto auto anchor(left);
-  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
-    var(--kds-spacing-container-0-25x) 0;
+.value-switch[data-v-666d4c10] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  border: none;
 }
-.kds-popover-default-content[data-v-9125d023] {
-  padding: var(--kds-spacing-container-0-75x);
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  background-color: var(--kds-color-surface-default);
+.options {
+&[data-v-666d4c10] {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--kds-spacing-container-none);
+  align-items: flex-start;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  padding: calc(
+    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  background: var(--kds-color-surface-muted);
+  border: var(--kds-border-action-transparent);
   border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-elevation-level-3);
+  box-shadow: var(--kds-fake-border-xs-muted);
+  }
+&[data-v-666d4c10]: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] {
+    border: var(--kds-border-action-error);
+    box-shadow: none;
+}
 }
 
 .kds-form-field[data-v-5d99c134] {
@@ -1208,57 +1465,58 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
   display: flex;
   align-items: center;
   width: 100%;
   height: var(--kds-dimension-component-height-1-75x);
-  padding: 0 var(--kds-spacing-container-0-25x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
   cursor: text;
   background: var(--kds-color-background-input-initial);
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-fad4fd1f]:has(input:focus:not(:disabled)) {
+&[data-v-8815d034]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-fad4fd1f]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-8815d034]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-fad4fd1f] {
+&.error[data-v-8815d034] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-fad4fd1f] {
+&.disabled[data-v-8815d034] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-fad4fd1f] {
+&.leading[data-v-8815d034] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-fad4fd1f] {
+&.trailing[data-v-8815d034] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-fad4fd1f] {
+.container.disabled &[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-fad4fd1f],
-  .container:has(.input-field.has-value) &[data-v-fad4fd1f] {
+.container:focus-within &[data-v-8815d034],
+  .container:has(.input-field.has-value) &[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1277,33 +1535,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
     appearance: textfield;
 }
-&[data-v-fad4fd1f]::-webkit-outer-spin-button,
-    &[data-v-fad4fd1f]::-webkit-inner-spin-button {
+&[data-v-8815d034]::-webkit-outer-spin-button,
+    &[data-v-8815d034]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-fad4fd1f]::-webkit-search-cancel-button {
+&[type="search"][data-v-8815d034]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-fad4fd1f]::placeholder {
+&[data-v-8815d034]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-fad4fd1f]::placeholder {
+&[data-v-8815d034]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-fad4fd1f] {
+&[data-v-8815d034] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1313,26 +1571,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-fad4fd1f] {
+&.placeholder[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-fad4fd1f] {
+&.disabled[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-fad4fd1f] {
+.container:focus-within &[data-v-8815d034] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-fad4fd1f] {
+.clear-button[data-v-8815d034] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-fad4fd1f] {
+.leading-slot[data-v-8815d034] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-fad4fd1f] {
+.trailing-slot[data-v-8815d034] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1404,11 +1662,31 @@ html.kds-legacy {
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
 
+.kds-date-time-format-popover[data-v-892448f6] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-date-time-format-popover-list[data-v-892448f6] {
+  width: var(--kds-dimension-component-width-16x);
+  min-width: 100%;
+  max-width: 100%;
+  height: var(--kds-dimension-component-height-12x);
+}
+
 textarea {
-&[data-v-a2df5fed] {
+&[data-v-7a6592b5] {
   box-sizing: border-box;
   width: 100%;
-  padding: var(--kds-spacing-container-0-5x);
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
   overflow: hidden;
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1420,42 +1698,43 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-a2df5fed] {
+&.invalid[data-v-7a6592b5] {
     border: var(--kds-border-action-error);
 }
-&[data-v-a2df5fed]::placeholder {
+&[data-v-7a6592b5]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-a2df5fed] {
+&[data-v-7a6592b5] {
     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-a2df5fed]::placeholder {
+&[data-v-7a6592b5]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-a2df5fed]:hover:not(:disabled, :focus) {
+&[data-v-7a6592b5]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-a2df5fed]:focus:not(:disabled) {
+&[data-v-7a6592b5]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-a2df5fed]::-webkit-scrollbar {
+textarea[data-v-7a6592b5]::-webkit-scrollbar {
   display: none;
 }
 
 .kds-dropdown-trigger-button {
-&[data-v-f1917c48] {
+&[data-v-bdb9c0d3] {
   display: flex;
   align-items: center;
   width: 100%;
   height: var(--kds-dimension-component-height-1-75x);
-  padding: 0 var(--kds-spacing-container-0-25x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   cursor: pointer;
@@ -1463,24 +1742,24 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-f1917c48]:focus-visible {
+&[data-v-bdb9c0d3]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&.error[data-v-f1917c48] {
+&.error[data-v-bdb9c0d3] {
     border: var(--kds-border-action-error);
 }
-&[data-v-f1917c48]:disabled {
+&[data-v-bdb9c0d3]: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-f1917c48]:not(:disabled, :focus):hover {
+&[data-v-bdb9c0d3]:not(:disabled, :focus):hover {
     background: var(--kds-color-background-input-hover);
 }
 }
-.leading[data-v-f1917c48] {
+.leading[data-v-bdb9c0d3] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -1489,7 +1768,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 .text {
-&[data-v-f1917c48] {
+&[data-v-bdb9c0d3] {
   flex: 1 0 0;
   min-width: 0;
   padding: var(--kds-spacing-container-0-25x);
@@ -1498,260 +1777,110 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   text-align: left;
   white-space: nowrap;
 }
-&.placeholder[data-v-f1917c48] {
+&.placeholder[data-v-bdb9c0d3] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.missing[data-v-f1917c48] {
+&.missing[data-v-bdb9c0d3] {
     color: var(--kds-color-text-and-icon-danger);
 }
 }
-.trailing[data-v-f1917c48] {
+.trailing[data-v-bdb9c0d3] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  padding-right: var(--kds-spacing-container-0-12x);
+  padding-right: calc(
+    var(--kds-spacing-container-0-12x) + 2 * var(--kds-core-border-width-xs)
+  );
 }
 
-.kds-empty-state[data-v-02149081] {
+.kds-dropdown-container[data-v-9e62fb49] {
   display: flex;
   flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
 }
-.kds-empty-state-headline[data-v-02149081] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+.kds-dropdown-container-sticky-top[data-v-9e62fb49] {
+  padding: var(--kds-spacing-container-0-25x);
+  background-color: var(--kds-color-surface-default);
+  border-bottom: var(--kds-border-base-subtle);
 }
-.kds-empty-state-description[data-v-02149081] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
+.kds-dropdown-container-list {
+&[data-v-9e62fb49] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-9e62fb49] {
+    max-height: var(--kds-dimension-component-height-20x);
 }
-.kds-empty-state-action[data-v-02149081] {
-  margin-top: var(--kds-spacing-container-0-12x);
 }
 
-.kds-list-item {
-&[data-v-fca25fc2] {
+.kds-list-item-button {
+&[data-v-ba674605] {
   position: relative;
   display: flex;
-  gap: var(--kds-spacing-container-0-5x);
+  gap: var(--kds-spacing-container-0-25x);
   align-items: center;
   width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
   cursor: pointer;
   user-select: none;
   background: var(--kds-color-background-neutral-initial);
   border: none;
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.small {
-&[data-v-fca25fc2] {
-    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-fca25fc2] {
-      display: flex;
-      padding: var(--kds-spacing-container-0-12x) 0;
-}
-}
-&.large {
-&[data-v-fca25fc2] {
-    min-height: var(--kds-dimension-component-height-2-5x);
-    font: var(--kds-font-base-interactive-small-strong);
-}
-.accessory[data-v-fca25fc2] {
-      display: flex;
-      align-items: center;
-}
-}
-.content {
-&[data-v-fca25fc2] {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-width: 0;
-}
-.label {
-&[data-v-fca25fc2] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font: inherit;
-      white-space: nowrap;
-}
-.prefix[data-v-fca25fc2] {
-        flex-shrink: 0;
-}
-.special[data-v-fca25fc2] {
-        font: var(--kds-font-base-interactive-small-italic);
-}
-}
-.subtext[data-v-fca25fc2] {
-      display: -webkit-box;
-      overflow: hidden;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      font: var(--kds-font-base-subtext-small);
-      color: var(--kds-color-text-and-icon-muted);
-      -webkit-box-orient: vertical;
-}
-}
-.trailing-item {
-&[data-v-fca25fc2] {
-    display: flex;
-    flex-shrink: 0;
-    gap: var(--kds-spacing-container-0-12x);
-    align-items: center;
-    align-self: center;
-    justify-content: flex-end;
-}
-.shortcut[data-v-fca25fc2] {
-      flex-shrink: 0;
-      font: var(--kds-font-base-interactive-xsmall-strong);
-      color: var(--kds-color-text-and-icon-muted);
-      text-align: right;
-      white-space: nowrap;
-}
-}
-&[data-v-fca25fc2]:hover:not(.disabled),
-  &.active[data-v-fca25fc2]:not(.disabled) {
-    background: var(--kds-color-background-neutral-hover);
-}
-&[data-v-fca25fc2]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-}
-&.selected {
-&[data-v-fca25fc2] {
-    color: var(--kds-color-text-and-icon-selected);
-    background: var(--kds-color-background-selected-initial);
-}
-.subtext[data-v-fca25fc2] {
-      color: var(--kds-color-text-and-icon-selected);
-}
-&[data-v-fca25fc2]:hover,
-    &.active[data-v-fca25fc2] {
-      background: var(--kds-color-background-selected-hover);
-}
-&[data-v-fca25fc2]:active {
-      background: var(--kds-color-background-selected-active);
-}
-&.disabled[data-v-fca25fc2] {
-      background: var(--kds-color-background-selected-initial);
-}
-}
-&.missing {
-&[data-v-fca25fc2] {
-    color: var(--kds-color-text-and-icon-danger);
-    background: var(--kds-color-background-danger-initial);
-}
-.subtext[data-v-fca25fc2] {
-      color: var(--kds-color-text-and-icon-danger);
-}
-&[data-v-fca25fc2]:hover,
-    &.active[data-v-fca25fc2] {
-      background: var(--kds-color-background-danger-hover);
-}
-&[data-v-fca25fc2]:active {
-      background: var(--kds-color-background-danger-active);
-}
-&.disabled[data-v-fca25fc2] {
-      background: var(--kds-color-background-danger-initial);
-}
-}
-&.disabled {
-&[data-v-fca25fc2] {
-    color: var(--kds-color-text-and-icon-disabled);
-    cursor: default;
-}
-.shortcut[data-v-fca25fc2],
-    .subtext[data-v-fca25fc2] {
-      color: var(--kds-color-text-and-icon-disabled);
-}
-}
-}
-
-.kds-list-item-divider[data-v-3ee92695] {
-  width: 100%;
-  padding: 0;
-  margin: 0 0 var(--kds-spacing-container-0-12x);
-  border: none;
-  border-bottom: var(--kds-border-base-subtle);
-}
-
-.kds-list-item-section-title {
-&[data-v-53382531] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
-  width: 100%;
-  min-height: var(--kds-dimension-component-height-1-5x);
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
-  color: var(--kds-color-text-and-icon-muted);
-}
-.icon[data-v-53382531] {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-}
-.label[data-v-53382531] {
+.label[data-v-ba674605] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    font: var(--kds-font-base-title-xsmall);
     white-space: nowrap;
 }
+&[data-v-ba674605]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
 }
-
-.kds-list-container {
-&[data-v-276a6202] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-10x);
-  padding: var(--kds-spacing-container-0-25x);
-  overflow-y: auto;
-}
-&[data-v-276a6202]:focus-visible {
+&[data-v-ba674605]:focus-visible:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-31x);
 }
+&[data-v-ba674605]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-ba674605]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
 }
-.kds-list-container-empty[data-v-276a6202] {
-  display: flex;
-  justify-content: center;
 }
 
-.kds-dropdown-container[data-v-15e753c9] {
+.kds-multi-select-dropdown-options[data-v-361c57bf] {
   display: flex;
   flex-direction: column;
-  background-color: var(--kds-color-surface-default);
+  min-width: var(--kds-dimension-component-width-12x);
+  background: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-dropdown-container-sticky-top[data-v-15e753c9] {
+.kds-multi-select-dropdown-search[data-v-361c57bf] {
   padding: var(--kds-spacing-container-0-25x);
-  background-color: var(--kds-color-surface-default);
   border-bottom: var(--kds-border-base-subtle);
 }
-.kds-dropdown-container-list {
-&[data-v-15e753c9] {
+.kds-multi-select-dropdown-list {
+&[data-v-361c57bf] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-15e753c9] {
+&.multiline[data-v-361c57bf] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
+.kds-multi-select-dropdown-footer[data-v-361c57bf] {
+  padding: var(--kds-spacing-container-0-25x);
+  border-top: var(--kds-border-base-subtle);
+}
 
 .kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
@@ -1764,7 +1893,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-f98c9924] {
+&[data-v-d865cc89] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -1785,20 +1914,20 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-f98c9924] {
+&.hidden[data-v-d865cc89] {
     opacity: 0;
 }
-&[data-v-f98c9924]:focus-visible {
+&[data-v-d865cc89]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-f98c9924]:hover {
+&[data-v-d865cc89]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-f98c9924]:active {
+&[data-v-d865cc89]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-f98c9924] {
+&.selected[data-v-d865cc89] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -1820,7 +1949,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-1541cbb3] {
+&[data-v-f362911c] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -1841,27 +1970,27 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-1541cbb3] {
+&.hidden[data-v-f362911c] {
     opacity: 0;
 }
-&[data-v-1541cbb3]:focus-visible {
+&[data-v-f362911c]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-1541cbb3]:hover {
+&[data-v-f362911c]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-1541cbb3]:active {
+&[data-v-f362911c]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-1541cbb3] {
+&.pressed-or-set[data-v-f362911c] {
     --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-1541cbb3] {
+&.error[data-v-f362911c] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);