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

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 (78) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/fesm2022/porsche-design-system-components-angular.mjs +3 -2
  3. package/fesm2022/porsche-design-system-components-angular.mjs.map +1 -1
  4. package/global-styles/cn/index.css +1 -0
  5. package/global-styles/index.css +1 -0
  6. package/global-styles/variables.css +1 -0
  7. package/package.json +4 -2
  8. package/tailwindcss/index.css +73 -14
  9. package/types/porsche-design-system-components-angular.d.ts +8 -2
  10. package/vanilla-extract/cjs/index.cjs +14 -0
  11. package/vanilla-extract/cjs/spacing/spacingStatic2Xs.cjs +7 -0
  12. package/vanilla-extract/cjs/tokens/dist/esm/spacing/static/spacingStatic2Xs.cjs +5 -0
  13. package/vanilla-extract/cjs/typography/proseHeading2XlStyle.cjs +7 -5
  14. package/vanilla-extract/cjs/typography/proseHeading2XsStyle.cjs +14 -0
  15. package/vanilla-extract/cjs/typography/proseHeading3XlStyle.cjs +7 -5
  16. package/vanilla-extract/cjs/typography/proseHeading4XlStyle.cjs +7 -5
  17. package/vanilla-extract/cjs/typography/proseHeading5XlStyle.cjs +7 -5
  18. package/vanilla-extract/cjs/typography/proseHeadingLgStyle.cjs +7 -5
  19. package/vanilla-extract/cjs/typography/proseHeadingMdStyle.cjs +7 -5
  20. package/vanilla-extract/cjs/typography/proseHeadingSmStyle.cjs +7 -5
  21. package/vanilla-extract/cjs/typography/proseHeadingXlStyle.cjs +7 -5
  22. package/vanilla-extract/cjs/typography/proseHeadingXsStyle.cjs +14 -0
  23. package/vanilla-extract/cjs/typography/proseText2XlStyle.cjs +14 -0
  24. package/vanilla-extract/cjs/typography/proseText2XsStyle.cjs +7 -5
  25. package/vanilla-extract/cjs/typography/proseText3XlStyle.cjs +14 -0
  26. package/vanilla-extract/cjs/typography/proseText4XlStyle.cjs +14 -0
  27. package/vanilla-extract/cjs/typography/proseText5XlStyle.cjs +14 -0
  28. package/vanilla-extract/cjs/typography/proseTextLgStyle.cjs +7 -5
  29. package/vanilla-extract/cjs/typography/proseTextMdStyle.cjs +7 -5
  30. package/vanilla-extract/cjs/typography/proseTextSmStyle.cjs +7 -5
  31. package/vanilla-extract/cjs/typography/proseTextXlStyle.cjs +7 -5
  32. package/vanilla-extract/cjs/typography/proseTextXsStyle.cjs +7 -5
  33. package/vanilla-extract/esm/index.mjs +7 -0
  34. package/vanilla-extract/esm/spacing/index.d.ts +1 -0
  35. package/vanilla-extract/esm/spacing/spacingStatic2Xs.d.ts +1 -0
  36. package/vanilla-extract/esm/spacing/spacingStatic2Xs.mjs +5 -0
  37. package/vanilla-extract/esm/tokens/dist/esm/spacing/static/spacingStatic2Xs.mjs +3 -0
  38. package/vanilla-extract/esm/typography/index.d.ts +6 -0
  39. package/vanilla-extract/esm/typography/proseHeading2XlStyle.d.ts +1 -0
  40. package/vanilla-extract/esm/typography/proseHeading2XlStyle.mjs +7 -5
  41. package/vanilla-extract/esm/typography/proseHeading2XsStyle.d.ts +4 -0
  42. package/vanilla-extract/esm/typography/proseHeading2XsStyle.mjs +12 -0
  43. package/vanilla-extract/esm/typography/proseHeading3XlStyle.d.ts +1 -0
  44. package/vanilla-extract/esm/typography/proseHeading3XlStyle.mjs +7 -5
  45. package/vanilla-extract/esm/typography/proseHeading4XlStyle.d.ts +1 -0
  46. package/vanilla-extract/esm/typography/proseHeading4XlStyle.mjs +7 -5
  47. package/vanilla-extract/esm/typography/proseHeading5XlStyle.d.ts +1 -0
  48. package/vanilla-extract/esm/typography/proseHeading5XlStyle.mjs +7 -5
  49. package/vanilla-extract/esm/typography/proseHeadingLgStyle.d.ts +1 -0
  50. package/vanilla-extract/esm/typography/proseHeadingLgStyle.mjs +7 -5
  51. package/vanilla-extract/esm/typography/proseHeadingMdStyle.d.ts +1 -0
  52. package/vanilla-extract/esm/typography/proseHeadingMdStyle.mjs +7 -5
  53. package/vanilla-extract/esm/typography/proseHeadingSmStyle.d.ts +1 -0
  54. package/vanilla-extract/esm/typography/proseHeadingSmStyle.mjs +7 -5
  55. package/vanilla-extract/esm/typography/proseHeadingXlStyle.d.ts +1 -0
  56. package/vanilla-extract/esm/typography/proseHeadingXlStyle.mjs +7 -5
  57. package/vanilla-extract/esm/typography/proseHeadingXsStyle.d.ts +4 -0
  58. package/vanilla-extract/esm/typography/proseHeadingXsStyle.mjs +12 -0
  59. package/vanilla-extract/esm/typography/proseText2XlStyle.d.ts +4 -0
  60. package/vanilla-extract/esm/typography/proseText2XlStyle.mjs +12 -0
  61. package/vanilla-extract/esm/typography/proseText2XsStyle.d.ts +1 -0
  62. package/vanilla-extract/esm/typography/proseText2XsStyle.mjs +7 -5
  63. package/vanilla-extract/esm/typography/proseText3XlStyle.d.ts +4 -0
  64. package/vanilla-extract/esm/typography/proseText3XlStyle.mjs +12 -0
  65. package/vanilla-extract/esm/typography/proseText4XlStyle.d.ts +4 -0
  66. package/vanilla-extract/esm/typography/proseText4XlStyle.mjs +12 -0
  67. package/vanilla-extract/esm/typography/proseText5XlStyle.d.ts +4 -0
  68. package/vanilla-extract/esm/typography/proseText5XlStyle.mjs +12 -0
  69. package/vanilla-extract/esm/typography/proseTextLgStyle.d.ts +1 -0
  70. package/vanilla-extract/esm/typography/proseTextLgStyle.mjs +7 -5
  71. package/vanilla-extract/esm/typography/proseTextMdStyle.d.ts +1 -0
  72. package/vanilla-extract/esm/typography/proseTextMdStyle.mjs +7 -5
  73. package/vanilla-extract/esm/typography/proseTextSmStyle.d.ts +1 -0
  74. package/vanilla-extract/esm/typography/proseTextSmStyle.mjs +7 -5
  75. package/vanilla-extract/esm/typography/proseTextXlStyle.d.ts +1 -0
  76. package/vanilla-extract/esm/typography/proseTextXlStyle.mjs +7 -5
  77. package/vanilla-extract/esm/typography/proseTextXsStyle.d.ts +1 -0
  78. package/vanilla-extract/esm/typography/proseTextXsStyle.mjs +7 -5
