@porsche-design-system/components-vue 4.2.0-rc.4 → 4.2.0

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

@@ -1,21 +1,21 @@
 import type { TableLayout } from '../types';
 export type PTableProps = {
     /**
-     * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
+     * Sets a screen-reader-only accessible caption that describes the table's content; it is not visible in the browser. Use an element with `slot="caption"` for a visible caption instead.
      */
     caption?: string;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the cell padding and spacing for a more condensed table layout in data-dense UIs.
      * @default false
      */
     compact?: boolean;
     /**
-     * Controls the layout behavior of the table.
+     * Controls the CSS `table-layout` algorithm: `auto` sizes columns to fit their content, `fixed` distributes width equally.
      * @default 'auto'
      */
     layout?: TableLayout;
     /**
-     * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     * @experimental Makes the scroll position indicator sticky at the viewport edge while scrolling, indicating overflow in the table.
      * @default false
      */
     sticky?: boolean;

package/esm/lib/components/TableWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { addEventListenerToElementRef as e, syncProperties as t, usePrefix as n } from "../../utils.mjs";
 import { createBlock as r, defineComponent as i, onMounted as a, onUpdated as o, openBlock as s, ref as c, renderSlot as l, resolveDynamicComponent as u, unref as d, withCtx as f } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TableWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "TableWrapper",
 	props: {
 		caption: {},

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

@@ -1,20 +1,20 @@
 import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = {
     /**
-     * Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
+     * Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
      */
     activeTabIndex?: number | undefined;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBarBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsBarSize>;

package/esm/lib/components/TabsBarWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { addEventListenerToElementRef as e, syncProperties as t, usePrefix as n } from "../../utils.mjs";
 import { createBlock as r, defineComponent as i, onMounted as a, onUpdated as o, openBlock as s, ref as c, renderSlot as l, resolveDynamicComponent as u, unref as d, withCtx as f } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TabsBarWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "TabsBarWrapper",
 	props: {
 		activeTabIndex: {},

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

@@ -1,6 +1,6 @@
 export type PTabsItemProps = {
     /**
-     * Defines the label used in tabs.
+     * Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content.
      */
     label: string;
 };

package/esm/lib/components/TabsItemWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, renderSlot as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TabsItemWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "TabsItemWrapper",
 	props: { label: {} },
 	setup(r) {

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

@@ -1,21 +1,21 @@
 import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = {
     /**
-     * Defines which tab is shown as selected (zero-based numbering).
+     * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsSize>;

package/esm/lib/components/TabsWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { addEventListenerToElementRef as e, syncProperties as t, usePrefix as n } from "../../utils.mjs";
 import { createBlock as r, defineComponent as i, onMounted as a, onUpdated as o, openBlock as s, ref as c, renderSlot as l, resolveDynamicComponent as u, unref as d, withCtx as f } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TabsWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "TabsWrapper",
 	props: {
 		activeTabIndex: { default: 0 },

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

@@ -1,16 +1,16 @@
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
 export type PTagDismissibleProps = {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * Displays the dismissible tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed inside the tag alongside the dismiss button.
      */
     label?: string;
 };

package/esm/lib/components/TagDismissibleWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, renderSlot as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TagDismissibleWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "TagDismissibleWrapper",
 	props: {
 		aria: {},

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

@@ -1,21 +1,21 @@
 import type { TagIcon, TagVariant } from '../types';
 export type PTagProps = {
     /**
-     * Displays the tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * The icon shown.
+     * Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon.
      * @default 'none'
      */
     icon?: TagIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed.
      */
     iconSource?: string;
     /**
-     * Background color variations.
+     * Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`).
      * @default 'secondary'
      */
     variant?: TagVariant;

package/esm/lib/components/TagWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, renderSlot as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TagWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "TagWrapper",
 	props: {
 		compact: {

package/esm/lib/components/TextListItemWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { usePrefix as e } from "../../utils.mjs";
 import { createBlock as t, defineComponent as n, openBlock as r, renderSlot as i, resolveDynamicComponent as a, unref as o, withCtx as s } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TextListItemWrapper.vue?vue&type=script&setup=true&lang.ts
-var c = /* @__PURE__ */ n({
+var c = /*@__PURE__*/ n({
 	__name: "TextListItemWrapper",
 	setup(n) {
 		let c = e("p-text-list-item");

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

@@ -1,7 +1,7 @@
 import type { TextListType } from '../types';
 export type PTextListProps = {
     /**
-     * The list style type.
+     * Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`).
      * @default 'unordered'
      */
     type?: TextListType;

package/esm/lib/components/TextListWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, renderSlot as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TextListWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "TextListWrapper",
 	props: { type: { default: "unordered" } },
 	setup(r) {

package/esm/lib/components/TextWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, renderSlot as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TextWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "TextWrapper",
 	props: {
 		align: { default: "start" },

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

@@ -1,101 +1,101 @@
 import type { BreakpointCustomizable, TextareaResize, TextareaState, TextareaWrap } from '../types';
 export type PTextareaProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
+     * Provides the browser with a hint to enable text autofill suggestions for the textarea (e.g. `autocomplete='on'`).
      */
     autoComplete?: string;
     /**
-     * Displays the textarea in compact mode.
+     * Reduces the textarea's initial height and padding for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Show or hide the character counter.
+     * Shows a live character counter below the textarea indicating how many characters the user has typed relative to `maxLength`.
      * @default false
      */
     counter?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the textarea.
+     * Sets a supplementary description displayed below the label to give users additional guidance about the textarea.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the textarea. The value will not be submitted with the form.
+     * Prevents user interaction with the textarea and excludes its value from form submissions.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the textarea belongs to (useful if the textarea is not a direct descendant of the form).
+     * Associates the textarea with a form element by its ID when the textarea is not a direct descendant of that form.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the textarea to identify its purpose.
      * @default ''
      */
     label?: string;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the textarea.
+     * Sets the maximum number of characters the user is allowed to enter into the textarea.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the textarea when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the textarea's value to be considered valid.
+     * Sets the minimum number of characters required for the textarea's value to pass constraint validation.
      */
     minLength?: number;
     /**
-     * The name of the textarea, used when submitting the form data.
+     * Sets the name of the textarea submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
+     * Sets placeholder text displayed inside the textarea when it is empty to hint at the expected content format.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
+     * Makes the textarea read-only so users cannot modify the value, while still including it in form submissions.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
+     * Marks the textarea as required so the form cannot be submitted while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Controls whether the textarea is resizable and in which direction.
+     * Controls whether and in which direction the user can resize the textarea (`horizontal`, `vertical`, `both`, or `none`).
      * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
-     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
+     * Sets the initial visible height of the textarea in lines of text. Has no effect when the `--p-textarea-field-sizing` CSS variable is set to `content`.
      * @default 7
      */
     rows?: number;
     /**
-     * Specifies whether the textarea should have its spelling and grammar checked
+     * Controls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content.
      */
     spellCheck?: boolean;
     /**
-     * Indicates the validation or overall status of the textarea component.
+     * Sets the validation state of the textarea, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: TextareaState;
     /**
-     * The textarea value.
+     * Sets the current multi-line text value of the textarea and reflects any changes made by the user.
      * @default ''
      */
     value?: string | null;
     /**
-     * Handles wrapping behavior of elements.
+     * Controls how the submitted text wraps in the form data: `soft` wraps only visually, `hard` inserts line breaks at the textarea width.
      * @default 'soft'
      */
     wrap?: TextareaWrap;

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

@@ -1,7 +1,7 @@
 import { addEventListenerToElementRef as e, syncProperties as t, usePrefix as n } from "../../utils.mjs";
 import { createBlock as r, defineComponent as i, onMounted as a, onUpdated as o, openBlock as s, ref as c, renderSlot as l, resolveDynamicComponent as u, unref as d, withCtx as f } from "vue";
 //#region projects/vue-wrapper/src/lib/components/TextareaWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "TextareaWrapper",
 	props: {
 		autoComplete: {},

package/esm/lib/components/ToastWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { usePrefix as e } from "../../utils.mjs";
 import { createBlock as t, defineComponent as n, openBlock as r, resolveDynamicComponent as i, unref as a } from "vue";
 //#region projects/vue-wrapper/src/lib/components/ToastWrapper.vue?vue&type=script&setup=true&lang.ts
-var o = /* @__PURE__ */ n({
+var o = /*@__PURE__*/ n({
 	__name: "ToastWrapper",
 	setup(n) {
 		let o = e("p-toast");

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

@@ -1,20 +1,20 @@
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget } from '../types';
 export type PWordmarkProps = {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the anchor element to improve accessibility when the wordmark is used as a link.
      */
     aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, wraps the wordmark in an anchor element that navigates to the given URL on click.
      */
     href?: string;
     /**
-     * Controls the size of the wordmark.
+     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`).
      * @default 'small'
      */
     size?: WordmarkSize;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: WordmarkTarget;

package/esm/lib/components/WordmarkWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { syncProperties as e, usePrefix as t } from "../../utils.mjs";
 import { createBlock as n, defineComponent as r, onMounted as i, onUpdated as a, openBlock as o, ref as s, resolveDynamicComponent as c, unref as l } from "vue";
 //#region projects/vue-wrapper/src/lib/components/WordmarkWrapper.vue?vue&type=script&setup=true&lang.ts
-var u = /* @__PURE__ */ r({
+var u = /*@__PURE__*/ r({
 	__name: "WordmarkWrapper",
 	props: {
 		aria: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "4.2.0-rc.4",
+  "version": "4.2.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",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.2.0-rc.4"
+    "@porsche-design-system/components-js": "4.2.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 35.0.0 <36.0.0",