@knime/kds-components 0.15.1 → 0.16.1

package/dist/index.css

@@ -196,13 +196,13 @@
 }
 
 .kds-badge {
-&[data-v-5c6c74a8] {
+&[data-v-0dc42bfc] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   border-radius: var(--kds-border-radius-container-pill);
 }
-& .label-wrapper[data-v-5c6c74a8] {
+& .label-wrapper[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.xxsmall[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.xsmall[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.neutral[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.info[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.warning[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.success[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.error[data-v-0dc42bfc] {
     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-5c6c74a8] {
+&.ghost[data-v-0dc42bfc] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: transparent;
     border: var(--kds-border-base-subtle);
@@ -398,7 +398,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-ab9855b7] {
+&[data-v-3d79be7c] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -410,45 +410,45 @@ to {
   border-radius: var(--kds-border-radius-container-0-50x);
 }
 .header {
-&[data-v-ab9855b7] {
+&[data-v-3d79be7c] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: flex-start;
 }
-.icon[data-v-ab9855b7] {
+.icon[data-v-3d79be7c] {
       align-self: flex-start;
       margin-top: var(--kds-spacing-container-0-12x);
       color: var(--icon-color);
 }
-.title[data-v-ab9855b7] {
+.headline[data-v-3d79be7c] {
       font: var(--kds-font-base-title-small-strong);
 }
 }
-.body[data-v-ab9855b7] {
+.body[data-v-3d79be7c] {
     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-ab9855b7] {
+&.info[data-v-3d79be7c] {
     --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-ab9855b7] {
+&.success[data-v-3d79be7c] {
     --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-ab9855b7] {
+&.error[data-v-3d79be7c] {
     --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-ab9855b7] {
+&.warning[data-v-3d79be7c] {
     --icon-color: var(--kds-color-text-and-icon-warning);
 
     background-color: var(--kds-color-background-static-warning-muted);
@@ -729,6 +729,329 @@ html.kds-legacy {
   opacity: 1;
 }
 
+.kds-empty-state[data-v-02149081] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
+}
+.kds-empty-state-headline[data-v-02149081] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-description[data-v-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);
+}
+
+.kds-list-item {
+&[data-v-1d081212] {
+  position: relative;
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.small {
+&[data-v-1d081212] {
+    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-1d081212] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
+}
+}
+&.large {
+&[data-v-1d081212] {
+    min-height: var(--kds-dimension-component-height-2-5x);
+    font: var(--kds-font-base-interactive-small-strong);
+}
+.accessory[data-v-1d081212] {
+      display: flex;
+      align-items: center;
+}
+}
+.content {
+&[data-v-1d081212] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+.label {
+&[data-v-1d081212] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: inherit;
+      white-space: nowrap;
+}
+.prefix[data-v-1d081212] {
+        flex-shrink: 0;
+}
+.special[data-v-1d081212] {
+        font: var(--kds-font-base-interactive-small-italic);
+}
+}
+.subtext[data-v-1d081212] {
+      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-1d081212] {
+    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-1d081212] {
+      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-1d081212]:hover:not(.disabled),
+  &.active[data-v-1d081212]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-1d081212]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-1d081212] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+.subtext[data-v-1d081212] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-1d081212]:hover,
+    &.active[data-v-1d081212] {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-1d081212]:active {
+      background: var(--kds-color-background-selected-active);
+}
+&.disabled[data-v-1d081212] {
+      background: var(--kds-color-background-selected-initial);
+}
+}
+&.missing {
+&[data-v-1d081212] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
+}
+.subtext[data-v-1d081212] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&[data-v-1d081212]:hover,
+    &.active[data-v-1d081212] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-1d081212]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-1d081212] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-1d081212] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-1d081212],
+    .subtext[data-v-1d081212] {
+      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-1178b83b] {
+  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;
+}
+&[data-v-1178b83b]: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-1178b83b] {
+  display: flex;
+  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);
@@ -1107,101 +1430,6 @@ html.kds-legacy {
 }
 }
 
-.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);
-}
-
-/* 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-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);
-  border-radius: var(--kds-border-radius-container-0-37x);
-  box-shadow: var(--kds-elevation-level-3);
-}
-
 .kds-form-field[data-v-5d99c134] {
   display: flex;
   flex-direction: column;
@@ -1513,208 +1741,23 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   padding-right: var(--kds-spacing-container-0-12x);
 }
 
-.kds-empty-state[data-v-b4af30cf] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
-}
-.kds-empty-state-headline[data-v-b4af30cf] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-description[data-v-b4af30cf] {
-  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-b4af30cf] {
-  margin-top: var(--kds-spacing-container-0-12x);
-}
-
-.kds-list-item {
-&[data-v-fca25fc2] {
-  position: relative;
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  width: 100%;
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
-  color: var(--kds-color-text-and-icon-neutral);
-  cursor: pointer;
-  user-select: none;
-  background: var(--kds-color-background-neutral-initial);
-  border: none;
-  border-radius: var(--kds-border-radius-container-0-31x);
-}
-&.small {
-&[data-v-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-container {
-&[data-v-bfdaa003] {
-  display: flex;
-  flex-direction: column;
-  padding: var(--kds-spacing-container-0-25x);
-  overflow-y: auto;
-}
-&[data-v-bfdaa003]: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-bfdaa003] {
-  display: flex;
-  justify-content: center;
-}
-
-.kds-dropdown-container[data-v-dd55ee4d] {
+.kds-dropdown-container[data-v-15e753c9] {
   display: flex;
   flex-direction: column;
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-dropdown-container-sticky-top[data-v-dd55ee4d] {
+.kds-dropdown-container-sticky-top[data-v-15e753c9] {
   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-dd55ee4d] {
+&[data-v-15e753c9] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-dd55ee4d] {
+&.multiline[data-v-15e753c9] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -1730,7 +1773,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);
@@ -1751,20 +1794,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);
@@ -1786,7 +1829,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);
@@ -1807,27 +1850,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);
@@ -1958,7 +2001,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
 }
 
 .modal-header {
-&[data-v-ff11e839] {
+&[data-v-b2e57108] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -1967,12 +2010,12 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-title[data-v-ff11e839] {
+& .modal-header-headline[data-v-b2e57108] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-ff11e839] {
+&[data-v-b2e57108] {
   --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);
@@ -1982,17 +2025,17 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v670bbff1);
+  overflow: var(--v55fe64da);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-ff11e839] {
+&[data-variant="padded"][data-v-b2e57108] {
     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-ff11e839] {
+.modal-footer[data-v-b2e57108] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -2005,7 +2048,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-f7b58ae1] {
+&[data-v-5a8d7ce3] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -2017,7 +2060,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v6fde1eb1);
+  overflow: var(--v073dd16a);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -2034,55 +2077,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-f7b58ae1] {
+&.width-small[data-v-5a8d7ce3] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-f7b58ae1] {
+&.width-medium[data-v-5a8d7ce3] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-f7b58ae1] {
+&.width-large[data-v-5a8d7ce3] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-f7b58ae1] {
+&.width-xlarge[data-v-5a8d7ce3] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-f7b58ae1] {
+&.width-full[data-v-5a8d7ce3] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-f7b58ae1] {
+&.height-full[data-v-5a8d7ce3] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-f7b58ae1] {
+&.height-auto[data-v-5a8d7ce3] {
     --modal-height: fit-content;
 }
-&[data-v-f7b58ae1]:not([open]) {
+&[data-v-5a8d7ce3]:not([open]) {
     display: none;
 }
-&[data-v-f7b58ae1]:focus-visible,
-  &[data-v-f7b58ae1]:focus {
+&[data-v-5a8d7ce3]:focus-visible,
+  &[data-v-5a8d7ce3]:focus {
     outline: none;
 }
-&[data-v-f7b58ae1]::backdrop {
+&[data-v-5a8d7ce3]::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-f7b58ae1]::backdrop {
+&[open][data-v-5a8d7ce3]::backdrop {
     opacity: 1;
 }
-&[open][data-v-f7b58ae1] {
+&[open][data-v-5a8d7ce3] {
     opacity: 1;
     transform: scale(1);
 }
@@ -2091,26 +2134,26 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-f7b58ae1] {
+&[data-v-5a8d7ce3] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-f7b58ae1] {
+&[open][data-v-5a8d7ce3] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-f7b58ae1]::backdrop {
+&[data-v-5a8d7ce3]::backdrop {
       opacity: 1;
 }
-&[open][data-v-f7b58ae1]::backdrop {
+&[open][data-v-5a8d7ce3]::backdrop {
       opacity: 0;
 }
 }
 }
 
-.ask-again[data-v-67e036b5] {
+.ask-again[data-v-41fc8d84] {
   padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-.flush-left[data-v-67e036b5] {
+.flush-left[data-v-41fc8d84] {
   margin-right: auto;
 }