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

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

@@ -1,91 +1,91 @@
 import type { BreakpointCustomizable, InputTextState } from '../types';
 export type PInputTextProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='name').
+     * Provides the browser with a data type hint to enable relevant autofill suggestions (e.g. `autocomplete='name'`).
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Show or hide the character counter.
+     * Shows a live character counter below the field indicating how many characters have been entered relative to `maxLength`.
      * @default false
      */
     counter?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     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 input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name 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='Enter your full name'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty, to hint at the expected format.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited by the user. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicate whether to enable spell-checking.
+     * Controls whether the browser's built-in spell-checking is enabled for this field.
      */
     spellCheck?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputTextState;
     /**
-     * The text input value.
+     * Sets the current text value of the input field.
      * @default ''
      */
     value?: string | number | null;

package/esm/lib/components/InputTextWrapper.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/InputTextWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "InputTextWrapper",
 	props: {
 		autoComplete: {},

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

@@ -1,82 +1,82 @@
 import type { BreakpointCustomizable, InputTimeState } from '../types';
 export type PInputTimeProps = {
     /**
-     * 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 time autofill hint.
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing time selection. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     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 input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Specifies the latest time that can be selected. The value must be a time string in hh:mm or hh:mm:ss format (e.g., max='17:30').
+     * Sets the latest selectable time in `hh:mm` or `hh:mm:ss` format. Times after this are disabled in the picker.
      */
     max?: string;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Specifies the earliest time that can be selected. The value must be a time string in hh:mm or hh:mm:ss format (e.g., min='09:00').
+     * Sets the earliest selectable time in `hh:mm` or `hh:mm:ss` format. Times before this are disabled in the picker.
      */
     min?: string;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while no time is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputTimeState;
     /**
-     * Defines the granularity of the time input. The step value is given in seconds. The default is 60 (one minute). You can also specify smaller increments (e.g., step='1' for seconds, step='0.001' for milliseconds).
+     * Sets the stepping interval in seconds. Use `60` for minute-level selection, `1` to also expose seconds.
      * @default 60
      */
     step?: number;
     /**
-     * The default time value for the input, in hh:mm or hh:mm:ss format (e.g., value='14:00').
+     * Sets the current time value in `hh:mm` or `hh:mm:ss` format (e.g. `14:00`).
      * @default ''
      */
     value?: string | null;

package/esm/lib/components/InputTimeWrapper.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/InputTimeWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "InputTimeWrapper",
 	props: {
 		autoComplete: {},

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

@@ -1,91 +1,91 @@
 import type { BreakpointCustomizable, InputUrlState } from '../types';
 export type PInputUrlProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='url').
+     * Provides the browser with a URL autofill hint (e.g. `autocomplete='url'`).
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     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>;
     /**
-     * Controls the visibility of the URL icon.
+     * Shows a URL/link icon at the start of the field as a visual indicator.
      * @default false
      */
     indicator?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Specifies a regular expression that the input's value must match to pass constraint validation. This allows for more specific URL validation rules than the browser's default. If provided, it overrides the browser's default URL validation.
+     * Sets a regular expression the entered value must match to be valid. Overrides the browser's default URL validation.
      */
     pattern?: string;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='https://porsche.com/')
+     * Sets placeholder text shown inside the field when it is empty, such as an example URL.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputUrlState;
     /**
-     * The URL input value.
+     * Sets the current URL value. Must be an absolute URL (e.g. `https://porsche.com`) to pass browser validation.
      * @default ''
      */
     value?: string | null;

package/esm/lib/components/InputUrlWrapper.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/InputUrlWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "InputUrlWrapper",
 	props: {
 		autoComplete: {},

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

@@ -1,82 +1,82 @@
 import type { BreakpointCustomizable, InputWeekState } from '../types';
 export type PInputWeekProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     * Provides the browser with a week/year autofill hint.
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing week selection. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     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 input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     * Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.
      */
     max?: string;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     * Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.
      */
     min?: string;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while no week is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputWeekState;
     /**
-     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 week.
+     * Sets the stepping interval in weeks.
      * @default 1
      */
     step?: number;
     /**
-     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27').
+     * Sets the current ISO week value in YYYY-Www format (e.g. `2025-W27`).
      * @default ''
      */
     value?: string | null;

package/esm/lib/components/InputWeekWrapper.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/InputWeekWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "InputWeekWrapper",
 	props: {
 		autoComplete: {},

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

@@ -1,67 +1,67 @@
 import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget } from '../types';
 export type PLinkPureProps = {
     /**
-     * Displays the link in its active state.
+     * Visually marks the link as the currently active navigation item, e.g. the current page.
      * @default false
      */
     active?: boolean;
     /**
-     * Aligns the label.
+     * Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the link element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the link's icon and label text.
      * @default 'primary'
      */
     color?: LinkPureColor;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file.
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: 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>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: LinkPureIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: string;
     /**
-     * Size of the link.
+     * Sets the font size of the link label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<LinkPureSize>;
     /**
-     * Stretches the area between icon and label to max available space.
+     * Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @default '_self'
      */
     target?: LinkPureTarget;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce its link-like appearance.
      * @default false
      */
     underline?: boolean;

package/esm/lib/components/LinkPureWrapper.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/LinkPureWrapper.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ r({
+var f = /*@__PURE__*/ r({
 	__name: "LinkPureWrapper",
 	props: {
 		active: {

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

@@ -1,46 +1,46 @@
 import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget } from '../types';
 export type PLinkTileProductProps = {
     /**
-     * Aspect ratio of the link-tile-product.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '3/4'
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description.
+     * Sets an optional short description providing additional product details below the price.
      */
     description?: string;
     /**
-     * Product heading.
+     * Sets the product name displayed prominently at the top of the tile.
      */
     heading: string;
     /**
-     * href of the `<a>`.
+     * Sets the URL the tile navigates to when clicked. Alternatively, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Shows a like button.
+     * Shows a like/bookmark button so users can save the product.
      * @default true
      */
     likeButton?: boolean;
     /**
-     * Indicates whether the product is liked.
+     * Reflects whether the product is currently liked — controls the filled state of the like button.
      * @default false
      */
     liked?: boolean;
     /**
-     * Product retail price (with or without discount).
+     * Sets the current retail price of the product, displayed with or without a discount.
      */
     price: string;
     /**
-     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     * Sets the original recommended retail price shown with a strikethrough to indicate a discount. Requires `price` to be set.
      */
     priceOriginal?: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`).
      */
     rel?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: LinkTileProductTarget;