@porsche-design-system/components-vue 3.17.0 → 3.18.0

package/CHANGELOG.md

@@ -14,6 +14,44 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.18.0] - 2024-08-21
+
+### [3.18.0-rc.0] - 2024-08-21
+
+#### Added
+
+- `Button Tile`, `Link Tile`, `Link Tile Model Signature`: supports `<video/>` (the tile components automatically check
+  for OS reduced motion setting to decide weather the video autoplay should be prevented or not to improve accessibility
+  & UX) ([#3454](https://github.com/porsche-design-system/porsche-design-system/pull/3454))
+- Extend deprecation console warnings by reference to causing DOM element
+  ([#3439](https://github.com/porsche-design-system/porsche-design-system/pull/3439))
+- `Textarea`: ([#3443](https://github.com/porsche-design-system/porsche-design-system/pull/3443))
+
+#### Changed
+
+- Partials: `getInitialStyles` uses CSS `:defined` to determine the visibility of web components, as well as
+  `[data-ssr]` attribute instead of `.ssr` class for Next JS and Remix
+  ([#3466](https://github.com/porsche-design-system/porsche-design-system/pull/3466))
+- Components: Use `:defined` & `[data-ssr]` to handle visibility of nested elements within Shadow DOM
+  ([#3470](https://github.com/porsche-design-system/porsche-design-system/pull/3470))
+- `Button`, `Link`: spacings adjusted for `compact` mode
+- `Banner`, `Flyout`, `Inline Notification`, `Modal`, `Scroller`, `Toast`: button style
+  ([#3435](https://github.com/porsche-design-system/porsche-design-system/pull/3435))
+- `Select`: added `display: block` to host in order to be consistent with other form components
+  ([#3462](https://github.com/porsche-design-system/porsche-design-system/pull/3462))
+
+#### Fixed
+
+- `Select`, `Multi-Select`: programmatic focus
+  ([#3462](https://github.com/porsche-design-system/porsche-design-system/pull/3462))
+- `Button Tile`, `Link Tile`, `Link Tile Model Signature`: correct image position if custom css `position: absolute` is
+  used on media element ([#3446](https://github.com/porsche-design-system/porsche-design-system/pull/3446))
+- `Button`, `Link`: Safari rendering issue of `backdrop-filter` on border in variant `ghost`
+  ([#3435](https://github.com/porsche-design-system/porsche-design-system/pull/3435))
+- `Select`, `Select Wrapper`, `Multi Select`, `Textfield Wrapper`: `text-overflow` has now ellipsis behaviour and
+  `min-width` is added to prevent text overlapping
+  ([#3465](https://github.com/porsche-design-system/porsche-design-system/pull/3465))
+
 ### [3.17.0] - 2024-08-01
 
 ### [3.17.0-rc.2] - 2024-08-01
@@ -2112,7 +2150,7 @@ to the new values since those ones will be removed with next major version.
 - Validation to ensure crucial partials are used.  
   **Disclaimer:** The Porsche Design System will **not** inject its initial styles anymore. Please use the
   `getInitialStyles()` partial to reduce flash of unstyled content (FOUC) as described here:
-  [getInitialStyles() documentation](https://designsystem.porsche.com/latest/partials/initial-styles)
+  [getInitialStyles() documentation](https://designsystem.porsche.com/v2/partials/initial-styles)
 
 #### Changed
 
@@ -2147,7 +2185,7 @@ to the new values since those ones will be removed with next major version.
 
 **Important:** make sure to apply the new `getDSRPonyfill()` partial right before your closing `</body>` tag. More
 information can be found here:
-[getDSRPonyfill() documentation](https://designsystem.porsche.com/latest/partials/dsr-ponyfill)
+[getDSRPonyfill() documentation](https://designsystem.porsche.com/v2/partials/dsr-ponyfill)
 
 ```diff
 - import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react';
@@ -2884,31 +2922,31 @@ guidelines.
 
 ## General changes / improvements:
 
-#### All components, icons, fonts, styles and marque of the Porsche Design System are loaded versioned and chunked from a central CDN
+### All components, icons, fonts, styles and marque of the Porsche Design System are loaded versioned and chunked from a central CDN
 
 This way all web based digital Porsche products share and use the cached and versioned assets regardless of the JS
 framework used to improve loading performance across the Porsche group. Only a tiny (1.4kb sized) Porsche Design System
 loader script gets bundled into your application code. Everything else gets loaded versioned, cached and chunked from a
-central CDN ([read more](https://designsystem.porsche.com/latest/performance/cdn)). However, this also means that you
-will need an **Internet connection** to render the components in a browser (possibly relevant for development stage or
-intranet applications).
+central CDN ([read more](https://designsystem.porsche.com/v3/must-know/performance/cdn)). However, this also means that
+you will need an **Internet connection** to render the components in a browser (possibly relevant for development stage
+or intranet applications).
 
-#### Enabling Micro Frontend Architecture
+### Enabling Micro Frontend Architecture
 
 In case of a micro-frontend architecture, multiple instances and versions of the Porsche Design System can be combined
 in a final application by configurable prefixing technique of the Porsche Design System components during runtime.
 Please refer to our framework specific guidelines
-[Vanilla JS](https://designsystem.porsche.com/latest/start-coding/vanilla-js),
-[Angular](https://designsystem.porsche.com/latest/start-coding/angular) and
-[React](https://designsystem.porsche.com/latest/start-coding/react).
+[Vanilla JS](https://designsystem.porsche.com/v2/start-coding/vanilla-js),
+[Angular](https://designsystem.porsche.com/v2/start-coding/angular) and
+[React](https://designsystem.porsche.com/v2/start-coding/react).
 
-#### Prevent Flash of Unstyled Content (FOUC) and Flash of Unstyled Text (FOUT)
+### Prevent Flash of Unstyled Content (FOUC) and Flash of Unstyled Text (FOUT)
 
 To prevent FOUC/FOUT, the Porsche Design System offers various partials as part of the
 `@porsche-design-system/components-{js|angular|react}` package to ensure all necessary Porsche Design System fonts and
 components are fully loaded. If you've used the `@porsche-design-system/partials` package previously, stop using it and
 replace the integration with the partials provided by `@porsche-design-system/components-{js|angular|react}` package.
-Have a look at our [FOUC/FOUT guidelines](https://designsystem.porsche.com/latest/performance/loading-behaviour).
+Have a look at our [FOUC/FOUT guidelines](https://designsystem.porsche.com/v3/must-know/performance/loading-behaviour).
 
 ```diff
 - <%= require('@porsche-design-system/partials').getPorscheDesignSystemCoreStyles() %>
@@ -2921,14 +2959,14 @@ Have a look at our [FOUC/FOUT guidelines](https://designsystem.porsche.com/lates
 + <%= require('@porsche-design-system/components-{js|angular|react}/partials').getFontLinks({ weights: ['regular', 'semi-bold'] }) %>
 ```
 
-#### Added support for China CDN
+### Added support for China CDN
 
 Our CDN is configured to forward requests to Chinese CDN automatically when necessary. So you're good to go without any
 configuration or multiple region specific builds of your application. However, if you are aiming for the maximum
 possible performance in China, you can configure which CDN the Porsche Design System must use. Please follow our
-[CDN guidelines](https://designsystem.porsche.com/latest/performance/cdn) for more information.
+[CDN guidelines](https://designsystem.porsche.com/v3/must-know/performance/cdn) for more information.
 
-#### New/optimized components
+### New/optimized components
 
 - **Tabs**
 - **Tabs Bar**
@@ -2945,43 +2983,43 @@ possible performance in China, you can configure which CDN the Porsche Design Sy
 - Checkbox
 - Radio Button
 
-#### Improved TypeScript support for Angular and React
+### Improved TypeScript support for Angular and React
 
 To ensure the best possible typing support, we have refactored our Angular and React wrappers which integrate the native
 web components of the Porsche Design System.
 
-#### componentsReady() works reliable
+### componentsReady() works reliable
 
 Because the Porsche Design System components get loaded async at the time they are needed, it might be relevant within
 your application or test automation to know when those have been initialized. Therefore, we provide in all three
 `@porsche-design-system/components-{js|angular|react}')` packages a reliable helper function `componentsReady()`.
-[Read more about it](https://designsystem.porsche.com/latest/helpers/components-ready).
+[Read more about it](https://designsystem.porsche.com/v3/developing/components-ready).
 
-#### Removed "blur on focus"
+### Removed "blur on focus"
 
 Now focus styling is only applied when you navigate through keyboard and ignored by mouse interaction for browsers
 supporting `:focus-visible` otherwise it will fallback to `:focus` CSS implementation.
 
-#### Changed focus styling for a better compromise between accessibility and visual appearance
+### Changed focus styling for a better compromise between accessibility and visual appearance
 
 Color and outline of general focus styling has changed to `currentColor` for light/dark theme with an outline of 1px
 width/offset. If you have custom components build with the usage of our `@porsche-design-system/utilities` package then
 update it to the latest version.
 
-#### Improved geometry of Porsche Next font
+### Improved geometry of Porsche Next font
 
 For better alignment and readability we've changed the geometry of the Porsche Next font which results in a visual
 change of font size and spacing.
 
-#### Dropped support for IE11 and EdgeHTML according to Porsche's official browser strategy 2021
+### Dropped support for IE11 and EdgeHTML according to Porsche's official browser strategy 2021
 
 If you still need to support these browsers, you have to stick to `v1.5.x`. We offer a Browser Notification package
 `@porsche-design-system/browser-notification` to alert users that these browsers are no longer supported. It supports a
 blocking layer (to be used with Porsche Design System `v2.x`), or a dismissible banner (to be used with Porsche Design
 System `v1.x`). Please refer to our
-[Browser compatibility guidelines](https://designsystem.porsche.com/latest/help/browser-compatibility).
+[Browser compatibility guidelines](https://designsystem.porsche.com/v3/must-know/browser-compatibility).
 
-#### Changed default type of Button and Button Pure
+### Changed default type of Button and Button Pure
 
 To be in sync with native `<button>` behavior we've changed the default `type` of **Button** and **Button Pure**
 component. Those components will render a button within their Shadow DOM as `<button type="submit">` ( previously
@@ -2992,7 +3030,7 @@ component. Those components will render a button within their Shadow DOM as `<bu
 - `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side
   scripts listen to the element's events, which are triggered when the events occur.
 
-#### Changed support for wrapped links around Link, Link Pure and Link Social component
+### Changed support for wrapped links around Link, Link Pure and Link Social component
 
 Due to the support for setting links (`<a href="#">`) in our **Link**, **Link Pure** and **Link Social** components as
 child, we've removed support for styling the anchor tag (`<a>`) when it surrounds the component. So we recommend
@@ -3009,7 +3047,7 @@ changing the position of the `<a>` tag from wrapping the component to a direct s
 + <p-link-social><a href="#">Some label</a></p-link-social>
 ```
 
-#### Automatic \* asterisk symbol to form field labels
+### Automatic \* asterisk symbol to form field labels
 
 We added an automatic generated _ asterisk symbol to form field labels which have the required attribute. This might
 lead to a doubled _ symbol if you set one by yourself.
@@ -3034,7 +3072,7 @@ lead to a doubled _ symbol if you set one by yourself.
 + <p-select-wrapper label="Some label"><select name="some-name" required><option>A</option></select></p-select-wrapper>
 ```
 
-#### Shadow DOM
+### Shadow DOM
 
 `Flex`, `Flex Item`, `Grid` and `Grid Item` now use Shadow DOM, thus you are not able to overwrite styles defined by
 these components any longer.
@@ -3043,18 +3081,18 @@ these components any longer.
 
 ## Angular
 
-#### Integration of Angular components
+### Integration of Angular components
 
 In the past it was possible to provide a token called `PREVENT_WEB_COMPONENTS_REGISTRATION` which prevented the
 registration of the Porsche Design System components and loading of polyfills. Due to the fact that we no longer provide
 / need poly filling, we have completely removed the token. For advanced usage please
-[read further](https://designsystem.porsche.com/latest/start-coding/angular).
+[read further](https://designsystem.porsche.com/v2/start-coding/angular).
 
 ---
 
 ## React
 
-#### Integration of React components
+### Integration of React components
 
 In the past `@porsche-design-system/components-react` components have initialized the **Porsche Design System Loader**
 automatically as soon as a component was imported. With `v2.x` you have to import the `PorscheDesignSystemProvider` once
@@ -3077,7 +3115,7 @@ in your `index.tsx` which then initializes the **Porsche Design System Loader**,
   );
 ```
 
-For advanced usage please [read further](https://designsystem.porsche.com/latest/start-coding/react).
+For advanced usage please [read further](https://designsystem.porsche.com/v2/start-coding/react).
 
 #### Jsdom Polyfill for React / Jest / jsdom test automation
 
@@ -3085,13 +3123,13 @@ We removed test mocks for React / Jest / jsdom as Shadow DOM is supported since
 Jsdom Polyfill (exclusivly for `@porsche-design-system/components-react` package) fixing missing implementation of jsdom
 which the Porsche Design System relies on. **Note:** If your test includes Porsche Design System components, make sure
 to wrap the component you want to test with a PorscheDesignSystemProvider in order to avoid exceptions. For more
-information please [read further](https://designsystem.porsche.com/latest/start-coding/react).
+information please [read further](https://designsystem.porsche.com/v2/start-coding/react).
 
 ---
 
 ## Vanilla JS
 
-#### Integration of Vanilla JS components
+### Integration of Vanilla JS components
 
 With `v1.x` of the Porsche Design System you've had to copy all needed JS files of
 `@porsche-design-system/components-js` into your target directory and include the ES5 and ESM loader snippet. Now you
@@ -3117,7 +3155,7 @@ only need to copy one `index.js` file and initialize the Porsche Design System l
   </html>
 ```
 
-For advanced usage please [read further](https://designsystem.porsche.com/latest/start-coding/vanilla-js).
+For advanced usage please [read further](https://designsystem.porsche.com/v2/start-coding/vanilla-js).
 
 ---
 
@@ -3165,7 +3203,7 @@ For advanced usage please [read further](https://designsystem.porsche.com/latest
 
 - `Tabs Bar` has a new default `activeTabIndex`, which is `undefined`
 - `Tabs Bar` does not work by itself anymore. The `activeTabIndex` needs to be controlled from the outside
-  ([read more](https://designsystem.porsche.com/latest/components/tabs-bar/examples))
+  ([read more](https://designsystem.porsche.com/v2/components/tabs-bar/examples))
 - Background Color of `Select Wrapper` in `dark` theme to meet accessibility criteria
 
 ### [2.0.0-rc.7] - 2021-03-15

package/cjs/lib/components/TextareaWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"TextareaWrapper",props:{autoComplete:{default:""},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},maxLength:{},message:{default:""},minLength:{},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},resize:{default:"vertical"},rows:{default:7},showCounter:{type:Boolean,default:!0},spellCheck:{type:Boolean},state:{default:"none"},theme:{},value:{default:""},wrap:{default:"soft"}},emits:["blur","change","input"],setup(u,{emit:d}){const f=t.usePrefix("p-textarea"),a=u,n=e.ref(),o=d,l=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...a,theme:a.theme||l.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o),t.addEventListenerToElementRef(n,"input",o)}),e.onUpdated(r),e.watch(l,s=>{t.syncProperties(n,{theme:a.theme||s})}),(s,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=p;

package/cjs/lib/components/TextareaWrapper.vue2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./TextareaWrapper.vue.cjs");module.exports=e;

package/cjs/public-api.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),_=require("./lib/components/BannerWrapper.vue.cjs"),u=require("./lib/components/ButtonWrapper.vue.cjs"),p=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CanvasWrapper.vue.cjs"),n=require("./lib/components/CarouselWrapper.vue.cjs"),c=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),o=require("./lib/components/ContentWrapperWrapper.vue.cjs"),l=require("./lib/components/CrestWrapper.vue.cjs"),v=require("./lib/components/DisplayWrapper.vue.cjs"),g=require("./lib/components/DividerWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapper.vue.cjs"),y=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),W=require("./lib/components/FlexWrapper.vue.cjs"),q=require("./lib/components/FlexItemWrapper.vue.cjs"),d=require("./lib/components/FlyoutWrapper.vue.cjs"),T=require("./lib/components/FlyoutMultilevelWrapper.vue.cjs"),S=require("./lib/components/FlyoutMultilevelItemWrapper.vue.cjs"),m=require("./lib/components/GridWrapper.vue.cjs"),b=require("./lib/components/GridItemWrapper.vue.cjs"),C=require("./lib/components/HeadingWrapper.vue.cjs"),M=require("./lib/components/HeadlineWrapper.vue.cjs"),I=require("./lib/components/IconWrapper.vue.cjs"),k=require("./lib/components/InlineNotificationWrapper.vue.cjs"),x=require("./lib/components/LinkWrapper.vue.cjs"),B=require("./lib/components/LinkPureWrapper.vue.cjs"),F=require("./lib/components/LinkSocialWrapper.vue.cjs"),L=require("./lib/components/LinkTileWrapper.vue.cjs"),H=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),D=require("./lib/components/LinkTileProductWrapper.vue.cjs"),h=require("./lib/components/MarqueWrapper.vue.cjs"),O=require("./lib/components/ModalWrapper.vue.cjs"),R=require("./lib/components/ModelSignatureWrapper.vue.cjs"),w=require("./lib/components/MultiSelectWrapper.vue.cjs"),G=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),f=require("./lib/components/OptgroupWrapper.vue.cjs"),z=require("./lib/components/PaginationWrapper.vue.cjs"),j=require("./lib/components/PinCodeWrapper.vue.cjs"),A=require("./lib/components/PopoverWrapper.vue.cjs"),N=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),J=require("./lib/components/ScrollerWrapper.vue.cjs"),E=require("./lib/components/SegmentedControlWrapper.vue.cjs"),K=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),Q=require("./lib/components/SelectWrapper.vue.cjs"),U=require("./lib/components/SelectOptionWrapper.vue.cjs"),V=require("./lib/components/SelectWrapperWrapper.vue.cjs"),X=require("./lib/components/SpinnerWrapper.vue.cjs"),Y=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),Z=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),$=require("./lib/components/SwitchWrapper.vue.cjs"),ee=require("./lib/components/TableWrapper.vue.cjs"),re=require("./lib/components/TableBodyWrapper.vue.cjs"),te=require("./lib/components/TableCellWrapper.vue.cjs"),_e=require("./lib/components/TableHeadWrapper.vue.cjs"),ue=require("./lib/components/TableHeadCellWrapper.vue.cjs"),pe=require("./lib/components/TableHeadRowWrapper.vue.cjs"),se=require("./lib/components/TableRowWrapper.vue.cjs"),ie=require("./lib/components/TabsWrapper.vue.cjs"),ae=require("./lib/components/TabsBarWrapper.vue.cjs"),ne=require("./lib/components/TabsItemWrapper.vue.cjs"),ce=require("./lib/components/TagWrapper.vue.cjs"),oe=require("./lib/components/TagDismissibleWrapper.vue.cjs"),le=require("./lib/components/TextWrapper.vue.cjs"),ve=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),ge=require("./lib/components/TextListWrapper.vue.cjs"),Pe=require("./lib/components/TextListItemWrapper.vue.cjs"),ye=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),We=require("./lib/components/ToastWrapper.vue.cjs"),qe=require("./lib/components/WordmarkWrapper.vue.cjs"),de=require("./utils.cjs"),Te=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=t;exports.PBanner=_;exports.PButton=u;exports.PButtonGroup=p;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCanvas=a;exports.PCarousel=n;exports.PCheckboxWrapper=c;exports.PContentWrapper=o;exports.PCrest=l;exports.PDisplay=v;exports.PDivider=g;exports.PFieldset=P;exports.PFieldsetWrapper=y;exports.PFlex=W;exports.PFlexItem=q;exports.PFlyout=d;exports.PFlyoutMultilevel=T;exports.PFlyoutMultilevelItem=S;exports.PGrid=m;exports.PGridItem=b;exports.PHeading=C;exports.PHeadline=M;exports.PIcon=I;exports.PInlineNotification=k;exports.PLink=x;exports.PLinkPure=B;exports.PLinkSocial=F;exports.PLinkTile=L;exports.PLinkTileModelSignature=H;exports.PLinkTileProduct=D;exports.PMarque=h;exports.PModal=O;exports.PModelSignature=R;exports.PMultiSelect=w;exports.PMultiSelectOption=G;exports.POptgroup=f;exports.PPagination=z;exports.PPinCode=j;exports.PPopover=A;exports.PRadioButtonWrapper=N;exports.PScroller=J;exports.PSegmentedControl=E;exports.PSegmentedControlItem=K;exports.PSelect=Q;exports.PSelectOption=U;exports.PSelectWrapper=V;exports.PSpinner=X;exports.PStepperHorizontal=Y;exports.PStepperHorizontalItem=Z;exports.PSwitch=$;exports.PTable=ee;exports.PTableBody=re;exports.PTableCell=te;exports.PTableHead=_e;exports.PTableHeadCell=ue;exports.PTableHeadRow=pe;exports.PTableRow=se;exports.PTabs=ie;exports.PTabsBar=ae;exports.PTabsItem=ne;exports.PTag=ce;exports.PTagDismissible=oe;exports.PText=le;exports.PTextFieldWrapper=ve;exports.PTextList=ge;exports.PTextListItem=Pe;exports.PTextareaWrapper=ye;exports.PToast=We;exports.PWordmark=qe;exports.useToastManager=de.useToastManager;exports.PorscheDesignSystemProvider=Te;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),_=require("./lib/components/BannerWrapper.vue.cjs"),u=require("./lib/components/ButtonWrapper.vue.cjs"),p=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CanvasWrapper.vue.cjs"),n=require("./lib/components/CarouselWrapper.vue.cjs"),c=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),o=require("./lib/components/ContentWrapperWrapper.vue.cjs"),l=require("./lib/components/CrestWrapper.vue.cjs"),v=require("./lib/components/DisplayWrapper.vue.cjs"),g=require("./lib/components/DividerWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapper.vue.cjs"),y=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),W=require("./lib/components/FlexWrapper.vue.cjs"),q=require("./lib/components/FlexItemWrapper.vue.cjs"),d=require("./lib/components/FlyoutWrapper.vue.cjs"),T=require("./lib/components/FlyoutMultilevelWrapper.vue.cjs"),S=require("./lib/components/FlyoutMultilevelItemWrapper.vue.cjs"),m=require("./lib/components/GridWrapper.vue.cjs"),b=require("./lib/components/GridItemWrapper.vue.cjs"),C=require("./lib/components/HeadingWrapper.vue.cjs"),M=require("./lib/components/HeadlineWrapper.vue.cjs"),x=require("./lib/components/IconWrapper.vue.cjs"),I=require("./lib/components/InlineNotificationWrapper.vue.cjs"),k=require("./lib/components/LinkWrapper.vue.cjs"),B=require("./lib/components/LinkPureWrapper.vue.cjs"),F=require("./lib/components/LinkSocialWrapper.vue.cjs"),L=require("./lib/components/LinkTileWrapper.vue.cjs"),H=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),D=require("./lib/components/LinkTileProductWrapper.vue.cjs"),h=require("./lib/components/MarqueWrapper.vue.cjs"),O=require("./lib/components/ModalWrapper.vue.cjs"),R=require("./lib/components/ModelSignatureWrapper.vue.cjs"),w=require("./lib/components/MultiSelectWrapper.vue.cjs"),G=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),f=require("./lib/components/OptgroupWrapper.vue.cjs"),z=require("./lib/components/PaginationWrapper.vue.cjs"),j=require("./lib/components/PinCodeWrapper.vue.cjs"),A=require("./lib/components/PopoverWrapper.vue.cjs"),N=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),J=require("./lib/components/ScrollerWrapper.vue.cjs"),E=require("./lib/components/SegmentedControlWrapper.vue.cjs"),K=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),Q=require("./lib/components/SelectWrapper.vue.cjs"),U=require("./lib/components/SelectOptionWrapper.vue.cjs"),V=require("./lib/components/SelectWrapperWrapper.vue.cjs"),X=require("./lib/components/SpinnerWrapper.vue.cjs"),Y=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),Z=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),$=require("./lib/components/SwitchWrapper.vue.cjs"),ee=require("./lib/components/TableWrapper.vue.cjs"),re=require("./lib/components/TableBodyWrapper.vue.cjs"),te=require("./lib/components/TableCellWrapper.vue.cjs"),_e=require("./lib/components/TableHeadWrapper.vue.cjs"),ue=require("./lib/components/TableHeadCellWrapper.vue.cjs"),pe=require("./lib/components/TableHeadRowWrapper.vue.cjs"),se=require("./lib/components/TableRowWrapper.vue.cjs"),ie=require("./lib/components/TabsWrapper.vue.cjs"),ae=require("./lib/components/TabsBarWrapper.vue.cjs"),ne=require("./lib/components/TabsItemWrapper.vue.cjs"),ce=require("./lib/components/TagWrapper.vue.cjs"),oe=require("./lib/components/TagDismissibleWrapper.vue.cjs"),le=require("./lib/components/TextWrapper.vue.cjs"),ve=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),ge=require("./lib/components/TextListWrapper.vue.cjs"),Pe=require("./lib/components/TextListItemWrapper.vue.cjs"),ye=require("./lib/components/TextareaWrapper.vue.cjs"),We=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),qe=require("./lib/components/ToastWrapper.vue.cjs"),de=require("./lib/components/WordmarkWrapper.vue.cjs"),Te=require("./utils.cjs"),Se=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=t;exports.PBanner=_;exports.PButton=u;exports.PButtonGroup=p;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCanvas=a;exports.PCarousel=n;exports.PCheckboxWrapper=c;exports.PContentWrapper=o;exports.PCrest=l;exports.PDisplay=v;exports.PDivider=g;exports.PFieldset=P;exports.PFieldsetWrapper=y;exports.PFlex=W;exports.PFlexItem=q;exports.PFlyout=d;exports.PFlyoutMultilevel=T;exports.PFlyoutMultilevelItem=S;exports.PGrid=m;exports.PGridItem=b;exports.PHeading=C;exports.PHeadline=M;exports.PIcon=x;exports.PInlineNotification=I;exports.PLink=k;exports.PLinkPure=B;exports.PLinkSocial=F;exports.PLinkTile=L;exports.PLinkTileModelSignature=H;exports.PLinkTileProduct=D;exports.PMarque=h;exports.PModal=O;exports.PModelSignature=R;exports.PMultiSelect=w;exports.PMultiSelectOption=G;exports.POptgroup=f;exports.PPagination=z;exports.PPinCode=j;exports.PPopover=A;exports.PRadioButtonWrapper=N;exports.PScroller=J;exports.PSegmentedControl=E;exports.PSegmentedControlItem=K;exports.PSelect=Q;exports.PSelectOption=U;exports.PSelectWrapper=V;exports.PSpinner=X;exports.PStepperHorizontal=Y;exports.PStepperHorizontalItem=Z;exports.PSwitch=$;exports.PTable=ee;exports.PTableBody=re;exports.PTableCell=te;exports.PTableHead=_e;exports.PTableHeadCell=ue;exports.PTableHeadRow=pe;exports.PTableRow=se;exports.PTabs=ie;exports.PTabsBar=ae;exports.PTabsItem=ne;exports.PTag=ce;exports.PTagDismissible=oe;exports.PText=le;exports.PTextFieldWrapper=ve;exports.PTextList=ge;exports.PTextListItem=Pe;exports.PTextarea=ye;exports.PTextareaWrapper=We;exports.PToast=qe;exports.PWordmark=de;exports.useToastManager=Te.useToastManager;exports.PorscheDesignSystemProvider=Se;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;

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

@@ -0,0 +1,162 @@
+import type { TextareaAutoComplete, BreakpointCustomizable, TextareaResize, TextareaState, Theme, TextareaWrap } from '../types';
+type PTextareaProps = {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: TextareaAutoComplete;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the textarea as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the textarea should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max length of the textarea.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the textarea.
+     */
+    minLength?: number;
+    /**
+     * The name of the textarea.
+     */
+    name: string;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the textarea should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the textarea as required.
+     */
+    required?: boolean;
+    /**
+     * Controls whether the textarea is resizable and in which direction.
+     */
+    resize?: TextareaResize;
+    /**
+     * The amount of rows of the textarea.
+     */
+    rows?: number;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
+    /**
+     * Specifies whether the input should have its spelling and grammar checked
+     */
+    spellCheck?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: TextareaState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The textarea value.
+     */
+    value?: string;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: TextareaWrap;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextareaProps>, {
+    autoComplete: string;
+    description: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    placeholder: string;
+    readOnly: boolean;
+    required: boolean;
+    resize: string;
+    rows: number;
+    showCounter: boolean;
+    state: string;
+    value: string;
+    wrap: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (value: Event) => void;
+    change: (value: Event) => void;
+    input: (value: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextareaProps>, {
+    autoComplete: string;
+    description: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    placeholder: string;
+    readOnly: boolean;
+    required: boolean;
+    resize: string;
+    rows: number;
+    showCounter: boolean;
+    state: string;
+    value: string;
+    wrap: string;
+}>>> & {
+    onBlur?: ((value: Event) => any) | undefined;
+    onChange?: ((value: Event) => any) | undefined;
+    onInput?: ((value: InputEvent) => any) | undefined;
+}, {
+    wrap: TextareaWrap;
+    resize: TextareaResize;
+    label: string;
+    description: string;
+    state: TextareaState;
+    required: boolean;
+    disabled: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    value: string;
+    message: string;
+    showCounter: boolean;
+    autoComplete: TextareaAutoComplete;
+    placeholder: string;
+    readOnly: boolean;
+    rows: number;
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,43 @@
+import { defineComponent as d, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as C, createBlock as B, resolveDynamicComponent as _, unref as b } from "vue";
+import { usePrefix as g, themeInjectionKey as x, addEventListenerToElementRef as n, syncProperties as s } from "../../utils.mjs";
+const L = /* @__PURE__ */ d({
+  __name: "TextareaWrapper",
+  props: {
+    autoComplete: { default: "" },
+    description: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    form: {},
+    hideLabel: { default: !1 },
+    label: { default: "" },
+    maxLength: {},
+    message: { default: "" },
+    minLength: {},
+    name: {},
+    placeholder: { default: "" },
+    readOnly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    resize: { default: "vertical" },
+    rows: { default: 7 },
+    showCounter: { type: Boolean, default: !0 },
+    spellCheck: { type: Boolean },
+    state: { default: "none" },
+    theme: {},
+    value: { default: "" },
+    wrap: { default: "soft" }
+  },
+  emits: ["blur", "change", "input"],
+  setup(f, { emit: p }) {
+    const u = g("p-textarea"), t = f, e = m(), a = p, o = c(x), l = () => s(e, { ...t, theme: t.theme || o.value });
+    return i(() => {
+      l(), n(e, "blur", a), n(e, "change", a), n(e, "input", a);
+    }), h(l), y(o, (r) => {
+      s(e, { theme: t.theme || r });
+    }), (r, v) => (C(), B(_(b(u)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  L as default
+};

package/esm/lib/components/TextareaWrapper.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./TextareaWrapper.vue.mjs";
+export {
+  f as default
+};

package/esm/lib/components/index.d.ts

@@ -66,6 +66,7 @@ export { default as PText } from './TextWrapper.vue';
 export { default as PTextFieldWrapper } from './TextFieldWrapperWrapper.vue';
 export { default as PTextList } from './TextListWrapper.vue';
 export { default as PTextListItem } from './TextListItemWrapper.vue';
+export { default as PTextarea } from './TextareaWrapper.vue';
 export { default as PTextareaWrapper } from './TextareaWrapperWrapper.vue';
 export { default as PToast } from './ToastWrapper.vue';
 export { default as PWordmark } from './WordmarkWrapper.vue';

package/esm/lib/types.d.ts

@@ -1363,6 +1363,31 @@ declare const TEXT_LIST_TYPES: readonly [
     "alphabetically"
 ];
 export type TextListType = typeof TEXT_LIST_TYPES[number];
+export type TextareaState = FormState;
+declare const AUTO_COMPLETE: readonly [
+    "off",
+    "on",
+    ""
+];
+export type TextareaAutoComplete = (typeof AUTO_COMPLETE)[number];
+declare const TEXTAREA_WRAPS: readonly [
+    "hard",
+    "soft",
+    "off"
+];
+export type TextareaWrap = (typeof TEXTAREA_WRAPS)[number];
+declare const TEXTAREA_RESIZE: readonly [
+    "none",
+    "both",
+    "horizontal",
+    "vertical",
+    "block",
+    "inline"
+];
+export type TextareaResize = (typeof TEXTAREA_RESIZE)[number];
+export type TextareaChangeEventDetail = Event;
+export type TextareaBlurEventDetail = Event;
+export type TextareaInputEventDetail = InputEvent;
 export type TextareaWrapperState = FormState;
 declare const TOAST_STATES: readonly [
     "info",

package/esm/public-api.mjs

@@ -67,12 +67,13 @@ import { default as Mt } from "./lib/components/TextWrapper.vue.mjs";
 import { default as Bt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
 import { default as Lt } from "./lib/components/TextListWrapper.vue.mjs";
 import { default as Ht } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as Dt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as Rt } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as Gt } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { useToastManager as zt } from "./utils.mjs";
-import { default as At } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as jt, usePorscheDesignSystemPlugin as Et } from "./plugin.mjs";
+import { default as Dt } from "./lib/components/TextareaWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Gt } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as zt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { useToastManager as At } from "./utils.mjs";
+import { default as jt } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as Jt, usePorscheDesignSystemPlugin as Kt } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -142,12 +143,13 @@ export {
   Bt as PTextFieldWrapper,
   Lt as PTextList,
   Ht as PTextListItem,
-  Dt as PTextareaWrapper,
-  Rt as PToast,
-  Gt as PWordmark,
-  At as PorscheDesignSystemProvider,
+  Dt as PTextarea,
+  Rt as PTextareaWrapper,
+  Gt as PToast,
+  zt as PWordmark,
+  jt as PorscheDesignSystemProvider,
   o as componentsReady,
-  jt as createPorscheDesignSystem,
-  Et as usePorscheDesignSystemPlugin,
-  zt as useToastManager
+  Jt as createPorscheDesignSystem,
+  Kt as usePorscheDesignSystemPlugin,
+  At as useToastManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.17.0"
+    "@porsche-design-system/components-js": "3.18.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"