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

package/skill/references/components/p-modal/examples/CustomStyling.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-button type="button" [aria]="{'aria-haspopup': 'dialog'}" (click)="onClick()">
+        Open Modal
+      </p-button>
+
+      <p-modal [open]="open" backdrop="shading" [aria]="{'aria-label': 'Some Label'}" class="[--p-modal-width:clamp(276px,45.25vw+131px,1000px)] [--p-modal-spacing-top:200px] [--p-modal-spacing-bottom:50px]" (dismiss)="onDismiss()">
+        <img src="assets/porsche-992-carrera-s.jpg" class="-mt-(--ref-p-modal-pt) -mx-(--ref-p-modal-px) -mb-(--ref-p-modal-pb) max-w-(--p-modal-width) rounded-xl" />
+      </p-modal>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  open = false;
+
+  onClick() {
+    this.open = true;
+  }
+  onDismiss() {
+    this.open = false;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-button type="button" [aria]="{'aria-haspopup': 'dialog'}" (click)="onClick()">
+        Open Modal
+      </p-button>
+
+      <p-modal [open]="open" [aria]="{'aria-label': 'Some Heading'}" (dismiss)="onDismiss()">
+        <p-heading slot="header" size="large" tag="h2">
+          Some Heading
+        </p-heading>
+        <p-text>
+          Some Content
+        </p-text>
+        <div slot="footer" role="group" class="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <p-button type="button">
+            Proceed
+          </p-button>
+          <p-button type="button" variant="secondary">
+            Cancel
+          </p-button>
+        </div>
+      </p-modal>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  open = false;
+
+  onClick() {
+    this.open = true;
+  }
+  onDismiss() {
+    this.open = false;
+  }
+}

package/skill/references/components/p-modal/examples/Scrollable.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-button type="button" [aria]="{'aria-haspopup': 'dialog'}" (click)="onClick()">
+        Open Modal
+      </p-button>
+
+      <p-modal [open]="open" [aria]="{'aria-label': 'Some Heading'}" (dismiss)="onDismiss()">
+        <p-heading slot="header" size="large" tag="h2">
+          Some Heading
+        </p-heading>
+        <p-text>
+          Some Content Begin
+        </p-text>
+        <div class="w-[10px] h-[120vh] bg-[deeppink]"></div>
+        <p-text>
+          Some Content End
+        </p-text>
+        <div slot="footer" role="group" class="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <p-button type="button">
+            Proceed
+          </p-button>
+          <p-button type="button" variant="secondary">
+            Cancel
+          </p-button>
+        </div>
+      </p-modal>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  open = false;
+
+  onClick() {
+    this.open = true;
+  }
+  onDismiss() {
+    this.open = false;
+  }
+}

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

