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

package/skill/references/components/p-link-pure/examples/FrameworkRouting.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-link-pure>
+        <a href="https://porsche.com">
+          Some label
+        </a>
+      </p-link-pure>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-link-pure/examples/Icon.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <div class="flex gap-static-sm">
+        <p-link-pure href="https://porsche.com" icon="phone">
+          Some label
+        </p-link-pure>
+        <p-link-pure href="https://porsche.com" iconSource="assets/icon-custom-kaixin.svg" [hideLabel]="true">
+          Some label
+        </p-link-pure>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-link-pure/p-link-pure.md

@@ -0,0 +1,110 @@
+# p-link-pure
+
+The `p-link-pure` component is essential for performing changes in **page routes**. A Link Pure can be used with or without a label, but it's recommended to keep the **label visible** for better **usability** whenever possible. When used without a label, it is mandatory for **accessibility** to provide a descriptive label text for screen readers.
+
+In case you want the user to execute an action, you should select the [Button](../p-button/p-button.md) or [Button Pure](../p-button-pure/p-button-pure.md) component instead.
+
+You can use native `click`, `focus`, `focusin`, `blur` and `focusout` events on the `p-link-pure`.
+
+## Usage
+
+### Do:
+
+- Use a Link Pure as a more subtle call to action compared to the normal Link.
+- Use a [Button Pure](../p-button-pure/p-button-pure.md) instead of a Link Pure if you want to change a state (e.g. send form)
+- Use a Link Pure to navigate the user to another page.
+- Use the Icon and Text variant of Link Pure whenever possible as icons should preferably always be paired with text for better comprehensibility and accessibility.
+- Use the Text only variant when the use of icons causes interference (e.g. in-text placement, no matching icon, complex lists or tables, alignment to elements, navigation).
+- Use the Text only variant with an underline to ensure intuitive clickability.
+- Use the Icon only variant only when an icon alone is sufficient to indicate the action and the user is fully aware of the function due to an expressive and internationally comprehensible icon.
+- Use the stretch variant only on small viewports or areas (e.g. mobile views or sidebars).
+- Use the default arrow-right-icon in most cases but replace it with another symbol if it is more appropriate.
+- Use short and descriptive text labels within a link.
+
+### Don't:
+
+- Don't use Link Pure as the main call to action if you need to draw more attention to the link.
+- Don't use Link Pure on images unless it is necessary, e.g. when using it as an additional link on image sliders or teaser images that are clickable themselves.
+- Don't group more than two Links Pure in a row to ensure scannability and legibility.
+
+---
+
+## Related components
+
+- [Button Pure](../p-button-pure/p-button-pure.md)
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+| `Enter` | Activates the link. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the interactive element. |
+| `aria-description` | Defines a string value that adds a more detailed description of the interactive element. |
+| `aria-current` | Exposes the current state of the link. |
+| `aria-haspopup` | Defines that the link opens a popup (e.g. `dialog`). |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-hidden="true"` | When the `icon` prop is set, the icon is hidden from the screen reader. |
+
+## Development considerations
+
+### Labelling
+
+If the text of a link does not clearly indicate what the link's target 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 "Click" 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 "Details of product XYZ."
+
+### Common do's and don'ts
+
+- **Do** pass ARIA attributes via the `aria` prop, for example `aria="{ 'aria-current': 'page' }"` when indicating the current page.
+- **Do** provide a clear accessible name for icon-only actions via slotted label or `aria` property.
+- **Don't** add native `aria-*` attributes directly on the component host.
+- **Don't** rely on short generic link labels like "Show" or "Add" without context.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `active` | `boolean` | `false` | Visually marks the link as the currently active navigation item, e.g. the current page. |
+| `alignLabel` | `'start'` `'end'`<br>`BreakpointCustomizable<LinkPureAlignLabel>` | `'end'` | Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values. |
+| `aria` | `LinkPureAriaAttribute` | `undefined` | Sets ARIA attributes on the link element to improve accessibility for screen readers. |
+| `color` | `'primary'` `'contrast-higher'` `'contrast-high'` `'contrast-medium'` `'inherit'` | `'primary'` | Sets the foreground color of the link's icon and label text. |
+| `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
+| `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
+| `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
+| `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
+| `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
+| `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
+| `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'`<br>`BreakpointCustomizable<LinkPureSize>` | `'sm'` | Sets the font size of the link label. Supports responsive breakpoint values. |
+| `stretch` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values. |
+| `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set. |
+| `underline` | `boolean` | `false` | Adds a text underline to the label to reinforce its link-like appearance. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot to render the link label. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Link with specific icon | If another icon needs to be implemented, just replace the default icon with another predefined icon. | [./examples/Icon.ts](./examples/Icon.ts) |
+| Framework routing (anchor nesting) | To support custom anchor tags (e.g. framework specific routing) you can provide them as a **slotted element** (recommended) of the component. | [./examples/FrameworkRouting.ts](./examples/FrameworkRouting.ts) |
+| Framework specific router with "active state" support | Examples how to use the component together with a framework specific router with "active state" support. | — |
+| Link Pure with custom clickable/focusable area | Sometimes it might be useful to enlarge the clickable/focusable area of a link to fulfill accessibility guidelines. | [./examples/CustomClickableArea.ts](./examples/CustomClickableArea.ts) |

package/skill/references/components/p-link-tile/examples/ColorScheme.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-link-tile href="https://porsche.com" label="Some label" description="Some Description" [gradient]="true">
+        <p-tag slot="header" color="background-frosted" [compact]="true" [style]="{'colorScheme': 'only light'}">
+          Some tag
+        </p-tag>
+        <img src="assets/lights.jpg" alt="Some image description" />
+      </p-link-tile>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-link-tile/examples/Default.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-link-tile href="https://porsche.com" label="Some label" description="Some Description" [gradient]="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-link-tile>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-link-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-link-tile href="https://porsche.com" 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-link-tile>
+        <p-link-tile href="https://porsche.com" 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-link-tile>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

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

@@ -0,0 +1,39 @@
+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-link-tile
+      href="https://porsche.com"
+      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-link-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-link-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-link-tile aspectRatio="4/3" href="#" label="Some Label" size="large" 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.">
+          <p-tag slot="header" color="background-frosted" [compact]="true">
+            4/3
+          </p-tag>
+          <img src="assets/lights.jpg" alt="Some image description" />
+        </p-link-tile>
+        <p-link-tile aspectRatio="4/3" href="#" 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-link-tile>
+        <p-link-tile aspectRatio="1/1" href="#" 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-link-tile>
+        <p-link-tile aspectRatio="9/16" href="#" 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-link-tile>
+        <p-link-tile aspectRatio="1/1" href="#" 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-link-tile>
+      </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-link-tile/examples/WithVideo.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-link-tile href="https://porsche.com" label="Some label" description="Some Description">
+        <p-tag slot="header" color="background-frosted" [compact]="true">
+          Some tag
+        </p-tag>
+        <video poster="assets/ocean.jpg" src="assets/ocean.mp4" loop muted autoplay aria-label="Some video description"></video>
+      </p-link-tile>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

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

@@ -0,0 +1,105 @@
+# p-link-tile
+
+The `p-link-tile` is a navigational component that displays a provided image to tease content and navigate to further information within one container. In case you want the user to execute an action, you should select the [Button Tile](../p-button-tile/p-button-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 `href`, `description` and `label` are required. The `description` property is used as a teaser with a more detailed description of the link and where it leads to.
+
+The `label` property is used to describe the anchor.
+
+## Usage
+
+### Do:
+
+- Use Link-Tile for prominent links with appropriate aspect ratios and short descriptions (80 characters or fewer).
+- Use [Button-Tile](../p-button-tile/p-button-tile.md) instead if you want on-page interactivity.
+- Use basic Link-Tile for better perception tests and compact Link-Tile for improved spacing (especially on mobile).
+- Use gradient Link-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 Link Tile. Create assets upfront for image processing.
+
+### Don't:
+
+- Don't manipulate images. Keep them natural and ensure sufficient contrast.
+- Don't write long descriptions that overflow content (especially on mobile).
+
+---
+
+## Related components
+
+- [Button Tile](../p-button-tile/p-button-tile.md)
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+| `Enter` | Activates the link. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the interactive element. |
+| `aria-description` | Defines a string value that adds a more detailed description of the interactive element. |
+| `aria-current` | Exposes the current state of the link. |
+| `aria-haspopup` | Defines that the link opens a popup (e.g. `dialog`). |
+
+## Development considerations
+
+### Labelling
+
+If the text of a link does not clearly indicate what the link's target 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 "Click" 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 "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 link destination.
+- **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 link — `top` or `bottom`. |
+| `aria` | `LinkTileAriaAttribute` | `undefined` | Sets ARIA attributes on the tile's anchor element to improve accessibility for screen readers. |
+| `aspectRatio` | `'1/1'` `'4/3'` `'3/4'` `'16/9'` `'9/16'` `'auto'`<br>`BreakpointCustomizable<LinkTileAspectRatio>` | `'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 link without the full label. Supports responsive breakpoint values. |
+| `description` _(required)_ | `string` | `undefined` | Sets the description text displayed in the tile's content area. |
+| `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. |
+| `gradient` | `boolean` | `false` | Shows a gradient overlay over the media slot to improve text legibility on bright images or videos. |
+| `href` _(required)_ | `string` | `undefined` | Sets the URL the tile's anchor element navigates to when clicked. |
+| `label` _(required)_ | `string` | `undefined` | Sets the accessible label text of the link rendered inside the tile. |
+| `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). |
+| `size` | `'medium'` `'large'` `'inherit'`<br>`BreakpointCustomizable<LinkTileSize>` | `'medium'` | Sets the font size of the description text in the tile content area. Supports responsive breakpoint values. |
+| `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). |
+| `weight` | `'regular'` `'semi-bold'`<br>`BreakpointCustomizable<LinkTileWeight>` | `'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) |
+| With video | With video | [./examples/WithVideo.ts](./examples/WithVideo.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 Link Tile. | [./examples/ColorScheme.ts](./examples/ColorScheme.ts) |

package/skill/references/components/p-link-tile-product/examples/Default.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, type LinkTileProductLikeEvent } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-link-tile-product [liked]="liked" heading="Some product" price="718,00 €" priceOriginal="911,00 €" description="Some description" href="https://porsche.com" (like)="onLike($event)">
+        <p-tag slot="header" color="background-base">
+          New
+        </p-tag>
+        <img src="assets/placeholder_800x900.svg" [width]="800" [height]="900" alt="Some alt text" />
+      </p-link-tile-product>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  liked = false;
+
+  onLike(e: CustomEvent<LinkTileProductLikeEvent>) {
+    this.liked = !e.detail.liked;
+  }
+}

