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

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.1",
   "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.1",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {

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.1`; prefer the [exact-version Porsche Design System Storefront](https://designsystem.porsche.com/v4.6.0-rc.1/). 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.1/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-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

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

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

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

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

@@ -0,0 +1,61 @@
+# p-carousel accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel aria-label="Slider">
+  <!-- slides -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel [aria]="{'aria-label': 'Featured Porsche models'}">
+  <!-- slides -->
+</p-carousel>
+```
+
+### Carousel without skip path for keyboard users
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel>
+  <!-- many slides (>6 items) -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel skipLinkTarget="#after-carousel" [aria]="{'aria-label': 'Highlights'}">
+  <!-- many slides (>6 items) -->
+</p-carousel>
+
+<p-heading tag="h2" id="after-carousel">
+  Next section
+</p-heading>
+```
+
+### Vague carousel label
+
+#### ❌ Anti-pattern
+
+```html
+<p-carousel [aria]="{'aria-label': 'Slider'}">
+  <!-- slides -->
+</p-carousel>
+```
+
+#### ✅ Recommended
+
+```html
+<p-carousel [aria]="{'aria-label': 'Featured Porsche models'}">
+  <!-- slides -->
+</p-carousel>
+```

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

@@ -78,6 +78,10 @@ Through the `skipLinkTarget` property, a skip link for keyboard users can be pro
 - **Don't** force keyboard users to tab through every slide control when a skip path is needed.
 - **Don't** use vague labels that do not communicate carousel context.
 
+## 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-checkbox/accessibility.md

@@ -0,0 +1,31 @@
+# p-checkbox accessibility integration examples
+
+## Integration examples
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-checkbox name="terms" [hideLabel]="true"></p-checkbox>
+```
+
+#### ✅ Recommended
+
+```html
+<p-checkbox name="terms" [hideLabel]="true" label="I accept the terms and conditions"></p-checkbox>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-checkbox name="terms" label="I accept the terms and conditions" [aria-invalid]="true" message="Required"></p-checkbox>
+```
+
+#### ✅ Recommended
+
+```html
+<p-checkbox name="terms" label="I accept the terms and conditions" [required]="true" state="error" message="Accept the terms and conditions to continue."></p-checkbox>
+```

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

@@ -68,6 +68,10 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 - **Don't** use `hide-label` without an accessible name.
 - **Don't** use `hide-label` when it is not clear what the checkbox controls.
 
+## 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-crest/accessibility.md

@@ -0,0 +1,17 @@
+# p-crest accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```html
+<p-crest href="/" aria-label="Porsche home"></p-crest>
+```
+
+#### ✅ Recommended
+
+```html
+<p-crest href="/" [aria]="{'aria-label': 'Porsche home'}"></p-crest>
+```

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

@@ -46,6 +46,10 @@ You can use native `click`, `focus`, `focusin`, `blur` and `focusout` events on
 - **Do** provide a descriptive `aria-label` for linked crests, for example "Porsche home".
 - **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