@knime/kds-components 0.30.3 → 0.30.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-components
 
+## 0.30.5
+
+### Patch Changes
+
+- Updated dependencies [a63a3b8]
+  - @knime/kds-styles@0.30.5
+
+## 0.30.4
+
+### Patch Changes
+
+- a3fd80a: Defer mounting the popover contents of `KdsContextMenu`, `KdsColorInput`, `KdsDateTimeFormatInput`, `KdsDropdown`, `KdsInfoToggleButton`, `KdsIntervalInput`, `KdsMenu`, `KdsMenuButton`, `KdsMultiSelectDropdown`, `KdsSearchInput`, `KdsSplitButton`, and `KdsTextInput` until the popover is opened.
+- e81d027: Add KdsToggleSwitch
+- af37b2f: Add KdsDateTimeInput and KdsZonedDateTimeInput
+  - @knime/kds-styles@0.30.4
+
 ## 0.30.3
 
 ### Patch Changes

package/dist/feedback-CSzO39Ck.js

@@ -0,0 +1,23 @@
+import { openBlock, createElementBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 12 12"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M7.191 7.438a.195.195 0 0 0 .179-.228l-.207-1.205.878-.854a.195.195 0 0 0-.108-.332l-1.214-.176-.543-1.097a.196.196 0 0 0-.351 0l-.543 1.097-1.214.176a.194.194 0 0 0-.109.332l.879.854L4.63 7.21a.196.196 0 0 0 .284.205L6 6.846l1.086.57M4.5 9H3a1.5 1.5 0 0 1-1.5-1.5v-4A1.5 1.5 0 0 1 3 2h6a1.5 1.5 0 0 1 1.5 1.5v4A1.5 1.5 0 0 1 9 9H7.5L6 10.5z",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const feedback = { render: render };
+
+export { feedback as default, render };
+//# sourceMappingURL=feedback-CSzO39Ck.js.map

package/dist/feedback-CSzO39Ck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback-CSzO39Ck.js","sources":["../../styles/dist/img/icons/feedback.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  viewBox: \"0 0 12 12\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      d: \"M7.191 7.438a.195.195 0 0 0 .179-.228l-.207-1.205.878-.854a.195.195 0 0 0-.108-.332l-1.214-.176-.543-1.097a.196.196 0 0 0-.351 0l-.543 1.097-1.214.176a.194.194 0 0 0-.109.332l.879.854L4.63 7.21a.196.196 0 0 0 .284.205L6 6.846l1.086.57M4.5 9H3a1.5 1.5 0 0 1-1.5-1.5v-4A1.5 1.5 0 0 1 3 2h6a1.5 1.5 0 0 1 1.5 1.5v4A1.5 1.5 0 0 1 9 9H7.5L6 10.5z\",\n      \"vector-effect\": \"non-scaling-stroke\"\n    }, null, -1)\n  ]))]))\n}\nexport default { render: render }"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX;;AAEO,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AACrC,EAAE,QAAQA,SAAU,EAAE,EAAEC,kBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC9F,IAAIC,kBAAmB,CAAC,MAAM,EAAE;AAChC,MAAM,CAAC,EAAE,uVAAuV;AAChW,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,iBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}

package/dist/index.css

