@knime/kds-components 0.28.2 → 0.28.3

package/dist/index.css

@@ -537,27 +537,27 @@ to {
 }
 
 .donut-container {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
   display: flex;
   gap: var(--kds-spacing-container-0-75x);
   align-items: center;
 }
 & .donut-chart {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
     display: block;
     flex-shrink: 0;
 }
-& .background-circle[data-v-c5a5b387] {
+& .background-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-0);
 }
-& .primary-circle[data-v-c5a5b387] {
+& .primary-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-1);
 }
-& .secondary-circle[data-v-c5a5b387] {
+& .secondary-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-2);
 }
 & .value-wedge {
-&.animate[data-v-c5a5b387] {
+&.animate[data-v-f5faf61c] {
         transition:
           stroke-dashoffset 0.5s,
           stroke 0.5s;
@@ -565,20 +565,20 @@ to {
 }
 }
 & .donut-text {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     overflow: hidden;
     color: var(--kds-color-text-and-icon-neutral);
 }
-& .title[data-v-c5a5b387] {
+& .title[data-v-f5faf61c] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-title-medium-strong);
       white-space: nowrap;
 }
-& .sub-text[data-v-c5a5b387] {
+& .sub-text[data-v-f5faf61c] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -2958,21 +2958,19 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 }
 
-.kds-accordion[data-v-66485734] {
+.kds-accordion[data-v-0beea165] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1-25x);
   width: 100%;
 }
