@porsche-design-system/components-react 3.15.2 → 3.16.0-rc.1

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.mjs

@@ -6,6 +6,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -79,17 +80,23 @@ class DSRModal extends Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
+        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) || namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;
+        // TODO: why do we validate only when opened?
         if (this.props.open) ;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("div", { className: "scroll-container", children: jsxs("div", { className: "root", role: "dialog", ...parseAndGetAriaAttributes({
-                                        'aria-modal': true,
-                                        'aria-label': this.props.heading,
-                                        'aria-hidden': !this.props.open,
-                                        ...parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, inert: this.props.open ? null : '', children: [hasDismissButton && (jsx("div", { className: "controls", children: jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) }, "heading")), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-label': this.props.heading,
+                                'aria-hidden': !this.props.open,
+                                ...parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "modal", children: [hasDismissButton && (jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" })), hasHeader &&
+                                            (this.props.heading ? (jsx("h2", { children: this.props.heading })) : namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading" })) : (jsx("slot", { name: "header" }))), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -102,7 +103,7 @@ class DSRMultiSelect extends Component {
         const dropdownId = 'list';
         const inputId = 'filter';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-button-wrapper.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -73,7 +74,7 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getSegmentedControlItemCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getButtonAttributes, getIconColor } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getSegmentedControlItemAriaAttributes, getIconColor } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRSegmentedControlItem extends Component {
     host;
@@ -84,7 +85,7 @@ class DSRSegmentedControlItem extends Component {
         const hasSlottedContent = !!children.length;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.disabled, this.props.selected, hasIcon, hasSlottedContent, this.props.theme || 'light' // default as fallback
         )));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { type: "button", ...getButtonAttributes(this.props.selected, this.props.disabled), children: [this.props.label && jsx("span", { children: this.props.label }), hasIcon && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { type: "button", ...getSegmentedControlItemAriaAttributes(this.props.selected, this.props.disabled, this.props.aria), children: [this.props.label && jsx("span", { children: this.props.label }), hasIcon && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -6,6 +6,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -5,6 +5,7 @@ export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
+export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';

package/ssr/esm/lib/components/accordion.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PAccordionProps = BaseProps & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -42,7 +43,7 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */

package/ssr/esm/lib/components/banner.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PBannerProps = BaseProps & {
     /**
      * Description of the banner.
      */
@@ -43,7 +44,7 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Description of the banner.
      */

package/ssr/esm/lib/components/button-group.wrapper.d.ts

@@ -1,12 +1,13 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonGroupProps = BaseProps & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

package/ssr/esm/lib/components/button-pure.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonPureProps = BaseProps & {
     /**
      * Display button in active state.
      */
@@ -67,7 +68,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display button in active state.
      */

package/ssr/esm/lib/components/button-tile.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
-export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
      */
@@ -62,7 +63,7 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      */

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -46,7 +47,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/canvas.wrapper.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+export type PCanvasProps = BaseProps & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: CanvasSidebarEndWidth;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: CanvasSidebarStartWidth;
+};
+export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: CanvasSidebarEndWidth;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: CanvasSidebarStartWidth;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/carousel.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
-export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
@@ -71,7 +72,7 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrapContent?: boolean;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */

package/ssr/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
-export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCheckboxWrapperProps = BaseProps & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -26,7 +27,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PContentWrapperProps = BaseProps & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -17,7 +18,7 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     width?: ContentWrapperWidth;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

package/ssr/esm/lib/components/crest.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
-export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCrestProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -14,7 +15,7 @@ export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCrest: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */