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

package/CHANGELOG.md

@@ -14,6 +14,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.20.0-rc.0] - 2024-10-18
+
+#### Added
+
+- `Icon`: `attachment`, `dislike`, `dislike-filled`, `like`, `like-filled`, `new-chat`
+
+#### Changed
+
+- `Canvas`: Improve UI and UX behaviour
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
+- `Flyout`, `Modal`: Removed default styling for slotted anchors
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
+
 ### [3.19.0] - 2024-10-14
 
 ### [3.19.0-rc.4] - 2024-10-14

package/cjs/lib/components/canvas.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCanvas = react.forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
+const PCanvas = react.forwardRef(({ sidebarEndIcon = 'menu-lines', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-canvas');
     const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];

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

@@ -2,45 +2,45 @@ import type { BaseProps } from '../../BaseProps';
 import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
 export type PCanvasProps = BaseProps & {
     /**
-     * The icon to toggle the Sidebar on the end side
+     * The icon to toggle the sidebar on the end side
      */
     sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
-     * Open Sidebar on the end side
+     * Open the sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * The icon to toggle the Sidebar on the start side
+     * The icon to toggle the sidebar on the start side
      */
     sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
-     * Open Sidebar on the start side
+     * Open the sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme.
      */
     theme?: Theme;
 };
 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"> & {
     /**
-     * The icon to toggle the Sidebar on the end side
+     * The icon to toggle the sidebar on the end side
      */
     sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
-     * Open Sidebar on the end side
+     * Open the sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * The icon to toggle the Sidebar on the start side
+     * The icon to toggle the sidebar on the start side
      */
     sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
-     * Open Sidebar on the start side
+     * Open the sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme.
      */
     theme?: Theme;
 } & {

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCanvas = forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
+const PCanvas = forwardRef(({ sidebarEndIcon = 'menu-lines', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-canvas');
     const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];

package/esm/lib/types.d.ts

@@ -233,6 +233,7 @@ declare const ICON_NAMES: readonly [
     "arrow-left",
     "arrow-right",
     "arrow-up",
+    "attachment",
     "augmented-reality",
     "battery-empty",
     "battery-empty-co2",
@@ -269,6 +270,8 @@ declare const ICON_NAMES: readonly [
     "cubic-capacity",
     "delete",
     "disable",
+    "dislike",
+    "dislike-filled",
     "document",
     "download",
     "duration",
@@ -298,6 +301,8 @@ declare const ICON_NAMES: readonly [
     "leaf",
     "leather",
     "light",
+    "like",
+    "like-filled",
     "list",
     "locate",
     "lock",
@@ -346,6 +351,7 @@ declare const ICON_NAMES: readonly [
     "minus",
     "mobile",
     "moon",
+    "new-chat",
     "oil-can",
     "parking-brake",
     "parking-light",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.19.0",
+  "version": "3.20.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.19.0"
+    "@porsche-design-system/components-js": "3.20.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",

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

@@ -4708,14 +4708,28 @@ const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+// TODO: styling needs to be cleaned up
 const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
 const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
-const gridProductiveGap = gridGap.replace('36px', '24px');
+const cssVarGridColumns = '--p-canvas-grid-columns';
+const cssVarGridMaxWidth = '--p-canvas-grid-max-width';
+const spacingBase = gridGap.replace('36px', '24px');
+const mainGridColumnGap = gridGap.replace('36px', '24px').replace('vw', 'cqw');
+// const mainGridRowGap = gridGap.replace('vw', 'cqw');
+const mediaQueryTabletView = getMediaQueryMin('s');
 const mediaQueryDesktopView = getMediaQueryMin('m');
 const sidebarWidth = '320px';
-const headerHeight = 'calc(1.5rem + 28px)';
+const sidebarStartWidth = `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`;
+const sidebarEndWidth = `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`;
+const sidebarTransition = getTransition('margin');
+const borderRadius = '16px';
+const headerPadding = spacingStaticSmall;
+const headerMinHeight = '56px';
 const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
-    const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const footerGradientDark = '0%';
+    const footerGradient = isThemeDark(theme) ? footerGradientDark : '100%';
     return getCss({
         '@global': {
             ':host': {
@@ -4723,6 +4737,10 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
+                    containerType: 'inline-size',
+                    marginInlineStart: isSidebarStartOpen ? sidebarStartWidth : 0,
+                    marginInlineEnd: isSidebarEndOpen ? sidebarEndWidth : 0,
+                    transition: sidebarTransition,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
@@ -4732,164 +4750,294 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     alignItems: 'center',
                     gap: spacingStaticSmall,
                 },
-                '&([slot*="sidebar"])': {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: spacingStaticSmall,
-                },
-                // pre-defined utility classes
-                '&(.p-module)': {
-                    gridColumn: '1/-1',
-                },
-                '&(.p-module--subgrid)': {
-                    display: 'grid',
-                    gridTemplateColumns: 'subgrid',
-                    rowGap: gridProductiveGap,
-                },
-                '&(.p-module--more-space-above-small)': {
-                    marginTop: spacingStaticSmall,
-                },
-                '&(.p-module--more-space-above-medium)': {
-                    marginTop: spacingStaticMedium,
-                },
-                '&(.p-module--more-space-above-large)': {
-                    marginTop: spacingStaticLarge,
-                },
-                '&(.p-module--less-space-above-small)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
-                },
-                '&(.p-module--less-space-above-medium)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
-                },
-                '&(.p-module--less-space-above-large)': {
-                    marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
-                },
-                '&(.p-flex)': {
-                    display: 'flex',
-                },
-                '&(.p-align-items--center)': {
-                    alignItems: 'center',
-                },
-                '&(.p-gap--small)': {
-                    gap: spacingStaticSmall,
-                },
-                '&(.p-gap--medium)': {
-                    gap: spacingStaticMedium,
-                },
-                '&(.p-gap--large)': {
-                    gap: spacingStaticLarge,
+            },
+            'slot[name="background"]': {
+                display: 'block',
+                gridArea: '1/1/-1/-1',
+                position: 'sticky',
+                top: 0,
+                zIndex: 0,
+                width: '100dvw',
+                height: '100dvh',
+                pointerEvents: 'none',
+                overflow: 'hidden',
+                transform: 'translate3d(0,0,0)', // needed for Safari to force GPU acceleration
+                '&::slotted(video), &::slotted(img)': {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    transition: getTransition('opacity', 'veryLong'),
                 },
             },
             'slot[name="title"]::slotted(a)': {
                 textDecoration: 'none',
                 color: 'inherit',
             },
+            'slot[name="sidebar-start"]': {
+                display: 'block',
+                marginTop: spacingFluidMedium,
+                [mediaQueryTabletView]: {
+                    marginTop: 0,
+                },
+            },
             h2: {
-                ...textSmallStyle,
+                ...textXSmallStyle,
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                margin: 0,
                 color: primaryColor,
                 textTransform: 'uppercase',
                 letterSpacing: '2px',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
             },
             'header, main, footer, aside': {
-                padding: gridProductiveGap,
+                padding: spacingBase,
                 boxSizing: 'border-box',
                 zIndex: 0,
             },
             header: {
+                paddingBlock: headerPadding,
                 gridArea: 'header',
                 position: 'sticky',
+                minHeight: headerMinHeight,
+                boxSizing: 'border-box',
                 top: 0,
-                zIndex: 9999999,
-                height: headerHeight,
+                zIndex: 100,
                 display: 'grid',
                 gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
-                gap: gridProductiveGap,
-                backgroundColor: backgroundSurfaceColor,
+                gap: spacingBase,
                 alignItems: 'center',
-                paddingBlock: 0,
-                '&::before, &::after': {
-                    content: '""',
-                    position: 'absolute',
-                    backgroundColor: 'transparent',
-                    bottom: `calc(${borderRadiusLarge} * -2)`,
-                    height: `calc(${borderRadiusLarge} * 2)`,
-                    width: borderRadiusLarge,
-                    boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
-                    pointerEvents: 'none',
-                },
-                '&::before': {
-                    left: 0,
-                    borderTopLeftRadius: borderRadiusLarge,
-                },
-                '&::after': {
-                    right: 0,
-                    borderTopRightRadius: borderRadiusLarge,
-                },
             },
-            main: {
-                gridArea: 'main',
-                '--p-canvas-grid-span-full': 'span 6',
-                '--p-canvas-grid-span-one-half': 'span 3',
-                '--p-canvas-grid-span-one-third': 'span 2',
-                '--p-canvas-grid-span-two-thirds': 'span 4',
+            'header .blur-layers': {
+                position: 'absolute',
+                inset: 0,
+                zIndex: -1,
+                pointerEvents: 'none',
+                height: '100%',
+                width: '100%',
+            },
+            'header .blur-layers:before': {
+                content: '""',
+                zIndex: 1,
+                WebkitBackdropFilter: 'blur(64px)',
+                backdropFilter: 'blur(64px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 100%) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%)', // Safari prefix
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 100%) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%)',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            },
+            'header .blur-layers > div': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            },
+            'header .blur-layers > div:nth-of-type(1)': {
+                zIndex: 2,
+                WebkitBackdropFilter: 'blur(32px)',
+                backdropFilter: 'blur(32px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%)',
+            },
+            'header .blur-layers > div:nth-of-type(2)': {
+                zIndex: 3,
+                WebkitBackdropFilter: 'blur(16px)',
+                backdropFilter: 'blur(16px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%)',
+            },
+            'header .blur-layers > div:nth-of-type(3)': {
+                zIndex: 4,
+                WebkitBackdropFilter: 'blur(8px)',
+                backdropFilter: 'blur(8px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%)',
+            },
+            'header .blur-layers > div:nth-of-type(4)': {
+                zIndex: 5,
+                WebkitBackdropFilter: 'blur(4px)',
+                backdropFilter: 'blur(4px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%)',
+            },
+            'header .blur-layers > div:nth-of-type(5)': {
+                zIndex: 6,
+                WebkitBackdropFilter: 'blur(2px)',
+                backdropFilter: 'blur(2px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%)',
+            },
+            'header .blur-layers > div:nth-of-type(6)': {
+                zIndex: 7,
+                WebkitBackdropFilter: 'blur(1px)',
+                backdropFilter: 'blur(1px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%)',
+            },
+            'header .blur-layers:after': {
+                content: '""',
+                zIndex: 8,
+                WebkitBackdropFilter: 'blur(0.5px)',
+                backdropFilter: 'blur(0.5px)',
+                WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%)',
+                maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%)',
+            },
+            'main, footer': {
                 display: 'grid',
-                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
-                gap: gridProductiveGap,
+                gridTemplateColumns: `repeat(var(${cssVarGridColumns}, 12), minmax(0, 1fr))`,
+                columnGap: mainGridColumnGap,
                 alignContent: 'flex-start',
-                backgroundColor,
-                [mediaQueryDesktopView]: {
-                    '--p-canvas-grid-span-full': 'span 12',
-                    '--p-canvas-grid-span-one-half': 'span 6',
-                    '--p-canvas-grid-span-one-third': 'span 4',
-                    '--p-canvas-grid-span-two-thirds': 'span 8',
-                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
-                },
+                maxWidth: `var(${cssVarGridMaxWidth}, none)`,
+                marginInline: 'auto',
+            },
+            main: {
+                zIndex: 10,
+                gridArea: 'main',
+                width: '100%',
             },
             footer: {
+                position: 'sticky',
+                bottom: 0,
+                width: '100%',
                 gridArea: 'footer',
-                backgroundColor,
+                zIndex: 200,
+                paddingBottom: spacingFluidSmall,
+                '&::before': {
+                    content: '""',
+                    zIndex: '-1',
+                    position: 'absolute',
+                    inset: '-140px -50dvw 0',
+                    pointerEvents: 'none',
+                    background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradient}, 0) 0%, hsla(0, 0%, ${footerGradient}, 0.013) 8.1%, hsla(0, 0%, ${footerGradient}, 0.049) 15.5%, hsla(0, 0%, ${footerGradient}, 0.104) 22.5%, hsla(0, 0%, ${footerGradient}, 0.175) 29%, hsla(0, 0%, ${footerGradient}, 0.259) 35.3%, hsla(0, 0%, ${footerGradient}, 0.352) 41.2%, hsla(0, 0%, ${footerGradient}, 0.45) 47.1%, hsla(0, 0%, ${footerGradient}, 0.55) 52.9%, hsla(0, 0%, ${footerGradient}, 0.648) 58.8%, hsla(0, 0%, ${footerGradient}, 0.741) 64.7%, hsla(0, 0%, ${footerGradient}, 0.825) 71%, hsla(0, 0%, ${footerGradient}, 0.896) 77.5%, hsla(0, 0%, ${footerGradient}, 0.951) 84.5%, hsla(0, 0%, ${footerGradient}, 0.987) 91.9%, hsl(0, 0%, ${footerGradient}) 100%)`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradientDark}, 0) 0%, hsla(0, 0%, ${footerGradientDark}, 0.013) 8.1%, hsla(0, 0%, ${footerGradientDark}, 0.049) 15.5%, hsla(0, 0%, ${footerGradientDark}, 0.104) 22.5%, hsla(0, 0%, ${footerGradientDark}, 0.175) 29%, hsla(0, 0%, ${footerGradientDark}, 0.259) 35.3%, hsla(0, 0%, ${footerGradientDark}, 0.352) 41.2%, hsla(0, 0%, ${footerGradientDark}, 0.45) 47.1%, hsla(0, 0%, ${footerGradientDark}, 0.55) 52.9%, hsla(0, 0%, ${footerGradientDark}, 0.648) 58.8%, hsla(0, 0%, ${footerGradientDark}, 0.741) 64.7%, hsla(0, 0%, ${footerGradientDark}, 0.825) 71%, hsla(0, 0%, ${footerGradientDark}, 0.896) 77.5%, hsla(0, 0%, ${footerGradientDark}, 0.951) 84.5%, hsla(0, 0%, ${footerGradientDark}, 0.987) 91.9%, hsl(0, 0%, ${footerGradientDark}) 100%)`,
+                    }),
+                },
             },
             aside: {
-                transition: getTransition('margin'),
+                zIndex: 200,
+                transition: sidebarTransition,
                 position: 'sticky',
-                top: headerHeight,
-                height: `calc(100dvh - ${headerHeight})`,
-                overflow: 'hidden auto',
+                top: 0,
+                height: '100dvh',
+            },
+        },
+        scroller: {
+            position: 'absolute',
+            inset: 0,
+            padding: spacingBase,
+            overflow: 'hidden auto',
+            display: 'grid',
+            gridTemplateRows: 'auto 1fr',
+            gap: spacingBase,
+        },
+        'sidebar-header': {
+            display: 'flex',
+            gap: spacingStaticSmall,
+            alignItems: 'center',
+            justifyContent: 'var(--p-internal-justify)',
+            position: 'sticky',
+            top: `calc(${spacingBase} * -1)`,
+            padding: `${headerPadding} ${spacingBase}`,
+            marginBlockStart: `calc(${spacingBase} * -1)`,
+            marginInline: `calc(${spacingBase} * -1)`,
+            zIndex: 1,
+            minHeight: headerMinHeight,
+            boxSizing: 'border-box',
+            '&::before': {
+                content: '""',
+                zIndex: '-1',
+                position: 'absolute',
+                inset: '0 0 -8px',
+                background: 'var(--p-internal-gradient)',
+                pointerEvents: 'none',
             },
         },
         'sidebar-start': {
-            borderInlineEnd: `1px solid ${backgroundSurfaceColor}`,
-            backgroundColor,
+            '--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColor} 0%, ${backgroundSurfaceColor} 65%, rgba(255,255,255,0) 100%)`,
+            '--p-internal-justify': 'flex-start',
+            backgroundColor: backgroundSurfaceColor,
             gridArea: 'sidebar-start',
-            width: `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`,
-            marginInlineStart: isSidebarStartOpen ? 0 : `calc(var(${cssVarSidebarStartWidth}, ${sidebarWidth}) * -1)`,
+            width: sidebarStartWidth,
+            marginInlineStart: isSidebarStartOpen
+                ? 0
+                : `calc((var(${cssVarSidebarStartWidth}, ${sidebarWidth}) + ${borderRadius}) * -1)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                '--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColorDark} 0%, ${backgroundSurfaceColorDark} 65%, rgba(255,255,255,0) 100%)`,
+                backgroundColor: backgroundSurfaceColorDark,
+            }),
+            '&::before': {
+                content: '""',
+                zIndex: '-1',
+                position: 'absolute',
+                backgroundColor: 'transparent',
+                right: `-${borderRadius}`,
+                height: `calc(${borderRadius} * 2)`,
+                width: borderRadius,
+                pointerEvents: 'none',
+                top: 0,
+                borderTopLeftRadius: borderRadius,
+                boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColor}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColorDark}`,
+                }),
+            },
         },
         'sidebar-end': {
-            borderInlineStart: `1px solid ${backgroundSurfaceColor}`,
+            '--p-internal-gradient': `linear-gradient(180deg, ${backgroundColor} 0%, ${backgroundColor} 65%, rgba(255,255,255,0) 100%)`,
+            '--p-internal-justify': 'flex-end',
+            borderInlineStart: `1px solid ${contrastLowColor}`,
             backgroundColor,
             gridArea: 'sidebar-end',
-            width: `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`,
+            width: sidebarEndWidth,
             marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
+            overflow: 'hidden auto',
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: contrastLowColorDark,
+                backgroundColor: backgroundColorDark,
+                '--p-internal-gradient': `linear-gradient(180deg, ${backgroundColorDark} 0%, ${backgroundColorDark} 65%, rgba(255,255,255,0) 100%)`,
+            }),
         },
         canvas: {
+            marginInlineStart: isSidebarStartOpen ? `calc(${sidebarStartWidth} * -1)` : 0,
+            marginInlineEnd: isSidebarEndOpen ? `calc(${sidebarEndWidth} * -1)` : 0,
+            transition: sidebarTransition,
             display: 'grid',
             gridTemplateRows: 'auto minmax(0, 1fr) auto',
             gridTemplateAreas: '"header" "main" "footer"',
             minWidth: '320px',
             minHeight: '100dvh',
+            font: textSmallStyle.font,
+            color: primaryColor,
+            backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                backgroundColor: backgroundColorDark,
+            }),
+            [mediaQueryTabletView]: {
+                gridTemplate: 'auto minmax(0, 1fr) / auto minmax(0, 1fr) auto',
+                gridTemplateAreas: '"sidebar-start header" "sidebar-start main" "sidebar-start footer"',
+            },
             [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"',
+                gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
             },
         },
         crest: {
-            [getMediaQueryMin('s')]: {
+            [`@container(min-width:${breakpointS}px)`]: {
                 display: 'none',
             },
         },
         wordmark: {
             height: '10px',
-            [getMediaQueryMax('s')]: {
+            [`@container(max-width:${breakpointS - 1}px)`]: {
                 display: 'none',
             },
         },
@@ -4901,6 +5049,16 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 justifyContent: 'end',
             },
         },
+        'flyout-start': {
+            // TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
+            '--p-flyout-width': '100dvw',
+            '--p-flyout-max-width': sidebarStartWidth,
+        },
+        'flyout-end': {
+            // TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
+            '--p-flyout-width': '100dvw',
+            '--p-flyout-max-width': sidebarEndWidth,
+        },
     });
 };