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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/CHANGELOG.md +84 -2
  2. package/OSS_NOTICE +5532 -2115
  3. package/fesm2022/porsche-design-system-components-angular.mjs +1 -1
  4. package/fesm2022/porsche-design-system-components-angular.mjs.map +1 -1
  5. package/package.json +6 -2
  6. package/skills/pds-knowledge-angular/SKILL.md +2 -2
  7. package/skills/pds-knowledge-angular/references/components/p-ai-tag/p-ai-tag.md +2 -2
  8. package/skills/pds-knowledge-angular/references/components/p-button/p-button.md +1 -1
  9. package/skills/pds-knowledge-angular/references/components/p-button-pure/p-button-pure.md +1 -1
  10. package/skills/pds-knowledge-angular/references/components/p-button-tile/p-button-tile.md +1 -1
  11. package/skills/pds-knowledge-angular/references/components/p-carousel/p-carousel.md +1 -1
  12. package/skills/pds-knowledge-angular/references/components/p-drilldown/p-drilldown.md +1 -1
  13. package/skills/pds-knowledge-angular/references/components/p-flyout/p-flyout.md +1 -1
  14. package/skills/pds-knowledge-angular/references/components/p-icon/examples/Overview.ts +6 -0
  15. package/skills/pds-knowledge-angular/references/components/p-icon/p-icon.md +1 -1
  16. package/skills/pds-knowledge-angular/references/components/p-inline-notification/p-inline-notification.md +1 -1
  17. package/skills/pds-knowledge-angular/references/components/p-input-number/p-input-number.md +3 -3
  18. package/skills/pds-knowledge-angular/references/components/p-input-text/p-input-text.md +3 -3
  19. package/skills/pds-knowledge-angular/references/components/p-link/p-link.md +1 -1
  20. package/skills/pds-knowledge-angular/references/components/p-link-pure/p-link-pure.md +1 -1
  21. package/skills/pds-knowledge-angular/references/components/p-modal/p-modal.md +1 -1
  22. package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/AsyncFilter.ts +32 -5
  23. package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/Form.ts +3 -3
  24. package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/SelectedSlot.ts +2 -2
  25. package/skills/pds-knowledge-angular/references/components/p-multi-select/p-multi-select.md +2 -2
  26. package/skills/pds-knowledge-angular/references/components/p-pin-code/examples/Form.ts +2 -2
  27. package/skills/pds-knowledge-angular/references/components/p-pin-code/p-pin-code.md +2 -2
  28. package/skills/pds-knowledge-angular/references/components/p-popover/p-popover.md +1 -1
  29. package/skills/pds-knowledge-angular/references/components/p-radio-group/examples/Form.ts +2 -2
  30. package/skills/pds-knowledge-angular/references/components/p-radio-group/p-radio-group.md +3 -3
  31. package/skills/pds-knowledge-angular/references/components/p-segmented-control/examples/Form.ts +2 -2
  32. package/skills/pds-knowledge-angular/references/components/p-segmented-control/p-segmented-control.md +2 -2
  33. package/skills/pds-knowledge-angular/references/components/p-select/examples/AsyncFilter.ts +32 -5
  34. package/skills/pds-knowledge-angular/references/components/p-select/p-select.md +1 -1
  35. package/skills/pds-knowledge-angular/references/components/p-sheet/p-sheet.md +1 -1
  36. package/skills/pds-knowledge-angular/references/components/p-table/p-table.md +1 -1
  37. package/skills/pds-knowledge-angular/references/components/p-tag/p-tag.md +1 -1
  38. package/skills/pds-knowledge-angular/references/components/p-wordmark/p-wordmark.md +1 -1
  39. package/skills/pds-knowledge-angular/references/icons.md +1 -1
  40. package/types/porsche-design-system-components-angular.d.ts +219 -238
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-angular",
3
- "version": "4.6.0-rc.1",
3
+ "version": "4.6.0-rc.3",
4
4
  "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
5
5
  "type": "commonjs",
6
6
  "keywords": [
@@ -22,7 +22,7 @@
22
22
  "url": "https://github.com/porsche-design-system/porsche-design-system"
23
23
  },
24
24
  "dependencies": {
25
- "@porsche-design-system/components-js": "4.6.0-rc.1",
25
+ "@porsche-design-system/components-js": "4.6.0-rc.3",
26
26
  "tslib": "^2.8.1"
27
27
  },
28
28
  "peerDependencies": {
@@ -30,6 +30,7 @@
30
30
  "@angular/core": ">=21.0.0 <23.0.0",
31
31
  "ag-grid-angular": ">= 36.0.0 <37.0.0",
32
32
  "ag-grid-enterprise": ">= 36.0.0 <37.0.0",
33
+ "jsdom": ">=30.0.0",
33
34
  "rxjs": "^6.5.3 || ^7.4.0",
34
35
  "tailwindcss": ">= 4.0.0 <5.0.0"
35
36
  },
@@ -40,6 +41,9 @@
40
41
  "ag-grid-angular": {
41
42
  "optional": true
42
43
  },
44
+ "jsdom": {
45
+ "optional": true
46
+ },
43
47
  "tailwindcss": {
44
48
  "optional": true
45
49
  }
package/skills/pds-knowledge-angular/SKILL.md CHANGED
@@ -15,11 +15,11 @@ Prefer Porsche Design System components and tokens for new UI, even when the use
15
15
 
16
16
  This skill currently covers components, global stylesheets and theming, tokens, and styling integrations. It does not yet include complete getting-started, setup, and installation guidance; the v3-to-v4 migration guide; the changelog; partials; patterns and templates; the AG Grid theme; or the Storefront’s Must Know and Help sections.
17
17
 
