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

package/skills/pds-knowledge-angular/references/components/p-table/p-table.md

@@ -0,0 +1,193 @@
+# p-table
+
+The `p-table` component displays tabular data and offers column-wise sorting options. It combines a consistent appearance together with great accessibility while not having restrictions regarding its content. Therefore, it can be used for plain text but also rich content like images, form elements and buttons.
+
+It is a controlled component. This means it does not contain any internal state, and you got full control over its behavior.
+
+## Usage
+
+### Do:
+
+- Use to display and compare structured data in rows and columns.
+- Use as a tool to query consume and navigate to specific data.
+- Use if there are at least two or more columns of data parameters.
+- Ensure that the column headers are relevant to the data it represents and are succinct.
+- Include rich content in the cell data to support the specific requirements of the application use cases.
+- Enable sorting of columns in ascending or descending order with an arrow icon to indicate the order direction.
+- Ensure that the table is responsive and stretches to the full available width.
+- Include a table caption describing the contents of the table for accessibility
+- Use the built-in scroller for horizontal scrolling on mobile viewports.
+
+### Don't:
+
+- Don't use for non-structured data or data that can be presented in a simpler format.
+- Don't overuse or clutter cell data with unnecessary content.
+- Don't neglect to include a table caption for accessibility purposes.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) sort button. |
+| `Enter`, `Space` | Changes sorting direction. |
+
+### ARIA enhancements
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"`, `aria-labelledby="IDREF"` | Captions are provided by aria labels. |
+| `aria-sort="VALUE"` | Provides the sorting direction of the column header. |
+
+## Development considerations
+
+### Common do's and don'ts
+
+- **Do** provide a `caption` or `slot="caption"` that describes the table purpose.
+- **Do** keep visible header text for sortable columns.
+- **Don't** use `hide-label` on a sortable column without an alternative accessible name.
+
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
+## Tests
+
+### Automated
+
+| Technology | Support |
+| --- | --- |
+| AXE-Core (WCAG 2.2 AA, Best-Practice) | ✅ |
+| High-Contrast Mode (light/dark) | ✅ |
+| Text-Zoom (200%) | ✅ |
+
+### Manual
+
+| Technology | Support |
+| --- | --- |
+| Keyboard | ✅ |
+| Screen reader (VoiceOver, NVDA) | 🟠 (Partially supported, [Safari issues 1](https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html), [Safari issues 2](https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html)) |
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `caption` | `string` | `undefined` | Sets a screen-reader-only accessible caption that describes the table's content; it is not visible in the browser. Use an element with `slot="caption"` for a visible caption instead. |
+| `compact` | `boolean` | `false` | Reduces the cell padding and spacing for a more condensed table layout in data-dense UIs. |
+| `layout` | `'auto'` `'fixed'` | `'auto'` | Controls the CSS `table-layout` algorithm: `auto` sizes columns to fit their content, `fixed` distributes width equally. |
+| `sticky` _(experimental)_ | `boolean` | `false` | @experimental Makes the scroll position indicator sticky at the viewport edge while scrolling, indicating overflow in the table. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `update` | `CustomEvent<TableUpdateEventDetail>`<br>`{ id: string; active?: boolean; direction?: Direction }` | Emitted when the user clicks a sortable column header, carrying the new sort configuration in the event detail. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `caption` | no | — | Shows a caption that describes the content of the table. |
+| _(default)_ | no | — | Default slot for the table content. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-table-scroll-indicator-top` | `0px` | Defines the distance from the top of the viewport at which the scroll indicator sticks when scrolling down and `sticky` is enabled. |
+| `--p-table-scroll-indicator-bottom` | `0px` | Defines the distance from the bottom of the viewport at which the scroll indicator sticks when scrolling up and `sticky` is enabled. |
+
+## Sub-components
+
+These tags are only valid inside the parent(s) listed under each one — often this component, but some are shared and list a different parent (e.g. a tag documented here via a common ancestor). Their APIs come from the same authoritative `component-meta` as the parent above.
+
+### `p-table-body`
+
+Allowed parent: `p-table`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table body content. |
+
+### `p-table-cell`
+
+Allowed parent: `p-table-row`.
+
+#### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `multiline` | `boolean` | `false` | Allows slotted text to wrap onto multiple lines instead of being forced onto a single line. |
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table cell content. |
+
+### `p-table-head`
+
+Allowed parent: `p-table`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table head content. |
+
+### `p-table-head-cell`
+
+Allowed parents: `p-table-head-row`, `p-table-row`.
+
+#### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `hideLabel` | `boolean` | `false` | Hides the visible column label while keeping it accessible to screen readers. Only applies when `sort` is not set. |
+| `multiline` | `boolean` | `false` | Allows the column header text to wrap onto multiple lines instead of being truncated to a single line. |
+| `sort` | `TableHeadCellSort` | `undefined` | Configures sorting behavior for this column by providing an `id`, `active` state, and current `direction` (`asc` or `desc`). |
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table head cell content. |
+
+### `p-table-head-row`
+
+Allowed parent: `p-table-head`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table head row content. |
+
+### `p-table-row`
+
+Allowed parents: `p-table-body`, `p-table-head`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the table row content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Caption via Property | A caption that describes the content of the table is mandatory to fulfill accessibility criteria. | [./examples/CaptionProperty.ts](./examples/CaptionProperty.ts) |
+| Caption via Slot | Instead of using the the property, the table's caption can be provided via the `caption` slot. | [./examples/CaptionSlot.ts](./examples/CaptionSlot.ts) |
+| Layout: fixed | By setting `layout` to `fixed`, you can take full control over each column width, which would otherwise be controlled by its content. | [./examples/LayoutFixed.ts](./examples/LayoutFixed.ts) |
+| Sortable Columns | Sorting is controlled, so the initial row order must match the active column's `direction` and both must remain synchronized when handling the `update` event. | [./examples/Sorting.ts](./examples/Sorting.ts) |
+| Hide Column Label | Sometimes you want to hide the visible label of a `p-table-head-cell`, for example when the column's content is self-explanatory. | [./examples/HideLabel.ts](./examples/HideLabel.ts) |
+| Advanced Table | The appearance of a table's contents can be customized as illustrated in the following example. | [./examples/Advanced.ts](./examples/Advanced.ts) |

package/skills/pds-knowledge-angular/references/components/p-tabs/accessibility.md

@@ -0,0 +1,56 @@
+# p-tabs accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-tabs aria-label="Product details">
+  <p-tabs-item label="Overview">
+    ...
+  </p-tabs-item>
+</p-tabs>
+```
+
+#### ✅ Recommended
+
+```html
+<p-tabs [aria]="{'aria-label': 'Porsche 911 configuration details'}">
+  <p-tabs-item label="Overview">
+    ...
+  </p-tabs-item>
+  <p-tabs-item label="Equipment">
+    ...
+  </p-tabs-item>
+</p-tabs>
+```
+
+### Vague tab labels without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-tabs [aria]="{'aria-label': 'Product details'}">
+  <p-tabs-item label="Details">
+    ...
+  </p-tabs-item>
+  <p-tabs-item label="More">
+    ...
+  </p-tabs-item>
+</p-tabs>
+```
+
+#### ✅ Recommended
+
+```html
+<p-tabs [aria]="{'aria-label': 'Porsche 911 configuration details'}">
+  <p-tabs-item label="Overview">
+    ...
+  </p-tabs-item>
+  <p-tabs-item label="Equipment and packages">
+    ...
+  </p-tabs-item>
+</p-tabs>
+```

package/skills/pds-knowledge-angular/references/components/p-tabs/examples/ActiveTab.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-tabs [activeTabIndex]="1" [aria]="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
+        <p-tabs-item label="Tab One">
+          <p-text>
+            Tab Content One
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Two">
+          <p-text>
+            Tab Content Two
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Three">
+          <p-text>
+            Tab Content Three
+          </p-text>
+        </p-tabs-item>
+      </p-tabs>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-tabs/examples/Default.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-tabs [aria]="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
+        <p-tabs-item label="Tab One">
+          <p-text>
+            Tab Content One
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Two">
+          <p-text>
+            Tab Content Two
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Three">
+          <p-text>
+            Tab Content Three
+          </p-text>
+        </p-tabs-item>
+      </p-tabs>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-tabs/examples/Gradient.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-tabs [aria]="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
+        <p-tabs-item label="Tab 1">
+          <p-text>
+            Tab Content 1
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 2">
+          <p-text>
+            Tab Content 2
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 3">
+          <p-text>
+            Tab Content 3
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 4">
+          <p-text>
+            Tab Content 4
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 5">
+          <p-text>
+            Tab Content 5
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 6">
+          <p-text>
+            Tab Content 6
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 7">
+          <p-text>
+            Tab Content 7
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 8">
+          <p-text>
+            Tab Content 8
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 9">
+          <p-text>
+            Tab Content 9
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 10">
+          <p-text>
+            Tab Content 10
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 11">
+          <p-text>
+            Tab Content 11
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 12">
+          <p-text>
+            Tab Content 12
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 13">
+          <p-text>
+            Tab Content 13
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 14">
+          <p-text>
+            Tab Content 14
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 15">
+          <p-text>
+            Tab Content 15
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 16">
+          <p-text>
+            Tab Content 16
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 17">
+          <p-text>
+            Tab Content 17
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 18">
+          <p-text>
+            Tab Content 18
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 19">
+          <p-text>
+            Tab Content 19
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab 20">
+          <p-text>
+            Tab Content 20
+          </p-text>
+        </p-tabs-item>
+      </p-tabs>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-tabs/examples/Labelling.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-tabs [aria]="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
+        <p-tabs-item label="Tab One">
+          <p-text>
+            Tab Content One
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Two">
+          <p-text>
+            Tab Content Two
+          </p-text>
+        </p-tabs-item>
+        <p-tabs-item label="Tab Three">
+          <p-text>
+            Tab Content Three
+          </p-text>
+        </p-tabs-item>
+      </p-tabs>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-tabs/p-tabs.md

@@ -0,0 +1,140 @@
+# p-tabs
+
+The `p-tabs` component makes it easy to explore and switch between different views. You can organize and allow navigation between groups of content that are related and at the same level of hierarchy. The component handles the display of content according to the active tab and all accessibility attributes on your tab and tab content.
+
+This variant does not support `a` tags and should not be used for navigation. If you need to update your window location have a look at [Tabs Bar](../p-tabs-bar/p-tabs-bar.md) component.
+
+Basic implementation shows a tab list with buttons to switch between the content. For every `p-tabs-item` inside of the `p-tabs` component, a tab will be created. The assigned `label` property defines also the name of the button.
+
+Every `p-tabs-item` holds a `slot` to display content which can be individually assigned.
+
+## Usage
+
+### Do:
+
+- Use when there is a large amount of content that can be separated.
+- Use to make the content accessible without reloading the page or compromising on space.
+
+### Don't:
+
+- Don't place more than six tabs within a group.
+- Don't use more than two words for a tab label whenever possible.
+- Don't use it for primary navigation.
+
+---
+
+## Related Component
+
+- [Tabs Bar](../p-tabs-bar/p-tabs-bar.md)
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab` | - Moves focus to the active tab. - When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the `tabpanel` element. |
+| `Right Arrow`, `Left Arrow` | - Moves focus to the next tab. - Activates the newly focused tab. - If focus is on the last tab, moves focus to the first tab. |
+| `Home`, `End` | - Moves focus to the first/last tab and activates it. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"` | Defines a string value that labels the tablist. |
+| `aria-description="STRING"` | Defines a string value that adds a more detailed description of the tablist. |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `role="tablist"` | Indicates that the element serves as a container for a set of tabs. |
+| `role="tab"` | Indicates the button serves as a tab control. |
+| `role="tabpanel"` | Indicates the `tabs-item` serves as a container for tabpanel content. |
+| `aria-label="STRING"` | Adds accessible name to the `tabs-item` based on the `label` property. |
+| `aria-selected="BOOLEAN"` | Indicates whether the tab is selected and whether its associated tabpanel is visible. |
+
+## Development considerations
+
+### Labelling
+
+When multiple tab groups appear on the same page, or when the purpose of the tabs is not clear from the visible tab labels alone, provide a descriptive accessible name for the tablist using the `aria` property, e.g.: `<p-tabs aria="{ 'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist' }">`.
+
+### Common do's and don'ts
+
+- **Do** pass tablist ARIA through the `aria` prop when multiple tab groups appear on one page.
+- **Do** use specific `label` text on each `p-tabs-item`.
+- **Don't** add native `aria-*` attributes directly on the component host.
+- **Don't** use vague tab labels like "Details" without context.
+
+## 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-controls` | 🚫 |
+
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `activeTabIndex` | `number` | `0` | Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically. |
+| `aria` | `TabsAriaAttribute` | `undefined` | Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`. |
+| `background` | `'canvas'` `'surface'` `'frosted'` `'none'` | `'none'` | Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients. |
+| `compact` | `boolean` | `undefined` | Reduces the tab height and padding for use in dense layouts where vertical space is limited. |
+| `size` | `'small'` `'medium'`<br>`BreakpointCustomizable<TabsSize>` | `'small'` | Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values. |
+| `weight` _(deprecated)_ | `'regular'` `'semi-bold'` | `'regular'` | @deprecated Will be removed in the next major release. Has no effect anymore. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `update` | `CustomEvent<TabsUpdateEventDetail>`<br>`{ activeTabIndex: number }` | Emitted when the user switches to a different tab, carrying the new `activeTabIndex` in the event detail. |
+
+### Controlled properties
+
+- `activeTabIndex` — 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 |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the `p-tabs-item` tags. |
+
+## Sub-components
+
+These tags are only valid inside the parent(s) listed under each one — often this component, but some are shared and list a different parent (e.g. a tag documented here via a common ancestor). Their APIs come from the same authoritative `component-meta` as the parent above.
+
+### `p-tabs-item`
+
+Allowed parent: `p-tabs`.
+
+#### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` _(required)_ | `string` | `undefined` | Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content. |
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the tab content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Gradient color | If the amount of tabs exceeds the viewport, the component renders arrow-buttons to help with horizontal scrolling. | [./examples/Gradient.ts](./examples/Gradient.ts) |
+| Active Tab | You may need to change the initial active tab. | [./examples/ActiveTab.ts](./examples/ActiveTab.ts) |
+| Labelling | Use the `aria` property to provide an accessible name and optional description for the tablist. | [./examples/Labelling.ts](./examples/Labelling.ts) |

