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

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

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

@@ -1,82 +1,82 @@
 import type { BreakpointCustomizable, InputMonthState } from '../types';
 export type PInputMonthProps = {
     /**
-     * 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 month/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 month 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 month that can be selected. The value must be a month string in YYYY-MM format (e.g., max='2024-12').
+     * Sets the latest selectable month in YYYY-MM format. Months 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 month that can be selected. The value must be a month string in YYYY-MM format (e.g., min='2023-01').
+     * Sets the earliest selectable month in YYYY-MM format. Months 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 month 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?: InputMonthState;
     /**
-     * Defines the stepping interval in months. For example, step="1" increments by 1 month, step="12" by 1 year. The default is 1 month.
+     * Sets the stepping interval in months (e.g. `1` for monthly, `12` for annual).
      * @default 1
      */
     step?: number;
     /**
-     * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
+     * Sets the current month value in YYYY-MM format (e.g. `2025-07`).
      * @default ''
      */
     value?: string | null;

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

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

@@ -1,92 +1,92 @@
 import type { BreakpointCustomizable, InputNumberState } from '../types';
 export type PInputNumberProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='postal-code').
+     * Provides the browser with a data type hint to enable relevant autofill suggestions (e.g. `autocomplete='postal-code'`).
      */
     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 increment/decrement stepper controls.
+     * Shows increment/decrement spin buttons inside the field to adjust the numeric value by clicking.
      * @default false
      */
     controls?: 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;
     /**
-     * The max value of the number input.
+     * Sets the maximum allowed numeric value. Values above this are invalid.
      */
     max?: 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;
     /**
-     * The min value of the number input.
+     * Sets the minimum allowed numeric value. Values below this are invalid.
      */
     min?: 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 a number'). 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. 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?: InputNumberState;
     /**
-     * The granularity that the value must adhere to.
+     * Sets the stepping granularity — the value must be a multiple of this number. Also controls step button increment size.
      * @default 1
      */
     step?: number;
     /**
-     * The value of the number input.
+     * Sets the current numeric value of the field.
      * @default ''
      */
     value?: string | number | null;

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

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

@@ -1,87 +1,87 @@
 import type { BreakpointCustomizable, InputPasswordState } from '../types';
 export type PInputPasswordProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
+     * Provides the browser with a password autofill hint (e.g. `autocomplete='current-password'` or `autocomplete='new-password'`).
      */
     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>;
     /**
-     * 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 password'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @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?: InputPasswordState;
     /**
-     * Show or hide password toggle for `input type="password"`.
+     * Shows a toggle button that switches the password between masked and plain text visibility.
      * @default false
      */
     toggle?: boolean;
     /**
-     * The password input value.
+     * Sets the current password value of the field.
      * @default ''
      */
     value?: string | null;

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

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

@@ -1,96 +1,96 @@
 import type { SelectedAriaAttributes, InputSearchAriaAttribute, BreakpointCustomizable, InputSearchState } from '../types';
 export type PInputSearchProps = {
     /**
-     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     * Sets additional ARIA attributes on the search input, useful for combobox patterns (e.g. `role="combobox"`, `aria-expanded`).
      */
     aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
-     * 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 data type hint to enable relevant autofill suggestions.
      */
     autoComplete?: string;
     /**
-     * Show clear input value button
+     * Shows a clear button (×) inside the field that resets the value to empty when clicked.
      * @default false
      */
     clear?: boolean;
     /**
-     * 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>;
     /**
-     * Show search indicator icon
+     * Shows a magnifying glass icon inside the field as a visual affordance for search input.
      * @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;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Search...'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @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?: InputSearchState;
     /**
-     * The search input value.
+     * Sets the current search query value of the field.
      * @default ''
      */
     value?: string | null;

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

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

@@ -1,91 +1,91 @@
 import type { BreakpointCustomizable, InputTelState } from '../types';
 export type PInputTelProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='tel').
+     * Provides the browser with a phone number autofill hint (e.g. `autocomplete='tel'`).
      */
     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 phone icon.
+     * Shows a phone icon at the start of the field as a visual indicator for telephone input.
      * @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 for the value to pass constraint validation. This allows for more specific tel validation rules than the browser's default. If provided, it overrides the browser's default tel validation.
+     * Sets a regular expression the entered value must match to be valid. Overrides the browser's default telephone 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='(123) 456-7890')
+     * Sets placeholder text shown inside the field when it is empty, such as an example phone number 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. 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?: InputTelState;
     /**
-     * The tel input value.
+     * Sets the current telephone number value of the field.
      * @default ''
      */
     value?: string | null;

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