package/skill/references/components/p-link-tile-product/examples/FrameworkRouting.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, type LinkTileProductLikeEvent } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-link-tile-product [liked]="liked" heading="Some product" price="718,00 €" priceOriginal="911,00 €" description="Some description" (like)="onLike($event)">
+        <a slot="anchor" href="https://porsche.com">
+          Weekender, sale price 718,00 €, original price 
+          <s>
+            911,00 €
+          </s>
+        </a>
+        <img src="assets/placeholder_800x900.svg" [width]="800" [height]="900" alt="Some alt text" />
+      </p-link-tile-product>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  liked = false;
+
+  onLike(e: CustomEvent<LinkTileProductLikeEvent>) {
+    this.liked = !e.detail.liked;
+  }
+}

package/skill/references/components/p-link-tile-product/p-link-tile-product.md

@@ -0,0 +1,93 @@
+# p-link-tile-product
+
+> **Experimental:** This component is experimental — its API may change in any release. Avoid relying on it in production.
+
+> **Experimental Component**
+>
+> The `p-link-tile-product` component is experimental and might be changed or removed in a future release.
+
+The `p-link-tile-product` is a navigational component designed to showcase a featured product within a store. it offers the option to "like" the product, allowing you to easily add it to the users wishlist. Additionally, you can place a chip at the top to signal special features about the product, such as its novelty or exclusivity.
+
+> **Image Aspect Ratio**
+>
+> The image within the component has a fixed aspect ratio of 8:9. For optimal presentation, it is recommended that the supplied image adheres to the same aspect ratio of 8:9 and includes a transparent background.
+
+An `img` or `picture` element has to be available as a child of the `p-link-tile-product` component.
+
+The `heading` and `price` properties are required and a link must be provided, using either the `href` property or a [slotted link](./p-link-tile-product.md).
+
+## Usage
+
+### Do:
+
+- Use Link-Tile-Product to display a single product or within other products.
+- Use the heading prop only for the product name.
+- Use the price prop only for price and price reduction.
+- Use description prop only for VAT or other disclaimers according to the product.
+- Use only transparent images for the Link Tile Product.
+- Use product images with an aspect ratio of 8:9.
+- Use only product images with the same aspect ratio.
+- Use Link-Tile-Products with identical sizes in one view.
+- Use the header slot only for appropriate information such as "new" or "limited", and keep it short.
+- Use Link-Tile-Product in a grid with other products.
+- Use the likeButton prop to hide the likeButton when no wishlist is available.
+
+### Don't:
+
+- Do not manipulate product images. Keep them natural, with transparent backgrounds and sufficient contrast.
+- Don't integrate environment into the product image, no reflection, drop shadow, or other styling effects.
+- Don't alter the display of VAT when the display is requested, either show it for all products or don't.
+- Don't manipulate the likeButton, this position is only reserved for this function.
+- Don't have long product names.
+
+---
+
+## Related components
+
+- [Link Tile](../p-link-tile/p-link-tile.md)
+
+## Accessibility support
+
+Not yet considered due to experimental state.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aspectRatio` | `'3/4'` `'9/16'`<br>`BreakpointCustomizable<LinkTileProductAspectRatio>` | `'3/4'` | Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values. |
+| `description` | `string` | `undefined` | Sets an optional short description providing additional product details below the price. |
+| `heading` _(required)_ | `string` | `undefined` | Sets the product name displayed prominently at the top of the tile. |
+| `href` | `string` | `undefined` | Sets the URL the tile navigates to when clicked. Alternatively, provide a slotted anchor element. |
+| `likeButton` | `boolean` | `true` | Shows a like/bookmark button so users can save the product. |
+| `liked` | `boolean` | `false` | Reflects whether the product is currently liked — controls the filled state of the like button. |
+| `price` _(required)_ | `string` | `undefined` | Sets the current retail price of the product, displayed with or without a discount. |
+| `priceOriginal` | `string` | `undefined` | Sets the original recommended retail price shown with a strikethrough to indicate a discount. Requires `price` to be set. |
+| `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). |
+| `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `like` | `CustomEvent<LinkTileProductLikeEventDetail>`<br>`{ liked: boolean }` | Emitted when the user clicks the like button, with the new liked state in the event detail. |
+
+### Controlled properties
+
+- `liked` — a controlled prop: the component does **not** update it itself. Handle the `like` event and assign the new value to `liked` yourself, or the change will not take effect.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `anchor` | no | — | Slotted anchor link which can be used instead of the `href` prop. Ensure the named slot is directly on the anchor element, without nesting. |
+| `header` | no | — | Shows special features about the product like novelty or exclusivity. Although you can pass in anything, it is recommended to use the `p-tag` component. |
+| _(default)_ | no | — | Default slot for the img or picture tag. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Framework routing (anchor nesting) | To support framework routing you can provide the link as a slotted element by using the `anchor` slot instead of using the `href` property. | [./examples/FrameworkRouting.ts](./examples/FrameworkRouting.ts) |

package/skill/references/components/p-modal/examples/AlertDialog.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]="{'role': 'alertdialog'}" [disableBackdropClick]="true" (dismiss)="onDismiss()">
+        <p-heading slot="header" size="large" tag="h2">
+          Some important Heading
+        </p-heading>
+        <p-text>
+          Some important Content
+        </p-text>
+        <div slot="footer" role="group" class="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <p-button type="button">
+            Accept
+          </p-button>
+          <p-button type="button" variant="secondary">
+            Deny
+          </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;
+  }
+}