-.kds-accordion-item[data-v-66485734] {
-  display: flex;
-  flex-direction: column;
+.kds-accordion-item[data-v-0beea165] {
   padding: var(--kds-spacing-container-0-25x);
   background: var(--kds-color-surface-muted);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
 .kds-accordion-header {
-&[data-v-66485734] {
+&[data-v-0beea165] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -2984,27 +2982,33 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   color: var(--kds-color-text-and-icon-neutral);
   text-align: left;
   cursor: pointer;
+  list-style: none;
   background: transparent;
   border: none;
   border-radius: var(--kds-border-radius-container-0-25x);
   }
-&[data-v-66485734]:hover {
-    background: var(--kds-color-background-neutral-hover);
+&[data-v-0beea165]::-webkit-details-marker {
+    display: none;
 }
-&[data-v-66485734]:active {
-    background: var(--kds-color-background-neutral-active);
+&[data-v-0beea165]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-66485734]:disabled {
+&:not([aria-disabled="true"]) {
+&[data-v-0beea165]:hover {
+      background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-0beea165]:active {
+      background: var(--kds-color-background-neutral-active);
+}
+}
+&[aria-disabled="true"][data-v-0beea165] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
     background: var(--kds-color-background-neutral-initial);
 }
-&[data-v-66485734]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
 }
-.kds-accordion-headline[data-v-66485734] {
+.kds-accordion-headline[data-v-0beea165] {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -3012,38 +3016,39 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   font: var(--kds-font-base-title-small-strong);
   white-space: nowrap;
 }
-.kds-accordion-headline-container[data-v-66485734] {
+.kds-accordion-headline-container[data-v-0beea165] {
   display: flex;
   flex: 1 1 auto;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   min-width: 0;
 }
-.kds-accordion-content[data-v-66485734] {
+.kds-accordion-content[data-v-0beea165] {
   padding: var(--kds-spacing-container-1x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
 
 .kds-card-header {
-&[data-v-9be14436] {
+&[data-v-09093cc0] {
   display: flex;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
   justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-75x);
   padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
 
   /* push actions to the right if its the only element */
 }
-.actions[data-v-9be14436],
-  .accessory[data-v-9be14436] {
+.actions[data-v-09093cc0],
+  .accessory[data-v-09093cc0] {
     display: flex;
     gap: var(--kds-spacing-container-0-37x);
 }
-.actions[data-v-9be14436] {
+.actions[data-v-09093cc0] {
     margin-left: auto;
 }
-& h6[data-v-9be14436] {
+& h6[data-v-09093cc0] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;

package/dist/index.js

@@ -1033,7 +1033,7 @@ const _hoisted_2$y = ["height", "width", "viewBox"];
 const _hoisted_3$q = ["r", "stroke-width"];
 const _hoisted_4$l = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_5$b = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_6$9 = {
+const _hoisted_6$a = {
   key: 0,
   class: "donut-text"
 };
@@ -1044,7 +1044,6 @@ const _hoisted_8$3 = {
 };
 const radius = 22;
 const innerRadius = 10;
-const backgroundStrokeOffset = 0.5;
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "KdsDonutChart",
   props: {
@@ -1066,10 +1065,6 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
       return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
     });
     const strokeWidth = computed(() => radius - innerRadius);
-    const backgroundStrokeWidth = computed(
-      // to account for rendering inaccuracies the background stroke is slightly smaller than the wedge stroke
-      () => strokeWidth.value - backgroundStrokeOffset
-    );
     const r = computed(() => radius - strokeWidth.value / 2);
     const diameter = computed(() => 2 * radius);
     const viewBox = computed(() => `0 0 ${diameter.value} ${diameter.value}`);
@@ -1105,7 +1100,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             cx: radius,
             cy: radius,
             r: r.value,
-            "stroke-width": backgroundStrokeWidth.value,
+            "stroke-width": strokeWidth.value,
             fill: "transparent"
           }, null, 8, _hoisted_3$q),
           __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
@@ -1133,7 +1128,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             transform: transformWedge.value
           }, null, 10, _hoisted_5$b)) : createCommentVNode("", true)
         ], 8, _hoisted_2$y)),
-        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$a, [
           createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
           __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
@@ -1142,7 +1137,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-c5a5b387"]]);
+const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-f5faf61c"]]);
 
 const _sfc_main$1n = {  };
 
@@ -2043,7 +2038,7 @@ const _hoisted_5$a = {
   key: 0,
   class: "prefix"
 };
-const _hoisted_6$8 = ["title"];
+const _hoisted_6$9 = ["title"];
 const _hoisted_7$2 = { class: "trailing-item" };
 const _hoisted_8$2 = {
   key: 0,
@@ -2136,7 +2131,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             ref: subtextEl,
             class: "subtext",
             title: unref(isSubtextTruncated) ? props.subText : void 0
-          }, toDisplayString(props.subText), 9, _hoisted_6$8)) : createCommentVNode("", true)
+          }, toDisplayString(props.subText), 9, _hoisted_6$9)) : createCommentVNode("", true)
         ]),
         createElementVNode("span", _hoisted_7$2, [
           props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$2, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
@@ -2956,7 +2951,7 @@ const _hoisted_2$r = { class: "kds-preview-list-title-row" };
 const _hoisted_3$m = { class: "kds-preview-list-content" };
 const _hoisted_4$i = { class: "kds-preview-list-headline" };
 const _hoisted_5$9 = ["aria-label"];
-const _hoisted_6$7 = { class: "kds-preview-list-show-hide" };
+const _hoisted_6$8 = { class: "kds-preview-list-show-hide" };
 const DEFAULT_MAX_VISIBLE_ITEMS = 6;
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "KdsPreviewList",
@@ -3043,7 +3038,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         ], 512), [
           [vShow, expanded.value]
         ]),
-        createElementVNode("footer", _hoisted_6$7, [
+        createElementVNode("footer", _hoisted_6$8, [
           createVNode(_sfc_main$1l, {
             class: "kds-preview-list-toggle",
             label: expanded.value ? "Hide all" : "Show all",
@@ -3151,7 +3146,7 @@ const _hoisted_3$l = {
 };
 const _hoisted_4$h = { class: "label" };
 const _hoisted_5$8 = ["id"];
-const _hoisted_6$6 = {
+const _hoisted_6$7 = {
   key: 0,
   class: "subtext-wrapper"
 };
@@ -3245,7 +3240,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             }, toDisplayString(props.helperText), 9, _hoisted_5$8)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 10, _hoisted_1$F),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$7, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
@@ -3470,7 +3465,7 @@ const _hoisted_3$j = {
 };
 const _hoisted_4$f = { class: "content" };
 const _hoisted_5$7 = { class: "label" };
-const _hoisted_6$5 = ["id"];
+const _hoisted_6$6 = ["id"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
@@ -3526,7 +3521,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             key: 0,
             id: `${unref(id)}-helper`,
             class: "helper-text"
-          }, toDisplayString(props.helperText), 9, _hoisted_6$5)) : createCommentVNode("", true)
+          }, toDisplayString(props.helperText), 9, _hoisted_6$6)) : createCommentVNode("", true)
         ])
       ], 10, _hoisted_1$D);
     };