package/CHANGELOG.md CHANGED
@@ -14,6 +14,68 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
14
14
 
15
15
  ## [Unreleased]
16
16
 
17
+ ## [4.0.0-rc.1] - 2026-04-07
18
+
19
+ ### Added
20
+
21
+ - `Banner`:
22
+ - Prop `position` with values: `BreakpointCustomizable<'top' | 'bottom'>` (default: `{ base: 'bottom', s: 'top' }`)
23
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
24
+ - CSS Variable `--p-banner-top`: Defines the distance from the top of the viewport. Only takes effect when the
25
+ `position` property is set to `top` (at the respective breakpoint).
26
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
27
+ - CSS Variable `--p-banner-bottom`: Defines the distance from the bottom of the viewport. Only takes effect when the
28
+ `position` property is set to `bottom` (at the respective breakpoint).
29
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
30
+ - CSS Variable `--p-banner-max-w`: Defines the maximum width of the banner.
31
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
32
+ - CSS Variable `--p-banner-inset-x`: Defines the horizontal offset of the banner from the edges of the viewport.
33
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
34
+ - `Tailwind CSS`: `--spacing-static-2xs`
35
+ ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
36
+ - `SCSS`: `$spacing-static-2xs` ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
37
+ - `Tokens`, `Emotion`, `Vanilla Extract`: `spacingStatic2xs`
38
+ ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
39
+
40
+ ### Changed
41
+
42
+ - `Banner`, `Inline Notification`: Improve visual appearance
43
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
44
+ - `Banner`: `max-width` is now `100ch` by default to increase readability. Use CSS Variable `--p-banner-max-w` and
45
+ `--p-banner-inset-x` to set custom `max-width` and horizontal offset.
46
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
47
+ - `SCSS`:
48
+ - All `prose-heading-*` and `prose-text-*` mixins set `color` to the primary token by default, overridable via the CSS
49
+ cascade ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
50
+ - `Emotion`, `Vanilla Extract`:
51
+ - All `proseHeading*` and `proseText*` style objects set `color` to the primary token by default, overridable in your
52
+ own styles ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
53
+
54
+ ### Fixed
55
+
56
+ - `Accordion`: summary overlapping details when custom padding is applied
57
+ ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
58
+ - `Scroller`: mask not rendering on ios when `scrollbar` set to `true`
59
+ ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
60
+ - `Modal`, `Sheet`: visual bug in the corner when scrolled
61
+ ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
62
+ - `Model Signature`: `--p-model-signature-color` not working with gradients
63
+ ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
64
+ - `Tabs Bar`: flickering of active tab in certain cases
65
+ ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
66
+ - Global Styles: missing individual export for `color-scheme.css`
67
+ ([#4260](https://github.com/porsche-design-system/porsche-design-system/pull/4260))
68
+ - `Table`: double focus outline of sort buttons
69
+ ([#4270](https://github.com/porsche-design-system/porsche-design-system/pull/4270))
70
+
71
+ ### Deprecated
72
+
73
+ - `Banner`:
74
+ - CSS Variable `--p-banner-position-top` (use `--p-banner-top` instead)
75
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
76
+ - CSS Variable `--p-banner-position-bottom` (use `--p-banner-bottom` instead)
77
+ ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
78
+
17
79
  ## [4.0.0-rc.0] - 2026-03-27
18
80
 
19
81
  ## [4.0.0-beta.4] - 2026-03-25
@@ -61,6 +123,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
61
123
 
62
124
  ### Added
63
125
 
126
+ - Storefront: documentation for integrating Porsche Design System with AI coding assistants like GitHub Copilot and
127
+ Cursor to generate accessible code that follows WCAG 2.2 AA standards.
128
+ ([#4147](https://github.com/porsche-design-system/porsche-design-system/pull/4147))
64
129
  - `Tokens`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`
65
130
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
66
131
  - `Tailwind CSS`: `--text-3xl`, `--text-4xl`, `--text-5xl`, `.prose-heading-3xl`, `.prose-heading-4xl`,
@@ -59,17 +59,18 @@ class PBanner extends BaseComponent {
59
59
  heading;
60
60
  headingTag;
61
61
  open;
62
+ position;
62
63
  state;
63
64
  dismiss = new EventEmitter();
64
65
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PBanner, deps: null, target: i0.ɵɵFactoryTarget.Component });
65
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PBanner, isStandalone: false, selector: "p-banner,[p-banner]", inputs: { description: "description", dismissButton: "dismissButton", heading: "heading", headingTag: "headingTag", open: "open", state: "state" }, outputs: { dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
66
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PBanner, isStandalone: false, selector: "p-banner,[p-banner]", inputs: { description: "description", dismissButton: "dismissButton", heading: "heading", headingTag: "headingTag", open: "open", position: "position", state: "state" }, outputs: { dismiss: "dismiss" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
66
67
  }
67
68
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PBanner, decorators: [{
68
69
  type: Component,
69
70
  args: [{
70
71
  selector: 'p-banner,[p-banner]',
71
72
  template: '<ng-content />',
72
- inputs: ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'],
73
+ inputs: ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'],
73
74
  outputs: ['dismiss'],
74
75
  standalone: false
75
76
  }]