@@ -0,0 +1,135 @@
+# p-modal
+
+The `p-modal` is a temporary overlay to focus the user's attention on one task while interactions with the underlying page are blocked. It is only used as highly disruptive modal notification to present important information until dismissed. Or as overlay to confirm critical user actions, such as confirming an irreversible choice. It should be used thoughtfully and sparingly.
+
+It is a controlled component. This grants flexible control over the modal's behavior especially whether it should stay open after user interaction like submission of a form.
+
+> **Scroll-lock**
+>
+> This component sets `overflow: hidden` on the body when opened in order to prevent background scrolling.
+>
+> This doesn't work completely reliable under iOS but is the most stable solution.
+>
+> Feel free to address this issue in an Open Source PR, if you can provide a better solution.
+>
+> **[Current implementation](https://github.com/porsche-design-system/porsche-design-system/blob/main/packages/components/src/utils/setScrollLock.ts)**
+
+Following **web standards**, the component uses the native `<dialog />` element internally which ensures proper focus handling including a **focus trap**. In addition, it's rendered on the `#top-layer` which ensures the element to be on top of the page independent of where `p-modal` is placed in the DOM hierarchy (`z-index` is not relevant anymore and won't have any effect).
+
+The most important property of `p-modal` is its `open` property. When it's set to `true` the modal will be visible. In order to get notified when the modal gets closed by clicking the `x` button, the backdrop or by pressing the `Escape` key you need to register an event listener for the `dismiss` event which is emitted by `p-modal`.
+
+The size of `p-modal` adjusts itself to the content with a predefined **min/max width** which aligns to the **[Porsche Grid](../../styles/tailwindcss.md)**.
+
+## Usage
+
+### Do:
+
+- Use Modals to display additional information or required steps without losing context.
+- Use Modals for confirmation before performing lengthy or dangerous actions.
+- Use default Modal for simple content.
+- Use full-width content and background overlay animation to draw user attention.
+- Provide multiple ways to dismiss the Modal but require an intentional choice.
+- Use scrolling only when necessary and try to keep content in a single view.
+- Adjust Modal size and alignment with the grid.
+- Use up to three actions in the action bar at the bottom of the Modal.
+- Follow button order and positioning guidelines.
+- Use feedback banner for any feedback related to the request.
+
+### Don't:
+
+- Don't use fullscreen Modals on desktop.
+- Don't use the Modal with more than three buttons.
+- Don't launch a Modal within a Modal.
+
+## Accessibility support
+
+The `Modal` component uses the native `dialog` element to provide a modal dialog which comes with browser-specific behavior. As a result, accessibility features may vary across different browsers.
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element inside the dialog. Focus is trapped (browser behavior). |
+| `ESC` | Closes the dialog. |
+| `focus` on trigger element | The focus is returned to the trigger element after closing the dialog (browser behavior). |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the dialog element. |
+| `role` | Defines the semantic of the dialog element (`dialog` or `alertdialog`). |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"` | Defines the accessible name if no `aria` property is provided, uses the contents of the header slot and falls back to a fixed name. |
+
+## Development considerations
+
+To inform users that the trigger button opens a `dialog`, the `aria-haspopup` attribute must be set using the `aria` property.
+
+### Common do's and don'ts
+
+- **Do** use a semantic trigger (usually a button) with a meaningful accessible name.
+- **Do** set `aria-haspopup` through the trigger component `aria` prop when opening the modal.
+- **Do** ensure a meaningful title is available via the `header` slot or `aria` property.
+- **Don't** add raw host-level ARIA attributes as a workaround.
+- **Don't** use unclear trigger copy like "Open" when the destination is not obvious.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aria` | `ModalAriaAttribute` | `undefined` | Sets ARIA attributes on the dialog element for improved accessibility when no visible heading is present. |
+| `backdrop` | `'blur'` `'shading'` | `'blur'` | Sets the backdrop style. Use `blur` when the modal is opened by user interaction; use `shading` when opened automatically (e.g. Cookie Consent). |
+| `background` | `'canvas'` `'surface'` | `'canvas'` | Sets the background color of the modal panel (`canvas` or `surface`). |
+| `disableBackdropClick` | `boolean` | `false` | When enabled, clicking the backdrop will not close the modal. |
+| `dismissButton` | `boolean` | `true` | Shows a dismiss button in the modal header so the user can manually close it. |
+| `fullscreen` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Expands the modal to the full viewport size, intended for mobile use cases. Supports responsive breakpoint values. |
+| `open` _(required)_ | `boolean` | `false` | Controls whether the modal dialog is visible. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `dismiss` | `CustomEvent<void>` | Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key. |
+| `motionHiddenEnd` | `CustomEvent<ModalMotionHiddenEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's close transition completes and the dialog is fully hidden. |
+| `motionVisibleEnd` | `CustomEvent<ModalMotionVisibleEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's open transition completes and the dialog is fully visible. |
+
+### Controlled properties
+
+- `open` — a controlled prop: the component does **not** update it itself. Handle the `dismiss` event and assign the new value to `open` yourself, or the change will not take effect.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `header` | no | — | Renders a header section above the content area. |
+| _(default)_ | no | — | Default slot for the main content. |
+| `footer` | no | — | Shows a sticky footer section, flowing under the content area when scrollable. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-modal-width` | `auto` | Width of the modal. |
+| `--p-modal-spacing-top` | `clamp(16px, 10vh, 192px)` | Spacing of the modal to the top. |
+| `--p-modal-spacing-bottom` | `clamp(16px, 10vh, 192px)` | Spacing of the modal to the bottom. |
+| `--ref-p-modal-pt` | — | Exposes the internally used padding-top of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Modal. |
+| `--ref-p-modal-pb` | — | Exposes the internally used padding-bottom of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the bottom of the Modal. |
+| `--ref-p-modal-px` | — | Exposes the internally used padding-inline of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Modal. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Scrollable modal with sticky footer | If the modal's content does not fit within the available space, the content becomes scrollable and the footer area remains sticky. | [./examples/Scrollable.ts](./examples/Scrollable.ts) |
+| Modal as alert dialog | The `p-modal` component can be used as an alert dialog. | [./examples/AlertDialog.ts](./examples/AlertDialog.ts) |
+| Custom styling | The modal component has some values that can be overridden via CSS custom properties (aka CSS variables). | [./examples/CustomStyling.ts](./examples/CustomStyling.ts) |

package/skill/references/components/p-model-signature/examples/CustomStyling.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-model-signature color="inherit" class="text-info"></p-model-signature>
+
+      <p-model-signature class="[--p-model-signature-width:auto] [--p-model-signature-height:50px] block"></p-model-signature>
+
+      <p-model-signature class="[--p-model-signature-width:50px] [--p-model-signature-height:auto] block"></p-model-signature>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/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-model-signature></p-model-signature>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/examples/MaskBlendMode.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <div class="isolate bg-[#00aa3680] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+
+      <div class="isolate bg-[#f2f2f280] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+
+      <div class="isolate bg-[#1f1f1f80] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+
+      <div class="isolate bg-[#c5004280] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+
+      <div class="isolate bg-[#e1d4a480] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+
+      <div class="isolate bg-[#0099e080] inline-block p-static-lg">
+        <p-model-signature color="contrast-medium" [safeZone]="false" class="mix-blend-overlay"></p-model-signature>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/examples/MaskImage.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-model-signature [safeZone]="false" class="[--p-model-signature-width:auto]">
+        <img src="assets/dessert.jpg" alt="Dessert" />
+      </p-model-signature>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/examples/MaskVideo.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-model-signature [safeZone]="false" class="[--p-model-signature-width:auto]">
+        <video poster="assets/ocean.jpg" src="assets/ocean.mp4" autoplay playsinline loop muted></video>
+      </p-model-signature>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/examples/SafeZone.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="718"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="911"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="boxster"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="cayenne"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="cayman"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="gt3-rs"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="gt3"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="gts"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="macan"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="panamera"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="taycan"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="turbo-s"></p-model-signature>
+      </div>
+
+      <div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <p-model-signature [safeZone]="false" model="turbo"></p-model-signature>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-model-signature/p-model-signature.md

@@ -0,0 +1,62 @@
+# p-model-signature
+
+The `p-model-signature` component is purely visual and renders the different signatures of Porsche car models. It can be used to overlay background images or enhance cards and teasers to be more dynamic and recognizable.
+
+## Usage
+
+### Do:
+
+- Use signatures for emotional introduction and communication of model series.
+- Consider using model signatures only occasionally, for example, within the Link Tile component for a specific model line.
+- Use model signatures as a subtle, larger background watermark, paired with appropriate visualization of vehicle detail pages.
+- Use as a headline-like element on model series overview pages.
+
+### Don't:
+
+- Avoid including signatures for specific derivatives such as a Panamera 4 Sport Turismo
+- Platinum Edition or a 911 Targa 4S or in line with the text.
+- The model signature should have sufficient spacing from the text.
+- Avoid repeating the same model series signature within the interface.
+- For example, do not display the 911 signatures twice or more in a viewport.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `color` | `'primary'` `'contrast-low'` `'contrast-medium'` `'contrast-high'` `'inherit'` | `'primary'` | Sets the fill color of the signature using PDS color tokens. |
+| `fetchPriority` | `'low'` `'high'` `'auto'` | `'auto'` | Sets the browser's fetch priority hint for the signature asset (`auto`, `high`, `low`). |
+| `lazy` | `boolean` | `false` | Defers loading the signature until it enters the viewport to improve initial page performance. |
+| `model` | `'718'` `'911'` `'boxster'` `'cayenne'` `'cayman'` `'gt3-rs'` `'gt3'` `'gts'` `'macan'` `'panamera'` `'taycan'` `'turbo-s'` `'turbo'` | `'911'` | Selects the Porsche model whose typographic signature SVG is displayed. |
+| `safeZone` | `boolean` | `true` | When enabled, adds invisible padding so all model signatures visually align to a consistent baseline. |
+| `size` | `'small'` `'inherit'` | `'small'` | Sets the display size of the signature using predefined PDS sizes. Use `inherit` with a CSS `width` or `height` on the host for custom sizing. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for an img or video tag when using the model-signature as a mask. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-model-signature-width` | — | Overrides the width of the model signature. |
+| `--p-model-signature-height` | `auto` | Overrides the height of the model signature. |
+| `--p-model-signature-color` | — | Overrides the fill color of the model signature. Overrides the `color` property when set. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Safe Zone | The `safe-zone` prop's default is `modelSignatureSafeZoneDefault`, which ensures a visual balance across all model signatures. | [./examples/SafeZone.ts](./examples/SafeZone.ts) |
+| Mask: Blend Mode | If `p-model-signature` should be blended with its background, the CSS property [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) can be used (`{{ blendMode }}` will produce the best results). | [./examples/MaskBlendMode.ts](./examples/MaskBlendMode.ts) |
+| Mask: Image | > **Experimental** > > The following example shows what is technically possible but has not yet been approved by the Porsche Brand Guide. | [./examples/MaskImage.ts](./examples/MaskImage.ts) |
+| Mask: Video | > **Experimental** > > The following example shows what is technically possible but has not yet been approved by the Porsche Brand Guide. | [./examples/MaskVideo.ts](./examples/MaskVideo.ts) |
+| Custom styling | The `p-model-signature` color can be changed by setting the `color` prop to `inherit` and applying some CSS `color`. | [./examples/CustomStyling.ts](./examples/CustomStyling.ts) |

