@knime/kds-components 0.26.0 → 0.26.2

package/dist/index.css

@@ -1,6 +1,6 @@
 
 .kds-avatar {
-&[data-v-681eadc1] {
+&[data-v-9e1a5abe] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
@@ -10,71 +10,75 @@
   outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-681eadc1] {
+&.small[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-681eadc1] {
+&.medium[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-681eadc1] {
+&.large[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-681eadc1] {
+&.xlarge[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
-&[data-color="red"][data-v-681eadc1] {
+&[data-color="red"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-red);
     background: var(--kds-color-avatar-background-red);
 }
-&[data-color="orange"][data-v-681eadc1] {
+&[data-color="orange"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-orange);
     background: var(--kds-color-avatar-background-orange);
 }
-&[data-color="yellow"][data-v-681eadc1] {
+&[data-color="yellow"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-yellow);
     background: var(--kds-color-avatar-background-yellow);
 }
-&[data-color="green"][data-v-681eadc1] {
+&[data-color="green"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-green);
     background: var(--kds-color-avatar-background-green);
 }
-&[data-color="teal"][data-v-681eadc1] {
+&[data-color="teal"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-teal);
     background: var(--kds-color-avatar-background-teal);
 }
-&[data-color="blue"][data-v-681eadc1] {
+&[data-color="blue"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-blue);
     background: var(--kds-color-avatar-background-blue);
 }
-&[data-color="purple"][data-v-681eadc1] {
+&[data-color="purple"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-purple);
     background: var(--kds-color-avatar-background-purple);
 }
-&[data-color="aquamarine"][data-v-681eadc1] {
+&[data-color="aquamarine"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-aquamarine);
     background: var(--kds-color-avatar-background-aquamarine);
 }
-&[data-color="grassgreen"][data-v-681eadc1] {
+&[data-color="grassgreen"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-grassgreen);
     background: var(--kds-color-avatar-background-grassgreen);
 }
-&[data-color="brown"][data-v-681eadc1] {
+&[data-color="brown"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-brown);
     background: var(--kds-color-avatar-background-brown);
 }
+&[data-color="empty"][data-v-9e1a5abe] {
+    color: transparent;
+    background-color: var(--kds-color-avatar-background-empty);
 }
-.kds-avatar-image[data-v-681eadc1] {
+}
+.kds-avatar-image[data-v-9e1a5abe] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-681eadc1] {
+.kds-avatar-initials[data-v-9e1a5abe] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -85,7 +89,7 @@
   color: inherit;
   user-select: none;
 }
-.kds-avatar-initials > span[data-v-681eadc1] {
+.kds-avatar-initials > span[data-v-9e1a5abe] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
@@ -1339,100 +1343,100 @@ html.kds-legacy {
   padding: 0;
 }
 
-.kds-preview-list[data-v-192cd67d] {
+.kds-preview-list {
+&[data-v-a11103f6] {
   display: flex;
   flex-direction: column;
   background: var(--kds-color-surface-muted);
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-fake-border-xs-muted);
 }
-.kds-preview-list-title-row[data-v-192cd67d] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
-  min-height: calc(
-    var(--kds-dimension-component-height-1-25x) + 2 *
-      var(--kds-spacing-container-0-25x)
-  );
-  padding: var(--kds-spacing-container-0-25x);
-  padding-left: var(--kds-spacing-container-0-5x);
-  border-top-left-radius: var(--kds-border-radius-container-0-37x);
-  border-top-right-radius: var(--kds-border-radius-container-0-37x);
+.kds-preview-list-title-row[data-v-a11103f6] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    min-height: calc(
+      var(--kds-dimension-component-height-1-25x) + 2 *
+        var(--kds-spacing-container-0-25x)
+    );
+    padding: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-0-5x);
+    border-top-left-radius: var(--kds-border-radius-container-0-37x);
+    border-top-right-radius: var(--kds-border-radius-container-0-37x);
 }
-.kds-preview-list-content[data-v-192cd67d] {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
+.kds-preview-list-content[data-v-a11103f6] {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
 }
-.kds-preview-list-headline[data-v-192cd67d] {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-interactive-small-strong);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
+.kds-preview-list-headline[data-v-a11103f6] {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-interactive-small-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
 }
-.kds-preview-list-body[data-v-192cd67d] {
-  display: flex;
-  flex-direction: column;
-  height: calc(
-    var(--kds-dimension-component-height-1-5x) * var(--a5f79e12) +
-      (var(--a5f79e12) - 1) * var(--kds-spacing-container-0-10x) +
-      var(--kds-spacing-container-0-25x) * 2
-  );
-  background: var(--kds-color-surface-default);
+.kds-preview-list-body[data-v-a11103f6] {
+    display: flex;
+    flex-direction: column;
+    height: calc(
+      var(--kds-dimension-component-height-1-5x) * var(--a76a77a8) +
+        (var(--a76a77a8) - 1) * var(--kds-spacing-container-0-10x) +
+        var(--kds-spacing-container-0-25x) * 2
+    );
+    background: var(--kds-color-surface-default);
 }
 .kds-preview-list-items {
-&[data-v-192cd67d] {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-10x);
-  padding: var(--kds-spacing-container-0-25x);
-  margin: 0;
-  overflow-y: auto;
-  list-style: none;
-  }
-&[data-v-192cd67d]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-31x);
+&[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-10x);
+    padding: var(--kds-spacing-container-0-25x);
+    margin: 0;
+    overflow-y: auto;
+    list-style: none;
+}
+&[data-v-a11103f6]:focus-visible {
+      outline: var(--kds-border-action-focused);
+      outline-offset: var(--kds-spacing-offset-focus);
+      border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
 .kds-preview-list-item {
-&[data-v-192cd67d] {
-  /* Items are non-interactive (preview only): no pointer cursor, no hover
-     highlight, but text remains selectable. */
-  cursor: text;
-  user-select: text;
-  }
-&[data-v-192cd67d]:hover:not(.disabled),
-  &[data-v-192cd67d]:active:not(.disabled) {
-    background: transparent;
+&[data-v-a11103f6] {
+    /* Items are non-interactive (preview only): no pointer cursor, no hover
+       highlight, but text remains selectable. */
+    cursor: text;
+    user-select: text;
 }
+&[data-v-a11103f6]:hover:not(.disabled),
+    &[data-v-a11103f6]:active:not(.disabled) {
+      background: transparent;
 }
-.kds-preview-list-empty[data-v-192cd67d],
-.kds-preview-list-loading[data-v-192cd67d] {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
 }
-.kds-preview-list-show-hide[data-v-192cd67d] {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  padding: var(--kds-spacing-container-0-25x);
-  border-top: var(--kds-border-base-subtle);
-  border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
-  border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+.kds-preview-list-empty[data-v-a11103f6],
+  .kds-preview-list-loading[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.kds-preview-list-show-hide {
+&[data-v-a11103f6] {
+    padding: var(--kds-spacing-container-0-25x);
+    border-top: var(--kds-border-base-subtle);
+    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-toggle[data-v-a11103f6] {
+      width: 100%;
+}
 }
-.kds-preview-list-toggle[data-v-192cd67d] {
-  width: 100%;
 }
 
 .kds-label-wrapper[data-v-efe3313e] {

package/dist/index.js

@@ -40,6 +40,9 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
       "brown"
     ];
     const getAvatarColor = (initials) => {
+      if (initials === "") {
+        return "empty";
+      }
       const hash = initials.toUpperCase().split("").reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
       return availableAvatarColors[hash % availableAvatarColors.length];
     };
@@ -58,7 +61,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     const accessibleTitle = computed(() => props.title?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     const displayedInitials = computed(
-      () => props.initials.trim().slice(0, 2).toUpperCase()
+      () => (props.initials ?? "").trim().slice(0, 2).toUpperCase()
     );
     const avatarColor = computed(() => getAvatarColor(displayedInitials.value));
     return (_ctx, _cache) => {
@@ -93,7 +96,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-681eadc1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-9e1a5abe"]]);
 
 const _hoisted_1$_ = ["aria-label"];
 const _hoisted_2$z = { class: "avatars" };
@@ -2964,7 +2967,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   emits: ["update:expanded"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a5f79e12": safeMaxVisibleItems.value
+      "a76a77a8": safeMaxVisibleItems.value
     }));
     const props = createPropsRestProxy(__props, ["loading", "leadingIcon", "trailingButton", "emptyStateHeadline", "maxVisibleItems"]);
     const bodyId = `kds-preview-list-body-${useId()}`;
@@ -3049,7 +3052,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-192cd67d"]]);
+const KdsPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-a11103f6"]]);
 
 const _hoisted_1$H = { class: "kds-label-wrapper" };
 const _hoisted_2$o = ["id", "for", "title"];