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

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
@@ -54,7 +58,7 @@ You can use native `click`, `focus`, `focusin`, `blur` and `focusout` events on
 | --- | --- | --- | --- |
 | `aria` | `WordmarkAriaAttribute` | `undefined` | Sets ARIA attributes on the anchor element to improve accessibility when the wordmark is used as a link. |
 | `href` | `string` | `undefined` | When set, wraps the wordmark in an anchor element that navigates to the given URL on click. |
-| `size` | `'small'` `'inherit'` | `'small'` | Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`). |
+| `size` | `'small'` `'inherit'` | `'small'` | Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens. |
 | `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`). |
 
 ## Examples

package/skills/pds-knowledge-angular/references/icons.md

@@ -0,0 +1,5 @@
+# Icon names
+
+Valid values for the icon-typed props across PDS components (e.g. `p-icon` `name`, `p-button` `icon`, `p-link` `icon`, `p-inline-notification` `actionIcon`). Pass one as a string, e.g. `icon="arrow-right"`. Each component reference links here instead of repeating the full list. (`p-flag` `name` uses a separate set of flag names, not listed here.)
+
+`360` `4-wheel-drive` `accessibility` `active-cabin-ventilation` `add` `adjust` `aggregation` `ai-3d-object` `ai-code` `ai-edit` `ai-image` `ai-scale` `ai-sound` `ai-spark` `ai-spark-filled` `ai-text` `ai-video` `arrow-compact-down` `arrow-compact-left` `arrow-compact-right` `arrow-compact-up` `arrow-double-down` `arrow-double-left` `arrow-double-right` `arrow-double-up` `arrow-down` `arrow-down-left` `arrow-down-right` `arrow-first` `arrow-head-down` `arrow-head-left` `arrow-head-right` `arrow-head-up` `arrow-last` `arrow-left` `arrow-right` `arrow-up` `arrow-up-left` `arrow-up-right` `arrows` `attachment` `augmented-reality` `battery-empty` `battery-empty-co2` `battery-empty-fuel` `battery-full` `battery-half` `battery-one-quarter` `battery-three-quarters` `bell` `bookmark` `bookmark-filled` `brain` `broadcast` `cabriolet` `calculator` `calendar` `camera` `car` `car-battery` `card` `charging-active` `charging-network` `charging-state` `charging-station` `chart` `chat` `check` `city` `climate` `climate-control` `clock` `close` `closed-caption` `cloud` `co2-class` `co2-emission` `color-picker` `compare` `compass` `configurate` `connect-services` `copy` `country-road` `coupe` `cubic-capacity` `customer-support` `cut` `delete` `disable` `dislike` `dislike-filled` `document` `door` `download` `drag` `duration` `ear` `edit` `email` `error` `error-filled` `exclamation` `exclamation-filled` `external` `fast-backward` `fast-forward` `file-csv` `file-excel` `filter` `fingerprint` `flag` `flash` `fuel-station` `garage` `genuine-parts` `geo-localization` `gift` `globe` `grid` `grip` `group` `hand` `heart` `heart-filled` `highway` `highway-filled` `history` `home` `horn` `image` `increase` `information` `information-filled` `key` `laptop` `leaf` `leather` `light` `like` `like-filled` `limousine` `linked` `list` `locate` `lock` `lock-open` `logo-apple-carplay` `logo-apple-music` `logo-apple-podcast` `logo-baidu` `logo-delicious` `logo-digg` `logo-facebook` `logo-foursquare` `logo-gmail` `logo-google` `logo-hatena` `logo-instagram` `logo-kaixin` `logo-kakaotalk` `logo-kununu` `logo-linkedin` `logo-naver` `logo-pinterest` `logo-qq` `logo-qq-share` `logo-reddit` `logo-skyrock` `logo-snapchat` `logo-sohu` `logo-spotify` `logo-tecent` `logo-telegram` `logo-tiktok` `logo-tumblr` `logo-twitter` `logo-viber` `logo-vk` `logo-wechat` `logo-weibo` `logo-whatsapp` `logo-x` `logo-xing` `logo-yahoo` `logo-youku` `logo-youtube` `logout` `map` `menu-dots-horizontal` `menu-dots-vertical` `menu-lines` `microphone` `minus` `mobile` `moon` `new-chat` `news` `north-arrow` `oil-can` `online-search` `parking-brake` `parking-light` `paste` `pause` `phone` `pin` `pin-filled` `pivot` `play` `play-filled` `plug` `plus` `preheating` `price-tag` `printer` `purchase` `push-pin` `push-pin-off` `qr` `qr-off` `question` `question-filled` `racing-flag` `radar` `radio` `refresh` `replay` `reset` `return` `road` `roof-closed` `roof-open` `route` `rss` `save` `screen` `search` `seat` `send` `service-technician` `share` `shopping-bag` `shopping-bag-filled` `shopping-cart` `shopping-cart-filled` `shopping-cart-off` `sidebar` `sidelights` `skip-backward` `skip-forward` `snowflake` `sort` `stack` `star` `star-filled` `steering-wheel` `stop` `stopwatch` `subtract` `success` `success-filled` `sun` `suv` `switch` `tablet` `tachometer` `theme` `tire` `trigger-finger` `truck` `turismo` `unlinked` `upload` `user` `user-filled` `user-group` `user-manual` `video` `view` `view-off` `volume-off` `volume-up` `warning` `warning-filled` `weather` `weight` `wifi` `work` `wrench` `wrenches` `zoom-in` `zoom-out`

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
+}