@porsche-design-system/components-vue 4.0.0-beta.1 → 4.0.0-beta.3

package/CHANGELOG.md

@@ -14,6 +14,367 @@ 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
+
+- `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
@@ -457,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)
@@ -525,6 +885,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 +976,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 +2391,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/cjs/lib/components/ButtonPureWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"end"},aria:{},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},icon:{default:"arrow-right"},iconSource:{},loading:{type:Boolean,default:!1},name:{},size:{default:"small"},stretch:{type:[Boolean,Object],default:!1},type:{default:"submit"},underline:{type:Boolean,default:!1},value:{}},setup(a){const l=n.usePrefix("p-button-pure"),r=a,t=e.ref(),o=()=>n.syncProperties(t,r);return e.onMounted(o),e.onUpdated(o),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"end"},aria:{},color:{default:"primary"},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},icon:{default:"arrow-right"},iconSource:{},loading:{type:Boolean,default:!1},name:{},size:{default:"sm"},stretch:{type:[Boolean,Object],default:!1},type:{default:"submit"},underline:{type:Boolean,default:!1},value:{}},setup(a){const l=n.usePrefix("p-button-pure"),r=a,t=e.ref(),o=()=>n.syncProperties(t,r);return e.onMounted(o),e.onUpdated(o),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/FlagWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"FlagWrapper",props:{aria:{},name:{default:"de"},size:{default:"small"}},setup(r){const s=t.usePrefix("p-flag"),p=r,n=e.ref(),o=()=>t.syncProperties(n,p);return e.onMounted(o),e.onUpdated(o),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=c;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"FlagWrapper",props:{aria:{},name:{default:"de"},size:{default:"sm"}},setup(r){const s=t.usePrefix("p-flag"),p=r,n=e.ref(),o=()=>t.syncProperties(n,p);return e.onMounted(o),e.onUpdated(o),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=c;

package/cjs/lib/components/HeadingWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadingWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"xx-large"},tag:{}},setup(r){const s=o.usePrefix("p-heading"),a=r,t=e.ref(),n=()=>o.syncProperties(t,a);return e.onMounted(n),e.onUpdated(n),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadingWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"2xl"},tag:{},weight:{default:"normal"}},setup(r){const s=o.usePrefix("p-heading"),a=r,t=e.ref(),n=()=>o.syncProperties(t,a);return e.onMounted(n),e.onUpdated(n),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/IconWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),r=require("../../utils.cjs"),p=e.defineComponent({__name:"IconWrapper",props:{aria:{},color:{default:"primary"},name:{default:"arrow-right"},size:{default:"small"},source:{}},setup(t){const s=r.usePrefix("p-icon"),c=t,o=e.ref(),n=()=>r.syncProperties(o,c);return e.onMounted(n),e.onUpdated(n),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},null,512))}});module.exports=p;
+"use strict";const e=require("vue"),r=require("../../utils.cjs"),p=e.defineComponent({__name:"IconWrapper",props:{aria:{},color:{default:"primary"},name:{default:"arrow-right"},size:{default:"sm"},source:{}},setup(t){const s=r.usePrefix("p-icon"),c=t,o=e.ref(),n=()=>r.syncProperties(o,c);return e.onMounted(n),e.onUpdated(n),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},null,512))}});module.exports=p;

package/cjs/lib/components/LinkPureWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),f=e.defineComponent({__name:"LinkPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"end"},aria:{},download:{},hideLabel:{type:[Boolean,Object],default:!1},href:{},icon:{default:"arrow-right"},iconSource:{},rel:{},size:{default:"small"},stretch:{type:[Boolean,Object],default:!1},target:{default:"_self"},underline:{type:Boolean,default:!1}},setup(r){const a=n.usePrefix("p-link-pure"),l=r,t=e.ref(),o=()=>n.syncProperties(t,l);return e.onMounted(o),e.onUpdated(o),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=f;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),f=e.defineComponent({__name:"LinkPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"end"},aria:{},color:{default:"primary"},download:{},hideLabel:{type:[Boolean,Object],default:!1},href:{},icon:{default:"arrow-right"},iconSource:{},rel:{},size:{default:"sm"},stretch:{type:[Boolean,Object],default:!1},target:{default:"_self"},underline:{type:Boolean,default:!1}},setup(r){const a=n.usePrefix("p-link-pure"),l=r,t=e.ref(),o=()=>n.syncProperties(t,l);return e.onMounted(o),e.onUpdated(o),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=f;

package/cjs/lib/components/ScrollerWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),p=e.defineComponent({__name:"ScrollerWrapper",props:{alignScrollIndicator:{default:"center"},aria:{},scrollToPosition:{},scrollbar:{type:Boolean,default:!1}},setup(t){const s=n.usePrefix("p-scroller"),c=t,o=e.ref(),r=()=>n.syncProperties(o,c);return e.onMounted(r),e.onUpdated(r),(l,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),a=e.defineComponent({__name:"ScrollerWrapper",props:{alignScrollIndicator:{default:"center"},aria:{},compact:{type:Boolean},scrollToPosition:{},scrollbar:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1}},setup(r){const s=n.usePrefix("p-scroller"),c=r,o=e.ref(),t=()=>n.syncProperties(o,c);return e.onMounted(t),e.onUpdated(t),(l,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=a;

package/cjs/lib/components/SpinnerWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),r=require("../../utils.cjs"),c=e.defineComponent({__name:"SpinnerWrapper",props:{aria:{},size:{default:"small"}},setup(s){const t=r.usePrefix("p-spinner"),p=s,n=e.ref(),o=()=>r.syncProperties(n,p);return e.onMounted(o),e.onUpdated(o),(i,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(t)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=c;
+"use strict";const e=require("vue"),r=require("../../utils.cjs"),c=e.defineComponent({__name:"SpinnerWrapper",props:{aria:{},color:{default:"primary"},size:{default:"sm"}},setup(s){const t=r.usePrefix("p-spinner"),p=s,n=e.ref(),o=()=>r.syncProperties(n,p);return e.onMounted(o),e.onUpdated(o),(i,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(t)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=c;

package/cjs/lib/components/TableWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"TableWrapper",props:{caption:{},compact:{type:Boolean,default:!1},layout:{default:"auto"}},emits:["update"],setup(s,{emit:r}){const p=o.usePrefix("p-table"),a=s,t=e.ref(),c=r,n=()=>o.syncProperties(t,a);return e.onMounted(()=>{n(),o.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(n),(u,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"TableWrapper",props:{caption:{},compact:{type:Boolean,default:!1},layout:{default:"auto"},sticky:{type:Boolean,default:!1}},emits:["update"],setup(s,{emit:r}){const a=o.usePrefix("p-table"),p=s,t=e.ref(),c=r,n=()=>o.syncProperties(t,p);return e.onMounted(()=>{n(),o.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(n),(u,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/TabsBarWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),i=e.defineComponent({__name:"TabsBarWrapper",props:{activeTabIndex:{},size:{default:"small"},weight:{default:"regular"}},emits:["update"],setup(s,{emit:r}){const a=n.usePrefix("p-tabs-bar"),p=s,t=e.ref(),c=r,o=()=>n.syncProperties(t,p);return e.onMounted(()=>{o(),n.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(o),(u,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=i;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"TabsBarWrapper",props:{activeTabIndex:{},background:{default:"none"},compact:{type:Boolean},size:{default:"small"},weight:{default:"regular"}},emits:["update"],setup(r,{emit:s}){const a=n.usePrefix("p-tabs-bar"),p=r,t=e.ref(),c=s,o=()=>n.syncProperties(t,p);return e.onMounted(()=>{o(),n.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(o),(u,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=d;

package/cjs/lib/components/TabsWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"TabsWrapper",props:{activeTabIndex:{default:0},size:{default:"small"},weight:{default:"regular"}},emits:["update"],setup(s,{emit:r}){const a=n.usePrefix("p-tabs"),p=s,t=e.ref(),c=r,o=()=>n.syncProperties(t,p);return e.onMounted(()=>{o(),n.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(o),(u,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=d;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"TabsWrapper",props:{activeTabIndex:{default:0},background:{default:"none"},compact:{type:Boolean},size:{default:"small"},weight:{default:"regular"}},emits:["update"],setup(s,{emit:r}){const a=n.usePrefix("p-tabs"),p=s,t=e.ref(),c=r,o=()=>n.syncProperties(t,p);return e.onMounted(()=>{o(),n.addEventListenerToElementRef(t,"update",c)}),e.onUpdated(o),(u,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},512))}});module.exports=d;

package/cjs/lib/components/TextWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),l=e.defineComponent({__name:"TextWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"small"},tag:{default:"p"},weight:{default:"regular"}},setup(r){const s=n.usePrefix("p-text"),a=r,t=e.ref(),o=()=>n.syncProperties(t,a);return e.onMounted(o),e.onUpdated(o),(p,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),l=e.defineComponent({__name:"TextWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"sm"},tag:{default:"p"},weight:{default:"normal"}},setup(r){const s=n.usePrefix("p-text"),p=r,t=e.ref(),o=()=>n.syncProperties(t,p);return e.onMounted(o),e.onUpdated(o),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=l;

package/esm/lib/components/AccordionWrapper.vue.d.ts

@@ -13,11 +13,11 @@ type PAccordionProps = {
      */
     compact?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -25,7 +25,7 @@ type PAccordionProps = {
      */
     open?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**

package/esm/lib/components/ButtonPureWrapper.vue.d.ts

@@ -1,7 +1,7 @@
-import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 type PButtonPureProps = {
     /**
-     * Display button in active state.
+     * Displays the button in its active state.
      */
     active?: boolean;
     /**
@@ -9,9 +9,13 @@ type PButtonPureProps = {
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
+    /**
+     * The color.
+     */
+    color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -21,7 +25,7 @@ type PButtonPureProps = {
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -74,6 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<PButtonPureProps, {}, {}
     loading: boolean;
     active: boolean;
     alignLabel: BreakpointCustomizable<ButtonPureAlignLabel>;
+    color: ButtonPureColor;
     stretch: BreakpointCustomizable<boolean>;
     underline: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/esm/lib/components/ButtonPureWrapper.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as r, ref as f, onMounted as s, onUpdated as p, createBlock as u, openBlock as d, resolveDynamicComponent as c, unref as i, withCtx as m, renderSlot as y } from "vue";
+import { defineComponent as r, ref as f, onMounted as p, onUpdated as s, createBlock as u, openBlock as d, resolveDynamicComponent as c, unref as i, withCtx as m, renderSlot as y } from "vue";
 import { usePrefix as B, syncProperties as b } from "../../utils.mjs";
 const g = /* @__PURE__ */ r({
   __name: "ButtonPureWrapper",
@@ -6,6 +6,7 @@ const g = /* @__PURE__ */ r({
     active: { type: Boolean, default: !1 },
     alignLabel: { default: "end" },
     aria: {},
+    color: { default: "primary" },
     disabled: { type: Boolean, default: !1 },
     form: {},
     hideLabel: { type: [Boolean, Object], default: !1 },
@@ -13,7 +14,7 @@ const g = /* @__PURE__ */ r({
     iconSource: {},
     loading: { type: Boolean, default: !1 },
     name: {},
-    size: { default: "small" },
+    size: { default: "sm" },
     stretch: { type: [Boolean, Object], default: !1 },
     type: { default: "submit" },
     underline: { type: Boolean, default: !1 },
@@ -21,7 +22,7 @@ const g = /* @__PURE__ */ r({
   },
   setup(o) {
     const a = B("p-button-pure"), n = o, e = f(), t = () => b(e, n);
-    return s(t), p(t), (l, _) => (d(), u(c(i(a)), {
+    return p(t), s(t), (l, _) => (d(), u(c(i(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

package/esm/lib/components/ButtonTileWrapper.vue.d.ts

@@ -5,7 +5,7 @@ type PButtonTileProps = {
      */
     align?: ButtonTileAlign;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**

package/esm/lib/components/ButtonWrapper.vue.d.ts

@@ -1,11 +1,11 @@
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, ButtonType, ButtonVariant } from '../types';
 type PButtonProps = {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
-     * Displays as compact version.
+     * Displays the button in compact mode.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -17,7 +17,7 @@ type PButtonProps = {
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**