@porsche-design-system/components-react 4.5.0 → 4.6.0-rc.1

package/skills/pds-knowledge-react/references/components/p-button-tile/examples/ColorScheme.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PButtonTile, PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PButtonTile label="Some label" description="Some Description" gradient={true}>
+        <PTag slot="header" color="background-frosted" compact={true} style={{'colorScheme': 'only light'}}>
+          Some tag
+        </PTag>
+        <img src="assets/lights.jpg" alt="Some image description" />
+      </PButtonTile>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-button-tile/examples/Default.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PButtonTile, PTag, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PButtonTile label="Some label" description="Some Description" gradient={true}>
+        <PTag slot="header" color="background-frosted" compact={true}>
+          Some tag
+        </PTag>
+        <img src="assets/lights.jpg" alt="Some image description" />
+        <PText slot="footer">
+          Some footer text
+        </PText>
+      </PButtonTile>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-button-tile/examples/FooterSlot.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { PButtonTile, PTag, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-static-md">
+        <PButtonTile label="Some label" description="Some Description">
+          <PTag slot="header" color="background-frosted" compact={true}>
+            Some tag
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+          <PText slot="footer">
+            Some footer text
+          </PText>
+        </PButtonTile>
+        <PButtonTile label="Some label" description="Some Description" compact={true}>
+          <PTag slot="header" color="background-frosted" compact={true}>
+            Some tag
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+          <PText slot="footer">
+            Some footer text
+          </PText>
+        </PButtonTile>
+      </div>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-button-tile/examples/Hyphens.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PButtonTile, PSelect, PSelectOption, SelectChangeEventDetail } from '@porsche-design-system/components-react';
+import { Property } from 'csstype';
+import { useState } from 'react';
+
+export const Example = () => {
+  const [hyphens, setHyphens] = useState<Property.Hyphens>('auto');
+
+  const onChange = (e: CustomEvent<SelectChangeEventDetail>) => {
+    setHyphens(e.detail.value as Property.Hyphens);
+  };
+
+  return (
+    <>
+      <PSelect label="Select hyphens" name="hyphens" value={hyphens} onChange={onChange}>
+        <PSelectOption value="auto">style="hyphens: auto;"</PSelectOption>
+        <PSelectOption value="manual">style="hyphens: manual;"</PSelectOption>
+        <PSelectOption value="none">style="hyphens: none;"</PSelectOption>
+      </PSelect>
+
+      <PButtonTile
+        label="Some label"
+        description="An extra&shy;ordinarily Porsche"
+        compact={true}
+        size="inherit"
+        style={{ colorScheme: 'dark', maxWidth: '400px', fontSize: '45px', hyphens }}
+        className="mt-fluid-sm"
+      >
+        <img src="assets/lights.jpg" alt="Some image description" />
+      </PButtonTile>
+    </>
+  );
+};

package/skills/pds-knowledge-react/references/components/p-button-tile/examples/UiBehaviour.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PButtonTile, PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-static-md">
+        <PButtonTile aspectRatio="4/3" label="Some Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum." size="large">
+          <PTag slot="header" color="background-frosted" compact="true">
+            4/3
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </PButtonTile>
+        <PButtonTile aspectRatio="4/3" label="Some Label" description="Some description">
+          <PTag slot="header" color="background-frosted" compact="true">
+            4/3
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </PButtonTile>
+        <PButtonTile aspectRatio="1/1" label="Some Label" description="Some description">
+          <PTag slot="header" color="background-frosted" compact="true">
+            1/1
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </PButtonTile>
+        <PButtonTile aspectRatio="9/16" label="Some Label" description="Some description">
+          <PTag slot="header" color="background-frosted" compact="true">
+            9/16
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </PButtonTile>
+        <PButtonTile aspectRatio="1/1" label="Some Label" description="Some description">
+          <PTag slot="header" color="background-frosted" compact="true">
+            1/1
+          </PTag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </PButtonTile>
+      </div>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-button-tile/p-button-tile.md

