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

package/skills/pds-knowledge-react/references/components/p-text/examples/Default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText>
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-text/examples/Semantics.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText tag="blockquote">
+        The quick brown fox jumps over the lazy dog
+      </PText>
+
+      <PText>
+        <blockquote>
+          The quick brown fox jumps over the lazy dog
+        </blockquote>
+      </PText>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-text/examples/Size.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText className="text-[3rem]" size="inherit">
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-text/examples/SizeResponsive.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText size={{'base': 'sm', 'l': '2xl'}}>
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

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

@@ -0,0 +1,72 @@
+# p-text
+
+`p-text` is used to specify paragraph styling in documents.
+
+> **Recommendation**
+>
+> Although the component is very sophisticated, it's recommended (if possible) to use the corresponding utility classes of the "@porsche-design-system/components-{js | angular | react | vue}/tailwindcss" sub-package or any of the other styling solutions for best performance since way less DOM nodes are required to render. Further information can be found [here](../../styles/tailwindcss.md).
+
+## Usage
+
+p-text is used to specify paragraph styling
+
+### Do:
+
+- Use p-text for all running body copy, descriptions, and supporting text.
+- Default to text-small for standard paragraphs; scale up for intros or short content blocks.
+- Use text-xx-small for legal disclaimers or metadata.
+- Maintain spacing and alignment using the fluid grid and responsive typography.
+- Always use the predefined text styles to ensure readability and scalability.
+
+### Don't:
+
+- Don’t use p-text styles for section titles or visual emphasis—use p-heading or p-display.
+- Don’t apply unapproved font sizes, weights, or custom spacing.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+### Semantic markup
+
+Use the `tag` prop to choose the correct HTML element. Do not pick heading tags only for visual styling.
+
+### Common do's and don'ts
+
+- **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
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `align` | `'start'` `'center'` `'end'` `'inherit'` | `'start'` | Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment. |
+| `color` | `'primary'` `'contrast-higher'` `'contrast-high'` `'contrast-medium'` `'success'` `'warning'` `'error'` `'info'` `'inherit'` | `'primary'` | Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color. |
+| `ellipsis` | `boolean` | `false` | Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content. |
+| `hyphens` | `'none'` `'manual'` `'auto'` `'inherit'` | `'inherit'` | Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting. |
+| `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'`<br>`BreakpointCustomizable<TextSize>` | `'sm'` | Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size. |
+| `tag` | `'p'` `'span'` `'div'` `'address'` `'blockquote'` `'figcaption'` `'cite'` `'time'` `'legend'` | `'p'` | Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates). |
+| `weight` | `'normal'` `'semibold'` `'bold'`<br>_deprecated:_ `'regular'` `'semi-bold'` | `'normal'` | The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the text to render. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Static Size | There are predefined fluid text sizes for the text component which should cover most use cases. | [./examples/Size.tsx](./examples/Size.tsx) |
+| Responsive Size | The `size` property accepts a breakpoint object to render different text sizes per viewport. | [./examples/SizeResponsive.tsx](./examples/SizeResponsive.tsx) |
+| Semantics | To provide more contextual HTML semantics you can either pass them with the `tag` property or directly inside a slot. | [./examples/Semantics.tsx](./examples/Semantics.tsx) |

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/skills/pds-knowledge-react/references/components/p-text-list/examples/Default.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PTextList, PTextListItem } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextList>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+        </PTextListItem>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+          <PTextList>
+            <PTextListItem>
+              The quick brown fox jumps over the lazy dog
+            </PTextListItem>
+            <PTextListItem>
+              The quick brown fox jumps over the lazy dog
+            </PTextListItem>
+          </PTextList>
+        </PTextListItem>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+        </PTextListItem>
+      </PTextList>
+    </>
+  )
+}

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

