@knime/kds-components 0.25.1 → 0.26.0

package/dist/index.css

@@ -1,48 +1,80 @@
 
 .kds-avatar {
-&[data-v-c90668bf] {
-  position: relative;
+&[data-v-681eadc1] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   vertical-align: middle;
+  outline: 1px solid var(--kds-color-border-muted);
+  outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-c90668bf] {
+&.small[data-v-681eadc1] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-c90668bf] {
+&.medium[data-v-681eadc1] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-c90668bf] {
+&.large[data-v-681eadc1] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-c90668bf] {
+&.xlarge[data-v-681eadc1] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
+&[data-color="red"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-red);
+    background: var(--kds-color-avatar-background-red);
 }
-.kds-avatar[data-v-c90668bf]::after {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  pointer-events: none;
-  content: "";
-  border: var(--kds-border-base-muted);
-  border-radius: inherit;
+&[data-color="orange"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-orange);
+    background: var(--kds-color-avatar-background-orange);
+}
+&[data-color="yellow"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-yellow);
+    background: var(--kds-color-avatar-background-yellow);
+}
+&[data-color="green"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-green);
+    background: var(--kds-color-avatar-background-green);
+}
+&[data-color="teal"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-teal);
+    background: var(--kds-color-avatar-background-teal);
+}
+&[data-color="blue"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-blue);
+    background: var(--kds-color-avatar-background-blue);
+}
+&[data-color="purple"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-purple);
+    background: var(--kds-color-avatar-background-purple);
 }
-.kds-avatar-image[data-v-c90668bf] {
+&[data-color="aquamarine"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-aquamarine);
+    background: var(--kds-color-avatar-background-aquamarine);
+}
+&[data-color="grassgreen"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-grassgreen);
+    background: var(--kds-color-avatar-background-grassgreen);
+}
+&[data-color="brown"][data-v-681eadc1] {
+    color: var(--kds-color-avatar-text-and-icon-brown);
+    background: var(--kds-color-avatar-background-brown);
+}
+}
+.kds-avatar-image[data-v-681eadc1] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-c90668bf] {
+.kds-avatar-initials[data-v-681eadc1] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -50,13 +82,35 @@
   block-size: 100%;
   container-type: inline-size;
   font: var(--kds-font-base-body-small-strong);
-  color: var(--kds-color-text-and-icon-primary-inverted);
+  color: inherit;
   user-select: none;
-  background: var(--kds-color-background-primary-bold-initial);
 }
