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

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

@@ -0,0 +1,45 @@
+# p-textarea accessibility integration examples
+
+## Integration examples
+
+### Placeholder-only instructions for open text input
+
+#### ❌ Anti-pattern
+
+```html
+<p-textarea name="feedback" placeholder="Tell us what you think"></p-textarea>
+```
+
+#### ✅ Recommended
+
+```html
+<p-textarea name="feedback" label="Your feedback" description="Describe what worked well and what we should improve (min. 20 characters)."></p-textarea>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```html
+<p-textarea name="feedback" [hideLabel]="true"></p-textarea>
+```
+
+#### ✅ Recommended
+
+```html
+<p-textarea name="feedback" [hideLabel]="true" label="Your feedback"></p-textarea>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```html
+<p-textarea name="feedback" label="Your feedback" [aria-invalid]="true" message="Too short"></p-textarea>
+```
+
+#### ✅ Recommended
+
+```html
+<p-textarea name="feedback" label="Your feedback" state="error" message="Enter at least 20 characters so we can understand your feedback."></p-textarea>
+```

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

@@ -58,6 +58,10 @@ In general, avoid using the `disabled` state. Disabled elements are no longer fo
 - **Don't** use placeholder-only instructions.
 - **Don't** use `hide-label` without an accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

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

@@ -9,7 +9,7 @@ Queuing messages on `p-toast` component happens via its `addMessage()` method. F
 ```ts
 type ToastMessage = {
   text: string;
-  state?: 'info' | 'success';
+  state?: 'info' | 'success' | 'warning' | 'error';
 };
 ```
 

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

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

package/{skill → skills/pds-knowledge-angular}/references/components/p-wordmark/p-wordmark.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 wordmarks, 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

package/{skill → skills/pds-knowledge-angular}/references/styles/tailwindcss.md

@@ -353,4 +353,4 @@ valid when sections need independent grids.
 
 ## Full stylesheet
 
-The tables above are the index, with each token's value. For the complete generated stylesheet — resets, deprecated aliases and everything not tabulated here — read `../tailwindcss/index.css` in the installed package.
+The tables above are the index, with each token's value. For the complete generated stylesheet — resets, deprecated aliases and everything not tabulated here — read `../../tailwindcss/index.css` in the installed package.

package/testing/package.json

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

package/tokens/package.json

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

package/vanilla-extract/package.json

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

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

@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
-
-@Component({
-  selector: 'porsche-design-system-app',
-  template: `
-      <p-canvas></p-canvas>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
-})
-export class ExampleComponent {}