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

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

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

@@ -1,28 +1,28 @@
 import type { SelectedAriaAttributes, DrilldownLinkAriaAttribute, DrilldownLinkTarget } from '../types';
 export type PDrilldownLinkProps = {
     /**
-     * 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;
     /**
-     * Add ARIA attributes (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets ARIA attributes on the link for improved accessibility. Only applies when `href` is set.
      */
     aria?: SelectedAriaAttributes<DrilldownLinkAriaAttribute>;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: string;
     /**
-     * When `href` is provided, the component renders as an `<a>` element. Otherwise, provide a slotted anchor element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Sets the `rel` attribute on the link (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the `rel` attribute on the link element (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: string;
     /**
-     * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @default '_self'
      */
     target?: DrilldownLinkTarget;

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

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

@@ -1,15 +1,15 @@
 import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail } from '../types';
 export type PDrilldownProps = {
     /**
-     * Defines which `p-drilldown-item` is shown as open.
+     * Sets which `p-drilldown-item` (by `identifier`) is currently expanded to show its sub-navigation level.
      */
     activeIdentifier?: string | undefined;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the drilldown dialog element for improved screen reader accessibility.
      */
     aria?: SelectedAriaAttributes<DrilldownAriaAttribute>;
     /**
-     * If `true`, the drilldown is shown as open.
+     * Controls whether the drilldown navigation panel is visible.
      * @default false
      */
     open?: boolean;

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

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

@@ -1,31 +1,31 @@
 import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState } from '../types';
 export type PFieldsetProps = {
     /**
-     * Sets ARIA attributes.
+     * Overrides the ARIA role on the fieldset — use `radiogroup` when grouping radio buttons.
      */
     aria?: SelectedAriaRole<"radiogroup">;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible legend text displayed above the grouped form controls.
      * @default ''
      */
     label?: string;
     /**
-     * Controls the size of the label text.
+     * Sets the font size of the fieldset label (`small`, `medium`, or `large`).
      * @default 'medium'
      */
     labelSize?: FieldsetLabelSize;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the fieldset when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Marks the Fieldset as required.
+     * Marks all controls within the fieldset as required and adds a required indicator to the label.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state of the fieldset, controlling the color and style of the feedback message.
      * @default 'none'
      */
     state?: FieldsetState;

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

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

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

@@ -1,36 +1,41 @@
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutPosition } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, BreakpointCustomizable, FlyoutPosition } from '../types';
 export type PFlyoutProps = {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the flyout dialog element for improved screen reader accessibility.
      */
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
     /**
-     * Defines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).
+     * Sets the backdrop style. Use `blur` when background content is irrelevant; use `shading` when users still need visual context.
      * @default 'blur'
      */
     backdrop?: FlyoutBackdrop;
     /**
-     * Defines the background color
+     * Sets the background color of the flyout panel (`canvas` or `surface`).
      * @default 'canvas'
      */
     background?: FlyoutBackground;
     /**
-     * If true, the flyout will not be closable via backdrop click.
+     * When enabled, clicking the backdrop will not close the flyout.
      * @default false
      */
     disableBackdropClick?: boolean;
     /**
-     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     * Controls footer behavior. `fixed` keeps it anchored at the bottom; `sticky` pins it only when content overflows.
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
     /**
-     * If true, the flyout is open.
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls whether the flyout panel is visible.
      * @default false
      */
     open: boolean;
     /**
-     * The position of the flyout
+     * Sets the side the flyout slides in from — `start` for left or `end` for right in LTR layouts.
      * @default 'end'
      */
     position?: FlyoutPosition;
@@ -52,6 +57,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PFlyou
     backdrop: FlyoutBackdrop;
     disableBackdropClick: boolean;
     footerBehavior: FlyoutFooterBehavior;
+    fullscreen: BreakpointCustomizable<boolean>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/esm/lib/components/FlyoutWrapper.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/FlyoutWrapper.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	__name: "FlyoutWrapper",
 	props: {
 		aria: {},
@@ -12,6 +12,10 @@ var p = /* @__PURE__ */ i({
 			default: !1
 		},
 		footerBehavior: { default: "sticky" },
+		fullscreen: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		open: {
 			type: Boolean,
 			default: !1

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

@@ -1,36 +1,36 @@
 import type { HeadingAlign, HeadingColor, HeadingHyphens, BreakpointCustomizable, HeadingSize, HeadingTag, HeadingWeight } from '../types';
 export type PHeadingProps = {
     /**
-     * Text alignment of the heading. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
+     * Sets the horizontal text alignment (`start`, `center`, `end`, or `inherit`).
      * @default 'start'
      */
     align?: HeadingAlign;
     /**
-     * Text color of the heading. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, or 'inherit' to adopt the parent's color.
+     * Sets the text color using PDS color tokens.
      * @default 'primary'
      */
     color?: HeadingColor;
     /**
-     * Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
+     * Truncates the text with an ellipsis when it overflows the container on a single line. Cannot be combined with multi-line content.
      * @default false
      */
     ellipsis?: boolean;
     /**
-     * Controls the hyphenation behavior of the heading. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
+     * Controls hyphenation behavior — `auto` lets the browser decide, `manual` only breaks at `­`, `none` disables it entirely.
      * @default 'none'
      */
     hyphens?: HeadingHyphens;
     /**
-     * Size of the heading. Also defines the size for specific breakpoints, like {base: "md", l: "2xl"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
+     * Sets the visual size of the heading. Use `inherit` to derive size from the parent. Supports responsive breakpoint values.
      * @default '2xl'
      */
     size?: BreakpointCustomizable<HeadingSize>;
     /**
-     * Sets the HTML heading tag (h1 - h6) to ensure the correct document outline and semantic hierarchy. If not set, the tag is automatically inferred from the `size` property (e.g. '2xl' maps to 'h2', 'md' to 'h5', 'sm' to 'h6').
+     * Sets the HTML heading tag (h1–h6) for correct document outline placement. When omitted, the tag is inferred from `size`.
      */
     tag?: HeadingTag;
     /**
-     * The font weight of the heading. Use 'normal' for regular weight, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis. For `size` values of 'sm' or smaller, it's recommended to use 'semibold' for better readability.
+     * Sets the font weight — `normal`, `semibold`, or `bold`.
      * @default 'normal'
      */
     weight?: HeadingWeight;

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

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

@@ -1,26 +1,26 @@
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, BreakpointCustomizable, IconSize } from '../types';
 export type PIconProps = {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the icon — use `aria-label` to make the icon meaningful to screen readers when it conveys information.
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations.
+     * Sets the fill color of the icon using PDS color tokens.
      * @default 'primary'
      */
     color?: IconColor;
     /**
-     * Specifies which icon to use.
+     * Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`).
      * @default 'arrow-right'
      */
     name?: IconName;
     /**
-     * Defines the size of the icon, aligned with the typographic scale used by components such as p-spinner, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * Sets the icon size using the PDS typographic scale. Use `inherit` to derive size from the parent element. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<IconSize>;
     /**
-     * Specifies a whole icon path which can be used for custom icons.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon library.
      */
     source?: string;
 };

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

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

@@ -1,41 +1,41 @@
 import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState } from '../types';
 export type PInlineNotificationProps = {
     /**
-     * Action icon of the inline-notification.
+     * Sets the icon displayed inside the action button using a PDS icon name.
      * @default 'arrow-right'
      */
     actionIcon?: InlineNotificationActionIcon;
     /**
-     * Action label of the inline-notification.
+     * Sets the label text of the optional action button inside the notification.
      */
     actionLabel?: string;
     /**
-     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the action button and shows a spinner to indicate an ongoing operation.
      * @default false
      */
     actionLoading?: boolean;
     /**
-     * Description of the inline-notification.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * If false, the inline-notification will not have a dismiss button.
+     * Shows a dismiss button so the user can manually close the notification.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the inline-notification.
+     * Sets the heading text displayed at the top of the inline notification.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure.
      * @default 'h5'
      */
     headingTag?: InlineNotificationHeadingTag;
     /**
-     * State of the inline-notification.
+     * Sets the visual state — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: InlineNotificationState;

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

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

@@ -1,82 +1,82 @@
 import type { BreakpointCustomizable, InputDateState } from '../types';
 export type PInputDateProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='bday' for a birthday).
+     * Provides the browser with a date autofill hint (e.g. `autocomplete='bday'` for a birthday field).
      */
     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 date 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., max='2024-12-31').
+     * Sets the latest selectable date in YYYY-MM-DD format. Dates 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., min='2023-01-01').
+     * Sets the earliest selectable date in YYYY-MM-DD format. Dates 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 date 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 date 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?: InputDateState;
     /**
-     * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
+     * Sets the stepping interval in days. The selected date must align with the `min` date by a multiple of this value.
      * @default 1
      */
     step?: number;
     /**
-     * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
+     * Sets the current date value in YYYY-MM-DD format (e.g. `2025-07-02`).
      * @default ''
      */
     value?: string | null;

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

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

@@ -1,96 +1,96 @@
 import type { BreakpointCustomizable, InputEmailState } from '../types';
 export type PInputEmailProps = {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
+     * Provides the browser with a data type hint to enable relevant autofill suggestions (e.g. `autocomplete='email'`).
      */
     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 email icon.
+     * Shows an email 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;
     /**
-     * Allows the user to enter a list of email addresses separated by commas (and optional whitespace). The browser validates each email address in the list.
+     * Allows entry of multiple email addresses separated by commas. The browser validates each address individually.
      * @default false
      */
     multiple?: boolean;
     /**
-     * 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 email validation rules than the browser's default (e.g., restricting to a specific domain). If provided, it overrides the browser's default email validation.
+     * Sets a regular expression the entered value must match to be valid. Overrides the browser's default email 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='you@example.com'). 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?: InputEmailState;
     /**
-     * The default email address (or comma-separated list of addresses) for the input.
+     * Sets the current email value. When `multiple` is enabled, accepts a comma-separated list of email addresses.
      * @default ''
      */
     value?: string | null;