@@ -4694,7 +4689,7 @@ const _hoisted_5$6 = {
   key: 4,
   class: "trailing-slot"
 };
-const _hoisted_6$4 = {
+const _hoisted_6$5 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
@@ -4923,7 +4918,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
+        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
           createVNode(KdsIcon, {
             name: props.trailingIcon
           }, null, 8, ["name"])
@@ -11016,7 +11011,7 @@ const _hoisted_4$c = {
   "aria-live": "polite"
 };
 const _hoisted_5$5 = { class: "kds-date-picker-nav-block" };
-const _hoisted_6$3 = { class: "kds-date-picker-body" };
+const _hoisted_6$4 = { class: "kds-date-picker-body" };
 const MONTHS_PER_YEAR = 12;
 const YEAR_PAGE_SIZE = 15;
 const REFERENCE_YEAR = 2024;
@@ -11265,7 +11260,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             }, null, 8, ["disabled"])) : createCommentVNode("", true)
           ])
         ]),
-        createElementVNode("div", _hoisted_6$3, [
+        createElementVNode("div", _hoisted_6$4, [
           view.value === "day" ? (openBlock(), createBlock(DatePickerDayGrid, {
             key: 0,
             ref_key: "dayGridRef",
@@ -12262,7 +12257,7 @@ const _hoisted_5$4 = {
   key: 1,
   class: "kds-time-picker-actions"
 };
-const _hoisted_6$2 = {
+const _hoisted_6$3 = {
   key: 2,
   class: "kds-time-picker-actions"
 };
@@ -12434,7 +12429,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: addMilliseconds
             })
           ])) : createCommentVNode("", true)
-        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
           createVNode(_sfc_main$1l, {
             variant: "outlined",
             size: "small",
@@ -14829,7 +14824,7 @@ const _hoisted_4$7 = {
   class: "kds-list-count"
 };
 const _hoisted_5$3 = { class: "kds-button-column" };
-const _hoisted_6$1 = { class: "kds-list-column" };
+const _hoisted_6$2 = { class: "kds-list-column" };
 const _hoisted_7$1 = { class: "kds-list-header" };
 const _hoisted_8$1 = { class: "kds-list-label" };
 const _hoisted_9$1 = {
@@ -15077,7 +15072,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ]))
               }, null, 8, ["disabled"])
             ]),