package/skill/references/components/p-multi-select/examples/AsyncFilter.ts

@@ -0,0 +1,149 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  type InputSearchInputEventDetail,
+  type MultiSelectChangeEventDetail,
+  type MultiSelectToggleEventDetail,
+  PMultiSelect,
+  PorscheDesignSystemModule,
+} from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-multi-select
+      name="async-search-select"
+      label="Async Search"
+      [value]="value"
+      (change)="onChange($event)"
+      (toggle)="onToggle($event)"
+    >
+      <p-input-search
+        slot="filter"
+        name="search"
+        [value]="searchValue"
+        [loading]="loading"
+        [clear]="true"
+        [indicator]="true"
+        [compact]="true"
+        [autoComplete]="'off'"
+        (input)="onInput($event)"
+        (blur)="$event.stopPropagation()"
+        (change)="$event.stopPropagation()"
+      ></p-input-search>
+
+      <!-- Initial skeleton loading -->
+      @if (initialLoading && !error) {
+        @for (_ of [1,2,3,4,5,6,7,8,9]; track $index) {
+          <div slot="options-status" class="skeleton h-[40px]"></div>
+        }
+      }
+
+      <!-- Options -->
+      @for (option of options; track option.value) {
+        <p-multi-select-option [value]="option.value">
+          {{ option.label }}
+        </p-multi-select-option>
+      }
+
+      <!-- No filter results -->
+      @if (!initialLoading && options.length === 0 && !error) {
+        <div
+          slot="options-status"
+          class="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
+          role="alert"
+        >
+          <span aria-hidden="true">–</span>
+          <span class="sr-only">No results found</span>
+        </div>
+      }
+
+      <!-- Error state -->
+      @if (error) {
+        <div
+          slot="options-status"
+          class="flex gap-static-sm py-static-sm px-[12px]"
+          role="alert"
+        >
+          <p-icon name="information" color="error"></p-icon>
+          <span class="text-error">{{ error }}</span>
+        </div>
+      }
+    </p-multi-select>
+
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  value?: PMultiSelect['value'] = [];
+  options: { value: string; label: string }[] = [];
+
+  searchValue = '';
+  initialLoading = false;
+  loading = false;
+  error: string | null = null;
+
+  private hasLoadedOnce = false;
+  private currentFetchId = 0;
+  private debounceTimer?: number;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  async fetchOptions(term?: string, isInitial = false) {
+    const fetchId = ++this.currentFetchId;
+    if (isInitial) this.initialLoading = true;
+    else this.loading = true;
+
+    this.cdr.markForCheck();
+
+    try {
+      const url = term
+        ? `https://jsonplaceholder.typicode.com/users?username_like=${term}`
+        : `https://jsonplaceholder.typicode.com/users`;
+
+      const res = await fetch(url);
+      const data: { id: number; name: string; username: string }[] = await res.json();
+
+      // Ignore stale results
+      if (fetchId !== this.currentFetchId) return;
+
+      this.options = data.map((user) => ({
+        value: user.id.toString(),
+        label: `${user.name} (${user.username})`,
+      }));
+
+      this.error = null;
+      this.hasLoadedOnce = true;
+    } catch (err) {
+      console.error('Failed to fetch options', err);
+      this.options = [];
+      this.error = 'Failed to load options';
+    } finally {
+      if (isInitial) this.initialLoading = false;
+      else this.loading = false;
+
+      this.cdr.markForCheck();
+    }
+  }
+
+  onInput(event: CustomEvent<InputSearchInputEventDetail>) {
+    const term = (event.target as HTMLInputElement).value;
+    this.searchValue = term;
+
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = window.setTimeout(() => {
+      this.fetchOptions(term.trim() || undefined);
+    }, 400);
+  }
+
+  onChange(event: CustomEvent<MultiSelectChangeEventDetail>) {
+    this.value = (event.target as HTMLElement & { value: string[] }).value;
+  }
+
+  onToggle(event: CustomEvent<MultiSelectToggleEventDetail>) {
+    if (event.detail.open && !this.hasLoadedOnce) {
+      this.fetchOptions(undefined, true);
+    }
+  }
+}

package/skill/references/components/p-multi-select/examples/Default.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-multi-select name="name" label="Some Label" description="Some description">
+        <p-multi-select-option value="a">
+          Option A
+        </p-multi-select-option>
+        <p-multi-select-option value="b">
+          Option B
+        </p-multi-select-option>
+        <p-multi-select-option value="c">
+          Option C
+        </p-multi-select-option>
+        <p-multi-select-option value="d">
+          Option D
+        </p-multi-select-option>
+        <p-multi-select-option value="e">
+          Option E
+        </p-multi-select-option>
+        <p-multi-select-option value="f">
+          Option F
+        </p-multi-select-option>
+      </p-multi-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}