@knime/kds-components 0.28.1 → 0.28.2

package/dist/index.css

@@ -3257,7 +3257,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 
 .kds-panel {
-&[data-v-c55a379c] {
+&[data-v-b56ad38d] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3265,7 +3265,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   min-height: 0;
   background-color: var(--kds-color-surface-default);
 }
-.kds-panel-header[data-v-c55a379c] {
+.kds-panel-header[data-v-b56ad38d] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3275,13 +3275,13 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
       calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
     border-bottom: var(--kds-border-base-subtle);
 }
-.kds-panel-headline[data-v-c55a379c] {
+.kds-panel-headline[data-v-b56ad38d] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     min-width: 0;
 }
-.kds-panel-headline-text[data-v-c55a379c] {
+.kds-panel-headline-text[data-v-b56ad38d] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3290,26 +3290,29 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-.kds-panel-header-trailing[data-v-c55a379c] {
+.kds-panel-header-trailing[data-v-b56ad38d] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
+    margin-left: auto;
 }
 .kds-panel-body {
-&[data-v-c55a379c] {
+&[data-v-b56ad38d] {
     flex: 1 1 auto;
     min-height: 0;
-    padding: var(--kds-spacing-container-0-75x);
-    overflow: auto;
+    overflow: var(--cd61c39a);
+}
+&[data-variant="padded"][data-v-b56ad38d] {
+      padding: var(--kds-spacing-container-0-75x);
 }
-&[data-v-c55a379c]:focus-visible {
+&[tabindex="0"][data-v-b56ad38d]: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-panel-footer[data-v-c55a379c] {
+.kds-panel-footer[data-v-b56ad38d] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3320,8 +3323,8 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     border-top: var(--kds-border-base-subtle);
 }
-.kds-panel-footer-leading[data-v-c55a379c],
-  .kds-panel-footer-trailing[data-v-c55a379c] {
+.kds-panel-footer-leading[data-v-b56ad38d],
+  .kds-panel-footer-trailing[data-v-b56ad38d] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;

package/dist/index.js

@@ -16320,20 +16320,35 @@ const kdsCardVariant = {
 };
 const kdsCardVariants = Object.values(kdsCardVariant);
 
+const kdsPanelBodyOverflow = {
+  AUTO: "auto",
+  HIDDEN: "hidden",
+  VISIBLE: "visible"
+};
+const kdsPanelBodyOverflows = Object.values(kdsPanelBodyOverflow);
+const kdsPanelBodyVariant = {
+  PADDED: "padded",
+  PLAIN: "plain"
+};
+const kdsPanelBodyVariants = Object.values(kdsPanelBodyVariant);
+
 const _hoisted_1$8 = { class: "kds-panel" };
-const _hoisted_2$5 = { class: "kds-panel-header" };
+const _hoisted_2$5 = {
+  key: 0,
+  class: "kds-panel-header"
+};
 const _hoisted_3$5 = ["id"];
 const _hoisted_4$3 = {
   key: 0,
   class: "kds-panel-headline-text"
 };
 const _hoisted_5$1 = {
-  key: 0,
+  key: 1,
   class: "kds-panel-header-trailing"
 };
-const _hoisted_6 = ["aria-labelledby"];
+const _hoisted_6 = ["data-variant", "tabindex", "aria-labelledby", "aria-label"];
 const _hoisted_7 = {
-  key: 0,
+  key: 1,
   class: "kds-panel-footer"
 };
 const _hoisted_8 = { class: "kds-panel-footer-leading" };
@@ -16344,14 +16359,36 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     headline: {},
     headlineTrailingActions: {},
     footerLeadingActions: {},
-    footerTrailingActions: {}
+    footerTrailingActions: {},
+    ariaLabel: {},
+    bodyOverflow: { default: () => kdsPanelBodyOverflow.AUTO },
+    bodyVariant: { default: () => kdsPanelBodyVariant.PADDED }
   },
   setup(__props) {
+    useCssVars((_ctx) => ({
+      "cd61c39a": _ctx.bodyOverflow
+    }));
     const headlineId = useId();
+    const hasHeader = computed(
+      () => Boolean(__props.headline) || Boolean(__props.headlineTrailingActions?.length)
+    );
+    const isBodyKeyboardFocusable = computed(
+      () => __props.bodyOverflow !== kdsPanelBodyOverflow.HIDDEN
+    );
+    const bodyAriaLabel = computed(
+      () => isBodyKeyboardFocusable.value && __props.ariaLabel ? __props.ariaLabel : void 0
+    );
+    const slotHeadlineId = computed(
+      () => typeof __props.headline === "string" ? headlineId : void 0
+    );
+    const bodyAriaLabelledBy = computed(
+      () => isBodyKeyboardFocusable.value && !bodyAriaLabel.value ? slotHeadlineId.value : void 0
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$8, [
-        createElementVNode("div", _hoisted_2$5, [
-          createElementVNode("div", {
+        hasHeader.value ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+          __props.headline ? (openBlock(), createElementBlock("div", {
+            key: 0,
             id: unref(headlineId),
             class: "kds-panel-headline"
           }, [
@@ -16362,7 +16399,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               size: "small",
               onItemClick: __props.headline.onItemClick
             }), null, 16, ["onItemClick"])) : createCommentVNode("", true)
-          ], 8, _hoisted_3$5),
+          ], 8, _hoisted_3$5)) : createCommentVNode("", true),
           __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headlineTrailingActions, (action, index) => {
               return openBlock(), createElementBlock(Fragment, { key: index }, [
@@ -16394,13 +16431,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ], 64);
             }), 128))
           ])) : createCommentVNode("", true)