@@ -0,0 +1,119 @@
+# p-button-tile
+
+The `p-button-tile` is an interactive component that displays a provided image to tease content and performs form or **interaction** events within one container. Whenever you want to provide navigational elements, stick to the [Link Tile](../p-link-tile/p-link-tile.md) component instead.
+
+**Note:** The component does not take care of processing and aligning the image.
+
+An `<img/>`, `<picture/>` or `<video/>` tag has to be provided as default slot.
+
+Additionally, the properties `description` and `label` are required. The `description` property is used as a teaser with a more detailed description of the button and its action.
+
+The `label` property is used to describe the button.
+
+## Usage
+
+### Do:
+
+- Use Button Tile for **on-page interactivity**.
+- Use [Link Tile](../p-link-tile/p-link-tile.md) instead if you want to **navigate** to another page.
+- Use Button Tile with appropriate aspect ratios and short descriptions (80 characters or fewer).
+- Use basic Button Tile for better perception tests and compact Button Tile for improved spacing (especially on mobile).
+- Use gradient Button Tile when image contrast is insufficient and select images with natural contrast.
+- Use font size for visual hierarchy and customize image type and font size for responsiveness.
+- Use engaging verbs and product names in compact Button Tile.
+- Create assets upfront for image processing.
+
+### Don't:
+
+- Don't manipulate images, keep them natural and contrasted.
+- Don't write long descriptions that overflow content (especially on mobile).
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+| `Enter`, `Space` | Activates the button. |
+| `disabled` | Button still focusable. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels an interactive element. It's required for buttons with `hideLabel="true"`. |
+| `aria-description` | Defines a string value that adds a more detailed description of the interactive element. |
+| `aria-expanded` | Exposes a visual state (e.g. expanded/collapsed) of another element. |
+| `aria-pressed` | Exposes the `pressed` state of a toggle button. |
+| `aria-haspopup` | Defines that the button opens a popup (e.g. `dialog`). It can be used in combination with `aria-expanded` to indicate the state of the popup. |
+
+## Limitations
+
+Due to the nature of **Web Components** and **shadow DOM**, there are limitations when using some **ARIA** attributes to define relationships between elements across different shadow DOMs or shadow DOM/light DOM combinations.
+
+| ARIA | Support |
+| --- | --- |
+| `aria-labelledby` | 🚫 |
+| `aria-describedby` | 🚫 |
+| `aria-owns` | 🚫 |
+| `aria-controls` | 🚫 |
+| `aria-activedescendant` | 🚫 |
+
+## Development considerations
+
+### Labelling
+
+If the text of the button does not clearly indicate what the button's function is, add a brief, descriptive label using the `aria` property with the `aria-label` value to provide more context for screen reader users. Phrases like "Detail" or "Open" can be unclear when read out of context by a screen reader. In such instances, provide an alternative text that offers more detailed information, such as "Open details of product XYZ."
+
+### Common do's and don'ts
+
+- **Do** pass ARIA attributes via the `aria` prop when the visible label needs more context.
+- **Do** provide a descriptive `label` that explains the tile action.
+- **Do** add `aria-label` on slotted `<video>` elements used as backgrounds.
+- **Don't** add native `aria-*` attributes directly on the component host.
+
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `align` | `'top'` `'bottom'` | `'bottom'` | Controls the vertical placement of the description and button — `top` or `bottom`. |
+| `aria` | `ButtonTileAriaAttribute` | `undefined` | Sets ARIA attributes on the tile's action button to improve accessibility for screen readers. |
+| `aspectRatio` | `'1/1'` `'4/3'` `'3/4'` `'16/9'` `'9/16'` `'auto'`<br>`BreakpointCustomizable<ButtonTileAspectRatio>` | `'4/3'` | Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values. |
+| `compact` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Renders only the icon button without the full label. Supports responsive breakpoint values. |
+| `description` _(required)_ | `string` | `undefined` | Sets the description text displayed in the tile's content area. |
+| `disabled` | `boolean` | `false` | Disables the tile, preventing button interaction. |
+| `gradient` | `boolean` | `false` | Shows a gradient overlay over the media slot to improve text legibility on bright images or videos. |
+| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed in the tile's action button. Use `none` to show no icon. |
+| `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set. |
+| `label` _(required)_ | `string` | `undefined` | Sets the accessible label text of the action button rendered inside the tile. |
+| `loading` | `boolean` | `false` | Disables the tile and shows a loading spinner to indicate an ongoing operation. |
+| `size` | `'medium'` `'large'` `'inherit'`<br>`BreakpointCustomizable<ButtonTileSize>` | `'medium'` | Sets the font size of the description text in the tile content area. Supports responsive breakpoint values. |
+| `type` | `'button'` `'submit'` `'reset'` | `'submit'` | Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action. |
+| `weight` | `'regular'` `'semi-bold'`<br>`BreakpointCustomizable<ButtonTileWeight>` | `'semi-bold'` | Sets the font weight of the description text in the tile content area. Supports responsive breakpoint values. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `header` | no | — | Renders a header section above the content area. |
+| _(default)_ | no | — | Default slot for the img or picture tag. |
+| `footer` | no | — | Renders a footer section below the description. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| UI behaviour | The component is able to break out of its aspect ratio in case content overflows to be accessibility compliant (see first row in example). | [./examples/UiBehaviour.tsx](./examples/UiBehaviour.tsx) |
+| Hyphens | It is possible to overwrite the hyphens style on the host element and use 'soft' hyphens. | [./examples/Hyphens.tsx](./examples/Hyphens.tsx) |
+| Footer slot | You can also use a `footer` slot to display additional text below the description, providing more flexibility for custom content. | [./examples/FooterSlot.tsx](./examples/FooterSlot.tsx) |
+| Color scheme | The component defines `color-scheme: dark` internally, independently of the scheme defined globally or on an ancestor outside the Button Tile. | [./examples/ColorScheme.tsx](./examples/ColorScheme.tsx) |

package/skills/pds-knowledge-react/references/components/p-canvas/examples/Default.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  type CanvasSidebarStartUpdateEventDetail,
+  PButton,
+  PCanvas,
+  PHeading,
+  PText,
+} from '@porsche-design-system/components-react';
+import { breakpointS } from '@porsche-design-system/components-react/emotion';
+import { useCallback, useState } from 'react';
+
+export const Example = () => {
+  const [isSidebarStartOpen, setIsSidebarStartOpen] = useState<boolean>(
+    // initially, sidebar should be closed on mobile and opened on desktop
+    window.matchMedia(`(min-width: ${breakpointS}px)`).matches
+  );
+  const [isSidebarEndOpen, setIsSidebarEndOpen] = useState<boolean>(false);
+
+  const onSidebarStartUpdate = useCallback((e: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => {
+    setIsSidebarStartOpen(e.detail.open);
+  }, []);
+  const onSidebarEndOpen = useCallback(() => {
+    setIsSidebarEndOpen(true);
+  }, []);
+  const onSidebarEndDismiss = useCallback(() => {
+    setIsSidebarEndOpen(false);
+  }, []);
+
+  const style = `
+      .-col-span-full-1 {
+        grid-column: 1 / -1;
+      }
+
+      .-col-span-full-2 {
+        grid-column: 2 / -2;
+      }
+
+      .-col-span-full-3 {
+        grid-column: 3 / -3;
+      }
+
+      .-col-span-4 {
+        grid-column: span 4;
+      }
+
+      .tile {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+        background: lightpink;
+      }
+  `;
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: style }} />
+      <PCanvas
+        sidebarStartOpen={isSidebarStartOpen}
+        sidebarEndOpen={isSidebarEndOpen}
+        onSidebarStartUpdate={onSidebarStartUpdate}
+        onSidebarEndDismiss={onSidebarEndDismiss}
+      >
+        <a slot="title" href="#">
+          App Name
+        </a>
+
+        <PButton
+          slot="header-end"
+          icon="configurate"
+          variant="secondary"
+          compact={true}
+          hideLabel={true}
+          onClick={onSidebarEndOpen}
+        >
+          Open sidebar
+        </PButton>
+
+        <div className="-p-canvas-grid">
+          <PText className="-col-span-full-1">Content</PText>
+
+          <div className="tile -col-span-4">Grid span 4x</div>
+          <div className="tile -col-span-4">Grid span 4x</div>
+          <div className="tile -col-span-4">Grid span 4x</div>
+
+          <div className="tile -col-span-full-1">12 Grid columns</div>
+          <div className="tile -col-span-full-2">10 Grid columns</div>
+          <div className="tile -col-span-full-3">8 Grid columns</div>
+        </div>
+
+        <div slot="footer" className="-p-canvas-grid">
+          <PText className="-col-span-full-1">Footer</PText>
+          <div className="tile -col-span-full-1">12 Grid columns</div>
+        </div>
+
+        <div slot="sidebar-start">
+          <PText>Sidebar Start</PText>
+        </div>
+
+        <PHeading slot="sidebar-end-header" tag="h2" size="small">
+          Sidebar End Header
+        </PHeading>
+
+        <div slot="sidebar-end">
+          <PText>Sidebar End</PText>
+        </div>
+      </PCanvas>
+    </>
+  );
+};

package/skills/pds-knowledge-react/references/components/p-canvas/p-canvas.md

@@ -0,0 +1,95 @@
+# p-canvas
+
+> **Experimental:** This component is experimental — its API may change in any release. Avoid relying on it in production.
+
+The `p-canvas` is an experimental layout component for productive web applications.
+
+The canvas component provides a CSS utility class which comes with a basic 12 columns [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid) and [CSS container-type](https://css-tricks.com/css-container-queries). The utility class can be used in default or footer slot to align its content.
+
+```scss
+.-p-canvas-grid // experimental, might be removed in a future release
+```
+
+> **Porsche Grid compatibility**
+>
+> The standard Porsche Grid currently supports only top-level layouts that span the full viewport width. Do not use it inside the `p-canvas` default or footer slots because their available width can be reduced by open sidebars. Use `.-p-canvas-grid` instead.
+
+The canvas component has some values which can be overwritten by **CSS Variables**.
+
+```scss
+--p-canvas-sidebar-start-width: 220px;
+--p-canvas-sidebar-end-width: 180px;
+```
+
+## Usage
+
+The following section provides guidance for designers and developers on how to use the p-canvas layout component in different application contexts.
+
+### Do:
+
+- Use p-canvas to structure complex application layouts with sidebars, headers, and footers in a consistent, responsive manner.
+- Use named slots (sidebar-start, sidebar-end, header-start, footer, etc.) to separate concerns and improve maintainability.
+- Use the -p-canvas-grid utility class to create a 12-column layout inside the canvas content or footer areas.
+- Combine p-canvas with CSS Grid column helpers (e.g. grid-column: span 4) to align content efficiently.
+- Use the sidebarStartOpen and sidebarEndOpen bindings to dynamically control sidebar behavior based on viewport size or user actions.
+- Customize layout widths via CSS variables like --p-canvas-sidebar-start-width and --p-canvas-sidebar-end-width to match your design needs.
+- Use slot="background" for decorative media like images or videos that sit below the main content, enhancing visual appeal.
+- Consider keyboard and focus management when using dynamic flyouts or sidebars, especially on mobile.
+
+### Don’t:
+
+- Don’t use p-canvas for simple or static content pages where a standard layout is sufficient.
+- Don’t place critical content only inside sidebars or sticky areas without providing access via the main layout.
+- Don’t rely solely on custom styling; instead, use provided slots and layout classes to maintain consistency.
+- Don’t nest p-canvas within another p-canvas; this may lead to unpredictable layout behavior.
+- Don’t overload the p-canvas with too many sticky elements that compete for screen space, especially on smaller viewports.
+- Don’t use -p-canvas-grid outside of canvas slots—it is experimental and might be removed in future releases.
+- Don’t override CSS variables globally without scoping, as this can break other usages in your application.
+
+## Accessibility support
+
+Not yet considered due to experimental state.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `background` | `'canvas'` `'surface'` | `'canvas'` | Sets the background color of the main content area and automatically applies a matching color to the sidebar. |
+| `sidebarEndOpen` | `boolean` | `false` | Controls whether the utility sidebar on the end side (right in LTR) is open or collapsed. |
+| `sidebarStartOpen` | `boolean` | `false` | Controls whether the navigation sidebar on the start side (left in LTR) is open or collapsed. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `sidebarEndDismiss` | `CustomEvent<void>` | Emitted when the user dismisses the end sidebar via the close button. |
+| `sidebarStartUpdate` | `CustomEvent<CanvasSidebarStartUpdateEventDetail>`<br>`{ open: boolean }` | Emitted when the user toggles the start sidebar, with the new open state in the event detail. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `title` | no | — | Renders the application name in the header section of the sidebar start area. |
+| `header-start` | no | — | Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). |
+| `header-end` | no | — | Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). |
+| _(default)_ | no | — | Default slot for the main content. |
+| `footer` | no | — | Renders a **sticky** footer section underneath the main content. |
+| `sidebar-start` | no | — | Renders a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout. |
+| `sidebar-end` | no | — | Renders a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout. |
+| `sidebar-end-header` | no | — | Renders in the header section of the sidebar end area. |
+| `background` | no | — | Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-canvas-sidebar-start-width` | `320px` | Width of the sidebar start. |
+| `--p-canvas-sidebar-end-width` | `320px` | Width of the sidebar end. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

