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

package/jsdom-polyfill/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "index.cjs",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/meta/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-angular",
-  "version": "4.6.0-rc.0",
+  "version": "4.6.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "type": "commonjs",
   "keywords": [
@@ -22,7 +22,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.6.0-rc.0",
+    "@porsche-design-system/components-js": "4.6.0-rc.2",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
@@ -30,6 +30,7 @@
     "@angular/core": ">=21.0.0 <23.0.0",
     "ag-grid-angular": ">= 36.0.0 <37.0.0",
     "ag-grid-enterprise": ">= 36.0.0 <37.0.0",
+    "jsdom": ">=30.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "tailwindcss": ">= 4.0.0 <5.0.0"
   },
@@ -40,6 +41,9 @@
     "ag-grid-angular": {
       "optional": true
     },
+    "jsdom": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }

package/partials/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/{skill → skills/pds-knowledge-angular}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: porsche-design-system-components-angular
+name: pds-knowledge-angular
 description: Build, style, or review web user interfaces with the Porsche Design System (PDS), or author and review documents that specify PDS behavior. Use whenever a task touches frontend UI — adding or changing components (buttons, forms, inputs, cards, tables, modals, navigation, layouts), styling with Tailwind, SCSS, vanilla-extract or Emotion, applying design tokens, or scaffolding a new page or form. Also use whenever a requirement, spec, design doc, or acceptance criteria names a PDS component, prop, token, or theming. Prefer PDS for new UI even when it is not named by the user. Do not activate for backend or non-UI logic, unrelated tests or tooling, documentation or prose that does not assert PDS component, prop, token, or theming behavior, work that clearly targets a different UI library, or when the user opts out of PDS.
 ---
 
@@ -7,7 +7,7 @@ description: Build, style, or review web user interfaces with the Porsche Design
 
 Version-exact knowledge of the installed Porsche Design System: every fact, prop, token and example here matches the installed package exactly — never mix guidance across versions. Every reference path is relative to this skill root unless noted otherwise.
 
-This skill ships inside the installed wrapper package alongside its inspectable package artifacts: the typings, `component-meta` (`@porsche-design-system/components-js/meta`), the SCSS partials (`@porsche-design-system/components-js/scss`), the design tokens (`../tokens`), the Tailwind theme (`../tailwindcss/index.css`) and the shipped global CSS. The underlying Stencil component implementation is not included in the npm package; it is loaded from the Porsche Design System CDN at runtime. The wrapper's own `meta` and `scss` are re-export shims of the same-version `@porsche-design-system/components-js` peer, so those two point at the peer directly.
+This skill ships inside the installed wrapper package alongside its inspectable package artifacts: the typings, `component-meta` (`@porsche-design-system/components-js/meta`), the SCSS partials (`@porsche-design-system/components-js/scss`), the design tokens (`../../tokens`), the Tailwind theme (`../../tailwindcss/index.css`) and the shipped global CSS. The underlying Stencil component implementation is not included in the npm package; it is loaded from the Porsche Design System CDN at runtime. The wrapper's own `meta` and `scss` are re-export shims of the same-version `@porsche-design-system/components-js` peer, so those two point at the peer directly.
 
 Prefer Porsche Design System components and tokens for new UI, even when the user does not name PDS. Do not rewrite non-PDS UI unasked, and do not hijack work that targets another library.
 
@@ -15,11 +15,11 @@ Prefer Porsche Design System components and tokens for new UI, even when the use
 
 This skill currently covers components, global stylesheets and theming, tokens, and styling integrations. It does not yet include complete getting-started, setup, and installation guidance; the v3-to-v4 migration guide; the changelog; partials; patterns and templates; the AG Grid theme; or the Storefront’s Must Know and Help sections.
 