-        ]),
+        ])) : createCommentVNode("", true),
         createElementVNode("div", {
           class: "kds-panel-body",
-          tabindex: "0",
-          "aria-labelledby": unref(headlineId)
+          "data-variant": __props.bodyVariant,
+          tabindex: isBodyKeyboardFocusable.value ? 0 : void 0,
+          "aria-labelledby": bodyAriaLabelledBy.value,
+          "aria-label": bodyAriaLabel.value
         }, [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          renderSlot(_ctx.$slots, "default", { headlineId: slotHeadlineId.value }, void 0, true)
         ], 8, _hoisted_6),
         __props.footerLeadingActions?.length || __props.footerTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
           createElementVNode("div", _hoisted_8, [
@@ -16429,7 +16468,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-c55a379c"]]);
+const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-b56ad38d"]]);
 
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
@@ -17584,5 +17623,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
   kdsResponsiveButtonGroupAlignment
 );
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, _sfc_main$1l as KdsButton, _sfc_main$e as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$P as KdsColorInput, KdsColorSwatch, _sfc_main$15 as KdsContextMenu, KdsDataType, _sfc_main$I as KdsDateInput, _sfc_main$G as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$w as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$z as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1k as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$16 as KdsMenu, _sfc_main$1a as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$t as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$T as KdsNumberInput, KdsPanel, _sfc_main$O as KdsPasswordInput, _sfc_main$F as KdsPatternInput, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$B as KdsTimeInput, _sfc_main$1i as KdsToggleButton, KdsTwinList, _sfc_main$N as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, _sfc_main$1l as KdsButton, _sfc_main$e as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$P as KdsColorInput, KdsColorSwatch, _sfc_main$15 as KdsContextMenu, KdsDataType, _sfc_main$I as KdsDateInput, _sfc_main$G as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$w as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$z as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1k as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$16 as KdsMenu, _sfc_main$1a as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$t as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$T as KdsNumberInput, KdsPanel, _sfc_main$O as KdsPasswordInput, _sfc_main$F as KdsPatternInput, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$B as KdsTimeInput, _sfc_main$1i as KdsToggleButton, KdsTwinList, _sfc_main$N as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map