@porsche-design-system/components-react 3.20.0 → 3.21.0-rc.0

package/cjs/lib/components/table-head-row.wrapper.cjs

@@ -11,6 +11,7 @@ const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, re
     const WebComponentTag = hooks.usePrefix('p-table-head-row');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/table-head.wrapper.cjs

@@ -11,6 +11,7 @@ const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref)
     const WebComponentTag = hooks.usePrefix('p-table-head');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/table-row.wrapper.cjs

@@ -11,6 +11,7 @@ const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) =
     const WebComponentTag = hooks.usePrefix('p-table-row');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/table.wrapper.cjs

@@ -18,6 +18,7 @@ const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpd
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/tabs-bar.wrapper.cjs

@@ -18,6 +18,7 @@ const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/tabs-item.wrapper.cjs

@@ -14,6 +14,7 @@ const PTabsItem = /*#__PURE__*/ react.forwardRef(({ label, className, ...rest },
     }, [label]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/tabs.wrapper.cjs

@@ -18,6 +18,7 @@ const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColo
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/tag-dismissible.wrapper.cjs

@@ -16,6 +16,7 @@ const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'backgro
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/tag.wrapper.cjs

@@ -16,6 +16,7 @@ const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', com
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/text-field-wrapper.wrapper.cjs

@@ -17,6 +17,7 @@ const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLo
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/text-list-item.wrapper.cjs

@@ -11,6 +11,7 @@ const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, re
     const WebComponentTag = hooks.usePrefix('p-text-list-item');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/text-list.wrapper.cjs

@@ -16,6 +16,7 @@ const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/text.wrapper.cjs

@@ -16,6 +16,7 @@ const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primar
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/textarea-wrapper.wrapper.cjs

@@ -16,6 +16,7 @@ const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hid
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/textarea.wrapper.cjs

@@ -19,6 +19,7 @@ const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', descripti
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/toast.wrapper.cjs

@@ -15,6 +15,7 @@ const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, re
     }, [theme, themeValue]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/wordmark.wrapper.cjs

@@ -16,6 +16,7 @@ const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/esm/lib/components/accordion.wrapper.mjs

@@ -16,6 +16,7 @@ const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/banner.wrapper.mjs

@@ -15,6 +15,7 @@ const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = tr
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/button-group.wrapper.mjs

@@ -12,6 +12,7 @@ const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', x
     }, [direction]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/button-pure.wrapper.mjs

@@ -14,6 +14,7 @@ const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'en
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/button-tile.wrapper.mjs

@@ -14,6 +14,7 @@ const PButtonTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRa
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/button.wrapper.d.ts

@@ -8,7 +8,7 @@ export type PButtonProps = BaseProps & {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -58,7 +58,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/button.wrapper.mjs

@@ -14,6 +14,7 @@ const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = fa
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/canvas.wrapper.mjs

@@ -16,6 +16,7 @@ const PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartU
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/carousel.wrapper.mjs

@@ -16,6 +16,7 @@ const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignHeader
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/checkbox-wrapper.wrapper.mjs

@@ -14,6 +14,7 @@ const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/checkbox.wrapper.mjs

@@ -16,6 +16,7 @@ const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/content-wrapper.wrapper.mjs

@@ -15,6 +15,7 @@ const PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transpare
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/crest.wrapper.mjs

@@ -14,6 +14,7 @@ const PCrest = /*#__PURE__*/ forwardRef(({ aria, href, target = '_self', classNa
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/display.wrapper.mjs

@@ -14,6 +14,7 @@ const PDisplay = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/divider.wrapper.mjs

@@ -14,6 +14,7 @@ const PDivider = /*#__PURE__*/ forwardRef(({ color = 'contrast-low', direction =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/fieldset-wrapper.wrapper.mjs

@@ -15,6 +15,7 @@ const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'me
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/fieldset.wrapper.mjs

@@ -14,6 +14,7 @@ const PFieldset = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/flex-item.wrapper.mjs

@@ -15,6 +15,7 @@ const PFlexItem = /*#__PURE__*/ forwardRef(({ alignSelf = 'auto', flex = 'initia
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/flex.wrapper.mjs

@@ -15,6 +15,7 @@ const PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/flyout-multilevel-item.wrapper.mjs

@@ -14,6 +14,7 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ identifier, label, cla
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/flyout-multilevel.wrapper.mjs

@@ -16,6 +16,7 @@ const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, on
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/flyout.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -9,6 +9,10 @@ export type PFlyoutProps = BaseProps & {
      * If true, the flyout will not be closable via backdrop click.
      */
     disableBackdropClick?: boolean;
+    /**
+     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     */
+    footerBehavior?: FlyoutFooterBehavior;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -43,6 +47,10 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
      * If true, the flyout will not be closable via backdrop click.
      */
     disableBackdropClick?: boolean;
+    /**
+     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     */
+    footerBehavior?: FlyoutFooterBehavior;
     /**
      * Emitted when the component requests to be dismissed.
      */

package/esm/lib/components/flyout.wrapper.mjs

@@ -4,19 +4,20 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, disableBackdropClick, open, position, theme || useTheme()];
+    const propsToSync = [aria, disableBackdropClick, footerBehavior, open, position, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/grid-item.wrapper.mjs

@@ -15,6 +15,7 @@ const PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, .
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/grid.wrapper.mjs

@@ -15,6 +15,7 @@ const PGrid = /*#__PURE__*/ forwardRef(({ direction = 'row', gutter = { base: 16
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/heading.wrapper.mjs

@@ -14,6 +14,7 @@ const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/headline.wrapper.mjs

@@ -15,6 +15,7 @@ const PHeadline = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary'
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/icon.wrapper.mjs

@@ -14,6 +14,7 @@ const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', lazy, name =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -16,6 +16,7 @@ const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-righ
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-pure.wrapper.mjs

@@ -14,6 +14,7 @@ const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end'
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-social.wrapper.mjs

@@ -15,6 +15,7 @@ const PLinkSocial = /*#__PURE__*/ forwardRef(({ compact = false, hideLabel = fal
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile-model-signature.wrapper.mjs

@@ -14,6 +14,7 @@ const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -15,6 +15,7 @@ const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', descri
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link-tile.wrapper.mjs

@@ -14,6 +14,7 @@ const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRati
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/link.wrapper.d.ts

@@ -8,7 +8,7 @@ export type PLinkProps = BaseProps & {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -54,7 +54,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<import("re
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

package/esm/lib/components/link.wrapper.mjs

@@ -14,6 +14,7 @@ const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideL
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/marque.wrapper.mjs

@@ -15,6 +15,7 @@ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', tar
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/modal.wrapper.mjs

@@ -18,6 +18,7 @@ const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackd
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/model-signature.wrapper.mjs

@@ -14,6 +14,7 @@ const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPrio
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/multi-select-option.wrapper.mjs

@@ -14,6 +14,7 @@ const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -13,6 +13,10 @@ export type PMultiSelectProps = BaseProps & {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * The id of a form element the multi-select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -42,7 +46,7 @@ export type PMultiSelectProps = BaseProps & {
      */
     state?: MultiSelectState;
     /**
-     * Adapts the select color depending on the theme.
+     * Adapts the multi-select color depending on the theme.
      */
     theme?: Theme;
     /**
@@ -63,6 +67,10 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * The id of a form element the multi-select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -92,7 +100,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
      */
     state?: MultiSelectState;
     /**
-     * Adapts the select color depending on the theme.
+     * Adapts the multi-select color depending on the theme.
      */
     theme?: Theme;
     /**