@knime/kds-components 0.13.2 → 0.14.0

package/dist/index.css

@@ -1042,13 +1042,108 @@ 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;
 }
 
 .container {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1059,46 +1154,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-375bc2d8]:has(input:focus:not(:disabled)) {
+&[data-v-44072f2e]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-375bc2d8]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-44072f2e]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-375bc2d8] {
+&.error[data-v-44072f2e] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-375bc2d8] {
+&.disabled[data-v-44072f2e] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-375bc2d8] {
+&.leading[data-v-44072f2e] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-375bc2d8] {
+&.trailing[data-v-44072f2e] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-375bc2d8] {
+.container.disabled &[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-375bc2d8],
-  .container:has(.input-field.has-value) &[data-v-375bc2d8] {
+.container:focus-within &[data-v-44072f2e],
+  .container:has(.input-field.has-value) &[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1117,33 +1212,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
     appearance: textfield;
 }
-&[data-v-375bc2d8]::-webkit-outer-spin-button,
-    &[data-v-375bc2d8]::-webkit-inner-spin-button {
+&[data-v-44072f2e]::-webkit-outer-spin-button,
+    &[data-v-44072f2e]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-375bc2d8]::-webkit-search-cancel-button {
+&[type="search"][data-v-44072f2e]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-375bc2d8]::placeholder {
+&[data-v-44072f2e]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-375bc2d8]::placeholder {
+&[data-v-44072f2e]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-375bc2d8] {
+&[data-v-44072f2e] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1153,20 +1248,27 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-375bc2d8] {
+&.placeholder[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-375bc2d8] {
+&.disabled[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-375bc2d8] {
+.container:focus-within &[data-v-44072f2e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-375bc2d8] {
+.clear-button[data-v-44072f2e] {
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.leading-slot[data-v-44072f2e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.trailing-slot[data-v-375bc2d8] {
+.trailing-slot[data-v-44072f2e] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1174,6 +1276,70 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
+.kds-color-picker[data-v-180fafdd] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-1x);
+  width: calc(206px + 2 * var(--kds-spacing-container-0-75x));
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.colorspace[data-v-180fafdd] {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  cursor: crosshair;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.handle[data-v-180fafdd] {
+  position: absolute;
+  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%);
+}
+.hue {
+&[data-v-180fafdd] {
+  position: relative;
+  width: 100%;
+  height: var(--kds-dimension-component-height-0-75x);
+  cursor: pointer;
+  outline: none;
+  background: linear-gradient(
+    90deg,
+    hsl(0deg 100% 50%) 0%,
+    hsl(60deg 100% 50%) 17%,
+    hsl(120deg 100% 50%) 33%,
+    hsl(180deg 100% 50%) 50%,
+    hsl(240deg 100% 50%) 67%,
+    hsl(300deg 100% 50%) 83%,
+    hsl(360deg 100% 50%) 100%
+  );
+  border-radius: var(--kds-border-radius-container-pill);
+  }
+& .handle[data-v-180fafdd] {
+    top: 50%;
+}
+}
+.colorspace[data-v-180fafdd]:focus,
+.hue[data-v-180fafdd]:focus {
+  outline: none;
+}
+.colorspace:focus .handle[data-v-180fafdd],
+.colorspace:focus-visible .handle[data-v-180fafdd],
+.hue:focus .handle[data-v-180fafdd],
+.hue:focus-visible .handle[data-v-180fafdd] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+
 textarea {
 &[data-v-2e4d2d42] {
   box-sizing: border-box;
@@ -1219,101 +1385,6 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   display: 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);
-}
-
-/* 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-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);