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

package/skill/references/components/p-tag/p-tag.md

@@ -0,0 +1,66 @@
+# p-tag
+
+`p-tag` is used to label, categorize, or organize items by using keywords that describe them.
+
+## Usage
+
+Use tags to label, categorize, or organize items using keywords that describe them.
+
+### Do:
+
+- Use to indicate or highlight a certain attribute of an item.
+- Use to show that content is mapped to one or multiple categories.
+- Use to indicate that a certain filter is active.
+- Use short labeling for easy scanning.
+- Have a large number of tags horizontally scrollable, swipeable, or navigable with arrows.
+- Have tags in a predefined space and move to the next line once they meet the boundary.
+- Use color themes such as success, neutral, warning, and error for better visual perception
+- Include icons to improve the faster perception.
+- Add a link for further explanation about the tag for better understandability (With modal).
+- Add a link for additional information that is not necessary for the task completion (With modal).
+
+### Don't:
+
+- Don't use more than two words (only if necessary).
+- Don't implement something else than a link or button.
+- Don't use Tags for navigation.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+Tags should communicate status or category in visible text. Do not rely on color or icon alone.
+
+### Common do's and don'ts
+
+- **Do** include descriptive text in the default slot.
+- **Do** use color and icon as supporting cues, not the only indicator.
+- **Don't** use an icon-only tag without visible text.
+
+## API
+
+### Properties
+
+| 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. |
+| `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`). |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the tag content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |
+| With slotted button | It is possible to add a `<button>` tag into the `p-tag` component. | [./examples/SlottedButton.ts](./examples/SlottedButton.ts) |
+| With slotted link | It is possible to add an `<a>` tag to the `p-tag` component. | [./examples/SlottedLink.ts](./examples/SlottedLink.ts) |
+| Multiline | The contents of the `p-tag` component are rendered with `white-space: nowrap` by default. | [./examples/Multiline.ts](./examples/Multiline.ts) |

package/skill/references/components/p-tag-dismissible/examples/Default.ts

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

package/skill/references/components/p-tag-dismissible/p-tag-dismissible.md

@@ -0,0 +1,75 @@
+# p-tag-dismissible
+
+`p-tag-dismissible` is used in contexts where the user can actively remove a tag. It is often seen in filtering.
+
+## Usage
+
+Allows users to quickly refine the result of data they want to be presented on the page.
+
+### Do:
+
+- Use to show that a certain filter is active.
+- Use this component with a label if additional information is needed (e.g. category an attribute/filter refers to).
+
+### Don't:
+
+- Don't use it for other interactions than dismissing a selection.
+- Don't have long content that causes multiline.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+| `Enter`, `Space` | Removes the element. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the interactive element. |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-hidden="true"` | The "close" icon is hidden from assistive technologies. |
+
+## Development considerations
+
+### Focus handling
+
+Ensure that when a `p-tag-dismissible` is removed, the focus is set to the previous or next `p-tag-dismissible` or to another focusable element. This prevents losing the focus order.
+
+### Common do's and don'ts
+
+- **Do** provide a visible `label` that describes the tag content.
+- **Do** pass dismiss-button ARIA through the `aria` prop when the default action text is insufficient.
+- **Do** move focus to a sensible target after removing a tag.
+- **Don't** add native `aria-*` attributes directly on the component host.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aria` | `TagDismissibleAriaAttribute` | `undefined` | Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers. |
+| `compact` | `boolean` | `false` | Reduces the tag's padding and height for use in dense layouts where vertical space is limited. |
+| `label` | `string` | `undefined` | Sets the visible label text displayed inside the tag alongside the dismiss button. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the tag content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.ts](./examples/Default.ts) |

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

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-text>
+        The quick brown fox jumps over the lazy dog
+      </p-text>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-text/examples/Semantics.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-text tag="blockquote">
+        The quick brown fox jumps over the lazy dog
+      </p-text>
+
+      <p-text>
+        <blockquote>
+          The quick brown fox jumps over the lazy dog
+        </blockquote>
+      </p-text>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-text/examples/Size.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-text class="text-[3rem]" size="inherit">
+        The quick brown fox jumps over the lazy dog
+      </p-text>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-text/examples/SizeResponsive.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-text [size]="{'base': 'sm', 'l': '2xl'}">
+        The quick brown fox jumps over the lazy dog
+      </p-text>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-text/p-text.md

