@knime/kds-components 0.30.3 → 0.30.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @knime/kds-components
 
+## 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/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);