-            createElementVNode("div", _hoisted_6$1, [
+            createElementVNode("div", _hoisted_6$2, [
               createElementVNode("div", _hoisted_7$1, [
                 createElementVNode("span", _hoisted_8$1, toDisplayString(__props.includeLabel), 1),
                 !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_9$1, toDisplayString(rightOptions.value.length) + " of " + toDisplayString(includedItems.value.length), 1)) : createCommentVNode("", true)
@@ -15845,10 +15840,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-b6d29842"]]);
 
 const _hoisted_1$c = { class: "kds-accordion" };
-const _hoisted_2$7 = ["id", "aria-expanded", "aria-controls", "disabled", "onClick", "onKeydown"];
-const _hoisted_3$7 = { class: "kds-accordion-headline-container" };
-const _hoisted_4$5 = { class: "kds-accordion-headline" };
-const _hoisted_5$2 = ["id", "aria-labelledby", "hidden"];
+const _hoisted_2$7 = ["name", "open", "onToggle"];
+const _hoisted_3$7 = ["aria-disabled", "tabindex", "onClick", "onKeydown"];
+const _hoisted_4$5 = { class: "kds-accordion-headline-container" };
+const _hoisted_5$2 = { class: "kds-accordion-headline" };
+const _hoisted_6$1 = { class: "kds-accordion-content" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsAccordion",
   props: /* @__PURE__ */ mergeModels({
@@ -15893,19 +15889,35 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     );
     const expandedItems = computed(() => normalizedModelExpandedItems.value);
     const isItemExpanded = (itemId) => expandedItems.value.includes(itemId);
-    const toggleItem = (item) => {
+    const onSummaryClick = (event, item) => {
       if (item.disabled) {
+        event.preventDefault();
+      }
+    };
+    const onDetailsToggle = (event, item) => {
+      const detailsEl = event.currentTarget;
+      if (!(detailsEl instanceof HTMLDetailsElement)) {
         return;
       }
-      if (isItemExpanded(item.id)) {
-        setExpandedItems(expandedItems.value.filter((id) => id !== item.id));
+      const isOpen = detailsEl.open;
+      if (item.disabled) {
+        if (isOpen !== isItemExpanded(item.id)) {
+          detailsEl.open = isItemExpanded(item.id);
+        }
         return;
       }
-      if (__props.singleExpand) {
-        setExpandedItems([item.id]);
+      if (isOpen === isItemExpanded(item.id)) {
         return;
       }
-      setExpandedItems([...expandedItems.value, item.id]);
+      if (isOpen) {
+        if (__props.singleExpand) {
+          setExpandedItems([item.id]);
+          return;
+        }
+        setExpandedItems([...expandedItems.value, item.id]);
+        return;
+      }
+      setExpandedItems(expandedItems.value.filter((id) => id !== item.id));
     };
     const triggerRefs = ref({});
     const setTriggerRef = (itemId, triggerEl) => {
@@ -15915,7 +15927,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       } else if (triggerEl) {
         element = triggerEl.$el;
       }
-      if (element instanceof HTMLButtonElement) {
+      if (element instanceof HTMLElement) {
         triggerRefs.value[itemId] = element;
         return;
       }
@@ -15954,58 +15966,53 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
     };
     const accordionId = useId();
-    const getItemTriggerId = (itemId) => `${accordionId}-trigger-${itemId}`;
-    const getItemContentId = (itemId) => `${accordionId}-content-${itemId}`;
+    const exclusiveGroupName = computed(
+      () => __props.singleExpand ? `kds-accordion-${accordionId}` : void 0
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-          return openBlock(), createElementBlock("div", {
+          return openBlock(), createElementBlock("details", {
             key: item.id,
-            class: "kds-accordion-item"
+            class: "kds-accordion-item",
+            name: exclusiveGroupName.value,
+            open: isItemExpanded(item.id),
+            onToggle: ($event) => onDetailsToggle($event, item)
           }, [
-            createElementVNode("button", {
-              id: getItemTriggerId(item.id),
+            createElementVNode("summary", {
               ref_for: true,
               ref: (triggerEl) => setTriggerRef(item.id, triggerEl),
               class: "kds-accordion-header",
-              type: "button",
-              "aria-expanded": isItemExpanded(item.id),
-              "aria-controls": getItemContentId(item.id),
-              disabled: item.disabled,
-              onClick: ($event) => toggleItem(item),
+              "aria-disabled": item.disabled || void 0,
+              tabindex: item.disabled ? -1 : void 0,
+              onClick: ($event) => onSummaryClick($event, item),
               onKeydown: ($event) => handleTriggerKeydown($event, item)
             }, [
-              createElementVNode("span", _hoisted_3$7, [
+              createElementVNode("span", _hoisted_4$5, [
                 item.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
                   key: 0,
                   name: item.leadingIcon,
                   size: "small",
                   disabled: item.disabled
                 }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
-                createElementVNode("span", _hoisted_4$5, toDisplayString(item.headline), 1)
+                createElementVNode("span", _hoisted_5$2, toDisplayString(item.headline), 1)
               ]),
               createVNode(KdsIcon, {
                 name: isItemExpanded(item.id) ? "chevron-up" : "chevron-down",
                 size: "small"
               }, null, 8, ["name"])
-            ], 40, _hoisted_2$7),
-            createElementVNode("div", {
-              id: getItemContentId(item.id),
-              class: "kds-accordion-content",
-              role: "group",
-              "aria-labelledby": getItemTriggerId(item.id),
-              hidden: !isItemExpanded(item.id)
-            }, [
+            ], 40, _hoisted_3$7),
+            createElementVNode("div", _hoisted_6$1, [
               renderSlot(_ctx.$slots, item.id, { item }, void 0, true)
-            ], 8, _hoisted_5$2)
-          ]);
+            ])
+          ], 40, _hoisted_2$7);
         }), 128))
       ]);
     };
   }
 });
 
-const KdsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-66485734"]]);
+const KdsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0beea165"]]);
 
 const _hoisted_1$b = { class: "kds-card-header" };
 const _hoisted_2$6 = {
@@ -16038,7 +16045,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CardHeader = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-9be14436"]]);
+const CardHeader = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-09093cc0"]]);
 
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "BaseCard",