-Before using documentation outside this skill or the installed package, match it to the installed PDS version. This skill was generated for `4.6.0-rc.0`; prefer the [exact-version Porsche Design System Storefront](https://designsystem.porsche.com/v4.6.0-rc.0/). Major-version URLs such as `/v4/` always serve the latest v4 release and may describe APIs or setup introduced after the installed version. Use them only as a fallback and verify relevant details against the installed package.
+Before using documentation outside this skill or the installed package, match it to the installed PDS version. This skill was generated for `4.6.0-rc.2`; prefer the [exact-version Porsche Design System Storefront](https://designsystem.porsche.com/v4.6.0-rc.2/). Major-version URLs such as `/v4/` always serve the latest v4 release and may describe APIs or setup introduced after the installed version. Use them only as a fallback and verify relevant details against the installed package.
 
-For runnable patterns and templates, consult the [Porsche Design System examples repository](https://github.com/porsche-design-system/examples), selecting a release tag or commit that matches the installed package instead of assuming its default branch is compatible. For release-specific changes, read `../CHANGELOG.md`.
+For runnable patterns and templates, consult the [Porsche Design System examples repository](https://github.com/porsche-design-system/examples), selecting a release tag or commit that matches the installed package instead of assuming its default branch is compatible. For release-specific changes, read `../../CHANGELOG.md`.
 
-For exact API facts, inspect the installed typings and metadata first. When readable implementation details are necessary, use the [exact-version component source](https://github.com/porsche-design-system/porsche-design-system/tree/v4.6.0-rc.0/packages/components/src/components) under the repository's `packages/components/src/components/<component>` directory. Do not use the default branch, which may represent a newer release.
+For exact API facts, inspect the installed typings and metadata first. When readable implementation details are necessary, use the [exact-version component source](https://github.com/porsche-design-system/porsche-design-system/tree/v4.6.0-rc.2/packages/components/src/components) under the repository's `packages/components/src/components/<component>` directory. Do not use the default branch, which may represent a newer release.
 
 For deployed browser behavior, inspect component requests in the Network panel. Treat these minified, content-hashed CDN artifacts as a debugging fallback; use the exact-version repository source for readable implementation details.
 

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

@@ -0,0 +1,63 @@
+# p-accordion accessibility integration examples
+
+## Integration examples
+
+### Accordion summary without semantic heading
+
+#### ❌ Anti-pattern
+
+```html
+<p-accordion>
+  <span slot="summary">
+    Delivery options
+  </span>
+  <p-text>
+    Content about delivery.
+  </p-text>
+</p-accordion>
+```
+
+#### ✅ Recommended
+
+```html
+<p-accordion>
+  <p-heading slot="summary" tag="h2" size="sm">
+    Delivery options
+  </p-heading>
+  <p-text>
+    Content about delivery.
+  </p-text>
+</p-accordion>
+```
+
+### Skipped heading level
+
+#### ❌ Anti-pattern
+
+```html
+<p-heading tag="h1">
+  Configure your Porsche
+</p-heading>
+
+<p-accordion>
+  <p-heading slot="summary" tag="h4" size="sm">
+    Delivery options
+  </p-heading>
+  ...
+</p-accordion>
+```
+
+#### ✅ Recommended
+
+```html
+<p-heading tag="h1">
+  Configure your Porsche
+</p-heading>
+
+<p-accordion>
+  <p-heading slot="summary" tag="h2" size="sm">
+    Delivery options
+  </p-heading>
+  ...
+</p-accordion>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-accordion/p-accordion.md

@@ -42,6 +42,10 @@ The accordion summary should be a heading element (e.g.,`p-heading` or `<h1>` to
 - **Do** keep heading levels sequential across multiple accordions on a page.
 - **Don't** use plain text in the summary without a semantic heading.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

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

@@ -0,0 +1,47 @@
+# p-ai-tag
+
+`p-ai-tag` is used to indicate AI-generated or AI-modified content. It displays a localized and legally compliant AI label text (abbreviated or as long-form) combined with an icon.
+
+## Usage
+
+Use the AI tag to indicate that content has been generated or assisted by artificial intelligence.
+
+The following segment provides instructions for designers and developers regarding the appropriate utilization of this component in various situations.
+
+### Do:
+
+- Use to indicate AI-generated or AI-assisted content.
+- Prefer BCP47 `locale` values (e.g. `de-DE`, `en-US`, or language-only `en`). POSIX forms (e.g. `de_DE`) are deprecated but still accepted. Copy is resolved by language; markets without a translation fall back to English.
+- Use the `abbreviation` variant for compact contexts where space is limited.
+- Use the `generated` or `modified` variant when a full label improves clarity.
+
+### Don't:
+
+- Don't use as a general-purpose tag — use `p-tag` instead.
+- Don't use for non-AI-related labeling or categorization.
+
+## Accessibility support
+
+For the `abbreviation` variant, the component uses an `<abbr>` element so the full “artificial intelligence” term is available as the expansion.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` | `'ar-BH'` `'ar-KW'` `'ar-QA'` `'ar-SA'` `'az-AZ'` `'bg-BG'` `'bs-BA'` `'cs-CZ'` `'cs-SK'` `'da-DK'` `'de-AT'` `'de-CH'` `'de-DE'` `'de-LI'` `'de-LU'` `'el-GR'` `'en'` `'en-AE'` `'en-AE-x-abu-dhabi'` `'en-AE-x-abudhabi'` `'en-AE-x-dubai'` `'en-AL'` `'en-AU'` `'en-BA'` `'en-BG'` `'en-BH'` `'en-BN'` `'en-CA'` `'en-CH'` `'en-CN'` `'en-CW'` `'en-CY'` `'en-CZ'` `'en-DK'` `'en-EE'` `'en-EG'` `'en-FI'` `'en-GB'` `'en-GE'` `'en-GH'` `'en-GI'` `'en-GR'` `'en-HK'` `'en-HR'` `'en-HT'` `'en-ID'` `'en-IE'` `'en-IL'` `'en-IN'` `'en-IS'` `'en-JM'` `'en-JO'` `'en-KH'` `'en-KR'` `'en-KW'` `'en-KZ'` `'en-LB'` `'en-LK'` `'en-LT'` `'en-LV'` `'en-ME'` `'en-MK'` `'en-MN'` `'en-MT'` `'en-MU'` `'en-MY'` `'en-NC'` `'en-NL'` `'en-NO'` `'en-NZ'` `'en-OM'` `'en-PF'` `'en-PH'` `'en-PL'` `'en-PR'` `'en-QA'` `'en-RO'` `'en-RS'` `'en-SA'` `'en-SE'` `'en-SG'` `'en-SI'` `'en-SK'` `'en-TH'` `'en-TR'` `'en-TT'` `'en-TW'` `'en-UA'` `'en-US'` `'en-VE'` `'en-VN'` `'en-XA'` `'en-YE'` `'en-ZA'` `'es-AD'` `'es-AR'` `'es-BO'` `'es-CL'` `'es-CO'` `'es-CR'` `'es-DO'` `'es-EC'` `'es-ES'` `'es-GT'` `'es-HN'` `'es-MX'` `'es-PA'` `'es-PE'` `'es-PR'` `'es-PY'` `'es-SV'` `'es-TT'` `'es-UY'` `'es-VE'` `'et-EE'` `'fi-FI'` `'fr-BE'` `'fr-CA'` `'fr-CH'` `'fr-DZ'` `'fr-FR'` `'fr-GP'` `'fr-LI'` `'fr-LU'` `'fr-MA'` `'fr-MC'` `'fr-MQ'` `'fr-MU'` `'fr-NC'` `'fr-PF'` `'fr-RE'` `'fr-TN'` `'he-IL'` `'hr-HR'` `'hu-HU'` `'hy-AM'` `'is-IS'` `'it-CH'` `'it-IT'` `'ja-JP'` `'ka-GE'` `'ko-KR'` `'lt-LT'` `'lv-LV'` `'me-ME'` `'mk-MK'` `'mt-MT'` `'nb-NO'` `'nl-BE'` `'nl-NL'` `'no-NO'` `'pl-PL'` `'pt-BR'` `'pt-PT'` `'ro-MD'` `'ro-RO'` `'ru-AZ'` `'ru-BY'` `'ru-CY'` `'ru-EE'` `'ru-KZ'` `'ru-LT'` `'ru-LV'` `'ru-RU'` `'ru-UK'` `'ru-UZ'` `'sk-SK'` `'sl-SI'` `'sr-ME'` `'sr-RS'` `'sv-SE'` `'tr-TR'` `'uk-UA'` `'zh-CN'` `'zh-HK'` `'zh-TW'`<br>_deprecated:_ `'ar_BH'` `'ar_KW'` `'ar_QA'` `'ar_SA'` `'az_AZ'` `'bg_BG'` `'bs_BA'` `'cs_CZ'` `'cs_SK'` `'da_DK'` `'de_AT'` `'de_CH'` `'de_DE'` `'de_LI'` `'de_LU'` `'el_GR'` `'en_AE'` `'en_AE_x_abu_dhabi'` `'en_AE_x_abudhabi'` `'en_AE_x_dubai'` `'en_AL'` `'en_AU'` `'en_BA'` `'en_BG'` `'en_BH'` `'en_BN'` `'en_CA'` `'en_CH'` `'en_CN'` `'en_CW'` `'en_CY'` `'en_CZ'` `'en_DK'` `'en_EE'` `'en_EG'` `'en_FI'` `'en_GB'` `'en_GE'` `'en_GH'` `'en_GI'` `'en_GR'` `'en_HK'` `'en_HR'` `'en_HT'` `'en_ID'` `'en_IE'` `'en_IL'` `'en_IN'` `'en_IS'` `'en_JM'` `'en_JO'` `'en_KH'` `'en_KR'` `'en_KW'` `'en_KZ'` `'en_LB'` `'en_LK'` `'en_LT'` `'en_LV'` `'en_ME'` `'en_MK'` `'en_MN'` `'en_MT'` `'en_MU'` `'en_MY'` `'en_NC'` `'en_NL'` `'en_NO'` `'en_NZ'` `'en_OM'` `'en_PF'` `'en_PH'` `'en_PL'` `'en_PR'` `'en_QA'` `'en_RO'` `'en_RS'` `'en_SA'` `'en_SE'` `'en_SG'` `'en_SI'` `'en_SK'` `'en_TH'` `'en_TR'` `'en_TT'` `'en_TW'` `'en_UA'` `'en_US'` `'en_VE'` `'en_VN'` `'en_XA'` `'en_YE'` `'en_ZA'` `'es_AD'` `'es_AR'` `'es_BO'` `'es_CL'` `'es_CO'` `'es_CR'` `'es_DO'` `'es_EC'` `'es_ES'` `'es_GT'` `'es_HN'` `'es_MX'` `'es_PA'` `'es_PE'` `'es_PR'` `'es_PY'` `'es_SV'` `'es_TT'` `'es_UY'` `'es_VE'` `'et_EE'` `'fi_FI'` `'fr_BE'` `'fr_CA'` `'fr_CH'` `'fr_DZ'` `'fr_FR'` `'fr_GP'` `'fr_LI'` `'fr_LU'` `'fr_MA'` `'fr_MC'` `'fr_MQ'` `'fr_MU'` `'fr_NC'` `'fr_PF'` `'fr_RE'` `'fr_TN'` `'he_IL'` `'hr_HR'` `'hu_HU'` `'hy_AM'` `'is_IS'` `'it_CH'` `'it_IT'` `'ja_JP'` `'ka_GE'` `'ko_KR'` `'lt_LT'` `'lv_LV'` `'me_ME'` `'mk_MK'` `'mt_MT'` `'nb_NO'` `'nl_BE'` `'nl_NL'` `'no_NO'` `'pl_PL'` `'pt_BR'` `'pt_PT'` `'ro_MD'` `'ro_RO'` `'ru_AZ'` `'ru_BY'` `'ru_CY'` `'ru_EE'` `'ru_KZ'` `'ru_LT'` `'ru_LV'` `'ru_RU'` `'ru_UK'` `'ru_UZ'` `'sk_SK'` `'sl_SI'` `'sr_ME'` `'sr_RS'` `'sv_SE'` `'tr_TR'` `'uk_UA'` `'zh_CN'` `'zh_HK'` `'zh_TW'` | `'en-US'` | Market locale for the AI text (BCP47, e.g. `en-US`). Language-only `en` is supported for international markets. POSIX forms (e.g. `en_US`) are deprecated but still accepted. Copy is resolved by language; unknown languages fall back to English. |
+| `variant` | `'abbreviation'` `'generated'` `'modified'` | `'generated'` | Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified"). |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| Within Checkbox | The `p-ai-tag` can be used inline with other form components. | [./examples/WithinCheckbox.ts](./examples/WithinCheckbox.ts) |
+| Within Radio Group | The `p-ai-tag` can also be placed within the slotted label of a `p-radio-button-wrapper` to indicate AI-related content for individual radio options. | [./examples/WithinRadioGroup.ts](./examples/WithinRadioGroup.ts) |
+| Within Form Label | The `p-ai-tag` can be placed within a `label` of a `p-select` (or any other form component) to indicate AI-related content for selected options. | [./examples/WithinFormLabel.ts](./examples/WithinFormLabel.ts) |
+| Within Input Search | The `p-ai-tag` can be placed in the `end` slot of a `p-input-search` to indicate that the search results are AI-powered. | [./examples/WithinInputSearch.ts](./examples/WithinInputSearch.ts) |
+| Within Text | The `p-ai-tag` can be placed inline within a `p-text` to indicate that the surrounding text content is AI-related. | [./examples/WithinText.ts](./examples/WithinText.ts) |
+| Within Image | The `p-ai-tag` can be positioned as an overlay on images to indicate that the image content has been generated or modified by AI. | [./examples/WithinImage.ts](./examples/WithinImage.ts) |
+| Within Table | The `p-ai-tag` can sit inline in a `p-table-head-cell` next to the column title — for example on a **Status** column when that data is AI-assisted. | [./examples/WithinTable.ts](./examples/WithinTable.ts) |

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

@@ -0,0 +1,35 @@
+# p-banner accessibility integration examples
+
+## Integration examples
+
+### Banner mounted only when shown
+
+#### ❌ Anti-pattern
+
+```html
+@if (hasError) {
+  <p-banner [open]="true" heading="Error">Something went wrong.</p-banner>
+}
+```
+
+#### ✅ Recommended
+
+```html
+<!-- Pre-render the banner and update content when needed. -->
+
+<p-banner id="form-banner" heading="Error" description="Check the highlighted fields and try again." state="error"></p-banner>
+```
+
+### Error feedback without descriptive content
+
+#### ❌ Anti-pattern
+
+```html
+<p-banner [open]="true" state="error" description="Error"></p-banner>
+```
+
+#### ✅ Recommended
+
+```html
+<p-banner [open]="true" state="error" heading="Payment could not be processed" description="Check your card details or try another payment method."></p-banner>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-banner/p-banner.md

@@ -43,6 +43,10 @@ The `Banner` component uses `role="status"` and `role="alert"` to announce **con
 - **Do** return focus to the trigger or at a logical place after the banner is dismissed.
 - **Don't** mount the entire banner only at the moment it should be announced.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

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

@@ -0,0 +1,61 @@
+# p-button accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-button aria-haspopup="dialog" aria-label="Open details of product XYZ">
+  Open details
+</p-button>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button [aria]="{'aria-haspopup': 'dialog', 'aria-label': 'Open details of product XYZ'}">
+  Open details
+</p-button>
+```
+
+### Icon-only button without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-button icon="plus"></p-button>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button icon="plus" [hideLabel]="true">
+  Add item XYZ to shopping cart
+</p-button>
+```
+
+### Vague button label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-button icon="plus">
+  Add
+</p-button>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button icon="plus" [aria]="{'aria-label': 'Add item XYZ to shopping cart'}">
+  Add
+</p-button>
+
+<!-- or use descriptive visible text -->
+
+<p-button icon="plus">
+  Add item XYZ to cart
+</p-button>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-button/p-button.md

@@ -84,6 +84,10 @@ If the text of a button does not clearly indicate what the button's behavior is,
 - **Don't** add native `aria-*` attributes directly on the component host.
 - **Don't** rely on short generic button labels like "Show" or "Add" without context.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -95,7 +99,7 @@ If the text of a button does not clearly indicate what the button's behavior is,
 | `disabled` | `boolean` | `false` | Disables the button, preventing all interaction and blocking events. |
 | `form` | `string` | `undefined` | Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it. |
 | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
-| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the button. Use `none` to show no icon. |
+| `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the button. Use `none` to show no icon. |
 | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
 | `loading` | `boolean` | `false` | Disables the button and replaces its content with a loading spinner to indicate an ongoing operation. |
 | `name` | `string` | `undefined` | Sets the name submitted with the form data when this button triggers form submission. |

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

@@ -0,0 +1,61 @@
+# p-button-pure accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-button-pure aria-haspopup="dialog" aria-label="Open details of product XYZ">
+  Open details
+</p-button-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button-pure [aria]="{'aria-haspopup': 'dialog', 'aria-label': 'Open details of product XYZ'}">
+  Open details
+</p-button-pure>
+```
+
+### Icon-only button without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-button-pure icon="plus"></p-button-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button-pure icon="plus" [hideLabel]="true">
+  Add item XYZ to shopping cart
+</p-button-pure>
+```
+
+### Vague button label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-button-pure icon="plus">
+  Add
+</p-button-pure>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button-pure icon="plus" [aria]="{'aria-label': 'Add item XYZ to shopping cart'}">
+  Add
+</p-button-pure>
+
+<!-- or use descriptive visible text -->
+
+<p-button-pure icon="plus">
+  Add item XYZ to cart
+</p-button-pure>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-button-pure/p-button-pure.md

@@ -79,6 +79,10 @@ If the text of a button does not clearly indicate what the button's behavior is,
 - **Don't** add native `aria-*` attributes directly on the component host.
 - **Don't** rely on short generic button labels like "Show" or "Add" without context.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -92,7 +96,7 @@ If the text of a button does not clearly indicate what the button's behavior is,
 | `disabled` | `boolean` | `false` | Disables the button, preventing all interaction and blocking events. |
 | `form` | `string` | `undefined` | Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it. |
 | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
-| `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
+| `icon` | `''`<br>one of 293 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. |
 | `loading` | `boolean` | `false` | Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation. |
 | `name` | `string` | `undefined` | Sets the name submitted with the form data when this button triggers form submission. |

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

@@ -0,0 +1,31 @@
+# p-button-tile accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-button-tile label="Open" aria-label="Open details of Porsche Taycan" aria-haspopup="dialog"></p-button-tile>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button-tile label="Open" [aria]="{'aria-haspopup': 'dialog', 'aria-label': 'Open details of Porsche Taycan'}"></p-button-tile>
+```
+
+### Vague tile label without context
+
+#### ❌ Anti-pattern
+
+```html
+<p-button-tile label="Open"></p-button-tile>
+```
+
+#### ✅ Recommended
+
+```html
+<p-button-tile label="Configure Porsche Taycan"></p-button-tile>
+```

package/{skill → skills/pds-knowledge-angular}/references/components/p-button-tile/p-button-tile.md

@@ -75,6 +75,10 @@ If the text of the button does not clearly indicate what the button's function i
 - **Do** add `aria-label` on slotted `<video>` elements used as backgrounds.
 - **Don't** add native `aria-*` attributes directly on the component host.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -88,7 +92,7 @@ If the text of the button does not clearly indicate what the button's function i
 | `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. |
+| `icon` | `'none'`<br>one of 293 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. |

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

@@ -0,0 +1,105 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  CanvasSidebarStartUpdateEventDetail,
+  PorscheDesignSystemModule,
+} from '@porsche-design-system/components-angular';
+import { breakpointS } from '@porsche-design-system/components-angular/emotion';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  styles: [
+    `
+      .-col-span-full-1 {
+        grid-column: 1 / -1;
+      }
+
+      .-col-span-full-2 {
+        grid-column: 2 / -2;
+      }
+
+      .-col-span-full-3 {
+        grid-column: 3 / -3;
+      }
+
+      .-col-span-4 {
+        grid-column: span 4;
+      }
+
+      .tile {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+        background: lightpink;
+      }
+    `,
+  ],
+  template: `
+    <p-canvas
+      [sidebarStartOpen]="isSidebarStartOpen"
+      [sidebarEndOpen]="isSidebarEndOpen"
+      (sidebarStartUpdate)="onSidebarStartUpdate($event)"
+      (sidebarEndDismiss)="onSidebarEndDismiss()"
+    >
+      <a slot="title" href="#">App Name</a>
+
+      <p-button
+        slot="header-end"
+        icon="configurate"
+        variant="secondary"
+        [compact]="true"
+        [hideLabel]="true"
+        (click)="onSidebarEndOpen()"
+        >Open sidebar
+      </p-button>
+
+      <div class="-p-canvas-grid">
+        <p-text class="-col-span-full-1">Content</p-text>
+
+        <div class="tile -col-span-4">Grid span 4x</div>
+        <div class="tile -col-span-4">Grid span 4x</div>
+        <div class="tile -col-span-4">Grid span 4x</div>
+
+        <div class="tile -col-span-full-1">12 Grid columns</div>
+        <div class="tile -col-span-full-2">10 Grid columns</div>
+        <div class="tile -col-span-full-3">8 Grid columns</div>
+      </div>
+
+      <div slot="footer" class="-p-canvas-grid">
+        <p-text class="-col-span-full-1">Footer</p-text>
+        <div class="tile -col-span-full-1">12 Grid columns</div>
+      </div>
+
+      <div slot="sidebar-start">
+        <p-text>Sidebar Start</p-text>
+      </div>
+
+      <p-heading slot="sidebar-end-header" tag="h2" size="small"> Sidebar End Header </p-heading>
+
+      <div slot="sidebar-end">
+        <p-text>Sidebar End</p-text>
+      </div>
+    </p-canvas>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  // initially, sidebar should be closed on mobile and opened on desktop
+  isSidebarStartOpen: boolean = window.matchMedia(`(min-width: ${breakpointS}px)`).matches;
+  isSidebarEndOpen: boolean = false;
+
+  onSidebarStartUpdate(e: CustomEvent<CanvasSidebarStartUpdateEventDetail>) {
+    this.isSidebarStartOpen = e.detail.open;
+  }
+
+  onSidebarEndOpen() {
+    this.isSidebarEndOpen = true;
+  }
+
+  onSidebarEndDismiss() {
+    this.isSidebarEndOpen = false;
+  }
+}

package/{skill → skills/pds-knowledge-angular}/references/components/p-canvas/p-canvas.md

@@ -10,6 +10,10 @@ The canvas component provides a CSS utility class which comes with a basic 12 co
 .-p-canvas-grid // experimental, might be removed in a future release
 ```
 
+> **Porsche Grid compatibility**
+>
+> The standard Porsche Grid currently supports only top-level layouts that span the full viewport width. Do not use it inside the `p-canvas` default or footer slots because their available width can be reduced by open sidebars. Use `.-p-canvas-grid` instead.
+
 The canvas component has some values which can be overwritten by **CSS Variables**.
 
 ```scss