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

package/CHANGELOG.md

@@ -14,6 +14,299 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-beta.3] - 2026-03-19
+
+### Added
+
+- `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`,
+  `.prose-heading-5xl` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `SCSS`: `$typescale-3xl`, `$typescale-4xl`, `$typescale-5xl`, `@mixin prose-heading-3xl()`,
+  `@mixin prose-heading-4xl()`, `@mixin prose-heading-5xl()`
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Emotion`, `Vanilla Extract`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`, `proseHeading3XlStyle`,
+  `proseHeading4XlStyle`, `proseHeading5XlStyle`
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Spinner`, `Flag`, `Icon`:
+  - Prop `size` supports all typographic scale values:
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234),
+    [#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Spinner`:
+  - Prop `color` with values: `'primary' | 'inherit'`
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+  - CSS Variable `--p-spinner-size`: Defines the width and height of the spinner. Overrides the `size` property when
+    set. ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+  - CSS Variable `--p-spinner-color`: Defines the foreground color. Overrides the `color` property when set.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+  - CSS Variable `--p-spinner-track-color`: Defines the track/background color. Overrides the `color` property when set.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+- `Flag`:
+  - CSS Variable `--p-flag-size`: Defines the width and height of the flag. Overrides the `size` property when set.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+- `Icon`:
+  - CSS Variable `--p-icon-size`: Defines the width and height of the icon. Overrides the `size` property when set.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+  - CSS Variable `--p-icon-color`: Defines the icon color. Overrides the `color` property when set.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+  - Prop `color` supports new value `'contrast-higher'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Button Pure`, `Link Pure`:
+  - Prop `size` supports new typographic scale values:
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - Prop `color` supports new values `'contrast-higher' | 'contrast-high' | 'contrast-medium'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Text`:
+  - Prop `size` supports new typographic scale values:
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - Prop `weight` supports new value `'bold'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - Prop `color` supports new value `'contrast-higher'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Heading`:
+  - Prop `size` supports new typographic scale values:
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - Prop `weight` supports new value `'bold'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - Prop `color` supports new values `'contrast-higher' | 'contrast-high' | 'contrast-medium'`
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+### Changed
+
+- `Spinner`, `Flag`, `Icon`:
+  - The `size` prop is breakpoint customizable.
+    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234),
+    [#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+  - When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against
+    the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based
+    components. ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
+
+    ```diff
+    - <p-spinner size="inherit" style="width: 100px; height: 100px;"></p-spinner>
+    + <p-spinner style="--p-spinner-size: 100px;"></p-spinner>
+
+    // When using size="inherit" with a defined font-size, the spinner size is calculated from the global line-height (ex-unit) based on that font-size."
+    <p-spinner size="inherit" style="font-size: 100px;"></p-spinner>
+    ```
+
+    ```diff
+    - <p-icon size="inherit" style="width: 100px; height: 100px;"></p-icon>
+    + <p-icon style="--p-icon-size: 100px;"></p-icon>
+
+    // When using size="inherit" with a defined font-size, the icon size is calculated from the global line-height (ex-unit) based on that font-size."
+    <p-icon size="inherit" style="font-size: 100px;"></p-icon>
+    ```
+
+    ```diff
+    - <p-flag size="inherit" style="width: 100px; height: 100px;"></p-flag>
+    + <p-flag style="--p-flag-size: 100px;"></p-flag>
+
+    // When using size="inherit" with a defined font-size, the flag size is calculated from the global line-height (ex-unit) based on that font-size."
+    <p-flag size="inherit" style="font-size: 100px;"></p-flag>
+    ```
+
+- `Pagination`: Modernize visual appearance
+  ([#4241](https://github.com/porsche-design-system/porsche-design-system/pull/4241))
+
+### Removed
+
+- `Emotion, Vanilla Extract` (added in `v4.0.0-beta.0`): `proseDisplayLgStyle`, `proseDisplayMdStyle`,
+  `proseDisplaySmStyle` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `SCSS` (added in `v4.0.0-beta.0`): `@mixin prose-display-lg()`, `@mixin prose-display-md()`,
+  `@mixin prose-display-sm()` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+- `Text`: Value `contrast-low` for `color` prop since it's not a11y compliant. Use `contrast-medium` instead.
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+### Deprecated
+
+- `Text`:
+  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'` of prop `size` (use
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-text size="xx-small">…</p-text>
+    + <p-text size="2xs">…</p-text>
+
+    - <p-text size="x-small">…</p-text>
+    + <p-text size="xs">…</p-text>
+
+    - <p-text size="small">…</p-text>
+    + <p-text size="sm">…</p-text>
+
+    - <p-text size="medium">…</p-text>
+    + <p-text size="md">…</p-text>
+
+    - <p-text size="large">…</p-text>
+    + <p-text size="lg">…</p-text>
+
+    - <p-text size="x-large">…</p-text>
+    + <p-text size="xl">…</p-text>
+    ```
+
+  - Values `'regular' | 'semi-bold'` of prop `weight` (use `'normal' | 'semibold'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-text weight="regular">…</p-text>
+    + <p-text weight="normal">…</p-text>
+
+    - <p-text weight="semi-bold">…</p-text>
+    + <p-text weight="semibold">…</p-text>
+    ```
+
+- `Heading`:
+  - Values `'small' | 'medium' | 'large' | 'x-large' | 'xx-large'` of prop `size` (use
+    `'sm' | 'md' | 'lg' | 'xl' | '2xl'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-heading size="small">…</p-heading>
+    + <p-heading size="sm">…</p-heading>
+
+    - <p-heading size="medium">…</p-heading>
+    + <p-heading size="md">…</p-heading>
+
+    - <p-heading size="large">…</p-heading>
+    + <p-heading size="lg">…</p-heading>
+
+    - <p-heading size="x-large">…</p-heading>
+    + <p-heading size="xl">…</p-heading>
+
+    - <p-heading size="xx-large">…</p-heading>
+    + <p-heading size="2xl">…</p-heading>
+    ```
+
+  - Values `'regular' | 'semi-bold'` of prop `weight` (use `'normal' | 'semibold'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+- `Icon`:
+  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'` of prop `size` (use
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-icon size="xx-small">…</p-icon>
+    + <p-icon size="2xs">…</p-icon>
+
+    - <p-icon size="x-small">…</p-icon>
+    + <p-icon size="xs">…</p-icon>
+
+    - <p-icon size="small">…</p-icon>
+    + <p-icon size="sm">…</p-icon>
+
+    - <p-icon size="medium">…</p-icon>
+    + <p-icon size="md">…</p-icon>
+
+    - <p-icon size="large">…</p-icon>
+    + <p-icon size="lg">…</p-icon>
+
+    - <p-icon size="x-large">…</p-icon>
+    + <p-icon size="xl">…</p-icon>
+
+    - <p-icon size="xx-large">…</p-icon>
+    + <p-icon size="2xl">…</p-icon>
+    ```
+
+- `Spinner`:
+  - Values `'small' | 'medium' | 'large'` of prop `size` (use `'sm' | 'md' | 'lg'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-spinner size="small">…</p-spinner>
+    + <p-spinner size="sm">…</p-spinner>
+
+    - <p-spinner size="medium">…</p-spinner>
+    + <p-spinner size="md">…</p-spinner>
+
+    - <p-spinner size="large">…</p-spinner>
+    + <p-spinner size="lg">…</p-spinner>
+    ```
+
+- `Button Pure`, `Link Pure`:
+  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'` of prop `size` (use
+    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` instead)
+    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+    ```diff
+    - <p-button-pure size="xx-small">…</p-button-pure>
+    + <p-button-pure size="2xs">…</p-button-pure>
+
+    - <p-button-pure size="x-small">…</p-button-pure>
+    + <p-button-pure size="xs">…</p-button-pure>
+
+    - <p-button-pure size="small">…</p-button-pure>
+    + <p-button-pure size="sm">…</p-button-pure>
+
+    - <p-button-pure size="medium">…</p-button-pure>
+    + <p-button-pure size="md">…</p-button-pure>
+
+    - <p-button-pure size="large">…</p-button-pure>
+    + <p-button-pure size="lg">…</p-button-pure>
+
+    - <p-button-pure size="x-large">…</p-button-pure>
+    + <p-button-pure size="xl">…</p-button-pure>
+    ```
+
+- `Display` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+  ```diff
+  - <p-display size="large">…</p-display>
+  + <p-heading size="5xl">…</p-heading>
+
+  - <p-display size="medium">…</p-display>
+  + <p-heading size="4xl">…</p-heading>
+
+  - <p-display size="small">…</p-display>
+  + <p-heading size="3xl">…</p-heading>
+  ```
+
+- `Tailwind CSS`: `.prose-display-lg`, `.prose-display-md`, `.prose-display-sm`
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+  ```diff
+  - <h1 class="prose-display-lg">…</h1>
+  + <h1 class="prose-heading-5xl">…</h1>
+
+  - <h1 class="prose-display-md">…</h1>
+  + <h1 class="prose-heading-4xl">…</h1>
+
+  - <h1 class="prose-display-sm">…</h1>
+  + <h1 class="prose-heading-3xl">…</h1>
+  ```
+
+- `SCSS`: `@mixin pds-display-large`, `@mixin pds-display-medium`, `@mixin pds-display-small`
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+  ```diff
+  - @include pds-display-large;
+  + @include prose-heading-5xl;
+
+  - @include pds-display-medium;
+  + @include prose-heading-4xl;
+
+  - @include pds-display-small;
+  + @include prose-heading-3xl;
+  ```
+
+- `Emotion, Vanilla Extract`: `displayLargeStyle`, `displayMediumStyle`, `displaySmallStyle`
+  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
+
+  ```diff
+  - ...displayLargeStyle,
+  + ...proseHeading5XlStyle,
+
+  - ...displayMediumStyle,
+  + ...proseHeading4XlStyle,
+
+  - ...displaySmallStyle,
+  + ...proseHeading3XlStyle,
+  ```
+
 ## [4.0.0-beta.2] - 2026-03-11
 
 ### Added
@@ -525,7 +818,6 @@ and migration steps.
 - `Scroller`:
   - prop `gradientColorScheme` (has no effect anyway)
   - prop `gradientColor` (has no effect anyway)
-  - prop `scrollIndicatorPosition` (use `alignScrollIndicator` instead)
 - `Segmented Control`:
   - prop `backgroundColor` (has no effect anyway)
   - event `segmentedControlChange` (use `change` instead)

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

@@ -105,6 +105,7 @@ class PButtonPure extends BaseComponent {
     active;
     alignLabel;
     aria;
+    color;
     disabled;
     form;
     hideLabel;
@@ -118,14 +119,14 @@ class PButtonPure extends BaseComponent {
     underline;
     value;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PButtonPure, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PButtonPure, isStandalone: false, selector: "p-button-pure,[p-button-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", disabled: "disabled", form: "form", hideLabel: "hideLabel", icon: "icon", iconSource: "iconSource", loading: "loading", name: "name", size: "size", stretch: "stretch", type: "type", underline: "underline", value: "value" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PButtonPure, isStandalone: false, selector: "p-button-pure,[p-button-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", color: "color", disabled: "disabled", form: "form", hideLabel: "hideLabel", icon: "icon", iconSource: "iconSource", loading: "loading", name: "name", size: "size", stretch: "stretch", type: "type", underline: "underline", value: "value" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PButtonPure, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button-pure,[p-button-pure]',
                     template: '<ng-content />',
-                    inputs: ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'type', 'underline', 'value'],
+                    inputs: ['active', 'alignLabel', 'aria', 'color', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'type', 'underline', 'value'],
                     standalone: false
                 }]
         }] });
@@ -297,6 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
+/** @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead. */
 class PDisplay extends BaseComponent {
     align;
     color;
@@ -459,15 +461,16 @@ class PHeading extends BaseComponent {
     ellipsis;
     size;
     tag;
+    weight;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PHeading, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PHeading, isStandalone: false, selector: "p-heading,[p-heading]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PHeading, isStandalone: false, selector: "p-heading,[p-heading]", inputs: { align: "align", color: "color", ellipsis: "ellipsis", size: "size", tag: "tag", weight: "weight" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PHeading, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-heading,[p-heading]',
                     template: '<ng-content />',
-                    inputs: ['align', 'color', 'ellipsis', 'size', 'tag'],
+                    inputs: ['align', 'color', 'ellipsis', 'size', 'tag', 'weight'],
                     standalone: false
                 }]
         }] });
@@ -1383,6 +1386,7 @@ class PLinkPure extends BaseComponent {
     active;
     alignLabel;
     aria;
+    color;
     download;
     hideLabel;
     href;
@@ -1394,14 +1398,14 @@ class PLinkPure extends BaseComponent {
     target;
     underline;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PLinkPure, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PLinkPure, isStandalone: false, selector: "p-link-pure,[p-link-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", size: "size", stretch: "stretch", target: "target", underline: "underline" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PLinkPure, isStandalone: false, selector: "p-link-pure,[p-link-pure]", inputs: { active: "active", alignLabel: "alignLabel", aria: "aria", color: "color", download: "download", hideLabel: "hideLabel", href: "href", icon: "icon", iconSource: "iconSource", rel: "rel", size: "size", stretch: "stretch", target: "target", underline: "underline" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PLinkPure, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-link-pure,[p-link-pure]',
                     template: '<ng-content />',
-                    inputs: ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'],
+                    inputs: ['active', 'alignLabel', 'aria', 'color', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'],
                     standalone: false
                 }]
         }] });
@@ -2026,16 +2030,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class PSpinner extends BaseComponent {
     aria;
+    color;
     size;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PSpinner, isStandalone: false, selector: "p-spinner,[p-spinner]", inputs: { aria: "aria", size: "size" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PSpinner, isStandalone: false, selector: "p-spinner,[p-spinner]", inputs: { aria: "aria", color: "color", size: "size" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-spinner,[p-spinner]',
                     template: '<ng-content />',
-                    inputs: ['aria', 'size'],
+                    inputs: ['aria', 'color', 'size'],
                     standalone: false
                 }]
         }] });