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

package/skill/references/components/p-canvas/p-canvas.md

@@ -0,0 +1,91 @@
+# 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
+```
+
+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/skill/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/skill/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/skill/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>
+    </>
+  )
+}

package/skill/references/components/p-carousel/examples/FocusOnCenterSlide.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { PCarousel } from '@porsche-design-system/components-react';
+import { useState } from 'react';
+
+export const Example = () => {
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+
+  const slideStyles = {
+    base: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#00b0f4',
+      height: '150px',
+      transition: 'background 0.3s ease',
+    },
+    active: {
+      background: '#fc4040',
+    },
+    prevNext: {
+      background: '#f7cb47',
+    },
+  };
+
+  const getSlideStyle = (index: number) => {
+    if (index === activeSlideIndex) {
+      return { ...slideStyles.base, ...slideStyles.active };
+    }
+    if (index === activeSlideIndex - 1 || index === activeSlideIndex + 1) {
+      return { ...slideStyles.base, ...slideStyles.prevNext };
+    }
+    return slideStyles.base;
+  };
+
+  const onCarouselUpdate = (newIndex: number) => {
+    setActiveSlideIndex(newIndex);
+  };
+  return (
+    <PCarousel
+      slidesPerPage={3}
+      heading="Some Heading"
+      onUpdate={(e) => onCarouselUpdate(e.detail.activeIndex)}
+      focusOnCenterSlide
+      trimSpace={false}
+      gradient={true}
+      // @ts-expect-error: ignore unknown property (TS2353)
+      style={{ '--p-gradient-color-width': '25%' }}
+    >
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div style={getSlideStyle(i)} key={i}>
+          {`Slide ${i + 1}`}
+        </div>
+      ))}
+    </PCarousel>
+  );
+};

package/skill/references/components/p-carousel/examples/Intl.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PCarousel } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PCarousel heading="Some heading" intl={{'slideLabel': 'Slide %s von %s', 'prev': 'Vorheriger Slide', 'next': 'Nchster Slide', 'first': 'Zum ersten Slide', 'last': 'Zum letzten Slide'}}>
+        <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>
+      </PCarousel>
+    </>
+  )
+}

package/skill/references/components/p-carousel/examples/JumpToSlide.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { type CarouselUpdateEventDetail, PButton, PCarousel } from '@porsche-design-system/components-react';
+import { type MouseEvent, useCallback, useState } from 'react';
+
+export const Example = () => {
+  const [activeSlideIndex, setActiveSlideIndex] = useState(1);
+  const onUpdate = useCallback(
+    (e: CustomEvent<CarouselUpdateEventDetail>) => setActiveSlideIndex(e.detail.activeIndex),
+    []
+  );
+  const onButtonClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement> & { target: HTMLButtonElement }) =>
+      setActiveSlideIndex(parseInt(e.target.innerText) - 1),
+    []
+  );
+
+  const slideStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: '#00b0f4',
+    height: '150px',
+  };
+
+  return (
+    <>
+      <PCarousel heading="Some Heading" activeSlideIndex={activeSlideIndex} onUpdate={onUpdate}>
+        <div style={slideStyle}>Slide 1</div>
+        <div style={slideStyle}>Slide 2</div>
+        <div style={slideStyle}>Slide 3</div>
+      </PCarousel>
+
+      <div className="flex gap-fluid-sm mt-fluid-sm">
+        {Array.from(Array(3)).map((_, i) => (
+          <PButton key={i} type="button" onClick={onButtonClick} disabled={activeSlideIndex === i}>
+            {i + 1}
+          </PButton>
+        ))}
+      </div>
+    </>
+  );
+};

package/skill/references/components/p-carousel/p-carousel.md

@@ -0,0 +1,142 @@
+# p-carousel
+
+The `p-carousel` component allows related or similar content to be consumed on a step by step basis with a better overview than just showing them in a grid or as a list. The reason for this is, that only a certain amount of slides is visible at the same time.
+
+Therefore, the `p-carousel`'s content has to be divided into multiple parts or slides. The amount of slides visible can be specified on a per-breakpoint basis.
+
+> **Layout hint**
+>
+> When using the `width` prop to align with the **[Porsche Grid](../../styles/tailwindcss.md)**, the component must span the full viewport width.
+>
+> When using the `--p-carousel-px` CSS variable, the component can be placed within any container, allowing you to customize the horizontal padding that reveals parts of the next/previous slide.
+>
+> When using the `--p-carousel-ps` and `--p-carousel-pe` CSS variables, the component can be placed within any container, allowing you to customize the horizontal padding asymmetric that reveals parts of the next/previous slide.
+
+> **Dynamic changes**
+>
+> This component has limited support for dynamic property changes due to the way it is implemented.
+>
+> If you need to use a specific property dynamically, please open a [feature request](https://designsystem.porsche.com/help/feature-request/).
+
+## Usage
+
+### Do:
+
+- Use to showcase a group of related featured content in a row, such as images or cards.
+- Use when you have five or fewer items of the same style to display.
+- Use when there is insufficient content space to display all items without overlapping or cluttering.
+- Keep the number of slides within the carousel to a minimum, preferably five or fewer.
+- Use specify the number of slides visible at the same time, either static or for each breakpoint individually.
+
+### Don't:
+
+- Don't vary the size of the items in its height.
+- Don't maintain the same layout or at least the same content structure with every item.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | - Moves focus to the next (or previous) focusable element. - Supports cycling through all items. - Activates "Skip" link (if set through `skipLinkTarget`). |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the carousel. |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"` | Defines a string value that labels prev/next and carousel items. |
+| `role="region"` | Defines the carousel as a semantic region. |
+| `role="group"` | Defines the carousel item as a semantic group. |
+| `aria-labelledby="IDREF"` | References the accessible name. |
+| `aria-roledescription="carousel"` | Specifies the role as "carousel". |
+| `aria-roledescription="slide"` | Specifies the role of the carousel item as "slide". |
+| `aria-live="polite"` | Announces current active slide item. |
+
+## Development considerations
+
+### Skip Carousel Entries
+
+Through the `skipLinkTarget` property, a skip link for keyboard users can be provided to give the possibility to skip over all carousel entries. The skip link is only visible when it receives focus from the keyboard.
+
+- Use the `skipLinkTarget` property if you have >5 carousel items
+- The target of the skip link should point to the next heading or element right after the carousel
+
+### Common do's and don'ts
+
+- **Do** configure `skip-link-target` for larger carousels or repeated content sections.
+- **Do** ensure the skip target points to the next meaningful section.
+- **Do** provide a descriptive carousel label via the `aria` property.
+- **Don't** force keyboard users to tab through every slide control when a skip path is needed.
+- **Don't** use vague labels that do not communicate carousel context.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `activeSlideIndex` | `number` | `0` | Sets the zero-based index of the currently visible slide. Update this to navigate programmatically. |
+| `alignControls` | `'start'` `'center'` `'auto'` | `'auto'` | Controls the alignment of custom slotted controls within the header area. |
+| `alignHeader` | `'start'` `'center'` | `'start'` | Controls the horizontal alignment of the heading and description. |
+| `aria` | `CarouselAriaAttribute` | `undefined` | Sets ARIA attributes on the carousel region element for improved accessibility. |
+| `description` | `string` | `undefined` | Sets the description text displayed below the heading for additional context. |
+| `focusOnCenterSlide` | `boolean` | `false` | When enabled, each slide is individually focusable and the carousel navigates one slide at a time instead of one page. |
+| `gradient` | `boolean` | `false` | Shows a gradient fade at the start and end edges to visually indicate more slides beyond the viewport. |
+| `heading` | `string` | `undefined` | Sets the heading text displayed above the carousel. Also used as the accessible label when no `aria` prop is set. |
+| `headingSize` | `'x-large'` `'xx-large'` | `'x-large'` | Sets the font size of the carousel heading. |
+| `intl` | `CarouselInternationalization` | `undefined` | Overrides the default label strings used for the previous, next, and page indicators — useful for localization. |
+| `pagination` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Shows pagination dot indicators below the carousel. Supports responsive breakpoint values. |
+| `rewind` | `boolean` | `false` | Enables infinite looping — navigating past the last slide wraps back to the first, and vice versa. |
+| `skipLinkTarget` | `string` | `undefined` | Sets the `href` of an in-page skip link that lets keyboard users jump past the carousel slides. |
+| `slidesPerPage` | `'auto'` `1` `2` `3` `4` `5` `6` `7` `8` `9` `10`<br>`BreakpointCustomizable<CarouselSlidesPerPage>` | `1` | Sets how many slides are visible at once. Use `auto` to control each slide's width via CSS. Supports responsive breakpoint values. |
+| `trimSpace` | `boolean` | `false` | Removes whitespace before the first and after the last slide when `focusOnCenterSlide` is enabled. |
+| `width` | `'basic'` `'extended'` `'wide'` `'full'` | `'basic'` | Sets the maximum width and outer spacing of the carousel, aligned to PDS grid widths. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `update` | `CustomEvent<CarouselUpdateEventDetail>`<br>`{ activeIndex: number; previousIndex: number }` | Emitted when the carousel navigates to a new slide, with the active and previous slide indexes in the event detail. |
+
+### Controlled properties
+
+- `activeSlideIndex` — a controlled prop, but the component also updates it internally. Listen for the `update` event to observe changes; you do not have to write the value back.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `heading` | no | — | Renders a heading above the carousel. |
+| `description` | no | — | Renders descriptive content below the heading. |
+| `controls` | no | — | Renders custom controls such as navigation buttons or indicators. |
+| _(default)_ | no | — | Default slot for the carousel slides. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-carousel-px` | — | Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore. |
+| `--p-carousel-ps` | — | Defines the logical inline start padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-pe`. When used then the prop `width` has no effect anymore. |
+| `--p-carousel-pe` | — | Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore. |
+| `--p-carousel-prev-next-color-scheme` | — | Color Scheme applied to the navigation (prev/next buttons) |
+| `--p-carousel-border-radius` | `var(--p-radius-large, var(--p-radius-4xl))` | Sets the border radius of each carousel slide. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Slides with flexible widths | In case you want to have slides with different widths you can use `slidesPerPage` with a value of `auto`. | [./examples/FlexibleWidths.tsx](./examples/FlexibleWidths.tsx) |
+| Jump to slide (activeSlideIndex) | To control the `p-carousel` from the outside you can specify its `activeSlideIndex` initially but also later. | [./examples/JumpToSlide.tsx](./examples/JumpToSlide.tsx) |
+| Add/remove slides | Slides can be added and removed dynamically. | [./examples/DynamicSlides.tsx](./examples/DynamicSlides.tsx) |
+| Centered Slide and Gradient Customization | The carousel centers the active slide and loops through slides individually rather than by page when multiple slides are visible. | [./examples/FocusOnCenterSlide.tsx](./examples/FocusOnCenterSlide.tsx) |
+| Internationalization (i18n) | Default wordings for screen readers can be overridden or translated by passing an object to the `intl` property. | [./examples/Intl.tsx](./examples/Intl.tsx) |