@@ -0,0 +1,68 @@
+# 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.
+
+## 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.ts](./examples/Default.ts) |
+| Static Size | There are predefined fluid text sizes for the text component which should cover most use cases. | [./examples/Size.ts](./examples/Size.ts) |
+| Responsive Size | The `size` property accepts a breakpoint object to render different text sizes per viewport. | [./examples/SizeResponsive.ts](./examples/SizeResponsive.ts) |
+| Semantics | To provide more contextual HTML semantics you can either pass them with the `tag` property or directly inside a slot. | [./examples/Semantics.ts](./examples/Semantics.ts) |

package/skill/references/components/p-text-list/examples/Default.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-text-list>
+        <p-text-list-item>
+          The quick brown fox jumps over the lazy dog
+        </p-text-list-item>
+        <p-text-list-item>
+          The quick brown fox jumps over the lazy dog
+          <p-text-list>
+            <p-text-list-item>
+              The quick brown fox jumps over the lazy dog
+            </p-text-list-item>
+            <p-text-list-item>
+              The quick brown fox jumps over the lazy dog
+            </p-text-list-item>
+          </p-text-list>
+        </p-text-list-item>
+        <p-text-list-item>
+          The quick brown fox jumps over the lazy dog
+        </p-text-list-item>
+      </p-text-list>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-text-list/p-text-list.md

@@ -0,0 +1,68 @@
+# 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.
+
+## 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.ts](./examples/Default.ts) |

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

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

package/skill/references/components/p-textarea/examples/Form.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="flex flex-col gap-fluid-sm">
+      <p-textarea formControlName="myTextarea" [label]="'Some Label'" [required]="true" />
+      <div class="flex gap-fluid-sm">
+        <p-button type="submit">Submit</p-button>
+        <p-button type="reset">Reset</p-button>
+      </div>
+      <p-text>Last submitted data: {{ submittedValue }}</p-text>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule, FormsModule, ReactiveFormsModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  form = new FormGroup({
+    myTextarea: new FormControl<string>(''),
+  });
+
+  submittedValue: any = undefined;
+
+  onSubmit(): void {
+    this.submittedValue = JSON.stringify(this.form.value);
+  }
+}

package/skill/references/components/p-textarea/examples/Slots.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-textarea name="some-name" state="error">
+        <span slot="label" id="some-label-id">
+          Some label with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+           and a "label-after" slot.
+        </span>
+        <p-popover slot="label-after">
+          Some Popover content with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </p-popover>
+        <span slot="description" id="some-description-id">
+          Some description with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </span>
+        <span slot="message" id="some-message-id">
+          Some error message with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </span>
+      </p-textarea>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-textarea/p-textarea.md

@@ -0,0 +1,122 @@
+# 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.
+
+## 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.ts](./examples/Default.ts) |
+| Form | The `p-textarea` can be integrated into a form in two ways: **controlled** or **uncontrolled**, depending on your needs. | [./examples/Form.ts](./examples/Form.ts) |
+| Slots | Use named slots when `label`, `description` or `message` need markup such as a link. | [./examples/Slots.ts](./examples/Slots.ts) |

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

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, ToastManager } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <button type="button" (click)="onButtonClick()">Queue Toast</button>
+    <p-toast></p-toast>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  private counter = 1;
+
+  constructor(private toastManager: ToastManager) {}
+
+  onButtonClick() {
+    this.toastManager.addMessage({ text: `Some message ${this.counter}`, state: 'success' });
+    this.counter++;
+  }
+}