18
- Before using documentation outside this skill or the installed package, match it to the installed PDS version. This skill was generated for `4.6.0-rc.1`; prefer the [exact-version Porsche Design System Storefront](https://designsystem.porsche.com/v4.6.0-rc.1/). Major-version URLs such as `/v4/` always serve the latest v4 release and may describe APIs or setup introduced after the installed version. Use them only as a fallback and verify relevant details against the installed package.
18
+ Before using documentation outside this skill or the installed package, match it to the installed PDS version. This skill was generated for `4.6.0-rc.3`; prefer the [exact-version Porsche Design System Storefront](https://designsystem.porsche.com/v4.6.0-rc.3/). Major-version URLs such as `/v4/` always serve the latest v4 release and may describe APIs or setup introduced after the installed version. Use them only as a fallback and verify relevant details against the installed package.
19
19
 
20
20
  For runnable patterns and templates, consult the [Porsche Design System examples repository](https://github.com/porsche-design-system/examples), selecting a release tag or commit that matches the installed package instead of assuming its default branch is compatible. For release-specific changes, read `../../CHANGELOG.md`.
21
21
 
22
- For exact API facts, inspect the installed typings and metadata first. When readable implementation details are necessary, use the [exact-version component source](https://github.com/porsche-design-system/porsche-design-system/tree/v4.6.0-rc.1/packages/components/src/components) under the repository's `packages/components/src/components/<component>` directory. Do not use the default branch, which may represent a newer release.
22
+ For exact API facts, inspect the installed typings and metadata first. When readable implementation details are necessary, use the [exact-version component source](https://github.com/porsche-design-system/porsche-design-system/tree/v4.6.0-rc.3/packages/components/src/components) under the repository's `packages/components/src/components/<component>` directory. Do not use the default branch, which may represent a newer release.
23
23
 
24
24
  For deployed browser behavior, inspect component requests in the Network panel. Treat these minified, content-hashed CDN artifacts as a debugging fallback; use the exact-version repository source for readable implementation details.
25
25
 
package/skills/pds-knowledge-angular/references/components/p-ai-tag/p-ai-tag.md CHANGED
@@ -11,7 +11,7 @@ The following segment provides instructions for designers and developers regardi
11
11
  ### Do:
12
12
 
13
13
  - Use to indicate AI-generated or AI-assisted content.
14
- - Use the appropriate `locale` to match the user's language.
14
+ - Prefer BCP47 `locale` values (e.g. `de-DE`, `en-US`, or language-only `en`). POSIX forms (e.g. `de_DE`) are deprecated but still accepted. Copy is resolved by language; markets without a translation fall back to English.
15
15
  - Use the `abbreviation` variant for compact contexts where space is limited.
16
16
  - Use the `generated` or `modified` variant when a full label improves clarity.
17
17
 
@@ -30,7 +30,7 @@ For the `abbreviation` variant, the component uses an `<abbr>` element so the fu
30
30
 
31
31
  | Property | Type | Default | Description |
32
32
  | --- | --- | --- | --- |
33
- | `locale` | `'bg_BG'` `'bs_BA'` `'cs_CZ'` `'da_DK'` `'de_DE'` `'el_GR'` `'en_CY'` `'en_GB'` `'en_US'` `'es_ES'` `'et_EE'` `'fi_FI'` `'fr_FR'` `'he_IL'` `'hr_HR'` `'hu_HU'` `'is_IS'` `'it_IT'` `'lt_LT'` `'lv_LV'` `'me_ME'` `'mk_MK'` `'mt_MT'` `'nb_NO'` `'nl_NL'` `'pl_PL'` `'pt_PT'` `'ro_RO'` `'ru_RU'` `'sk_SK'` `'sl_SI'` `'sr_RS'` `'sv_SE'` `'tr_TR'` `'uk_UA'` | `'en_US'` | Locale for the AI text (ISO format, e.g. "de_DE"). |
33
+ | `locale` | `'ar-BH'` `'ar-KW'` `'ar-QA'` `'ar-SA'` `'az-AZ'` `'bg-BG'` `'bs-BA'` `'cs-CZ'` `'cs-SK'` `'da-DK'` `'de-AT'` `'de-CH'` `'de-DE'` `'de-LI'` `'de-LU'` `'el-GR'` `'en'` `'en-AE'` `'en-AE-x-abu-dhabi'` `'en-AE-x-abudhabi'` `'en-AE-x-dubai'` `'en-AL'` `'en-AU'` `'en-BA'` `'en-BG'` `'en-BH'` `'en-BN'` `'en-CA'` `'en-CH'` `'en-CN'` `'en-CW'` `'en-CY'` `'en-CZ'` `'en-DK'` `'en-EE'` `'en-EG'` `'en-FI'` `'en-GB'` `'en-GE'` `'en-GH'` `'en-GI'` `'en-GR'` `'en-HK'` `'en-HR'` `'en-HT'` `'en-ID'` `'en-IE'` `'en-IL'` `'en-IN'` `'en-IS'` `'en-JM'` `'en-JO'` `'en-KH'` `'en-KR'` `'en-KW'` `'en-KZ'` `'en-LB'` `'en-LK'` `'en-LT'` `'en-LV'` `'en-ME'` `'en-MK'` `'en-MN'` `'en-MT'` `'en-MU'` `'en-MY'` `'en-NC'` `'en-NL'` `'en-NO'` `'en-NZ'` `'en-OM'` `'en-PF'` `'en-PH'` `'en-PL'` `'en-PR'` `'en-QA'` `'en-RO'` `'en-RS'` `'en-SA'` `'en-SE'` `'en-SG'` `'en-SI'` `'en-SK'` `'en-TH'` `'en-TR'` `'en-TT'` `'en-TW'` `'en-UA'` `'en-US'` `'en-VE'` `'en-VN'` `'en-XA'` `'en-YE'` `'en-ZA'` `'es-AD'` `'es-AR'` `'es-BO'` `'es-CL'` `'es-CO'` `'es-CR'` `'es-DO'` `'es-EC'` `'es-ES'` `'es-GT'` `'es-HN'` `'es-MX'` `'es-PA'` `'es-PE'` `'es-PR'` `'es-PY'` `'es-SV'` `'es-TT'` `'es-UY'` `'es-VE'` `'et-EE'` `'fi-FI'` `'fr-BE'` `'fr-CA'` `'fr-CH'` `'fr-DZ'` `'fr-FR'` `'fr-GP'` `'fr-LI'` `'fr-LU'` `'fr-MA'` `'fr-MC'` `'fr-MQ'` `'fr-MU'` `'fr-NC'` `'fr-PF'` `'fr-RE'` `'fr-TN'` `'he-IL'` `'hr-HR'` `'hu-HU'` `'hy-AM'` `'is-IS'` `'it-CH'` `'it-IT'` `'ja-JP'` `'ka-GE'` `'ko-KR'` `'lt-LT'` `'lv-LV'` `'me-ME'` `'mk-MK'` `'mt-MT'` `'nb-NO'` `'nl-BE'` `'nl-NL'` `'no-NO'` `'pl-PL'` `'pt-BR'` `'pt-PT'` `'ro-MD'` `'ro-RO'` `'ru-AZ'` `'ru-BY'` `'ru-CY'` `'ru-EE'` `'ru-KZ'` `'ru-LT'` `'ru-LV'` `'ru-RU'` `'ru-UK'` `'ru-UZ'` `'sk-SK'` `'sl-SI'` `'sr-ME'` `'sr-RS'` `'sv-SE'` `'tr-TR'` `'uk-UA'` `'zh-CN'` `'zh-HK'` `'zh-TW'`<br>_deprecated:_ `'ar_BH'` `'ar_KW'` `'ar_QA'` `'ar_SA'` `'az_AZ'` `'bg_BG'` `'bs_BA'` `'cs_CZ'` `'cs_SK'` `'da_DK'` `'de_AT'` `'de_CH'` `'de_DE'` `'de_LI'` `'de_LU'` `'el_GR'` `'en_AE'` `'en_AE_x_abu_dhabi'` `'en_AE_x_abudhabi'` `'en_AE_x_dubai'` `'en_AL'` `'en_AU'` `'en_BA'` `'en_BG'` `'en_BH'` `'en_BN'` `'en_CA'` `'en_CH'` `'en_CN'` `'en_CW'` `'en_CY'` `'en_CZ'` `'en_DK'` `'en_EE'` `'en_EG'` `'en_FI'` `'en_GB'` `'en_GE'` `'en_GH'` `'en_GI'` `'en_GR'` `'en_HK'` `'en_HR'` `'en_HT'` `'en_ID'` `'en_IE'` `'en_IL'` `'en_IN'` `'en_IS'` `'en_JM'` `'en_JO'` `'en_KH'` `'en_KR'` `'en_KW'` `'en_KZ'` `'en_LB'` `'en_LK'` `'en_LT'` `'en_LV'` `'en_ME'` `'en_MK'` `'en_MN'` `'en_MT'` `'en_MU'` `'en_MY'` `'en_NC'` `'en_NL'` `'en_NO'` `'en_NZ'` `'en_OM'` `'en_PF'` `'en_PH'` `'en_PL'` `'en_PR'` `'en_QA'` `'en_RO'` `'en_RS'` `'en_SA'` `'en_SE'` `'en_SG'` `'en_SI'` `'en_SK'` `'en_TH'` `'en_TR'` `'en_TT'` `'en_TW'` `'en_UA'` `'en_US'` `'en_VE'` `'en_VN'` `'en_XA'` `'en_YE'` `'en_ZA'` `'es_AD'` `'es_AR'` `'es_BO'` `'es_CL'` `'es_CO'` `'es_CR'` `'es_DO'` `'es_EC'` `'es_ES'` `'es_GT'` `'es_HN'` `'es_MX'` `'es_PA'` `'es_PE'` `'es_PR'` `'es_PY'` `'es_SV'` `'es_TT'` `'es_UY'` `'es_VE'` `'et_EE'` `'fi_FI'` `'fr_BE'` `'fr_CA'` `'fr_CH'` `'fr_DZ'` `'fr_FR'` `'fr_GP'` `'fr_LI'` `'fr_LU'` `'fr_MA'` `'fr_MC'` `'fr_MQ'` `'fr_MU'` `'fr_NC'` `'fr_PF'` `'fr_RE'` `'fr_TN'` `'he_IL'` `'hr_HR'` `'hu_HU'` `'hy_AM'` `'is_IS'` `'it_CH'` `'it_IT'` `'ja_JP'` `'ka_GE'` `'ko_KR'` `'lt_LT'` `'lv_LV'` `'me_ME'` `'mk_MK'` `'mt_MT'` `'nb_NO'` `'nl_BE'` `'nl_NL'` `'no_NO'` `'pl_PL'` `'pt_BR'` `'pt_PT'` `'ro_MD'` `'ro_RO'` `'ru_AZ'` `'ru_BY'` `'ru_CY'` `'ru_EE'` `'ru_KZ'` `'ru_LT'` `'ru_LV'` `'ru_RU'` `'ru_UK'` `'ru_UZ'` `'sk_SK'` `'sl_SI'` `'sr_ME'` `'sr_RS'` `'sv_SE'` `'tr_TR'` `'uk_UA'` `'zh_CN'` `'zh_HK'` `'zh_TW'` | `'en-US'` | Market locale for the AI text (BCP47, e.g. `en-US`). Language-only `en` is supported for international markets. POSIX forms (e.g. `en_US`) are deprecated but still accepted. Copy is resolved by language; unknown languages fall back to English. |
34
34
  | `variant` | `'abbreviation'` `'generated'` `'modified'` | `'generated'` | Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified"). |
35
35
 
36
36
  ## Examples
package/skills/pds-knowledge-angular/references/components/p-button/p-button.md CHANGED
@@ -99,7 +99,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
99
99
  | `disabled` | `boolean` | `false` | Disables the button, preventing all interaction and blocking events. |
100
100
  | `form` | `string` | `undefined` | Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it. |
101
101
  | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
102
- | `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the button. Use `none` to show no icon. |
102
+ | `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the button. Use `none` to show no icon. |
103
103
  | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
104
104
  | `loading` | `boolean` | `false` | Disables the button and replaces its content with a loading spinner to indicate an ongoing operation. |
105
105
  | `name` | `string` | `undefined` | Sets the name submitted with the form data when this button triggers form submission. |
package/skills/pds-knowledge-angular/references/components/p-button-pure/p-button-pure.md CHANGED
@@ -96,7 +96,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
96
96
  | `disabled` | `boolean` | `false` | Disables the button, preventing all interaction and blocking events. |
97
97
  | `form` | `string` | `undefined` | Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it. |
98
98
  | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
99
- | `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
99
+ | `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
100
100
  | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
101
101
  | `loading` | `boolean` | `false` | Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation. |
102
102
  | `name` | `string` | `undefined` | Sets the name submitted with the form data when this button triggers form submission. |
package/skills/pds-knowledge-angular/references/components/p-button-tile/p-button-tile.md CHANGED
@@ -92,7 +92,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
92
92
  | `description` _(required)_ | `string` | `undefined` | Sets the description text displayed in the tile's content area. |
93
93
  | `disabled` | `boolean` | `false` | Disables the tile, preventing button interaction. |
94
94
  | `gradient` | `boolean` | `false` | Shows a gradient overlay over the media slot to improve text legibility on bright images or videos. |
95
- | `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed in the tile's action button. Use `none` to show no icon. |
95
+ | `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed in the tile's action button. Use `none` to show no icon. |
96
96
  | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set. |
97
97
  | `label` _(required)_ | `string` | `undefined` | Sets the accessible label text of the action button rendered inside the tile. |
98
98
  | `loading` | `boolean` | `false` | Disables the tile and shows a loading spinner to indicate an ongoing operation. |
package/skills/pds-knowledge-angular/references/components/p-carousel/p-carousel.md CHANGED
@@ -59,7 +59,7 @@ Therefore, the `p-carousel`'s content has to be divided into multiple parts or s
59
59
  | `aria-labelledby="IDREF"` | References the accessible name. |
60
60
  | `aria-roledescription="carousel"` | Specifies the role as "carousel". |
61
61
  | `aria-roledescription="slide"` | Specifies the role of the carousel item as "slide". |
62
- | `aria-live="polite"` | Announces current active slide item. |
62
+ | `aria-live="polite"` | Announces page position after control-driven movement (prev/next, pagination, drag), e.g. "2 of 8" via `intl.slideLabel`. Not announced when navigating by focusing slides. |
63
63
 
64
64
  ## Development considerations
65
65
 
package/skills/pds-knowledge-angular/references/components/p-drilldown/p-drilldown.md CHANGED
@@ -92,7 +92,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
92
92
 
93
93
  | Event | Type | Description |
94
94
  | --- | --- | --- |
95
- | `dismiss` | `CustomEvent<void>` | Emitted when the user closes the drilldown via the close button or Escape key. |
95
+ | `dismiss` | `CustomEvent<DrilldownDismissEventDetail>`<br>`{ reason: 'dismiss-button' | 'backdrop' | 'escape' }` | Emitted when the user closes the drilldown via the dismiss button, backdrop click, or Escape key. The event detail identifies which of the three was used. |
96
96
  | `update` | `CustomEvent<DrilldownUpdateEventDetail>`<br>`{ activeIdentifier: string | undefined }` | Emitted when the active navigation level changes, with the new `activeIdentifier` in the event detail. |
97
97
 
98
98
  ### Controlled properties
package/skills/pds-knowledge-angular/references/components/p-flyout/p-flyout.md CHANGED
@@ -95,7 +95,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
95
95
 
96
96
  | Event | Type | Description |
97
97
  | --- | --- | --- |
98
- | `dismiss` | `CustomEvent<void>` | Emitted when the user closes the flyout via the close button, backdrop click, or Escape key. |
98
+ | `dismiss` | `CustomEvent<FlyoutDismissEventDetail>`<br>`{ reason: 'dismiss-button' | 'backdrop' | 'escape' }` | Emitted when the user closes the flyout via the dismiss button, backdrop click, or Escape key. The event detail identifies which of the three was used. |
99
99
  | `motionHiddenEnd` | `CustomEvent<FlyoutMotionHiddenEndEventDetail>`<br>`TransitionEvent` | Emitted after the flyout's close transition completes and the panel is fully hidden. |
100
100
  | `motionVisibleEnd` | `CustomEvent<FlyoutMotionVisibleEndEventDetail>`<br>`TransitionEvent` | Emitted after the flyout's open transition completes and the panel is fully visible. |
101
101
 
package/skills/pds-knowledge-angular/references/components/p-icon/examples/Overview.ts CHANGED
@@ -166,6 +166,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
166
166
 
167
167
  <p-icon name="configurate" [aria]="{'aria-label': 'Configurate icon'}"></p-icon>
168
168
 
169
+ <p-icon name="connect-services" [aria]="{'aria-label': 'Connect Services icon'}"></p-icon>
170
+
169
171
  <p-icon name="copy" [aria]="{'aria-label': 'Copy icon'}"></p-icon>
170
172
 
171
173
  <p-icon name="country-road" [aria]="{'aria-label': 'Country Road icon'}"></p-icon>
@@ -174,6 +176,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
174
176
 
175
177
  <p-icon name="cubic-capacity" [aria]="{'aria-label': 'Cubic Capacity icon'}"></p-icon>
176
178
 
179
+ <p-icon name="customer-support" [aria]="{'aria-label': 'Customer Support icon'}"></p-icon>
180
+
177
181
  <p-icon name="cut" [aria]="{'aria-label': 'Cut icon'}"></p-icon>
178
182
 
179
183
  <p-icon name="delete" [aria]="{'aria-label': 'Delete icon'}"></p-icon>
@@ -492,6 +496,8 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
492
496
 
493
497
  <p-icon name="shopping-cart-filled" [aria]="{'aria-label': 'Shopping Cart Filled icon'}"></p-icon>
494
498
 
499
+ <p-icon name="shopping-cart-off" [aria]="{'aria-label': 'Shopping Cart Off icon'}"></p-icon>
500
+
495
501
  <p-icon name="sidebar" [aria]="{'aria-label': 'Sidebar icon'}"></p-icon>
496
502
 
497
503
  <p-icon name="sidelights" [aria]="{'aria-label': 'Sidelights icon'}"></p-icon>
package/skills/pds-knowledge-angular/references/components/p-icon/p-icon.md CHANGED
@@ -67,7 +67,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
67
67
  | --- | --- | --- | --- |
68
68
  | `aria` | `IconAriaAttribute` | `undefined` | Sets ARIA attributes on the icon — use `aria-label` to make the icon meaningful to screen readers when it conveys information. |
69
69
  | `color` | `'primary'` `'contrast-higher'` `'contrast-high'` `'contrast-medium'` `'contrast-low'` `'contrast-lower'` `'success'` `'warning'` `'error'` `'info'` `'inherit'` | `'primary'` | Sets the fill color of the icon using PDS color tokens. |
70
- | `name` | one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`). |
70
+ | `name` | one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`). |
71
71
  | `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'` `'xx-large'`<br>`BreakpointCustomizable<IconSize>` | `'sm'` | Sets the icon size using the PDS typographic scale. Use `inherit` to derive size from the parent element. Supports responsive breakpoint values. |
72
72
  | `source` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon library. |
73
73
 
package/skills/pds-knowledge-angular/references/components/p-inline-notification/p-inline-notification.md CHANGED
@@ -46,7 +46,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
46
46
 
47
47
  | Property | Type | Default | Description |
48
48
  | --- | --- | --- | --- |
49
- | `actionIcon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed inside the action button using a PDS icon name. |
49
+ | `actionIcon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed inside the action button using a PDS icon name. |
50
50
  | `actionLabel` | `string` | `undefined` | Sets the label text of the optional action button inside the notification. |
51
51
  | `actionLoading` | `boolean` | `false` | Disables the action button and shows a spinner to indicate an ongoing operation. |
52
52
  | `description` | `string` | `''` | Sets the supporting description text shown below the heading. |
package/skills/pds-knowledge-angular/references/components/p-input-number/p-input-number.md CHANGED
@@ -113,15 +113,15 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
113
113
  | `required` | `boolean` | `false` | Marks the field as required — form submission is blocked while this field is empty. |
114
114
  | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`). |
115
115
  | `step` | `number` | `1` | Sets the stepping granularity — the value must be a multiple of this number. Also controls step button increment size. |
116
- | `value` | `string | number | null` | `''` | Sets the current numeric value of the field. |
116
+ | `value` | `string | number | null` | `''` | Sets the current numeric value. Strings and numbers are accepted for programmatic assignment, but user input updates the value as a string to mirror native input behavior. |
117
117
 
118
118
  ### Events
119
119
 
120
120
  | Event | Type | Description |
121
121
  | --- | --- | --- |
122
122
  | `blur` | `CustomEvent<InputNumberBlurEventDetail>`<br>`Event` | Emitted when the number input has lost focus. |
123
- | `change` | `CustomEvent<InputNumberChangeEventDetail>`<br>`Event` | Emitted when the number input loses focus after its value was changed. |
124
- | `input` | `CustomEvent<InputNumberInputEventDetail>`<br>`InputEvent` | Emitted when the value has been changed as a direct result of a user action. |
123
+ | `change` | `CustomEvent<InputNumberChangeEventDetail>`<br>`Event` | Emitted when the number input loses focus after its value was changed. The component value and native event target value are strings after user input. |
124
+ | `input` | `CustomEvent<InputNumberInputEventDetail>`<br>`InputEvent` | Emitted when the value has been changed as a direct result of a user action. The component value and native event target value are strings. |
125
125
 
126
126
  ### Slots
127
127
 
package/skills/pds-knowledge-angular/references/components/p-input-text/p-input-text.md CHANGED
@@ -112,15 +112,15 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
112
112
  | `required` | `boolean` | `false` | Marks the field as required — form submission is blocked while this field is empty. |
113
113
  | `spellCheck` | `boolean` | `undefined` | Controls whether the browser's built-in spell-checking is enabled for this field. |
114
114
  | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`). |
115
- | `value` | `string | number | null` | `''` | Sets the current text value of the input field. |
115
+ | `value` | `string | number | null` | `''` | Sets the current text value. Numbers are accepted for programmatic assignment, but user input updates the value as a string. |
116
116
 
117
117
  ### Events
118
118
 
119
119
  | Event | Type | Description |
120
120
  | --- | --- | --- |
121
121
  | `blur` | `CustomEvent<InputTextBlurEventDetail>`<br>`Event` | Emitted when the input loses focus, regardless of whether the value changed. |
122
- | `change` | `CustomEvent<InputTextChangeEventDetail>`<br>`Event` | Emitted when the input loses focus after its value was changed. |
123
- | `input` | `CustomEvent<InputTextInputEventDetail>`<br>`InputEvent` | Emitted on every value change as the user types. |
122
+ | `change` | `CustomEvent<InputTextChangeEventDetail>`<br>`Event` | Emitted when the input loses focus after its value was changed. The component value and native event target value are strings after user input. |
123
+ | `input` | `CustomEvent<InputTextInputEventDetail>`<br>`InputEvent` | Emitted on every value change as the user types. The component value and native event target value are strings. |
124
124
 
125
125
  ### Slots
126
126
 
package/skills/pds-knowledge-angular/references/components/p-link/p-link.md CHANGED
@@ -84,7 +84,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
84
84
  | `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
85
85
  | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
86
86
  | `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
87
- | `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed next to the link label. Use `none` to show no icon. |
87
+ | `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed next to the link label. Use `none` to show no icon. |
88
88
  | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
89
89
  | `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
90
90
  | `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set. |
package/skills/pds-knowledge-angular/references/components/p-link-pure/p-link-pure.md CHANGED
@@ -89,7 +89,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
89
89
  | `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
90
90
  | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
91
91
  | `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
92
- | `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
92
+ | `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
93
93
  | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
94
94
  | `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
95
95
  | `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<LinkPureSize>` | `'sm'` | Sets the font size of the link label. Supports responsive breakpoint values. |
package/skills/pds-knowledge-angular/references/components/p-modal/p-modal.md CHANGED
@@ -102,7 +102,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
102
102
 
103
103
  | Event | Type | Description |
104
104
  | --- | --- | --- |
105
- | `dismiss` | `CustomEvent<void>` | Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key. |
105
+ | `dismiss` | `CustomEvent<ModalDismissEventDetail>`<br>`{ reason: 'dismiss-button' | 'backdrop' | 'escape' }` | Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key. The event detail identifies which of the three was used. |
106
106
  | `motionHiddenEnd` | `CustomEvent<ModalMotionHiddenEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's close transition completes and the dialog is fully hidden. |
107
107
  | `motionVisibleEnd` | `CustomEvent<ModalMotionVisibleEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's open transition completes and the dialog is fully visible. |
108
108
 
package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/AsyncFilter.ts CHANGED
@@ -31,6 +31,9 @@ import {
31
31
  (change)="$event.stopPropagation()"
32
32
  ></p-input-search>
33
33
 
34
+ <!-- Persistent status announcer for assistive technologies (keep always in the DOM) -->
35
+ <div slot="options-status" class="sr-only" aria-live="polite" aria-atomic="true">{{ filterStatusMessage }}</div>
36
+
34
37
  <!-- Initial skeleton loading -->
35
38
  @if (initialLoading && !error) {
36
39
  @for (_ of [1,2,3,4,5,6,7,8,9]; track $index) {
@@ -45,15 +48,14 @@ import {
45
48
  </p-multi-select-option>
46
49
  }
47
50
 
48
- <!-- No filter results -->
49
- @if (!initialLoading && options.length === 0 && !error) {
51
+ <!-- No filter results (visual only; announcements come from the live region) -->
52
+ @if (!initialLoading && !loading && options.length === 0 && !error) {
50
53
  <div
51
54
  slot="options-status"
52
55
  class="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
53
- role="alert"
56
+ aria-hidden="true"
54
57
  >
55
- <span aria-hidden="true">–</span>
56
- <span class="sr-only">No results found</span>
58
+ –
57
59
  </div>
58
60
  }
59
61
 
@@ -83,6 +85,7 @@ export class ExampleComponent {
83
85
  initialLoading = false;
84
86
  loading = false;
85
87
  error: string | null = null;
88
+ filterStatusMessage = '';
86
89
 
87
90
  private hasLoadedOnce = false;
88
91
  private currentFetchId = 0;
@@ -94,6 +97,7 @@ export class ExampleComponent {
94
97
  const fetchId = ++this.currentFetchId;
95
98
  if (isInitial) this.initialLoading = true;
96
99
  else this.loading = true;
100
+ this.updateFilterStatusMessage();
97
101
 
98
102
  this.cdr.markForCheck();
99
103
 
@@ -122,6 +126,7 @@ export class ExampleComponent {
122
126
  } finally {
123
127
  if (isInitial) this.initialLoading = false;
124
128
  else this.loading = false;
129
+ this.updateFilterStatusMessage();
125
130
 
126
131
  this.cdr.markForCheck();
127
132
  }
@@ -146,4 +151,26 @@ export class ExampleComponent {
146
151
  this.fetchOptions(undefined, true);
147
152
  }
148
153
  }
154
+
155
+ private updateFilterStatusMessage(): void {
156
+ if (this.error) {
157
+ this.filterStatusMessage = '';
158
+ return;
159
+ }
160
+ if (this.initialLoading || this.loading) {
161
+ this.filterStatusMessage = 'Loading options';
162
+ return;
163
+ }
164
+ const term = this.searchValue.trim();
165
+ if (!term) {
166
+ this.filterStatusMessage = '';
167
+ return;
168
+ }
169
+ if (this.options.length === 0) {
170
+ this.filterStatusMessage = 'No results found';
171
+ return;
172
+ }
173
+ this.filterStatusMessage =
174
+ this.options.length === 1 ? '1 result available' : `${this.options.length} results available`;
175
+ }
149
176
  }
package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/Form.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChangeDetectionStrategy, Component } from '@angular/core';
2
- import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
3
- import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
2
+ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
3
+ import { type PMultiSelectProps, PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
4
4
 
5
5
  @Component({
6
6
  selector: 'porsche-design-system-app',
@@ -27,7 +27,7 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
27
27
  })
28
28
  export class ExampleComponent {
29
29
  form = new FormGroup({
30
- myMultiSelect: new FormControl<string[]>([]),
30
+ myMultiSelect: new FormControl<PMultiSelectProps['value']>([]),
31
31
  });
32
32
 
33
33
  submittedValue: any = undefined;
package/skills/pds-knowledge-angular/references/components/p-multi-select/examples/SelectedSlot.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ChangeDetectionStrategy, Component } from '@angular/core';
2
2
  import {
3
3
  type MultiSelectChangeEventDetail,
4
- PMultiSelect,
4
+ type PMultiSelectProps,
5
5
  PorscheDesignSystemModule,
6
6
  } from '@porsche-design-system/components-angular';
7
7
 
@@ -87,7 +87,7 @@ const optionsData: Option[] = [
87
87
  imports: [PorscheDesignSystemModule],
88
88
  })
89
89
  export class ExampleComponent {
90
- value: PMultiSelect['value'] = [];
90
+ value: PMultiSelectProps['value'] = [];
91
91
  options: Option[] = optionsData;
92
92
  selectedOptions: Option[] = [];
93
93
 
package/skills/pds-knowledge-angular/references/components/p-multi-select/p-multi-select.md CHANGED
@@ -4,7 +4,7 @@ The `p-multi-select` component is a versatile custom form element that facilitat
4
4
 
5
5
  Many of the properties closely resemble those found in the [select](../p-select/p-select.md) and other form components (e.g. `label`, `description`, `state`, `message`, `hideLabel`, `disabled`, `required` & `dropdownDirection`). The `p-multi-select` offers a search field by default. When the user types in a search string, the options are reduced by matching the options text.
6
6
 
7
- Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
7
+ Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be a string or number. `null` and `undefined` are not valid option values. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
8
8
 
9
9
  **Hint:** The `p-multi-select` utilizes the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to render its dropdown on the `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container.
10
10
 
@@ -146,7 +146,7 @@ Allowed parents: `p-multi-select`, `p-optgroup`.
146
146
  | Property | Type | Default | Description |
147
147
  | --- | --- | --- | --- |
148
148
  | `disabled` | `boolean` | `false` | Disables the option, preventing it from being selected. |
149
- | `value` _(required)_ | `string | number` | `undefined` | Sets the value submitted with the form data when this option is selected in the parent multi-select. |
149
+ | `value` _(required)_ | `string | number` | `undefined` | Sets the required option value submitted with the form data when selected. Must be a string or number. |
150
150
 
151
151
  #### Slots
152
152
 
package/skills/pds-knowledge-angular/references/components/p-pin-code/examples/Form.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChangeDetectionStrategy, Component } from '@angular/core';
2
2
  import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
3
- import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
3
+ import { PorscheDesignSystemModule, PPinCodeProps } from '@porsche-design-system/components-angular';
4
4
 
5
5
  @Component({
6
6
  selector: 'porsche-design-system-app',
@@ -20,7 +20,7 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
20
20
  })
21
21
  export class ExampleComponent {
22
22
  form = new FormGroup({
23
- myPinCode: new FormControl<string>(''),
23
+ myPinCode: new FormControl<PPinCodeProps['value']>(''),
24
24
  });
25
25
 
26
26
  submittedValue: any = undefined;
package/skills/pds-knowledge-angular/references/components/p-pin-code/p-pin-code.md CHANGED
@@ -81,14 +81,14 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
81
81
  | `required` | `boolean` | `false` | Marks the pin code as required so the form cannot be submitted until all fields are filled. |
82
82
  | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the pin code, which controls its visual appearance and feedback message style (`none`, `success`, `error`). |
83
83
  | `type` | `'number'` `'password'` | `'number'` | Controls whether the individual input fields mask their content as password dots (`password`) or show digits (`number`). |
84
- | `value` | `string` | `''` | Sets the current concatenated value of all pin code fields and allows setting the initial value. |
84
+ | `value` | `string | number | null` | `''` | Sets the current concatenated value. Numbers are accepted for programmatic assignment, but user input updates the value as a string. |
85
85
 
86
86
  ### Events
87
87
 
88
88
  | Event | Type | Description |
89
89
  | --- | --- | --- |
90
90
  | `blur` | `CustomEvent<void>` | Emitted when the pin code component loses focus after the user finishes entering characters. |
91
- | `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail. |
91
+ | `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying `{ value: string; isComplete: boolean }` in the event detail. |
92
92
 
93
93
  ### Controlled properties
94
94
 
package/skills/pds-knowledge-angular/references/components/p-popover/p-popover.md CHANGED
@@ -85,7 +85,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
85
85
 
86
86
  | Event | Type | Description |
87
87
  | --- | --- | --- |
88
- | `dismiss` | `CustomEvent<void>` | Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab). |
88
+ | `dismiss` | `CustomEvent<PopoverDismissEventDetail>`<br>`{ reason: 'outside-click' | 'focus-out' | 'escape' }` | Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab). The event detail identifies which of the three was used. |
89
89
 
90
90
  ### Controlled properties
91
91
 
package/skills/pds-knowledge-angular/references/components/p-radio-group/examples/Form.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChangeDetectionStrategy, Component } from '@angular/core';
2
2
  import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