package/skill/references/components/p-checkbox/examples/Default.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PCheckbox } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PCheckbox label="Some label" name="some-name"></PCheckbox>
+    </>
+  )
+}

package/skill/references/components/p-checkbox/examples/Form.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  type CheckboxChangeEventDetail,
+  PButton,
+  PCheckbox,
+  PCheckboxProps,
+  PText,
+} from '@porsche-design-system/components-react';
+import { FormEvent, useState } from 'react';
+
+export const Example = () => {
+  const [form, setForm] = useState({ myCheckbox: false });
+  const [lastSubmittedData, setLastSubmittedData] = useState<any>();
+
+  const onChange = (e: CustomEvent<CheckboxChangeEventDetail>) => {
+    const { name, checked } = e.target as HTMLElement & PCheckboxProps;
+    setForm((prev) => ({
+      ...prev,
+      [name]: checked,
+    }));
+  };
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLastSubmittedData(JSON.stringify(form));
+  };
+
+  const onReset = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setForm({ myCheckbox: false });
+  };
+
+  return (
+    <>
+      <form onSubmit={onSubmit} onReset={onReset} className="flex flex-col gap-fluid-sm">
+        <PCheckbox name="myCheckbox" label="Some Label" checked={form['myCheckbox']} onChange={onChange} />
+        <div className="flex gap-fluid-sm">
+          <PButton type="submit">Submit</PButton>
+          <PButton type="reset">Reset</PButton>
+        </div>
+        <PText>Last submitted data: {lastSubmittedData}</PText>
+      </form>
+    </>
+  );
+};

package/skill/references/components/p-checkbox/examples/Indeterminate.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PCheckbox } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="flex flex-col gap-static-sm">
+        <PCheckbox label="Some label" indeterminate={true}></PCheckbox>
+        <PCheckbox label="Some label" indeterminate={true} checked={true}></PCheckbox>
+      </div>
+    </>
+  )
+}

package/skill/references/components/p-checkbox/examples/Slots.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PCheckbox, PPopover } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="flex flex-col gap-static-sm">
+        <PCheckbox name="some-name">
+          <span slot="label">
+            <img src="assets/911.png" alt="" className="object-contain inline-block align-middle -mt-2 me-static-sm w-[70px]" />
+            Some slotted label with custom content and a "label-after" slot
+          </span>
+          <PPopover slot="label-after">
+            Some label with a 
+            <a href="https://designsystem.porsche.com" className="underline">
+              link
+            </a>
+          </PPopover>
+        </PCheckbox>
+        <PCheckbox name="some-name">
+          <span slot="label">
+            Some slotted label
+          </span>
+        </PCheckbox>
+        <PCheckbox name="some-name" disabled="true">
+          <span slot="label">
+            Disabled slotted label, a nested 
+            <a href="https://www.porsche.com" className="underline" tabindex="-1">
+              link
+            </a>
+             and a label-after slot.
+          </span>
+          <PPopover slot="label-after">
+            Some information about the disabled state.
+          </PPopover>
+        </PCheckbox>
+        <PCheckbox name="some-name" state="error">
+          <span slot="label">
+            Some slotted label with a nested 
+            <a href="https://www.porsche.com" className="underline">
+              link
+            </a>
+          </span>
+          <span slot="message">
+            Some slotted error message with a 
+            <a href="https://designsystem.porsche.com" className="underline">
+              link
+            </a>
+          </span>
+        </PCheckbox>
+      </div>
+    </>
+  )
+}

package/skill/references/components/p-checkbox/examples/WrappedLabel.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PCheckbox, PPopover } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const onClick = () => {
+    setChecked(true);
+  }
+
+  return (
+    <>
+      <div className="flex items-start w-64 border-2 border-contrast-lower rounded-md hover:border-primary transition-colors">
+        <label className="inline-flex flex-col p-fluid-xs gap-static-xs prose-text-sm cursor-pointer hover:[--p-checkbox-border-color:var(--color-primary)]" onClick={onClick}>
+          <span>
+            Some wrapped custom label besides a popover
+          </span>
+          <PCheckbox checked={false}></PCheckbox>
+        </label>
+        <PPopover className="mr-static-xs mt-static-xs">
+          Some additional content.
+        </PPopover>
+      </div>
+    </>
+  )
+}