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

package/CHANGELOG.md

@@ -14,6 +14,70 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-rc.1] - 2026-04-07
+
+### Added
+
+- `Banner`:
+  - Prop `position` with values: `BreakpointCustomizable<'top' | 'bottom'>` (default: `{ base: 'bottom', s: 'top' }`)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-top`: Defines the distance from the top of the viewport. Only takes effect when the
+    `position` property is set to `top` (at the respective breakpoint).
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-bottom`: Defines the distance from the bottom of the viewport. Only takes effect when the
+    `position` property is set to `bottom` (at the respective breakpoint).
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-max-w`: Defines the maximum width of the banner.
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-inset-x`: Defines the horizontal offset of the banner from the edges of the viewport.
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `Tailwind CSS`: `--spacing-static-2xs`
+  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `SCSS`: `$spacing-static-2xs` ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `Tokens`, `Emotion`, `Vanilla Extract`: `spacingStatic2xs`
+  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+
+### Changed
+
+- `Banner`, `Inline Notification`: Improve visual appearance
+  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `Banner`: `max-width` is now `100ch` by default to increase readability. Use CSS Variable `--p-banner-max-w` and
+  `--p-banner-inset-x` to set custom `max-width` and horizontal offset.
+  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `SCSS`:
+  - All `prose-heading-*` and `prose-text-*` mixins set `color` to the primary token by default, overridable via the CSS
+    cascade ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `Emotion`, `Vanilla Extract`:
+  - All `proseHeading*` and `proseText*` style objects set `color` to the primary token by default, overridable in your
+    own styles ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+
+### Fixed
+
+- `Accordion`: summary overlapping details when custom padding is applied
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- `Scroller`: mask not rendering on ios when `scrollbar` set to `true`
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- `Modal`, `Sheet`: visual bug in the corner when scrolled
+  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
+- `Model Signature`: `--p-model-signature-color` not working with gradients
+  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
+- `Tabs Bar`: flickering of active tab in certain cases
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- Global Styles: missing individual export for `color-scheme.css`
+  ([#4260](https://github.com/porsche-design-system/porsche-design-system/pull/4260))
+- `Table`: double focus outline of sort buttons
+  ([#4270](https://github.com/porsche-design-system/porsche-design-system/pull/4270))
+
+### Deprecated
+
+- `Banner`:
+  - CSS Variable `--p-banner-position-top` (use `--p-banner-top` instead)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-position-bottom` (use `--p-banner-bottom` instead)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+
+## [4.0.0-rc.0] - 2026-03-27
+
 ## [4.0.0-beta.4] - 2026-03-25
 
 ### Added
@@ -59,6 +123,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### Added
 
+- Storefront: documentation for integrating Porsche Design System with AI coding assistants like GitHub Copilot and
+  Cursor to generate accessible code that follows WCAG 2.2 AA standards.
+  ([#4147](https://github.com/porsche-design-system/porsche-design-system/pull/4147))
 - `Tokens`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`
   ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
 - `Tailwind CSS`: `--text-3xl`, `--text-4xl`, `--text-5xl`, `.prose-heading-3xl`, `.prose-heading-4xl`,
@@ -3518,9 +3585,10 @@ major version.
 
 ##### Content Wrapper:
 
-- Component is deprecated and will be removed with the next major release. Please use **[Porsche Grid](/styles/grid/)**
-  instead, which is based on [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific
-  layout needs for a harmonic appearance across all digital Porsche touch-points.
+- Component is deprecated and will be removed with the next major release. Please use
+  **[Porsche Grid](/tailwindcss/grid/examples/)** instead, which is based on
+  [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific layout needs for a harmonic
+  appearance across all digital Porsche touch-points.
 
 ##### Flex:
 
@@ -3532,7 +3600,7 @@ major version.
 
 - Component is deprecated and will be removed with the next major release. In general, please use native
   [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) in combination with
-  **[Porsche Grid](/styles/grid/)** instead for better performance and more standardized layout technique.
+  **[Porsche Grid](/tailwindcss/grid/examples/)** instead for better performance and more standardized layout technique.
 
 ##### Headline:
 

package/fesm2022/porsche-design-system-components-angular.mjs

@@ -59,17 +59,18 @@ class PBanner extends BaseComponent {
     heading;
     headingTag;
     open;
+    position;
     state;
     dismiss = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PBanner, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PBanner, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-banner,[p-banner]',
                     template: '<ng-content />',
-                    inputs: ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'],
+                    inputs: ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'],
                     outputs: ['dismiss'],
                     standalone: false
                 }]