@knime/kds-components 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @knime/kds-components
 
+## 1.1.0
+
+### Minor Changes
+
+- ff47623: `KdsInlineMessage`: added an optional `actions` prop for action buttons at the bottom.
+
+### Patch Changes
+
+- 7fe0e7d: KdsModal: Show proper outline when focused
+- 98bbd6a: SLEEK-241: add KdsSideDrawer ported from WAC
+- 6263215: KdsAvatar: fix vertical alignment
+- 8df670c: KdsLinkCard - Set download prop default to undefined
+- 4d69942: KdsValueSwitch: Fix responsive behavior
+  - @knime/kds-styles@1.1.0
+
 ## 1.0.0
 
 ### Minor Changes

package/dist/index.css

@@ -1,6 +1,6 @@
 
 .kds-avatar {
-&[data-v-9e1a5abe] {
+&[data-v-4ce13db9] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
@@ -10,86 +10,86 @@
   outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-9e1a5abe] {
+&.small[data-v-4ce13db9] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-9e1a5abe] {
+&.medium[data-v-4ce13db9] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-9e1a5abe] {
+&.large[data-v-4ce13db9] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-9e1a5abe] {
+&.xlarge[data-v-4ce13db9] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
-&[data-color="red"][data-v-9e1a5abe] {
+&[data-color="red"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-red);
     background: var(--kds-color-avatar-background-red);
 }
-&[data-color="orange"][data-v-9e1a5abe] {
+&[data-color="orange"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-orange);
     background: var(--kds-color-avatar-background-orange);
 }
-&[data-color="yellow"][data-v-9e1a5abe] {
+&[data-color="yellow"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-yellow);
     background: var(--kds-color-avatar-background-yellow);
 }
-&[data-color="green"][data-v-9e1a5abe] {
+&[data-color="green"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-green);
     background: var(--kds-color-avatar-background-green);
 }
-&[data-color="teal"][data-v-9e1a5abe] {
+&[data-color="teal"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-teal);
     background: var(--kds-color-avatar-background-teal);
 }
-&[data-color="blue"][data-v-9e1a5abe] {
+&[data-color="blue"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-blue);
     background: var(--kds-color-avatar-background-blue);
 }
-&[data-color="purple"][data-v-9e1a5abe] {
+&[data-color="purple"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-purple);
     background: var(--kds-color-avatar-background-purple);
 }
-&[data-color="aquamarine"][data-v-9e1a5abe] {
+&[data-color="aquamarine"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-aquamarine);
     background: var(--kds-color-avatar-background-aquamarine);
 }
-&[data-color="grassgreen"][data-v-9e1a5abe] {
+&[data-color="grassgreen"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-grassgreen);
     background: var(--kds-color-avatar-background-grassgreen);
 }
-&[data-color="brown"][data-v-9e1a5abe] {
+&[data-color="brown"][data-v-4ce13db9] {
     color: var(--kds-color-avatar-text-and-icon-brown);
     background: var(--kds-color-avatar-background-brown);
 }
-&[data-color="empty"][data-v-9e1a5abe] {
+&[data-color="empty"][data-v-4ce13db9] {
     color: transparent;
     background-color: var(--kds-color-avatar-background-empty);
 }
 }
-.kds-avatar-image[data-v-9e1a5abe] {
+.kds-avatar-image[data-v-4ce13db9] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-9e1a5abe] {
+.kds-avatar-initials[data-v-4ce13db9] {
   display: flex;
   align-items: center;
   justify-content: center;
   inline-size: 100%;
   block-size: 100%;
   container-type: inline-size;
-  font: var(--kds-font-base-body-small-strong);
+  font: var(--kds-font-base-title-small-strong);
   color: inherit;
   user-select: none;
 }
-.kds-avatar-initials > span[data-v-9e1a5abe] {
+.kds-avatar-initials > span[data-v-4ce13db9] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
@@ -523,63 +523,6 @@ to {
 }
 }
 
-.kds-inline-message {
-&[data-v-c54ea4b4] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: flex-start;
-  padding: calc(
-    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
-  );
-  color: var(--kds-color-text-and-icon-neutral);
-  border-radius: var(--kds-border-radius-container-0-50x);
-}
-.header {
-&[data-v-c54ea4b4] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-25x);
-    align-items: center;
-}
-.icon[data-v-c54ea4b4] {
-      color: var(--icon-color);
-}
-.headline[data-v-c54ea4b4] {
-      font: var(--kds-font-base-title-small-strong);
-}
-}
-.body[data-v-c54ea4b4] {
-    align-self: stretch;
-    padding-left: var(--kds-spacing-container-1x);
-    font: var(--kds-font-base-body-small);
-    color: var(--kds-color-text-and-icon-muted);
-}
-&.info[data-v-c54ea4b4] {
-    --icon-color: var(--kds-color-text-and-icon-info);
-
-    background-color: var(--kds-color-background-static-info-muted);
-    border: var(--kds-border-base-info);
-}
-&.success[data-v-c54ea4b4] {
-    --icon-color: var(--kds-color-text-and-icon-success);
-
-    background-color: var(--kds-color-background-static-success-muted);
-    border: var(--kds-border-base-success);
-}
-&.error[data-v-c54ea4b4] {
-    --icon-color: var(--kds-color-text-and-icon-danger);
-
-    background-color: var(--kds-color-background-static-danger-muted);
-    border: var(--kds-border-base-danger);
-}
-&.warning[data-v-c54ea4b4] {
-    --icon-color: var(--kds-color-text-and-icon-warning);
-
-    background-color: var(--kds-color-background-static-warning-muted);
-    border: var(--kds-border-base-warning);
-}
-}
-
 .kds-missing-value-icon[data-v-df682150] {
   color: var(--kds-color-text-and-icon-danger);
   stroke-width: var(--kds-border-width-icon-stroke-s);
@@ -1373,6 +1316,32 @@ html.kds-legacy {
   flex-shrink: 0;
 }
 
+.kds-button-group-measure[data-v-59d058df] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-59d058df] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-59d058df] {
+    justify-content: flex-start;
+}
+&.right[data-v-59d058df] {
+    justify-content: flex-end;
+}
+&.middle[data-v-59d058df] {
+    justify-content: center;
+}
+}
+
 .kds-empty-state[data-v-e913660a] {
   display: flex;
   flex-direction: column;
@@ -1487,7 +1456,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1499,46 +1468,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
+&[data-v-2e12b7e4]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-2e12b7e4]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-93daa14e] {
+&.error[data-v-2e12b7e4] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-93daa14e] {
+&.disabled[data-v-2e12b7e4] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-93daa14e] {
+&.leading[data-v-2e12b7e4] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-93daa14e] {
+&.trailing[data-v-2e12b7e4] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-93daa14e] {
+.container.disabled &[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-93daa14e],
-  .container:has(.input-field.has-value) &[data-v-93daa14e] {
+.container:focus-within &[data-v-2e12b7e4],
+  .container:has(.input-field.has-value) &[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1557,36 +1526,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
     appearance: textfield;
 }
-&[data-v-93daa14e]::-webkit-outer-spin-button,
-    &[data-v-93daa14e]::-webkit-inner-spin-button {
+&[data-v-2e12b7e4]::-webkit-outer-spin-button,
+    &[data-v-2e12b7e4]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
+&[type="search"][data-v-2e12b7e4]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-93daa14e]::placeholder {
+&[data-v-2e12b7e4]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-93daa14e] {
+&.empty-mask[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-93daa14e]::placeholder {
+&[data-v-2e12b7e4]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-93daa14e] {
+&[data-v-2e12b7e4] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1596,26 +1565,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-93daa14e] {
+&.placeholder[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-93daa14e] {
+&.disabled[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-93daa14e] {
+.container:focus-within &[data-v-2e12b7e4] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-93daa14e] {
+.clear-button[data-v-2e12b7e4] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-93daa14e] {
+.leading-slot[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-93daa14e] {
+.trailing-slot[data-v-2e12b7e4] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -2039,7 +2008,7 @@ table:focus {
   );
 }
 
-.kds-fieldset[data-v-a44731da] {
+.kds-fieldset[data-v-4aa1ba9a] {
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
@@ -2047,7 +2016,7 @@ table:focus {
   margin: 0;
   border: none;
 }
-.kds-fieldset-legend[data-v-a44731da] {
+.kds-fieldset-legend[data-v-4aa1ba9a] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
@@ -2055,12 +2024,13 @@ table:focus {
   min-height: var(--kds-dimension-component-height-0-75x);
   padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-fieldset-content[data-v-a44731da] {
+.kds-fieldset-content[data-v-4aa1ba9a] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
+  max-width: 100%;
 }
-.legend-text[data-v-a44731da] {
+.legend-text[data-v-4aa1ba9a] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
@@ -3682,20 +3652,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-link-card {
-&[data-v-1696fd9e] {
+&[data-v-c7e823e4] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-1696fd9e] {
+&[data-v-c7e823e4] {
     position: absolute;
     inset: 0;
     text-decoration: none;
 }
-&[data-v-1696fd9e]:focus {
+&[data-v-c7e823e4]:focus {
       outline: none;
 }
 }
-&[data-v-1696fd9e]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-c7e823e4]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -4346,6 +4316,69 @@ li {
 }
 }
 
+.kds-inline-message {
+&[data-v-7573041c] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: flex-start;
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
+  color: var(--kds-color-text-and-icon-neutral);
+  border-radius: var(--kds-border-radius-container-0-50x);
+}
+.header {
+&[data-v-7573041c] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+}
+.icon[data-v-7573041c] {
+      color: var(--icon-color);
+}
+.headline[data-v-7573041c] {
+      font: var(--kds-font-base-title-small-strong);
+}
+}
+.body[data-v-7573041c] {
+    align-self: stretch;
+    padding-left: var(--kds-spacing-container-1x);
+    font: var(--kds-font-base-body-small);
+    white-space: pre-line;
+}
+.buttons[data-v-7573041c] {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-1x);
+}
+&.info[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-info);
+
+    background-color: var(--kds-color-background-static-info-muted);
+    border: var(--kds-border-base-info);
+}
+&.success[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-success);
+
+    background-color: var(--kds-color-background-static-success-muted);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-danger);
+
+    background-color: var(--kds-color-background-static-danger-muted);
+    border: var(--kds-border-base-danger);
+}
+&.warning[data-v-7573041c] {
+    --icon-color: var(--kds-color-text-and-icon-warning);
+
+    background-color: var(--kds-color-background-static-warning-muted);
+    border: var(--kds-border-base-warning);
+}
+}
+
 .modal-header {
 &[data-v-36cbff95] {
   display: flex;
@@ -4398,7 +4431,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-5cf0b3d2] {
+&[data-v-1d030523] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -4410,7 +4443,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v94ce1e22);
+  overflow: var(--v36f0df94);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -4427,55 +4460,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-5cf0b3d2] {
+&.width-small[data-v-1d030523] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-5cf0b3d2] {
+&.width-medium[data-v-1d030523] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-5cf0b3d2] {
+&.width-large[data-v-1d030523] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-5cf0b3d2] {
+&.width-xlarge[data-v-1d030523] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-5cf0b3d2] {
+&.width-full[data-v-1d030523] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-5cf0b3d2] {
+&.height-full[data-v-1d030523] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-5cf0b3d2] {
+&.height-auto[data-v-1d030523] {
     --modal-height: fit-content;
 }
-&[data-v-5cf0b3d2]:not([open]) {
+&[data-v-1d030523]:not([open]) {
     display: none;
 }
-&[data-v-5cf0b3d2]:focus-visible,
-  &[data-v-5cf0b3d2]:focus {
-    outline: none;
+&[data-v-1d030523]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-5cf0b3d2]::backdrop {
+&[data-v-1d030523]::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-5cf0b3d2]::backdrop {
+&[open][data-v-1d030523]::backdrop {
     opacity: 1;
 }
-&[open][data-v-5cf0b3d2] {
+&[open][data-v-1d030523] {
     opacity: 1;
     transform: scale(1);
 }
@@ -4484,18 +4517,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-5cf0b3d2] {
+&[data-v-1d030523] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-5cf0b3d2] {
+&[open][data-v-1d030523] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-5cf0b3d2]::backdrop {
+&[data-v-1d030523]::backdrop {
       opacity: 1;
 }
-&[open][data-v-5cf0b3d2]::backdrop {
+&[open][data-v-1d030523]::backdrop {
       opacity: 0;
 }
 }
@@ -4538,29 +4571,44 @@ body:has(dialog.modal[open]) {
     var(--kds-spacing-container-0-25x) 0;
 }
 
-.kds-button-group-measure[data-v-ccdbc564] {
-  position: absolute;
-  display: flex;
-  visibility: hidden;
-  gap: var(--kds-spacing-container-0-5x);
-  white-space: nowrap;
+.kds-side-drawer {
+&[data-v-33b66da9] {
+  inset: 0;
+  width: var(--kds-side-drawer-size);
+  height: 100%;
+  padding: 0;
+
+  /* Reset popover defaults */
+  margin: 0;
+  overflow: visible;
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  box-shadow: var(--kds-elevation-level-3);
+
+  /* Hidden state */
+  transform: translateX(var(--kds-side-drawer-hidden));
+  transition:
+    transform 0.15s ease-in-out,
+    overlay 0.15s ease-in-out allow-discrete,
+    display 0.15s ease-in-out allow-discrete;
+  --kds-side-drawer-hidden: calc(100vw + 28px);
 }
-.kds-button-group {
-&[data-v-ccdbc564] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  }
-&.left[data-v-ccdbc564] {
-    justify-content: flex-start;
+&[data-v-33b66da9]:is([data-width="full"]) {
+    --kds-side-drawer-size: 100%;
 }
-&.right[data-v-ccdbc564] {
-    justify-content: flex-end;
+&[data-v-33b66da9]:is([data-width="default"]) {
+    --kds-side-drawer-size: var(--kds-width-side-drawer-default);
 }
-&.middle[data-v-ccdbc564] {
-    justify-content: center;
+&[data-v-33b66da9]:popover-open {
+    transform: translateX(calc(100vw - var(--kds-side-drawer-size)));
+@starting-style {
+      transform: translateX(var(--kds-side-drawer-hidden));
+}
+}
+}
+@media only screen and (width <= 900px) {
+.kds-side-drawer[data-v-33b66da9] {
+    width: 100%;
 }
 }