@knime/kds-components 0.22.2 → 0.23.0

package/dist/index.css

@@ -254,23 +254,32 @@
 }
 
 .kds-color-swatch {
-&[data-v-2e300e76] {
+&[data-v-91e0130d] {
   display: inline-block;
   flex-shrink: 0;
   overflow: hidden;
   line-height: 0;
+  background-origin: border-box;
   border: var(--kds-border-base-muted);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.small[data-v-2e300e76] {
+&.small[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
+
     width: var(--kds-dimension-icon-0-75x);
     height: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-2e300e76] {
+&.medium[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
+
     width: var(--kds-dimension-icon-1x);
     height: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-2e300e76] {
+&.large[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(
+      var(--kds-dimension-component-width-1-25x) / 4
+    );
+
     width: var(--kds-dimension-component-width-1-25x);
     height: var(--kds-dimension-component-height-1-25x);
 }
@@ -1165,24 +1174,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-f9ca012e] {
+&[data-v-f72917bd] {
   display: flex;
 }
-&.filled[data-v-f9ca012e] {
+&.filled[data-v-f72917bd] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-f9ca012e] {
+&.outlined[data-v-f72917bd] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-f9ca012e] {
+& .kds-split-button-primary.outlined[data-v-f72917bd] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-f9ca012e] {
+.kds-split-button-primary[data-v-f72917bd] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-f9ca012e] {
+.kds-split-button-secondary[data-v-f72917bd] {
   flex-shrink: 0;
 }
 
@@ -1730,7 +1739,40 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-color-picker[data-v-d2bb72e0] {
+.kds-color-picker-slider {
+&[data-v-f4be2bd4] {
+  position: relative;
+  width: 100%;
+  height: var(--kds-dimension-component-height-0-75x);
+  touch-action: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .handle[data-v-f4be2bd4] {
+    position: absolute;
+    top: 50%;
+    left: var(--v087094b8);
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+    pointer-events: none;
+    border: var(--kds-border-color-picker-handle-initial);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-elevation-level-3);
+    transform: translate(-50%, -50%);
+}
+}
+.kds-color-picker-slider[data-v-f4be2bd4]:focus {
+  outline: none;
+}
+.kds-color-picker-slider:focus .handle[data-v-f4be2bd4],
+.kds-color-picker-slider:focus-visible .handle[data-v-f4be2bd4] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+
+.kds-color-picker[data-v-2daeaa68] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1x);
@@ -1741,15 +1783,17 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.colorspace[data-v-d2bb72e0] {
+.colorspace[data-v-2daeaa68] {
   position: relative;
   width: 100%;
   height: 200px;
+  touch-action: none;
   cursor: crosshair;
+  user-select: none;
   outline: none;
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.handle[data-v-d2bb72e0] {
+.handle[data-v-2daeaa68] {
   position: absolute;
   width: var(--kds-dimension-icon-0-75x);
   height: var(--kds-dimension-icon-0-75x);
@@ -1759,13 +1803,15 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
   transform: translate(-50%, -50%);
 }
-.hue {
-&[data-v-d2bb72e0] {
-  position: relative;
-  width: 100%;
-  height: var(--kds-dimension-component-height-0-75x);
-  cursor: pointer;
+.colorspace[data-v-2daeaa68]:focus {
   outline: none;
+}
+.colorspace:focus .handle[data-v-2daeaa68],
+.colorspace:focus-visible .handle[data-v-2daeaa68] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+.hue[data-v-2daeaa68] {
   background: linear-gradient(
     90deg,
     hsl(0deg 100% 50%) 0%,
@@ -1776,22 +1822,23 @@ html.kds-legacy {
     hsl(300deg 100% 50%) 83%,
     hsl(360deg 100% 50%) 100%
   );
-  border-radius: var(--kds-border-radius-container-pill);
-  }
-& .handle[data-v-d2bb72e0] {
-    top: 50%;
 }
+.alpha[data-v-2daeaa68] {
+  background-image: var(--v535b907d);
+  background-size:
+    100% 100%,
+    calc(var(--kds-dimension-component-height-0-75x) / 2)
+      calc(var(--kds-dimension-component-height-0-75x) / 2);
 }
-.colorspace[data-v-d2bb72e0]:focus,
-.hue[data-v-d2bb72e0]:focus {
-  outline: none;
+.value-inputs {
+&[data-v-2daeaa68] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  }
+&[data-v-2daeaa68] > * {
+    flex: 1 1 0;
+    min-width: 0;
 }
-.colorspace:focus .handle[data-v-d2bb72e0],
-.colorspace:focus-visible .handle[data-v-d2bb72e0],
-.hue:focus .handle[data-v-d2bb72e0],
-.hue:focus-visible .handle[data-v-d2bb72e0] {
-  outline: var(--kds-border-action-focused);
-  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
 
 .vc-popover-content-wrapper {
@@ -3510,7 +3557,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-9fde3128] {
+&[data-v-24af1af0] {
   position: relative;
   display: flex;
   flex: 1;
@@ -3521,13 +3568,19 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-9fde3128]:has(:focus-visible) {
+&.disabled[data-v-24af1af0] {
+    border: var(--kds-border-action-disabled);
+}
+&.error[data-v-24af1af0] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-24af1af0]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-9fde3128] {
+&[data-v-24af1af0] {
   position: relative;
   flex-grow: 1;
   padding: calc(
@@ -3536,28 +3589,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-9fde3128]:focus {
+&[data-v-24af1af0]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-9fde3128] {
+&[data-v-24af1af0] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-9fde3128] {
+&.kds-multiselect-list-box-item-first[data-v-24af1af0] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-9fde3128] {
+.kds-multiselect-list-box-content-grid[data-v-24af1af0] {
   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-9fde3128] {
+.kds-multiselect-list-box-content[data-v-24af1af0] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-9fde3128] {
+.kds-multiselect-sticky-bottom[data-v-24af1af0] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   min-width: 0;
@@ -3566,7 +3619,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-9fde3128] {
+.kds-multiselect-empty[data-v-24af1af0] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3575,7 +3628,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-e05644d2] {
+.kds-twin-list-body[data-v-8a9e1b15] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3583,42 +3636,71 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-e05644d2] {
+&[data-v-8a9e1b15] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-e05644d2] {
+& .kds-list-box[data-v-8a9e1b15] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-e05644d2] {
+.kds-list-header[data-v-8a9e1b15] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-e05644d2] {
+.kds-list-label[data-v-8a9e1b15] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-e05644d2] {
+.kds-list-count[data-v-8a9e1b15] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-e05644d2] {
+.kds-button-column[data-v-8a9e1b15] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);
 }
 
-.kds-twin-list[data-v-c46b28b5] {
+.kds-twin-list[data-v-1a9327b5] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-37x);
 }
 
+.kds-sortable-list-box-wrapper[data-v-ee7b63e2] {
+  display: flex;
+  flex-direction: column;
+}
+.kds-sortable-top-buttons[data-v-ee7b63e2] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--kds-spacing-container-0-75x);
+  padding-bottom: var(--kds-spacing-container-0-37x);
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-sortable-top-buttons-left[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-sortable-footer-buttons[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: center;
+  padding: var(--kds-spacing-container-0-5x) 0;
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+
 .kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
@@ -3865,6 +3947,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
+.kds-panel-header {
+&[data-v-be5bccc5] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+  border-bottom: var(--kds-border-base-muted);
+}
+& h6[data-v-be5bccc5] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-medium-strong);
+    white-space: nowrap;
+}
+& .kds-close-button[data-v-be5bccc5] {
+    flex: 0 0 auto;
+}
+}
+
 .kds-tab-icon[data-v-d5737ccf] {
   flex-shrink: 0;
 }
@@ -4154,6 +4258,15 @@ to {
 }
 }
 
+.kds-panel-button-bar[data-v-aeb00620] {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-5x);
+  background-color: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-muted);
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;
@@ -4311,3 +4424,29 @@ body:has(dialog.modal[open]) {
 .flush-left[data-v-41fc8d84] {
   margin-right: auto;
 }
+
+.kds-button-group-measure[data-v-a945c295] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-a945c295] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-a945c295] {
+    justify-content: flex-start;
+}
+&.right[data-v-a945c295] {
+    justify-content: flex-end;
+}
+&.middle[data-v-a945c295] {
+    justify-content: center;
+}
+}