@@ -1352,24 +1352,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-8f48b87a] {
+&[data-v-ebc30e66] {
   display: flex;
 }
-&.filled[data-v-8f48b87a] {
+&.filled[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-8f48b87a] {
+&.outlined[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-8f48b87a] {
+& .kds-split-button-primary.outlined[data-v-ebc30e66] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-8f48b87a] {
+.kds-split-button-primary[data-v-ebc30e66] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-8f48b87a] {
+.kds-split-button-secondary[data-v-ebc30e66] {
   flex-shrink: 0;
 }
 
@@ -1623,7 +1623,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-83f45d15] {
+.kds-text-input-suggestions[data-v-dd35e2a4] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -2081,6 +2081,144 @@ table:focus {
   align-items: flex-start;
 }
 
+.toggle-switch {
+&[data-v-417fc16d] {
+  --bg-initial: var(--kds-color-background-neutral-bold-initial);
+  --bg-hover: var(--kds-color-background-neutral-bold-hover);
+  --bg-active: var(--kds-color-background-neutral-bold-active);
+  --border: var(--kds-border-action-input);
+  --knob-color: var(--kds-color-toggle-switch-knob-initial);
+  --icon-color: var(--kds-color-toggle-switch-icon-off);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+&.small[data-v-417fc16d] {
+    font: var(--kds-font-base-title-small);
+}
+&.medium[data-v-417fc16d] {
+    font: var(--kds-font-base-title-medium);
+}
+&.label-right[data-v-417fc16d] {
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.label-top[data-v-417fc16d] {
+    flex-direction: column-reverse;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: flex-start;
+}
+&.small.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.medium.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-5x);
+}
+&.small.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-12x);
+}
+&.medium.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-25x);
+}
+.control[data-v-417fc16d] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-pill);
+    transition:
+      background 0.2s ease,
+      border 0.2s ease;
+}
+&.small .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1-75x);
+    height: var(--kds-dimension-component-height-1x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&.medium .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-2-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&:focus-visible .control[data-v-417fc16d] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-active);
+}
+&.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-primary-bold-initial);
+    --bg-hover: var(--kds-color-background-primary-bold-hover);
+    --bg-active: var(--kds-color-background-primary-bold-active);
+    --border: var(--kds-border-action-primary);
+    --icon-color: var(--kds-color-toggle-switch-icon-on);
+}
+.knob[data-v-417fc16d] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+    background: var(--knob-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-box-shadow-knob);
+    transition:
+      transform 0.2s ease,
+      background 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+.knob[data-v-417fc16d] {
+      transition: none;
+}
+}
+&.small .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.medium .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.checked .knob[data-v-417fc16d] {
+    transform: translateX(100%);
+}
+.content {
+&[data-v-417fc16d] {
+    display: flex;
+    flex-direction: column;
+}
+& .label[data-v-417fc16d] {
+      color: var(--text-color);
+}
+}
+&.disabled[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-default);
+    --border: var(--kds-border-action-disabled);
+    --knob-color: var(--kds-color-toggle-switch-knob-disabled);
+    --icon-color: var(--kds-color-toggle-switch-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.disabled.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-primary);
+    --border: var(--kds-border-action-transparent);
+}
+}
+
 .radio {
 &[data-v-f4f6392a] {
   --bg-initial: var(--kds-color-background-input-initial);
@@ -2658,7 +2796,7 @@ table:focus {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-aec3e3d0] {
+.kds-search-results-container[data-v-8930f00a] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -2790,6 +2928,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-date-time-input[data-v-f2ad3cef] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-dropdown-trigger-button {
 &[data-v-1bb2d375] {
   display: flex;
@@ -2879,6 +3023,17 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-zoned-date-time-input[data-v-7dcebccd] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.date-time-row[data-v-7dcebccd] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-list-item-button {
 &[data-v-21fb5571] {
   position: relative;
@@ -3160,7 +3315,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-2e9ef96a] {
+&[data-v-67a8974e] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3181,20 +3336,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-2e9ef96a] {
+&.hidden[data-v-67a8974e] {
     opacity: 0;
 }
-&[data-v-2e9ef96a]:focus-visible {
+&[data-v-67a8974e]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-2e9ef96a]:hover {
+&[data-v-67a8974e]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-2e9ef96a]:active {
+&[data-v-67a8974e]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-2e9ef96a] {
+&.selected[data-v-67a8974e] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -4239,7 +4394,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-f4a6776f] {
+&[data-v-5cf0b3d2] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -4251,7 +4406,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v5b2d4b6a);
+  overflow: var(--v94ce1e22);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -4268,55 +4423,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-f4a6776f] {
+&.width-small[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-f4a6776f] {
+&.width-medium[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-f4a6776f] {
+&.width-large[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-f4a6776f] {
+&.width-xlarge[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-f4a6776f] {
+&.width-full[data-v-5cf0b3d2] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-f4a6776f] {
+&.height-full[data-v-5cf0b3d2] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-f4a6776f] {
+&.height-auto[data-v-5cf0b3d2] {
     --modal-height: fit-content;
 }
-&[data-v-f4a6776f]:not([open]) {
+&[data-v-5cf0b3d2]:not([open]) {
     display: none;
 }
-&[data-v-f4a6776f]:focus-visible,
-  &[data-v-f4a6776f]:focus {
+&[data-v-5cf0b3d2]:focus-visible,
+  &[data-v-5cf0b3d2]:focus {
     outline: none;
 }
-&[data-v-f4a6776f]::backdrop {
+&[data-v-5cf0b3d2]::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-f4a6776f]::backdrop {
+&[open][data-v-5cf0b3d2]::backdrop {
     opacity: 1;
 }
-&[open][data-v-f4a6776f] {
+&[open][data-v-5cf0b3d2] {
     opacity: 1;
     transform: scale(1);
 }
@@ -4325,18 +4480,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-f4a6776f] {
+&[data-v-5cf0b3d2] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-f4a6776f] {
+&[open][data-v-5cf0b3d2] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-f4a6776f]::backdrop {
+&[data-v-5cf0b3d2]::backdrop {
       opacity: 1;
 }
-&[open][data-v-f4a6776f]::backdrop {
+&[open][data-v-5cf0b3d2]::backdrop {
       opacity: 0;
 }
 }