package/skills/pds-knowledge-angular/references/components/p-tabs-bar/accessibility.md

@@ -0,0 +1,61 @@
+# p-tabs-bar accessibility integration examples
+
+## Integration examples
+
+### Tabbed interface without tablist label
+
+#### ❌ Anti-pattern
+
+```html
+<p-tabs-bar [activeTabIndex]="0">
+  <button type="button" id="tab-0" ariaControls="panel-0">
+    Overview
+  </button>
+  <button type="button" id="tab-1" ariaControls="panel-1">
+    Equipment
+  </button>
+</p-tabs-bar>
+```
+
+#### ✅ Recommended
+
+```html
+<p-tabs-bar [aria]="{'aria-label': 'Porsche 911 configuration sections'}" [activeTabIndex]="0">
+  <button type="button" id="tab-0" ariaControls="panel-0">
+    Overview
+  </button>
+  <button type="button" id="tab-1" ariaControls="panel-1">
+    Equipment
+  </button>
+</p-tabs-bar>
+```
+
+### Route navigation without landmark label
+
+#### ❌ Anti-pattern
+
+```html
+<p-tabs-bar>
+  <a href="/models/911">
+    911
+  </a>
+  <a href="/models/taycan">
+    Taycan
+  </a>
+</p-tabs-bar>
+```
+
+#### ✅ Recommended
+
+```html
+<nav ariaLabel="Porsche model range">
+  <p-tabs-bar>
+    <a href="/models/911" ariaCurrent="page">
+      911
+    </a>
+    <a href="/models/taycan">
+      Taycan
+    </a>
+  </p-tabs-bar>
+</nav>
+```

package/skills/pds-knowledge-angular/references/components/p-tabs-bar/examples/Default.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, type TabsBarUpdateEventDetail } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-tabs-bar [activeTabIndex]="activeTabIndex" [aria]="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}" (update)="onUpdate($event)">
+        <button type="button">
+          Tab One
+        </button>
+        <button type="button">
+          Tab Two
+        </button>
+        <button type="button">
+          Tab Three
+        </button>
+      </p-tabs-bar>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  activeTabIndex = 0;
+
+  onUpdate(e: CustomEvent<TabsBarUpdateEventDetail>) {
+    this.activeTabIndex = e.detail.activeTabIndex;
+  }
+}