3
- import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
3
+ import { PorscheDesignSystemModule, type PRadioGroupProps } from '@porsche-design-system/components-angular';
4
4
 
5
5
  @Component({
6
6
  selector: 'porsche-design-system-app',
@@ -27,7 +27,7 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
27
27
  })
28
28
  export class ExampleComponent {
29
29
  form = new FormGroup({
30
- myRadioGroup: new FormControl<string>(''),
30
+ myRadioGroup: new FormControl<PRadioGroupProps['value']>(null),
31
31
  });
32
32
 
33
33
  submittedValue: any = undefined;
package/skills/pds-knowledge-angular/references/components/p-radio-group/p-radio-group.md CHANGED
@@ -6,7 +6,7 @@ The `p-radio-group` component is a versatile custom form element that enables th
6
6
  >
7
7
  > The `blur` event is emitted whenever the focused `p-radio-group-option` changes — not only when the entire `p-radio-group` loses focus. This means that switching between options within the same group will also trigger a `blur` event for the previously focused option.
8
8
 
9
- Options are slotted using the `p-radio-group-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
9
+ Options are slotted using the `p-radio-group-option` component. Each option needs an assigned `string` or `number` value. The `p-radio-group` value matches an option strictly by type and value, so a number does not match the equivalent string. `undefined` and `null` are reserved for the radio group's unselected state and are not valid option values. Initial selection states can only be achieved using the `value` property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled using the `disabled` attribute.
10
10
 
11
11
  A `label` is a caption which informs the user what information a particular form field is asking for. The `p-radio-group` 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 best practice to provide a descriptive label text for screen readers.
12
12
 
@@ -109,7 +109,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
109
109
  | `name` _(required)_ | `string` | `undefined` | Sets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection. |
110
110
  | `required` | `boolean` | `false` | Marks the radio group as required so the form cannot be submitted until one option is selected. |
111
111
  | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the radio group, controlling its visual appearance and feedback message style (`none`, `success`, `error`). |
112
- | `value` | `string` | `''` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. |
112
+ | `value` | `string | number | null` | `undefined` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. Matches an option strictly by type and value, meaning string or number only match an option whose value has the same type and equal value. Use undefined or null for no preselection; these values never match an option because every option requires a string or number value. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end. |
113
113
 
114
114
  ### Events
115
115
 
@@ -143,7 +143,7 @@ Allowed parent: `p-radio-group`.
143
143
  | `disabled` | `boolean` | `false` | Prevents this option from being selected and excludes its value from form submissions while it is disabled. |
144
144
  | `label` | `string` | `undefined` | Sets the visible label text displayed next to the radio button that the user reads to identify the option. |
145
145
  | `loading` _(experimental)_ | `boolean` | `false` | @experimental Disables this option and shows a spinner to indicate that this particular option is in a loading state. |
146
- | `value` | `string` | `undefined` | Sets the value submitted with the form data when this radio option is selected within its parent group. |
146
+ | `value` _(required)_ | `string | number` | `undefined` | Sets the required option value. Must be a string or number and is selected when it strictly matches the parent `p-radio-group` value by type and value. |
147
147
 
148
148
  #### Slots
149
149
 
package/skills/pds-knowledge-angular/references/components/p-segmented-control/examples/Form.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChangeDetectionStrategy, Component } from '@angular/core';
2
2
  import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
3
- import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
3
+ import { PorscheDesignSystemModule, PSegmentedControlProps } from '@porsche-design-system/components-angular';
4
4
 
5
5
  @Component({
6
6
  selector: 'porsche-design-system-app',
@@ -26,7 +26,7 @@ import { PorscheDesignSystemModule } from '@porsche-design-system/components-ang
26
26
  })
27
27
  export class ExampleComponent {
28
28
  form = new FormGroup({
29
- mySegmentedControl: new FormControl<string | number | undefined>({ value: undefined, disabled: false }),
29
+ mySegmentedControl: new FormControl<PSegmentedControlProps['value']>(null),
30
30
  });
31
31
 
32
32
  submittedValue: any = undefined;
package/skills/pds-knowledge-angular/references/components/p-segmented-control/p-segmented-control.md CHANGED
@@ -108,7 +108,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
108
108
  | `noWrap` | `boolean` | `false` | Prevents items from wrapping to new rows and renders them in a single horizontally scrollable row instead. |
109
109
  | `required` | `boolean` | `false` | Marks the segmented control as required so the form cannot be submitted until one option is selected. |
110
110
  | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the segmented control, controlling its visual appearance and feedback message style (`none`, `success`, `error`). |
111
- | `value` | `string | number` | `undefined` | Sets the currently selected item's value and pre-selects the matching option when the component renders. |
111
+ | `value` | `string | number | null` | `undefined` | Sets the currently selected item's value and pre-selects the matching option when the component renders. Matches an item strictly by type and value, meaning string or number only match an item whose value has the same type and equal value. Use undefined or null for no preselection. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed item. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end. |
112
112
 
113
113
  ### Events
114
114
 
@@ -145,7 +145,7 @@ Allowed parent: `p-segmented-control`.
145
145
  | --- | --- | --- | --- |
146
146
  | `aria` | `SegmentedControlItemAriaAttribute` | `undefined` | Sets ARIA attributes on the item's button element to improve accessibility for screen readers. |
147
147
  | `disabled` | `boolean` | `false` | Prevents this item from being selected and visually dims it; the parent's value will not change to this item's value. |
148
- | `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `undefined` | Sets an icon rendered inside the item button using an icon name from the PDS icon library. |
148
+ | `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `undefined` | Sets an icon rendered inside the item button using an icon name from the PDS icon library. |
149
149
  | `iconSource` | `string` | `undefined` | Sets a URL to a custom SVG icon for the item button, overriding the built-in icon set. |
150
150
  | `label` | `string` | `undefined` | Sets a visible text label rendered inside the item button, used when no slotted content is provided. |
151
151
  | `value` _(required)_ | `string | number` | `undefined` | Sets the value emitted by the parent `p-segmented-control` when this item is selected. This property is*required**. |