-.kds-avatar-initials > span[data-v-c90668bf] {
+.kds-avatar-initials > span[data-v-681eadc1] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
+
+.kds-avatar-counter {
+&[data-v-1aef516d] {
+  display: flex;
+  align-items: center;
+  isolation: isolate;
+}
+& .avatars[data-v-1aef516d] {
+    display: flex;
+}
+& .avatar {
+&[data-v-1aef516d] {
+    position: relative;
+}
+&[data-v-1aef516d]:not(:first-child) {
+      margin-left: calc(-1 * var(--kds-spacing-container-0-25x));
+}
+}
+& .more-count[data-v-1aef516d] {
+    margin-left: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+}
+}
 .kds-icon {
 &[data-v-fb124eb6] {
   --icon-width: var(--kds-dimension-icon-1x);
@@ -479,27 +533,27 @@ to {
 }
 
 .donut-container {
-&[data-v-66e88c70] {
+&[data-v-c5a5b387] {
   display: flex;
   gap: var(--kds-spacing-container-0-75x);
   align-items: center;
 }
 & .donut-chart {
-&[data-v-66e88c70] {
+&[data-v-c5a5b387] {
     display: block;
     flex-shrink: 0;
 }
-& .background-circle[data-v-66e88c70] {
+& .background-circle[data-v-c5a5b387] {
       stroke: var(--kds-color-background-static-chart-0);
 }
-& .primary-circle[data-v-66e88c70] {
+& .primary-circle[data-v-c5a5b387] {
       stroke: var(--kds-color-background-static-chart-1);
 }
-& .secondary-circle[data-v-66e88c70] {
+& .secondary-circle[data-v-c5a5b387] {
       stroke: var(--kds-color-background-static-chart-2);
 }
 & .value-wedge {
-&.animate[data-v-66e88c70] {
+&.animate[data-v-c5a5b387] {
         transition:
           stroke-dashoffset 0.5s,
           stroke 0.5s;
@@ -507,20 +561,20 @@ to {
 }
 }
 & .donut-text {
-&[data-v-66e88c70] {
+&[data-v-c5a5b387] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     overflow: hidden;
     color: var(--kds-color-text-and-icon-neutral);
 }
-& .title[data-v-66e88c70] {
+& .title[data-v-c5a5b387] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-title-medium-strong);
       white-space: nowrap;
 }
-& .sub-text[data-v-66e88c70] {
+& .sub-text[data-v-c5a5b387] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -890,7 +944,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -907,36 +961,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     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-def6165b] {
+.accessory[data-v-9625480f] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-def6165b] {
+.accessory[data-v-9625480f] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-def6165b] {
+.large &[data-v-9625480f] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -944,19 +998,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-def6165b] {
+.prefix[data-v-9625480f] {
         flex-shrink: 0;
 }
-.special[data-v-def6165b] {
+.special[data-v-9625480f] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-def6165b] {
+.subtext[data-v-9625480f] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -967,7 +1021,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -975,69 +1029,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-def6165b] {
+.shortcut[data-v-9625480f] {
       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-def6165b] {
+.trailing-item-reserve-space[data-v-9625480f] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-def6165b]:hover:not(.disabled),
-  &.active[data-v-def6165b]:not(.disabled) {
+&[data-v-9625480f]:hover:not(.disabled),
+  &.active[data-v-9625480f]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-def6165b]:active:not(.disabled) {
+&[data-v-9625480f]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-def6165b] {
+.subtext[data-v-9625480f] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-def6165b]:hover,
-    &.active[data-v-def6165b] {
+&[data-v-9625480f]:hover,
+    &.active[data-v-9625480f] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-def6165b]:active {
+&[data-v-9625480f]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-def6165b] {
+&.disabled[data-v-9625480f] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-def6165b] {
+.subtext[data-v-9625480f] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-def6165b]:hover,
-    &.active[data-v-def6165b] {
+&[data-v-9625480f]:hover,
+    &.active[data-v-9625480f] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-def6165b]:active {
+&[data-v-9625480f]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-def6165b] {
+&.disabled[data-v-9625480f] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-def6165b] {
+&[data-v-9625480f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-def6165b],
-    .subtext[data-v-def6165b] {
+.shortcut[data-v-9625480f],
+    .subtext[data-v-9625480f] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -1070,7 +1124,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-69149ee8] {
+&[data-v-76ab9f2c] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1082,7 +1136,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-69149ee8]:focus-visible {
+&[data-v-76ab9f2c]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -1254,7 +1308,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-570992f0] {
+&[data-v-118706ad] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1263,28 +1317,124 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-570992f0] {
+&.standalone[data-v-118706ad] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-570992f0]:focus-visible {
+&[data-v-118706ad]: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-570992f0] {
+.kds-list-container-empty[data-v-118706ad] {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
-.kds-list-item-divider[data-v-570992f0] {
+.kds-list-item-divider[data-v-118706ad] {
   flex-shrink: 0;
   width: 100%;
   padding: 0;
 }
 
+.kds-preview-list[data-v-192cd67d] {
+  display: flex;
+  flex-direction: column;
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-fake-border-xs-muted);
+}
+.kds-preview-list-title-row[data-v-192cd67d] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-height: calc(
+    var(--kds-dimension-component-height-1-25x) + 2 *
+      var(--kds-spacing-container-0-25x)
+  );
+  padding: var(--kds-spacing-container-0-25x);
+  padding-left: var(--kds-spacing-container-0-5x);
+  border-top-left-radius: var(--kds-border-radius-container-0-37x);
+  border-top-right-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-content[data-v-192cd67d] {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+.kds-preview-list-headline[data-v-192cd67d] {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-interactive-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+.kds-preview-list-body[data-v-192cd67d] {
+  display: flex;
+  flex-direction: column;
+  height: calc(
+    var(--kds-dimension-component-height-1-5x) * var(--a5f79e12) +
+      (var(--a5f79e12) - 1) * var(--kds-spacing-container-0-10x) +
+      var(--kds-spacing-container-0-25x) * 2
+  );
+  background: var(--kds-color-surface-default);
+}
+.kds-preview-list-items {
+&[data-v-192cd67d] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  padding: var(--kds-spacing-container-0-25x);
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  }
+&[data-v-192cd67d]: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-preview-list-item {
+&[data-v-192cd67d] {
+  /* Items are non-interactive (preview only): no pointer cursor, no hover
+     highlight, but text remains selectable. */
+  cursor: text;
+  user-select: text;
+  }
+&[data-v-192cd67d]:hover:not(.disabled),
+  &[data-v-192cd67d]:active:not(.disabled) {
+    background: transparent;
+}
+}
+.kds-preview-list-empty[data-v-192cd67d],
+.kds-preview-list-loading[data-v-192cd67d] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+.kds-preview-list-show-hide[data-v-192cd67d] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: var(--kds-spacing-container-0-25x);
+  border-top: var(--kds-border-base-subtle);
+  border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+  border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-toggle[data-v-192cd67d] {
+  width: 100%;
+}
+
 .kds-label-wrapper[data-v-efe3313e] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
@@ -2196,7 +2346,7 @@ html.kds-legacy {
 }
 
 textarea {
-&[data-v-bdf12ef9] {
+&[data-v-8e5a54cf] {
   box-sizing: border-box;
   width: 100%;
   padding: calc(
@@ -2213,32 +2363,32 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-bdf12ef9] {
+&.invalid[data-v-8e5a54cf] {
     border: var(--kds-border-action-error);
 }
-&[data-v-bdf12ef9]::placeholder {
+&[data-v-8e5a54cf]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-bdf12ef9] {
+&[data-v-8e5a54cf] {
     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-bdf12ef9]::placeholder {
+&[data-v-8e5a54cf]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-bdf12ef9]:hover:not(:disabled, :focus) {
+&[data-v-8e5a54cf]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-bdf12ef9]:focus:not(:disabled) {
+&[data-v-8e5a54cf]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-bdf12ef9]::-webkit-scrollbar {
+textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   display: none;
 }
 
@@ -2540,7 +2690,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-ee1c7bd0] {
+&[data-v-2c5e2dda] {
   position: relative;
   display: flex;
   flex: 1;
@@ -2551,19 +2701,19 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.disabled[data-v-ee1c7bd0] {
+&.disabled[data-v-2c5e2dda] {
     border: var(--kds-border-action-disabled);
 }
-&.error[data-v-ee1c7bd0] {
+&.error[data-v-2c5e2dda] {
     border: var(--kds-border-action-error);
 }
-&[data-v-ee1c7bd0]:has(:focus-visible) {
+&[data-v-2c5e2dda]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-ee1c7bd0] {
+&[data-v-2c5e2dda] {
   position: relative;
   flex-grow: 1;
   padding: calc(
@@ -2572,28 +2722,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-ee1c7bd0]:focus {
+&[data-v-2c5e2dda]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-ee1c7bd0] {
+&[data-v-2c5e2dda] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-ee1c7bd0] {
+&.kds-multiselect-list-box-item-first[data-v-2c5e2dda] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-ee1c7bd0] {
+.kds-multiselect-list-box-content-grid[data-v-2c5e2dda] {
   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-ee1c7bd0] {
+.kds-multiselect-list-box-content[data-v-2c5e2dda] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-ee1c7bd0] {
+.kds-multiselect-sticky-bottom[data-v-2c5e2dda] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   min-width: 0;
@@ -2602,7 +2752,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   background: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
 }
-.kds-multiselect-empty[data-v-ee1c7bd0] {
+.kds-multiselect-empty[data-v-2c5e2dda] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -2809,45 +2959,44 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
-.kds-card {
-&[data-v-4607badd] {
-  position: relative;
+.kds-base-card {
+&[data-v-37984e9f] {
+  --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
+  --kds-base-card-primary-action-z-index: 1;
+  --kds-base-card-secondary-action-z-index: 2;
+
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  text-align: start;
-  cursor: pointer;
   outline: none;
   border-style: solid;
-  border-radius: var(--kds-border-radius-container-0-50x);
+  border-radius: var(--kds-base-card-border-radius);
+  isolation: isolate;
   transition:
     background-color 0.2s,
     border-color 0.2s,
     box-shadow 0.2s;
 }
-&[data-v-4607badd]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-56x);
+&[data-v-37984e9f] [data-kds-card-primary-action] {
+    z-index: var(--kds-base-card-primary-action-z-index);
+    border-radius: var(--kds-base-card-border-radius);
 }
-&[data-v-4607badd]:disabled {
-    cursor: default;
+&[data-v-37984e9f] [data-kds-card-secondary-action] {
+    position: relative;
+    z-index: var(--kds-base-card-secondary-action-z-index);
 }
 }
 
 /* Variant: Filled, Value: False */
 .variant-filled {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-surface-default);
   border: var(--kds-border-base-subtle);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -2855,14 +3004,14 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: False */
 .variant-outlined {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-base-muted);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -2870,15 +3019,15 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: False */
 .variant-transparent {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-action-transparent);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     background: var(--kds-color-background-neutral-hover);
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -2886,14 +3035,14 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 
 /* Variant: Filled, Value: True */
 .variant-filled.selected {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -2901,14 +3050,14 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: True */
 .variant-outlined.selected {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -2916,20 +3065,102 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: True */
 .variant-transparent.selected {
-&[data-v-4607badd] {
+&[data-v-37984e9f] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&[data-v-4607badd]:hover:not(:disabled) {
+&:hover.clickable[data-v-37984e9f] {
     background: var(--kds-color-background-selected-initial);
     box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-4607badd]:active:not(:disabled) {
+&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
 }
 
+.kds-clickable-card {
+&[data-v-671dfb5a] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-671dfb5a] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-671dfb5a]:disabled {
+      cursor: default;
+}
+&[data-v-671dfb5a]:focus {
+      outline: none;
+}
+}
+&[data-v-671dfb5a]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-link-card {
+&[data-v-a5b105b2] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-a5b105b2] {
+    position: absolute;
+    inset: 0;
+    text-decoration: none;
+}
+&[data-v-a5b105b2]:focus {
+      outline: none;
+}
+}
+&[data-v-a5b105b2]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-selectable-card {
+&[data-v-80c51086] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-80c51086] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-80c51086]:disabled {
+      cursor: default;
+}
+&[data-v-80c51086]:focus {
+      outline: none;
+}
+}
+&[data-v-80c51086]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
 .kds-panel-header {
 &[data-v-dd28904c] {
   display: flex;
@@ -2952,10 +3183,10 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
-.kds-tab-icon[data-v-d5737ccf] {
+.kds-tab-icon[data-v-91f95f5f] {
   flex-shrink: 0;
 }
-.kds-tab-label[data-v-d5737ccf] {
+.kds-tab-label[data-v-91f95f5f] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2963,7 +3194,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   white-space: nowrap;
 }
 .kds-tab {
-&[data-v-d5737ccf] {
+&[data-v-91f95f5f] {
   position: relative;
   display: flex;
   align-items: center;
@@ -2973,21 +3204,22 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   cursor: pointer;
   background: var(--kds-color-background-neutral-initial);
   border: none;
+  isolation: isolate;
   }
-&[data-v-d5737ccf]:disabled {
+&[data-v-91f95f5f]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
 }
-&[data-v-d5737ccf]:focus-visible {
+&[data-v-91f95f5f]: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-d5737ccf] {
+&[data-v-91f95f5f] {
     color: var(--kds-color-text-and-icon-selected);
     }
-& .kds-tab-indicator[data-v-d5737ccf] {
+& .kds-tab-indicator[data-v-91f95f5f] {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -3000,12 +3232,12 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
 }
 }
-&[data-v-d5737ccf]:hover:not(:disabled) {
+&[data-v-91f95f5f]:hover:not(:disabled) {
     color: var(--kds-color-text-and-icon-selected);
 }
 }
 .kds-tab-bar-wrapper {
-&[data-v-d5737ccf] {
+&[data-v-91f95f5f] {
   --focus-ring-space: calc(
     2px + var(--kds-spacing-offset-focus)
   ); /* outline-width + outline-offset */
@@ -3014,7 +3246,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   display: flow-root;
   overflow: visible;
   }
-&[data-v-d5737ccf]::before {
+&[data-v-91f95f5f]::before {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -3026,7 +3258,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 .kds-tab-bar {
-&[data-v-d5737ccf] {
+&[data-v-91f95f5f] {
   display: flex;
   flex-wrap: nowrap;
   padding: var(--focus-ring-space);
@@ -3035,36 +3267,36 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   scrollbar-width: none;
   border-radius: var(--kds-border-radius-container-none);
   }
-&[data-v-d5737ccf]::-webkit-scrollbar {
+&[data-v-91f95f5f]::-webkit-scrollbar {
     display: none;
 }
-&:not(.kds-tab-bar-full-width) .kds-tab[data-v-d5737ccf] {
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-91f95f5f] {
     flex: 0 1 auto;
-    min-width: var(--c97fca9c);
+    min-width: var(--v09be89a3);
 }
-&.kds-tab-bar-large .kds-tab-label[data-v-d5737ccf] {
+&.kds-tab-bar-large .kds-tab-label[data-v-91f95f5f] {
     font: var(--kds-font-base-interactive-large-strong);
 }
-&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-d5737ccf] {
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-91f95f5f] {
     font: var(--kds-font-base-title-large);
 }
 &.kds-tab-bar-small,
   &.kds-tab-bar-large {
-& .kds-tab-selected .kds-tab-icon[data-v-d5737ccf] {
+& .kds-tab-selected .kds-tab-icon[data-v-91f95f5f] {
       color: var(--kds-color-text-and-icon-selected);
 }
 }
-&.kds-tab-bar-small .kds-tab[data-v-d5737ccf] {
+&.kds-tab-bar-small .kds-tab[data-v-91f95f5f] {
     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-d5737ccf] {
+&.kds-tab-bar-large .kds-tab[data-v-91f95f5f] {
     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-d5737ccf] {
+&.kds-tab-bar-full-width .kds-tab[data-v-91f95f5f] {
     flex: 1;
     justify-content: center;
     width: 100%;
@@ -3386,6 +3618,30 @@ to {
 }
 }
 
+.kds-container-header {
+&[data-v-bbaa1f3b] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
+}
+.actions[data-v-bbaa1f3b],
+  .accessory[data-v-bbaa1f3b] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-37x);
+}
+& h6[data-v-bbaa1f3b] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-large);
+    white-space: nowrap;
+}
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;