@@ -0,0 +1,72 @@
+# p-text-list
+
+The `p-text-list` component is used to display listed data in form of an unordered or ordered list. A list depends on two parts (like any native HTML list): A list wrapper which defines the type of the list (unordered or ordered) and the list items. Nesting is also provided and follows the same nesting rules like native HTML lists. For more complex data you should consider the use of a data table.
+
+## Usage
+
+### Do:
+
+- Use to display short pieces of information in the form of an unordered or ordered list.
+- Use an Unordered List to display content with equal value and an Ordered List for sequenced content.
+- Arrange list items in a logical way such as from highest to the lowest level. If necessary split the content into smaller and more specific categories and group them.
+- Stick to a homogeneous writing structure and style within one list.
+- Use sentence-style capitalization for each list item capitalizing only the first letter.
+
+### Don't:
+
+- Don't exceed two hierarchy levels in Text Lists.
+- Don't mix active with passive voice or declarative with imperative sentences within one list.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+### List semantics
+
+Choose the list `type` based on whether item order matters to understanding the content.
+
+### Common do's and don'ts
+
+- **Do** use `type="unordered"` for related items without required sequence.
+- **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
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'unordered'` `'numbered'` `'alphabetically'` | `'unordered'` | Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`). |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the `p-text-list-item` tags or nested `p-text-list` tags. |
+
+## Sub-components
+
+These tags are only valid inside the parent(s) listed under each one — often this component, but some are shared and list a different parent (e.g. a tag documented here via a common ancestor). Their APIs come from the same authoritative `component-meta` as the parent above.
+
+### `p-text-list-item`
+
+Allowed parent: `p-text-list`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

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/skills/pds-knowledge-react/references/components/p-textarea/examples/Default.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PTextarea } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextarea name="some-name" label="Some label"></PTextarea>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-textarea/examples/Form.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  PButton,
+  PText,
+  PTextarea,
+  type PTextareaProps,
+  type TextareaInputEventDetail,
+} from '@porsche-design-system/components-react';
+import { FormEvent, useState } from 'react';
+
+export const Example = () => {
+  const [form, setForm] = useState({ myTextarea: '' });
+  const [lastSubmittedData, setLastSubmittedData] = useState<any>();
+
+  const onInput = (e: CustomEvent<TextareaInputEventDetail>) => {
+    const { name, value } = e.target as HTMLElement & PTextareaProps;
+    setForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLastSubmittedData(JSON.stringify(form));
+  };
+
+  const onReset = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setForm({ myTextarea: '' });
+  };
+
+  return (
+    <>
+      <form onSubmit={onSubmit} onReset={onReset} className="flex flex-col gap-fluid-sm">
+        <PTextarea name="myTextarea" label="Some Label" value={form.myTextarea} onInput={onInput} />
+        <div className="flex gap-fluid-sm">
+          <PButton type="submit">Submit</PButton>
+          <PButton type="reset">Reset</PButton>
+        </div>
+        <PText>Last submitted data: {lastSubmittedData}</PText>
+      </form>
+    </>
+  );
+};

package/skills/pds-knowledge-react/references/components/p-textarea/examples/Slots.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PPopover, PTextarea } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextarea name="some-name" state="error">
+        <span slot="label" id="some-label-id">
+          Some label with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+           and a "label-after" slot.
+        </span>
+        <PPopover slot="label-after">
+          Some Popover content with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </PPopover>
+        <span slot="description" id="some-description-id">
+          Some description with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </span>
+        <span slot="message" id="some-message-id">
+          Some error message with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </span>
+      </PTextarea>
+    </>
+  )
+}

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