package/skills/pds-knowledge-react/references/components/p-carousel/accessibility.md

@@ -0,0 +1,61 @@
+# p-carousel accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PCarousel aria-label="Slider">
+  {/* slides */}
+</PCarousel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PCarousel aria={{'aria-label': 'Featured Porsche models'}}>
+  {/* slides */}
+</PCarousel>
+```
+
+### Carousel without skip path for keyboard users
+
+#### ❌ Anti-pattern
+
+```tsx
+<PCarousel>
+  {/* many slides (>6 items) */}
+</PCarousel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PCarousel skipLinkTarget="#after-carousel" aria={{'aria-label': 'Highlights'}}>
+  {/* many slides (>6 items) */}
+</PCarousel>
+
+<PHeading tag="h2" id="after-carousel">
+  Next section
+</PHeading>
+```
+
+### Vague carousel label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PCarousel aria={{'aria-label': 'Slider'}}>
+  {/* slides */}
+</PCarousel>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PCarousel aria={{'aria-label': 'Featured Porsche models'}}>
+  {/* slides */}
+</PCarousel>
+```

package/skills/pds-knowledge-react/references/components/p-carousel/examples/Default.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PCarousel } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PCarousel heading="Some heading" trimSpace={true} pagination={true} rewind={true}>
+        <div className="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 1
+        </div>
+        <div className="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 2
+        </div>
+        <div className="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 3
+        </div>
+        <div className="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 4
+        </div>
+      </PCarousel>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-carousel/examples/DynamicSlides.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PButton, PCarousel } from '@porsche-design-system/components-react';
+import { useCallback, useState } from 'react';
+
+export const Example = () => {
+  const [amountOfSlides, setAmountOfSlides] = useState(3);
+  const onAddClick = useCallback(() => setAmountOfSlides((prev) => prev + 1), []);
+  const onRemoveClick = useCallback(() => setAmountOfSlides((prev) => (prev === 0 ? 0 : prev - 1)), []);
+
+  const slideStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: '#00b0f4',
+    height: '150px',
+  };
+
+  return (
+    <>
+      <PCarousel slidesPerPage={2} heading="Some Heading">
+        {Array.from(Array(amountOfSlides)).map((_, i) => (
+          <div style={slideStyle} key={i} children={`Slide ${i + 1}`} />
+        ))}
+      </PCarousel>
+
+      <div className="flex gap-fluid-sm mt-fluid-sm">
+        <PButton type="button" onClick={onAddClick} children="Add slide" />
+        <PButton type="button" onClick={onRemoveClick} children="Remove last slide" />
+      </div>
+    </>
+  );
+};

package/skills/pds-knowledge-react/references/components/p-carousel/examples/FlexibleWidths.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { PCarousel } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PCarousel heading="Some heading" slidesPerPage="auto" trimSpace={true} pagination={true} rewind={true}>
+        <div className="grid place-content-center w-[10vw] h-[150px] bg-surface prose-text-sm">
+          10vw
+        </div>
+        <div className="grid place-content-center w-[200px] h-[150px] bg-surface prose-text-sm">
+          200px
+        </div>
+        <div className="grid place-content-center w-[100px] h-[150px] bg-surface prose-text-sm">
+          100px
+        </div>
+        <div className="grid place-content-center w-[40vw] h-[150px] bg-surface prose-text-sm">
+          40vw
+        </div>
+        <div className="grid place-content-center w-[150px] h-[150px] bg-surface prose-text-sm">
+          150px
+        </div>
+        <div className="grid place-content-center w-[50vw] h-[150px] bg-surface prose-text-sm">
+          50vw
+        </div>
+      </PCarousel>
+    </>
+  )
+}