@porsche-design-system/components-react 3.16.0-rc.0 → 3.16.0-rc.2

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -86,7 +87,7 @@ class DSRSegmentedControlItem extends react.Component {
         const hasSlottedContent = !!children.length;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSegmentedControlItemCss(this.props.disabled, this.props.selected, hasIcon, hasSlottedContent, this.props.theme || 'light' // default as fallback
         )));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.getButtonAttributes(this.props.selected, this.props.disabled), children: [this.props.label && jsxRuntime.jsx("span", { children: this.props.label }), hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: utilsEntry.getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.getSegmentedControlItemAriaAttributes(this.props.selected, this.props.disabled, this.props.aria), children: [this.props.label && jsxRuntime.jsx("span", { children: this.props.label }), hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: utilsEntry.getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -8,6 +8,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -19,8 +20,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

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

@@ -7,6 +7,7 @@ var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
+var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
 var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
 var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper
 var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var flyoutNavigation_wrapper = require('./lib/components/flyout-navigation.wrapper.cjs');
-var flyoutNavigationItem_wrapper = require('./lib/components/flyout-navigation-item.wrapper.cjs');
+var flyoutMultilevel_wrapper = require('./lib/components/flyout-multilevel.wrapper.cjs');
+var flyoutMultilevelItem_wrapper = require('./lib/components/flyout-multilevel-item.wrapper.cjs');
 var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
@@ -86,6 +87,7 @@ exports.PButton = button_wrapper.PButton;
 exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
+exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
@@ -97,8 +99,8 @@ exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PFlyoutNavigation = flyoutNavigation_wrapper.PFlyoutNavigation;
-exports.PFlyoutNavigationItem = flyoutNavigationItem_wrapper.PFlyoutNavigationItem;
+exports.PFlyoutMultilevel = flyoutMultilevel_wrapper.PFlyoutMultilevel;
+exports.PFlyoutMultilevelItem = flyoutMultilevelItem_wrapper.PFlyoutMultilevelItem;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;

package/ssr/esm/BaseProps.d.ts

@@ -0,0 +1,2 @@
+import type { DOMAttributes, HTMLAttributes } from 'react';
+export type BaseProps = DOMAttributes<{}> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -3666,7 +3666,7 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: migrate flyout-navigation to use shared backdrop of dialog-styles.ts
+// TODO: migrate flyout-multilevel to use shared backdrop of dialog-styles.ts
 /**
  * Generates JSS styles for a frosted glass background.
  * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
@@ -4084,7 +4084,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$15 = (size, compact, open, theme, sticky) => {
+const getComponentCss$16 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4253,7 +4253,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$14 = (isOpen) => {
+const getComponentCss$15 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4324,7 +4324,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$13 = (direction) => {
+const getComponentCss$14 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4476,7 +4476,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$13 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4654,7 +4654,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
+const getComponentCss$12 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4778,7 +4778,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$11 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4833,6 +4833,96 @@ const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+const cssVariableSidebarStartWidth = '--p-canvas-sidebar-start-width';
+const cssVariableSidebarEndWidth = '--p-canvas-sidebar-end-width';
+// TODO: maybe default grid gap would also work
+const gridProductiveGap = gridGap.replace('36px', '24px');
+const mediaQueryDesktopView = getMediaQueryMin('m');
+const sidebarWidths = {
+    medium: '320px',
+    large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
+};
+const getComponentCss$10 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ':is(header, main, footer, aside)': {
+                padding: gridProductiveGap,
+                boxSizing: 'border-box',
+                zIndex: 0,
+            },
+            header: {
+                gridArea: 'header',
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+            },
+            main: {
+                gridArea: 'main',
+                '--pds-grid-span-full': 'span 6',
+                '--pds-grid-span-one-half': 'span 3',
+                '--pds-grid-span-one-third': 'span 2',
+                '--pds-grid-span-two-thirds': 'span 4',
+                display: 'grid',
+                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+                gap: gridProductiveGap,
+                alignContent: 'flex-start',
+                [mediaQueryDesktopView]: {
+                    '--pds-grid-span-full': 'span 12',
+                    '--pds-grid-span-one-half': 'span 6',
+                    '--pds-grid-span-one-third': 'span 4',
+                    '--pds-grid-span-two-thirds': 'span 8',
+                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+                },
+            },
+            footer: {
+                gridArea: 'footer',
+            },
+            aside: {
+                // TODO: box-shadows or colored surface must be defined, design is missing
+                position: 'relative',
+                transition: getTransition('margin'),
+                '&:first-of-type': {
+                    gridArea: 'sidebar-start',
+                    width: `var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]})`,
+                    marginInlineStart: isSidebarStartOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
+                },
+                '&:last-of-type': {
+                    gridArea: 'sidebar-end',
+                    width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
+                    marginInlineEnd: isSidebarEndOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
+                },
+            },
+        },
+        canvas: {
+            display: 'grid',
+            gridTemplateRows: 'auto minmax(0, 1fr) auto',
+            gridTemplateAreas: '"header" "main" "footer"',
+            minWidth: '320px',
+            minHeight: '100dvh',
+            [mediaQueryDesktopView]: {
+                gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
+                gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            },
+        },
+        close: {
+            // TODO: must be positioned properly, design is missing
+            position: 'absolute',
+            inset: `${spacingStaticXSmall} ${spacingStaticXSmall} auto auto`,
+        },
+    });
+};
+
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -5697,8 +5787,8 @@ const getFlyoutDialogResetJssStyle = () => {
     };
 };
 
-const cssVariableVisibility = '--p-internal-flyout-navigation-visibility';
-const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-navigation-visibility-transition-duration';
+const cssVariableVisibility = '--p-internal-flyout-multilevel-visibility';
+const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-multilevel-visibility-transition-duration';
 const frostedGlassHeaderHeight = '4rem';
 const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
@@ -5761,7 +5851,7 @@ const getComponentCss$R = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
         scroller: {
             gridArea: '1/1',
             overflow: 'auto',
-            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
             visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
             transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
@@ -5934,13 +6024,13 @@ const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
         scroller: {
             position: 'fixed',
             inset: 0,
-            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-navigation gets closed
-            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-multilevel gets closed
+            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             ...(isSecondaryScrollerVisible
                 ? {
                     zIndex: 2,
                     transform: 'translate3d(0, 0, 0)',
-                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-navigation itself, which is hidden on mobile
+                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-multilevel itself, which is hidden on mobile
                     visibility: `var(${cssVariableVisibility},visible)`,
                     transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
                 }
@@ -10228,13 +10318,13 @@ const getComponentCss$1 = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
-                position: 'fixed',
+                position: 'fixed', // fallback for older browsers without native `popover` support
                 insetInline: gridExtendedOffsetBase,
                 // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
                 [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
                 bottom: `var(${cssVariablePositionBottomInternal})`,
-                zIndex: TOAST_Z_INDEX,
+                zIndex: TOAST_Z_INDEX, // fallback for older browsers without native `popover` support
                 [getMediaQueryMin('s')]: {
                     insetInline: '64px auto',
                     maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
@@ -10310,4 +10400,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$15 as getAccordionCss, getComponentCss$14 as getBannerCss, getComponentCss$10 as getButtonCss, getComponentCss$13 as getButtonGroupCss, getComponentCss$12 as getButtonPureCss, getComponentCss$11 as getButtonTileCss, getComponentCss$$ as getCarouselCss, getComponentCss$_ as getCheckboxWrapperCss, getComponentCss$Z as getContentWrapperCss, getComponentCss$Y as getCrestCss, getComponentCss$X as getDisplayCss, getComponentCss$W as getDividerCss, getComponentCss$U as getFieldsetCss, getComponentCss$V as getFieldsetWrapperCss, getComponentCss$S as getFlexCss, getComponentCss$T as getFlexItemCss, getComponentCss$P as getFlyoutCss, getComponentCss$R as getFlyoutNavigationCss, getComponentCss$Q as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$N as getGridCss, getComponentCss$O as getGridItemCss, getComponentCss$M as getHeadingCss, getComponentCss$L as getHeadlineCss, getComponentCss$K as getIconCss, getComponentCss$J as getInlineNotificationCss, getComponentCss$H as getLinkCss, getComponentCss$I as getLinkPureCss, getComponentCss$H as getLinkSocialCss, getComponentCss$E as getLinkTileCss, getComponentCss$G as getLinkTileModelSignatureCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$D as getMarqueCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$z as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$16 as getAccordionCss, getComponentCss$15 as getBannerCss, getComponentCss$11 as getButtonCss, getComponentCss$14 as getButtonGroupCss, getComponentCss$13 as getButtonPureCss, getComponentCss$12 as getButtonTileCss, getComponentCss$10 as getCanvasCss, getComponentCss$$ as getCarouselCss, getComponentCss$_ as getCheckboxWrapperCss, getComponentCss$Z as getContentWrapperCss, getComponentCss$Y as getCrestCss, getComponentCss$X as getDisplayCss, getComponentCss$W as getDividerCss, getComponentCss$U as getFieldsetCss, getComponentCss$V as getFieldsetWrapperCss, getComponentCss$S as getFlexCss, getComponentCss$T as getFlexItemCss, getComponentCss$P as getFlyoutCss, getComponentCss$R as getFlyoutMultilevelCss, getComponentCss$Q as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$N as getGridCss, getComponentCss$O as getGridItemCss, getComponentCss$M as getHeadingCss, getComponentCss$L as getHeadlineCss, getComponentCss$K as getIconCss, getComponentCss$J as getInlineNotificationCss, getComponentCss$H as getLinkCss, getComponentCss$I as getLinkPureCss, getComponentCss$H as getLinkSocialCss, getComponentCss$E as getLinkTileCss, getComponentCss$G as getLinkTileModelSignatureCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$D as getMarqueCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$z as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };