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

package/skill/references/components/p-button-tile/examples/FooterSlot.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <div class="grid grid-cols-2 gap-static-md">
+        <p-button-tile label="Some label" description="Some Description">
+          <p-tag slot="header" color="background-frosted" [compact]="true">
+            Some tag
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+          <p-text slot="footer">
+            Some footer text
+          </p-text>
+        </p-button-tile>
+        <p-button-tile label="Some label" description="Some Description" [compact]="true">
+          <p-tag slot="header" color="background-frosted" [compact]="true">
+            Some tag
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+          <p-text slot="footer">
+            Some footer text
+          </p-text>
+        </p-button-tile>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-button-tile/examples/Hyphens.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  PorscheDesignSystemModule,
+  PSelect,
+  type SelectChangeEventDetail,
+} from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-select name="hyphens" label="Select hyphens" [value]="selectedValue" (change)="onChange($event)">
+      <p-select-option value="auto">style="hyphens: auto;"</p-select-option>
+      <p-select-option value="manual">style="hyphens: manual;"</p-select-option>
+      <p-select-option value="none">style="hyphens: none;"</p-select-option>
+    </p-select>
+
+    <p-button-tile
+      label="Some label"
+      description="An extra&shy;ordinarily Porsche"
+      [compact]="true"
+      size="inherit"
+      [style]="{ maxWidth: '400px', fontSize: '45px', hyphens: selectedValue }"
+      class="mt-fluid-sm"
+    >
+      <img src="assets/lights.jpg" alt="Some image description" />
+    </p-button-tile>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  selectedValue: PSelect['value'] = 'auto';
+
+  onChange(e: CustomEvent<SelectChangeEventDetail>) {
+    this.selectedValue = e.detail.value;
+  }
+}

package/skill/references/components/p-button-tile/examples/UiBehaviour.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <div class="grid grid-cols-2 gap-static-md">
+        <p-button-tile 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">
+          <p-tag slot="header" color="background-frosted" compact="true">
+            4/3
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-button-tile>
+        <p-button-tile aspectRatio="4/3" label="Some Label" description="Some description">
+          <p-tag slot="header" color="background-frosted" compact="true">
+            4/3
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-button-tile>
+        <p-button-tile aspectRatio="1/1" label="Some Label" description="Some description">
+          <p-tag slot="header" color="background-frosted" compact="true">
+            1/1
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-button-tile>
+        <p-button-tile aspectRatio="9/16" label="Some Label" description="Some description">
+          <p-tag slot="header" color="background-frosted" compact="true">
+            9/16
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-button-tile>
+        <p-button-tile aspectRatio="1/1" label="Some Label" description="Some description">
+          <p-tag slot="header" color="background-frosted" compact="true">
+            1/1
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-button-tile>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-button-tile/p-button-tile.md

@@ -0,0 +1,115 @@
+# 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.
+
+## 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.ts](./examples/Default.ts) |
+| 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.ts](./examples/UiBehaviour.ts) |
+| Hyphens | It is possible to overwrite the hyphens style on the host element and use 'soft' hyphens. | [./examples/Hyphens.ts](./examples/Hyphens.ts) |
+| Footer slot | You can also use a `footer` slot to display additional text below the description, providing more flexibility for custom content. | [./examples/FooterSlot.ts](./examples/FooterSlot.ts) |
+| 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.ts](./examples/ColorScheme.ts) |

package/skill/references/components/p-canvas/examples/Default.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-canvas></p-canvas>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

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.ts](./examples/Default.ts) |

package/skill/references/components/p-carousel/examples/Default.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-carousel heading="Some heading" [trimSpace]="true" [pagination]="true" [rewind]="true">
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 1
+        </div>
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 2
+        </div>
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 3
+        </div>
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 4
+        </div>
+      </p-carousel>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-carousel/examples/DynamicSlides.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-carousel [slidesPerPage]="2" [heading]="'Some Heading'">
+      @for (_ of [].constructor(amountOfSlides); track _; let i = $index) {
+        <div>Slide {{ i + 1 }}</div>
+      }
+    </p-carousel>
+    <div class="flex gap-fluid-sm mt-fluid-sm">
+      <p-button type="button" (click)="amountOfSlides = amountOfSlides + 1">Add slide</p-button>
+      <p-button type="button" (click)="amountOfSlides = amountOfSlides === 0 ? 0 : amountOfSlides - 1">
+        Remove last slide
+      </p-button>
+    </div>
+    `,
+  styles: `
+    @use '@porsche-design-system/components-angular/scss' as *;
+
+    p-carousel div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #00b0f4;
+      height: 150px;
+      color: $color-primary;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  amountOfSlides = 3;
+}

package/skill/references/components/p-carousel/examples/FlexibleWidths.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-carousel heading="Some heading" slidesPerPage="auto" [trimSpace]="true" [pagination]="true" [rewind]="true">
+        <div class="grid place-content-center w-[10vw] h-[150px] bg-surface prose-text-sm">
+          10vw
+        </div>
+        <div class="grid place-content-center w-[200px] h-[150px] bg-surface prose-text-sm">
+          200px
+        </div>
+        <div class="grid place-content-center w-[100px] h-[150px] bg-surface prose-text-sm">
+          100px
+        </div>
+        <div class="grid place-content-center w-[40vw] h-[150px] bg-surface prose-text-sm">
+          40vw
+        </div>
+        <div class="grid place-content-center w-[150px] h-[150px] bg-surface prose-text-sm">
+          150px
+        </div>
+        <div class="grid place-content-center w-[50vw] h-[150px] bg-surface prose-text-sm">
+          50vw
+        </div>
+      </p-carousel>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

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

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-carousel
+      [ngStyle]="{ '--p-gradient-color-width': '25%' }"
+      [slidesPerPage]="3"
+      [focusOnCenterSlide]="true"
+      [trimSpace]="false"
+      [heading]="'Some Heading'"
+      [gradient]="true"
+      (update)="onCarouselUpdate($event)"
+      >
+      @for (slide of slides; track slide; let i = $index) {
+        <div [ngClass]="getSlideClass(i)">
+          {{ slide }}
+        </div>
+      }
+    </p-carousel>
+    `,
+  styles: `
+    @use '@porsche-design-system/components-angular/scss' as *;
+
+    p-carousel div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #00b0f4;
+      height: 150px;
+      transition: background 0.3s ease;
+      color: $color-primary;
+    }
+
+    .is-active {
+      background: #fc4040 !important;
+    }
+
+    .is-prev,
+    .is-next {
+      background: #f7cb47 !important;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  slides: string[] = Array.from({ length: 6 }, (_, i) => `Slide ${i}`);
+  private activeSlideIndex = 0;
+
+  onCarouselUpdate(event: any): void {
+    this.activeSlideIndex = event.detail.activeIndex;
+  }
+
+  getSlideClass(index: number): { [key: string]: boolean } {
+    return {
+      'is-active': index === this.activeSlideIndex,
+      'is-prev': index === this.activeSlideIndex - 1,
+      'is-next': index === this.activeSlideIndex + 1,
+    };
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-carousel heading="Some heading" [intl]="{'slideLabel': 'Slide %s von %s', 'prev': 'Vorheriger Slide', 'next': 'Nchster Slide', 'first': 'Zum ersten Slide', 'last': 'Zum letzten Slide'}">
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 1
+        </div>
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 2
+        </div>
+        <div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
+          Slide 3
+        </div>
+      </p-carousel>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

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

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CarouselUpdateEventDetail, PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-carousel [heading]="'Some Heading'" [activeSlideIndex]="activeSlideIndex" (update)="onUpdate($event)">
+      <div>Slide 1</div>
+      <div>Slide 2</div>
+      <div>Slide 3</div>
+    </p-carousel>
+
+    <div class="flex gap-fluid-sm mt-fluid-sm">
+    @for (_ of [].constructor(3); track _; let i = $index) {
+      <p-button
+        type="button"
+        (click)="onButtonClick($event)"
+        [disabled]="activeSlideIndex === i"
+        >
+        {{ i + 1 }}
+      </p-button>
+    }
+    </div>
+    `,
+  styles: `
+    @use '@porsche-design-system/components-angular/scss' as *;
+
+    p-carousel div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #00b0f4;
+      height: 150px;
+      color: $color-primary;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  activeSlideIndex = 1;
+
+  onUpdate(e: CustomEvent<CarouselUpdateEventDetail>) {
+    this.activeSlideIndex = e.detail.activeIndex;
+  }
+  onButtonClick(e: MouseEvent) {
+    this.activeSlideIndex = parseInt((e.target as HTMLButtonElement).innerText) - 1;
+  }
+}