@@ -0,0 +1,126 @@
+# p-textarea
+
+The `p-textarea` component is a multi-line text input control. Don't use a Textarea component if you want to allow users to enter shorter responses that are no longer than a single line, such as a phone number or name. In this case, you should use one of the input components.
+
+A `label` is a caption which informs the user what information a particular form field is asking for. The `p-textarea` component can be used with or without a label, but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's mandatory to provide a descriptive label text for screen readers.
+
+While a `placeholder` is optional but recommended to be set whenever bits of example content or hints shall be shown to give the user visual cues to fill out the form.
+
+Instead of relying on slotted content, the `p-textarea` component offers a `value` attribute and property that remain synchronized with user input.
+
+## Usage
+
+### Do:
+
+- Use in forms when users need to enter and edit an amount of text that’s longer than a single line.
+- Keep the label text short and descriptive (one or two words).
+- Place validation text right below the Textarea box.
+- Respect the min-height.
+- Mark required fields with a red asterisk to improve the usability of forms.
+- Use the Pure variant (without label) only if the context clearly describes the purpose.
+
+### Don't:
+
+- Don't use when text entry is expected to be short. Use an input instead to avoid confusing users.
+- Don't overwhelm users with too many Textareas on a single page. Stick to no more than two Textareas.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+
+### ARIA enhancements
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-describedby="IDREF"` | Defines the accessible description combined with the status message. |
+| `role="status"`, `role="alert"` | When `message` and `state` or `loading` prop change, the status message is announced. |
+| `aria-hidden="true"` | If `required` attribute is set, the visible asterisk indicator is hidden from assistive technologies. |
+| `aria-invalid="true"` | If `error` state is set. |
+| `aria-live="polite"` | If the `maxlength` attribute is present, the counter is announced via ARIA live region. |
+
+## Development considerations
+
+### Disabled state
+
+In general, avoid using the `disabled` state. Disabled elements are no longer focusable and may be missed by screen reader users. They can also confuse sighted users if the reason they are disabled is not made clear.
+
+### Common do's and don'ts
+
+- **Do** provide a descriptive label, especially for open text questions.
+- **Do** use helper text to describe expected format, length, or sensitive content rules.
+- **Do** surface validation with state/message so screen readers get updates.
+- **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
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoComplete` | `string` | `undefined` | Provides the browser with a hint to enable text autofill suggestions for the textarea (e.g. `autocomplete='on'`). |
+| `compact` | `boolean` | `false` | Reduces the textarea's initial height and padding for use in dense layouts where vertical space is limited. |
+| `counter` | `boolean` | `false` | Shows a live character counter below the textarea indicating how many characters the user has typed relative to `maxLength`. |
+| `description` | `string` | `''` | Sets a supplementary description displayed below the label to give users additional guidance about the textarea. |
+| `disabled` | `boolean` | `false` | Prevents user interaction with the textarea and excludes its value from form submissions. |
+| `form` | `string` | `undefined` | Associates the textarea with a form element by its ID when the textarea is not a direct descendant of that form. |
+| `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
+| `label` | `string` | `''` | Sets the visible label text displayed above the textarea to identify its purpose. |
+| `maxLength` | `number` | `undefined` | Sets the maximum number of characters the user is allowed to enter into the textarea. |
+| `message` | `string` | `''` | Sets the validation feedback message displayed below the textarea when `state` is `success` or `error`. |
+| `minLength` | `number` | `undefined` | Sets the minimum number of characters required for the textarea's value to pass constraint validation. |
+| `name` _(required)_ | `string` | `undefined` | Sets the name of the textarea submitted with the form data to identify this field's value on the server. |
+| `placeholder` | `string` | `''` | Sets placeholder text displayed inside the textarea when it is empty to hint at the expected content format. |
+| `readOnly` | `boolean` | `false` | Makes the textarea read-only so users cannot modify the value, while still including it in form submissions. |
+| `required` | `boolean` | `false` | Marks the textarea as required so the form cannot be submitted while this field is empty. |
+| `resize` | `'none'` `'both'` `'horizontal'` `'vertical'` `'block'` `'inline'` | `'vertical'` | Controls whether and in which direction the user can resize the textarea (`horizontal`, `vertical`, `both`, or `none`). |
+| `rows` | `number` | `7` | Sets the initial visible height of the textarea in lines of text. Has no effect when the `--p-textarea-field-sizing` CSS variable is set to `content`. |
+| `spellCheck` | `boolean` | `undefined` | Controls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content. |
+| `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the textarea, which controls its visual appearance and feedback message style (`none`, `success`, `error`). |
+| `value` | `string | null` | `''` | Sets the current multi-line text value of the textarea and reflects any changes made by the user. |
+| `wrap` | `'hard'` `'soft'` `'off'` | `'soft'` | Controls how the submitted text wraps in the form data: `soft` wraps only visually, `hard` inserts line breaks at the textarea width. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `blur` | `CustomEvent<TextareaBlurEventDetail>`<br>`Event` | Emitted when the textarea element loses focus, regardless of whether the value changed. |
+| `change` | `CustomEvent<TextareaChangeEventDetail>`<br>`Event` | Emitted when the textarea loses focus after its value was changed, equivalent to the native `change` event. |
+| `input` | `CustomEvent<TextareaInputEventDetail>`<br>`InputEvent` | Emitted on every keystroke or value change as a direct result of user interaction, equivalent to the native `input` event. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `label` | no | — | Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+| `label-after` | no | — | Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`). |
+| `description` | no | — | Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+| `message` | no | — | Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-textarea-field-sizing` | `unset` | Controls CSS `field-sizing` for textarea. |
+| `--p-textarea-min-width` | `52px` | Minimum width of the textarea. |
+| `--p-textarea-max-width` | `unset` | Maximum width of the textarea. |
+| `--p-textarea-min-height` | `unset` | Minimum height of the textarea. |
+| `--p-textarea-max-height` | `unset` | Maximum height of the textarea. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Form | The `p-textarea` can be integrated into a form in two ways: **controlled** or **uncontrolled**, depending on your needs. | [./examples/Form.tsx](./examples/Form.tsx) |
+| Slots | Use named slots when `label`, `description` or `message` need markup such as a link. | [./examples/Slots.tsx](./examples/Slots.tsx) |

