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

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

@@ -0,0 +1,35 @@
+# p-switch accessibility integration examples
+
+## Integration examples
+
+### Switch without descriptive label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PSwitch name="notifications"></PSwitch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PSwitch name="notifications">
+  Email notifications for order updates
+</PSwitch>
+```
+
+### Hidden label without accessible name
+
+#### ❌ Anti-pattern
+
+```tsx
+<PSwitch name="notifications" hideLabel={true}></PSwitch>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PSwitch name="notifications" hideLabel={true}>
+  Email notifications for order updates
+</PSwitch>
+```

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

@@ -66,6 +66,10 @@ The switch accessible name comes from the default slot. Provide concise, descrip
 - **Do** use `hide-label` only when the label text remains in the slot for screen readers.
 - **Don't** use an icon or visual state alone without descriptive label text.
 
+## 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-table/accessibility.md

@@ -0,0 +1,47 @@
+# p-table accessibility integration examples
+
+## Integration examples
+
+### Data table without caption
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTable>
+  <PTableHead>
+    ...
+  </PTableHead>
+  <PTableBody>
+    ...
+  </PTableBody>
+</PTable>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTable caption="Available Porsche 911 models and starting prices">
+  <PTableHead>
+    ...
+  </PTableHead>
+  <PTableBody>
+    ...
+  </PTableBody>
+</PTable>
+```
+
+### Column with hidden label
+
+#### ❌ Anti-pattern
+
+```tsx
+<PTableHeadCell hideLabel={true}></PTableHeadCell>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PTableHeadCell hideLabel={true}>
+  Model
+</PTableHeadCell>
+```

package/{skill → skills/pds-knowledge-react}/references/components/p-table/examples/Sorting.tsx

@@ -30,21 +30,21 @@ const headSorting: HeadSorting[] = [
 
 type DataSorting = {
   col1: string;
-  col2: string;
+  col2: number;
   col3: string;
 };
 
 const dataSorting: DataSorting[] = [
-  {
-    col1: 'Name A',
-    col2: '9',
-    col3: '01.06.2021',
-  },
   {
     col1: 'Name Z',
-    col2: '1',
+    col2: 1,
     col3: '24.06.2021',
   },
+  {
+    col1: 'Name A',
+    col2: 9,
+    col3: '01.06.2021',
+  },
 ];
 
 export const Example = () => {
@@ -56,7 +56,8 @@ export const Example = () => {
     setHead((prev) => prev.map((item) => ({ ...item, active: false, ...(item.id === id && e.detail) })));
     setData((prev) =>
       [...prev].sort((a, b) => {
-        return direction === 'asc' ? a[id].localeCompare(b[id]) : b[id].localeCompare(a[id]);
+        const result = String(a[id]).localeCompare(String(b[id]), undefined, { numeric: true });
+        return direction === 'asc' ? result : -result;
       })
     );
   }, []);

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

@@ -50,6 +50,10 @@ It is a controlled component. This means it does not contain any internal state,
 - **Do** keep visible header text for sortable columns.
 - **Don't** use `hide-label` on a sortable column without an alternative accessible name.
 
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
 ## Tests
 
 ### Automated
@@ -184,6 +188,6 @@ Allowed parents: `p-table-body`, `p-table-head`.
 | Caption via Property | A caption that describes the content of the table is mandatory to fulfill accessibility criteria. | [./examples/CaptionProperty.tsx](./examples/CaptionProperty.tsx) |
 | Caption via Slot | Instead of using the the property, the table's caption can be provided via the `caption` slot. | [./examples/CaptionSlot.tsx](./examples/CaptionSlot.tsx) |
 | Layout: fixed | By setting `layout` to `fixed`, you can take full control over each column width, which would otherwise be controlled by its content. | [./examples/LayoutFixed.tsx](./examples/LayoutFixed.tsx) |
-| Sortable Columns | The `p-table`'s column headers can be configured by setting properties on each `p-table-head-cell`. | [./examples/Sorting.tsx](./examples/Sorting.tsx) |
+| Sortable Columns | Sorting is controlled, so the initial row order must match the active column's `direction` and both must remain synchronized when handling the `update` event. | [./examples/Sorting.tsx](./examples/Sorting.tsx) |
 | Hide Column Label | Sometimes you want to hide the visible label of a `p-table-head-cell`, for example when the column's content is self-explanatory. | [./examples/HideLabel.tsx](./examples/HideLabel.tsx) |
 | Advanced Table | The appearance of a table's contents can be customized as illustrated in the following example. | [./examples/Advanced.tsx](./examples/Advanced.tsx) |

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

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

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.

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -3849,7 +3849,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.6.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.6.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -9073,7 +9073,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 padding: padding,
                 border: `1px solid ${isSelected ? formStateBorderHoverColor : formStateBorderColor}`,
                 borderRadius: isCompact ? ref(radiusLg) : ref(radiusXl),
-                background: formStateBackgroundColor,
+                background: isSelected ? ref(colorFrostedStrong) : formStateBackgroundColor,
                 color: ref(colorPrimary),
                 ...textSmallStyle,
                 ...(isDisabled
@@ -9088,9 +9088,9 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                         cursor: 'pointer',
                         ...(!isSelected &&
                             hoverMediaQuery({
-                                transition: getTransition('border-color'),
+                                transition: getTransition('background-color'),
                                 '&:hover': {
-                                    borderColor: formStateBorderHoverColor,
+                                    backgroundColor: ref(colorFrostedStrong),
                                 },
                             })),
                     }),
@@ -9101,7 +9101,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 display: 'block',
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
-                color: ref(colorContrastMedium),
+                color: isSelected ? ref(colorContrastHigh) : ref(colorContrastMedium),
                 ...(isDisabled &&
                     forcedColorsMediaQuery({
                         color: 'GrayText',

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3482,7 +3482,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.6.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.6.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -3847,7 +3847,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.6.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.6.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -9071,7 +9071,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 padding: padding,
                 border: `1px solid ${isSelected ? formStateBorderHoverColor : formStateBorderColor}`,
                 borderRadius: isCompact ? ref(radiusLg) : ref(radiusXl),
-                background: formStateBackgroundColor,
+                background: isSelected ? ref(colorFrostedStrong) : formStateBackgroundColor,
                 color: ref(colorPrimary),
                 ...textSmallStyle,
                 ...(isDisabled
@@ -9086,9 +9086,9 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                         cursor: 'pointer',
                         ...(!isSelected &&
                             hoverMediaQuery({
-                                transition: getTransition('border-color'),
+                                transition: getTransition('background-color'),
                                 '&:hover': {
-                                    borderColor: formStateBorderHoverColor,
+                                    backgroundColor: ref(colorFrostedStrong),
                                 },
                             })),
                     }),
@@ -9099,7 +9099,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 display: 'block',
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
-                color: ref(colorContrastMedium),
+                color: isSelected ? ref(colorContrastHigh) : ref(colorContrastMedium),
                 ...(isDisabled &&
                     forcedColorsMediaQuery({
                         color: 'GrayText',