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

package/skills/pds-knowledge-react/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
+
+```tsx
+<PTabs aria-label="Product details">
+  <PTabsItem label="Overview">
+    ...
+  </PTabsItem>
+</PTabs>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTabs aria={{'aria-label': 'Porsche 911 configuration details'}}>
+  <PTabsItem label="Overview">
+    ...
+  </PTabsItem>
+  <PTabsItem label="Equipment">
+    ...
+  </PTabsItem>
+</PTabs>
+```
+
+### Vague tab labels without context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTabs aria={{'aria-label': 'Product details'}}>
+  <PTabsItem label="Details">
+    ...
+  </PTabsItem>
+  <PTabsItem label="More">
+    ...
+  </PTabsItem>
+</PTabs>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTabs aria={{'aria-label': 'Porsche 911 configuration details'}}>
+  <PTabsItem label="Overview">
+    ...
+  </PTabsItem>
+  <PTabsItem label="Equipment and packages">
+    ...
+  </PTabsItem>
+</PTabs>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-tabs/p-tabs.md

@@ -77,6 +77,10 @@ Due to the nature of **Web Components** and **shadow DOM**, there are limitation
 | --- | --- |
 | `aria-controls` | 🚫 |
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/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
+
+```tsx
+<PTabsBar activeTabIndex={0}>
+  <button type="button" id="tab-0" ariaControls="panel-0">
+    Overview
+  </button>
+  <button type="button" id="tab-1" ariaControls="panel-1">
+    Equipment
+  </button>
+</PTabsBar>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTabsBar 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>
+</PTabsBar>
+```
+
+### Route navigation without landmark label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTabsBar>
+  <a href="/models/911">
+    911
+  </a>
+  <a href="/models/taycan">
+    Taycan
+  </a>
+</PTabsBar>
+```
+
+#### ✅ Recommended
+
+```tsx
+<nav ariaLabel="Porsche model range">
+  <PTabsBar>
+    <a href="/models/911" ariaCurrent="page">
+      911
+    </a>
+    <a href="/models/taycan">
+      Taycan
+    </a>
+  </PTabsBar>
+</nav>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-tabs-bar/p-tabs-bar.md

@@ -142,6 +142,10 @@ If the `p-tabs-bar` is used as an in-page jump navigation, you should follow the
 - **Do** wire `aria-controls`, `role="tabpanel"`, and `aria-labelledby` in the host application for tab interfaces.
 - **Don't** add tab semantics when the component is used as a link list for route-based navigation.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/references/components/p-tag/accessibility.md

@@ -0,0 +1,19 @@
+# p-tag accessibility integration examples
+
+## Integration examples
+
+### Status conveyed by color and icon only
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTag variant="success" icon="check"></PTag>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTag variant="success" icon="check">
+  Configuration saved
+</PTag>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-tag/p-tag.md

@@ -39,6 +39,10 @@ Tags should communicate status or category in visible text. Do not rely on color
 - **Do** use color and icon as supporting cues, not the only indicator.
 - **Don't** use an icon-only tag without visible text.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties
@@ -46,7 +50,7 @@ Tags should communicate status or category in visible text. Do not rely on color
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `compact` | `boolean` | `false` | Reduces the tag's padding and height for use in dense layouts where vertical space is limited. |
-| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon. |
+| `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon. |
 | `iconSource` | `string` | `undefined` | Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed. |
 | `variant` | `'primary'` `'secondary'` `'info'` `'info-frosted'` `'warning'` `'warning-frosted'` `'success'` `'success-frosted'` `'error'` `'error-frosted'` | `'secondary'` | Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`). |
 

package/skills/pds-knowledge-react/references/components/p-tag-dismissible/accessibility.md

@@ -0,0 +1,35 @@
+# p-tag-dismissible accessibility integration examples
+
+## Integration examples
+
+### Dismiss button ARIA on host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTagDismissible label="Sport Chrono" aria-label="Remove Sport Chrono filter"></PTagDismissible>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTagDismissible label="Sport Chrono" aria={{'aria-label': 'Remove Sport Chrono filter'}}></PTagDismissible>
+```
+
+### Tag without descriptive label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTagDismissible>
+  <PIcon name="watch-sport-chrono"></PIcon>
+</PTagDismissible>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTagDismissible label="Sport Chrono Package">
+  <PIcon name="watch-sport-chrono"></PIcon>
+</PTagDismissible>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-tag-dismissible/p-tag-dismissible.md

@@ -52,6 +52,10 @@ Ensure that when a `p-tag-dismissible` is removed, the focus is set to the previ
 - **Do** move focus to a sensible target after removing a tag.
 - **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-react/references/components/p-text/accessibility.md

@@ -0,0 +1,21 @@
+# p-text accessibility integration examples
+
+## Integration examples
+
+### Heading tag used for styling only
+
+#### ❌ Anti-pattern
+
+```tsx
+<PText tag="p" size="lg" weight="bold">
+  Delivery options
+</PText>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PHeading tag="h2" size="lg">
+  Delivery options
+</PHeading>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-text/p-text.md

@@ -38,6 +38,10 @@ Use the `tag` prop to choose the correct HTML element. Do not pick heading tags
 - **Do** evaluate correct semantic meaning, e.g. use `tag="p"` for regular paragraphs.
 - **Don't** nest text components.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/references/components/p-text-list/accessibility.md

@@ -0,0 +1,31 @@
+# p-text-list accessibility integration examples
+
+## Integration examples
+
+### Numbered list for non-sequential items
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTextList type="numbered">
+  <PTextListItem>
+    Sport Chrono Package
+  </PTextListItem>
+  <PTextListItem>
+    BOSE Surround Sound
+  </PTextListItem>
+</PTextList>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTextList type="unordered">
+  <PTextListItem>
+    Sport Chrono Package
+  </PTextListItem>
+  <PTextListItem>
+    BOSE Surround Sound
+  </PTextListItem>
+</PTextList>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-text-list/p-text-list.md

@@ -33,6 +33,10 @@ Choose the list `type` based on whether item order matters to understanding the
 - **Do** use `type="numbered"` or `type="alphabetically"` when step order or ranking matters.
 - **Don't** use a numbered list for items that are not sequential.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## API
 
 ### Properties

package/skills/pds-knowledge-react/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
+
+```tsx
+<PTextarea name="feedback" placeholder="Tell us what you think"></PTextarea>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTextarea name="feedback" label="Your feedback" description="Describe what worked well and what we should improve (min. 20 characters)."></PTextarea>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTextarea name="feedback" hideLabel={true}></PTextarea>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTextarea name="feedback" hideLabel={true} label="Your feedback"></PTextarea>
+```
+
+### Validation feedback via state and message API
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTextarea name="feedback" label="Your feedback" aria-invalid={true} message="Too short"></PTextarea>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTextarea name="feedback" label="Your feedback" state="error" message="Enter at least 20 characters so we can understand your feedback."></PTextarea>
+```

package/{skill → skills/pds-knowledge-react}/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-react}/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-react/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
+
+```tsx
+<PWordmark href="/" aria-label="Porsche home"></PWordmark>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PWordmark href="/" aria={{'aria-label': 'Porsche home'}}></PWordmark>
+```
+
+### Linked wordmark without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PWordmark href="/"></PWordmark>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PWordmark href="/" aria={{'aria-label': 'Porsche home'}}></PWordmark>
+```

package/{skill → skills/pds-knowledge-react}/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-react/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-react}/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.