package/skills/pds-knowledge-react/references/components/p-toast/examples/Default.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PToast, useToastManager } from '@porsche-design-system/components-react';
+import { useState } from 'react';
+
+export const Example = () => {
+  const { addMessage } = useToastManager();
+  const [counter, setCounter] = useState(1);
+
+  const onButtonClick = () => {
+    addMessage({ text: `Some message ${counter}`, state: 'success' });
+    setCounter((prev) => prev + 1);
+  };
+
+  return (
+    <>
+      <button type="button" onClick={onButtonClick}>
+        Queue Toast
+      </button>
+      <PToast />
+    </>
+  );
+};

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

@@ -0,0 +1,61 @@
+# p-toast
+
+The `p-toast` component manages both, the queue and display of toast messages. Therefore, you can only have a single instance of this component within your application. Its messages are rendered on the `#top-layer` which ensures the element to be on top of the page, independent of where `p-toast` is placed in the DOM hierarchy (z-index is not relevant anymore and won't have any effect).
+
+Review the [notification decision tree](https://designsystem.porsche.com/patterns/notifications/decision-tree/) to determine which notification component is best for a particular scenario.
+
+Queuing messages on `p-toast` component happens via its `addMessage()` method. For Angular users, we offer the injectable `ToastManager` service; for React and Vue, there is the `useToastManager()` hook (a composable in Vue). All expose the `addMessage()` method, which needs to be called with a parameter that has the following structure:
+
+```ts
+type ToastMessage = {
+  text: string;
+  state?: 'info' | 'success' | 'warning' | 'error';
+};
+```
+
+The bottom position of the `p-toast` can be adjusted via the `--p-toast-position-bottom` CSS variable.
+
+For more information about the Usage of the `p-toast` checkout the [Notification](https://designsystem.porsche.com/patterns/notifications/introduction) page.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab` | Moves focus to the close button of the `Toast` element. |
+
+### ARIA enhancements
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `role="status"` | When content is populated or changed in `state="info"`, the component announces it unobtrusively. |
+| `aria-hidden="true"` | State `icon` is hidden from the screen reader. |
+
+## Development considerations
+
+### ARIA live announcements
+
+The `Toast` component uses `role="status"` to announce **content changes** for assistive technologies. Therefore, it is **mandatory** that the component is **pre-rendered** and the content (`Toast Item`) is added dynamically.
+
+### Common do's and don'ts
+
+- **Do** pre-render `p-toast` and add `p-toast-item` elements dynamically.
+- **Do** provide specific `text` that explains what happened and what to do next.
+- **Don't** create the toast container only when a message should be announced.
+
+## API
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-toast-position-bottom` | `56px` | Defines the spacing between the toast and the bottom edge of its container. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

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