@porsche-design-system/components-react 3.18.0 → 3.19.0-rc.1

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

@@ -1,15 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '../components/accordion.wrapper.mjs';
 import '../components/banner.wrapper.mjs';
-import '../components/button.wrapper.mjs';
+import { PButton } from '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
-import { PButtonPure } from '../components/button-pure.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';
-import '../components/crest.wrapper.mjs';
+import { PCrest } from '../components/crest.wrapper.mjs';
 import '../components/display.wrapper.mjs';
 import '../components/divider.wrapper.mjs';
 import '../components/fieldset.wrapper.mjs';
@@ -70,7 +70,7 @@ import '../components/text-list-item.wrapper.mjs';
 import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
-import '../components/wordmark.wrapper.mjs';
+import { PWordmark } from '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
@@ -78,40 +78,35 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getCanvasCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
- * @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
+ * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
+ * @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
  * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "title", "description": "Application name" }
  * @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
  * @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
  * @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
  *
- * @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
- * @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
- *
  * @experimental
  */
 class DSRCanvas extends Component {
     host;
     isDesktopView = false;
+    hasSidebarStart;
+    hasSidebarEnd;
     render() {
-        splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsx("header", { part: "header", children: jsx("slot", { name: "header" }) }), jsx("main", { part: "main", children: jsx("slot", {}) }), jsx("footer", { part: "footer", children: jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxs(Fragment, { children: [jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-start", 
+        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
+        const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsxs("header", { children: [jsxs("div", { className: "header", children: [hasSidebarStart && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsx("h2", { children: jsx("slot", { name: "title" }) }), jsx("slot", { name: "header-start" })] }), jsx(PCrest, { className: "crest" }), jsx(PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxs("div", { className: "header", children: [jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsx("main", { children: jsx("slot", {}) }), jsx("footer", { children: jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxs(Fragment, { children: [hasSidebarStart && (jsx("aside", { className: "sidebar-start", 
                                                     // "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.sidebarStartOpen ? null : true, children: [jsx(PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsx("slot", { name: "sidebar-start" })] }), jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-end", 
+                                                    inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsx("aside", { className: "sidebar-end", 
                                                     // "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.sidebarEndOpen ? null : true, children: [jsx(PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsx("slot", { name: "sidebar-end" })] })] }))] }), !this.props.isDesktopView && (jsxs(Fragment, { children: [jsx(PFlyout, { open: this.props.sidebarStartOpen, position: "start", children: jsx("slot", { name: "sidebar-start" }) }), jsx(PFlyout, { open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) })] }))] })] }), this.props.children] }));
+                                                    inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsx("slot", { name: "sidebar-end" }) }))] }))] }), !this.props.isDesktopView && (jsxs(Fragment, { children: [hasSidebarStart && (jsx(PFlyout, { theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsx(PFlyout, { theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) }))] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -114,13 +114,13 @@ class DSRCarousel extends Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(this.props.gradientColor, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
         // flip boolean values of disablePagination since it is the inverse of pagination
         this.props.disablePagination
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
+            : this.props.pagination, isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
             this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
@@ -128,6 +128,7 @@ class DSRCarousel extends Component {
                                         ...parseAndGetAriaAttributes(this.props.aria),
                                     }), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
+    getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }
 
 export { DSRCarousel };

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

@@ -1,56 +1,48 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
 export type PCanvasProps = BaseProps & {
     /**
-     * Emitted when the component requests to close the sidebar on the end side.
+     * The icon to toggle 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;
+    sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
      * Open Sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    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"> & {
     /**
-     * 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.
+     * The icon to toggle the Sidebar on the end side
      */
-    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
      * Open Sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -21,6 +21,14 @@ export type PCarouselProps = BaseProps & {
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */
@@ -92,6 +100,14 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */

package/ssr/esm/lib/dsr-components/canvas.d.ts

@@ -1,18 +1,19 @@
 import { Component } from 'react';
 /**
- * @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
+ * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
+ * @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
  * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "title", "description": "Application name" }
  * @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
  * @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
  * @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
  *
- * @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
- * @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
- *
  * @experimental
  */
 export declare class DSRCanvas extends Component<any> {
     host: HTMLElement;
     private isDesktopView;
+    private hasSidebarStart;
+    private hasSidebarEnd;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/carousel.d.ts

@@ -18,4 +18,5 @@ export declare class DSRCarousel extends Component<any> {
     private slides;
     private get hasNavigation();
     render(): JSX.Element;
+    private getPageCount;
 }

package/ssr/esm/lib/types.d.ts

@@ -684,18 +684,19 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
-declare const CANVAS_SIDEBAR_WIDTHS: readonly [
-    "medium",
-    "large"
-];
-export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
-export type CanvasSidebarStartWidth = CanvasSidebarWidth;
-export type CanvasSidebarEndWidth = CanvasSidebarWidth;
+export type CanvasSidebarStartIcon = IconName;
+export type CanvasSidebarEndIcon = IconName;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "none"
+];
+export type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "start",
     "center",