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

package/CHANGELOG.md

@@ -14,6 +14,74 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-beta.2] - 2026-03-11
+
+### Added
+
+- `Scroller`:
+  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - Prop `sticky`: Makes the indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - CSS Variable `--p-scroller-indicator-top`: Defines the distance from the top of the viewport at which the indicator
+    sticks when scrolling down and `sticky` is enabled.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - CSS Variable `--p-scroller-indicator-bottom`: Defines the distance from the bottom of the viewport at which the
+    indicator sticks when scrolling up and `sticky` is enabled.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - CSS Variable `--p-scroller-gap`: Defines the gap between slotted nodes.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs Bar`:
+  - Prop `background`: Defines the background color. Use `frosted` only on images, videos or gradients.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs`:
+  - Prop `background`: Defines the background color. Use `frosted` only on images, videos or gradients.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Table`:
+  - Prop `sticky`: Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll
+    direction. ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - CSS Variable `--p-table-scroll-indicator-top`: Defines the distance from the top of the viewport at which the scroll
+    indicator sticks when scrolling down and `sticky` is enabled.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - CSS Variable `--p-table-scroll-indicator-bottom`: Defines the distance from the bottom of the viewport at which the
+    scroll indicator sticks when scrolling up and `sticky` is enabled.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+
+### Changed
+
+- `Scroller`:
+  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs Bar`:
+  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs`:
+  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Table`:
+  - Use modernized scroller internally
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Stepper Horizontal`:
+  - Use modernized scroller internally
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+
+### Deprecated
+
+- `Scroller`:
+  - Prop `alignScrollIndicator`: Will be removed with next major release, has no effect anymore.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+  - Prop `scrollToPosition`: Will be removed with next major release, use native `scrollIntoView()` on the slotted
+    element itself, e.g.
+    `el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', container: 'nearest' })`.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs Bar`:
+  - Prop `weight`: Will be removed with next major release, has no effect anymore.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+- `Tabs`:
+  - Prop `weight`: Will be removed with next major release, has no effect anymore.
+    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
+
 ## [4.0.0-beta.1] - 2026-03-02
 
 ### Added
@@ -525,6 +593,21 @@ and migration steps.
 - `Multi Select`: trim whitespace of selected options text
   ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
 
+## [3.33.0] - 2026-03-09
+
+## [3.33.0-rc.0] - 2026-03-04
+
+### Added
+
+- `Tag`: new `variant` property to define background colors which complies now with PDS `v4`
+  ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))
+- `Checkbox`: add warning for Firefox form restore bug
+
+### Changed
+
+- `Tag`: deprecated `color` property, use `variant` property instead to define background colors which complies now with
+  PDS `v4` ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))
+
 ## [3.32.1] - 2026-02-24
 
 ## [3.32.1-rc.0] - 2026-02-20
@@ -601,11 +684,6 @@ and migration steps.
 - `Multi Select`: trim whitespace of selected options text
   ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
 
-### Changed
-
-- `Link Tile`, `Button Tile`: appearance in compact mode
-- `Canvas`: appearance on mobile view
-
 ## [3.31.0] - 2025-11-13
 
 ## [3.31.0-rc.0] - 2025-11-11
@@ -2021,7 +2099,7 @@ and migration steps.
 
 ```diff
 - <p-carousel align-header="left"></p-carousel>
-+ <p-carousel align-header="start"></p-carousel>
++ <p-carousel-pure align-header="start"></p-carousel>
 ```
 
 ### Fixed

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

@@ -1804,19 +1804,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }] });
 
 class PScroller extends BaseComponent {
+    /** @deprecated */
     alignScrollIndicator;
     aria;
+    compact;
+    /** @deprecated */
     scrollToPosition;
     scrollbar;
+    sticky;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PScroller, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PScroller, isStandalone: false, selector: "p-scroller,[p-scroller]", inputs: { alignScrollIndicator: "alignScrollIndicator", aria: "aria", scrollToPosition: "scrollToPosition", scrollbar: "scrollbar" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PScroller, isStandalone: false, selector: "p-scroller,[p-scroller]", inputs: { alignScrollIndicator: "alignScrollIndicator", aria: "aria", compact: "compact", scrollToPosition: "scrollToPosition", scrollbar: "scrollbar", sticky: "sticky" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PScroller, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-scroller,[p-scroller]',
                     template: '<ng-content />',
-                    inputs: ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'],
+                    inputs: ['alignScrollIndicator', 'aria', 'compact', 'scrollToPosition', 'scrollbar', 'sticky'],
                     standalone: false
                 }]
         }] });
@@ -2096,16 +2100,17 @@ class PTable extends BaseComponent {
     caption;
     compact;
     layout;
+    sticky;
     update = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTable, isStandalone: false, selector: "p-table,[p-table]", inputs: { caption: "caption", compact: "compact", layout: "layout" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTable, isStandalone: false, selector: "p-table,[p-table]", inputs: { caption: "caption", compact: "compact", layout: "layout", sticky: "sticky" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTable, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table,[p-table]',
                     template: '<ng-content />',
-                    inputs: ['caption', 'compact', 'layout'],
+                    inputs: ['caption', 'compact', 'layout', 'sticky'],
                     outputs: ['update'],
                     standalone: false
                 }]
@@ -2197,18 +2202,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class PTabs extends BaseComponent {
     activeTabIndex;
+    background;
+    compact;
     size;
+    /** @deprecated */
     weight;
     update = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTabs, isStandalone: false, selector: "p-tabs,[p-tabs]", inputs: { activeTabIndex: "activeTabIndex", size: "size", weight: "weight" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTabs, isStandalone: false, selector: "p-tabs,[p-tabs]", inputs: { activeTabIndex: "activeTabIndex", background: "background", compact: "compact", size: "size", weight: "weight" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs,[p-tabs]',
                     template: '<ng-content />',
-                    inputs: ['activeTabIndex', 'size', 'weight'],
+                    inputs: ['activeTabIndex', 'background', 'compact', 'size', 'weight'],
                     outputs: ['update'],
                     standalone: false
                 }]
@@ -2216,18 +2224,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class PTabsBar extends BaseComponent {
     activeTabIndex;
+    background;
+    compact;
     size;
+    /** @deprecated */
     weight;
     update = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTabsBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTabsBar, isStandalone: false, selector: "p-tabs-bar,[p-tabs-bar]", inputs: { activeTabIndex: "activeTabIndex", size: "size", weight: "weight" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PTabsBar, isStandalone: false, selector: "p-tabs-bar,[p-tabs-bar]", inputs: { activeTabIndex: "activeTabIndex", background: "background", compact: "compact", size: "size", weight: "weight" }, outputs: { update: "update" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PTabsBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tabs-bar,[p-tabs-bar]',
                     template: '<ng-content />',
-                    inputs: ['activeTabIndex', 'size', 'weight'],
+                    inputs: ['activeTabIndex', 'background', 'compact', 'size', 'weight'],
                     outputs: ['update'],
                     standalone: false
                 }]