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

package/ssr/esm/lib/components/drilldown.wrapper.d.ts

@@ -2,46 +2,46 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail } from '../types';
 export type PDrilldownProps = BaseProps & {
     /**
-     * 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>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the drilldown via the close button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when `activeIdentifier` changes.
+     * Emitted when the active navigation level changes, with the new `activeIdentifier` in the event detail.
      */
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
-     * If `true`, the drilldown is shown as open.
+     * Controls whether the drilldown navigation panel is visible.
      * @default false
      */
     open?: boolean;
 };
 export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the drilldown via the close button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when `activeIdentifier` changes.
+     * Emitted when the active navigation level changes, with the new `activeIdentifier` in the event detail.
      */
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
-     * If `true`, the drilldown is shown as open.
+     * Controls whether the drilldown navigation panel is visible.
      * @default false
      */
     open?: boolean;

package/ssr/esm/lib/components/fieldset.wrapper.d.ts

@@ -2,62 +2,62 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState } from '../types';
 export type PFieldsetProps = BaseProps & {
     /**
-     * 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;
 };
 export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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/ssr/esm/lib/components/flyout.wrapper.d.ts

@@ -1,97 +1,107 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, BreakpointCustomizable, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
-     * 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;
     /**
-     * Emitted when the component requests to be dismissed.
+     * 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>;
+    /**
+     * Emitted when the user closes the flyout via the close button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the flyout is closed and the transition is finished.
+     * Emitted after the flyout's close transition completes and the panel is fully hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the flyout is opened and the transition is finished.
+     * Emitted after the flyout's open transition completes and the panel is fully visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the flyout is open.
+     * 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;
 };
 export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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;
     /**
-     * Emitted when the component requests to be dismissed.
+     * 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>;
+    /**
+     * Emitted when the user closes the flyout via the close button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the flyout is closed and the transition is finished.
+     * Emitted after the flyout's close transition completes and the panel is fully hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the flyout is opened and the transition is finished.
+     * Emitted after the flyout's open transition completes and the panel is fully visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the flyout is open.
+     * 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;

package/ssr/esm/lib/components/heading.wrapper.d.ts

@@ -2,72 +2,72 @@ import type { BaseProps } from '../../BaseProps';
 import type { HeadingAlign, HeadingColor, HeadingHyphens, BreakpointCustomizable, HeadingSize, HeadingTag, HeadingWeight } from '../types';
 export type PHeadingProps = BaseProps & {
     /**
-     * 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;
 };
 export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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. `&shy;`), '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 `&shy;`, `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/ssr/esm/lib/components/icon.wrapper.d.ts

@@ -2,51 +2,51 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, BreakpointCustomizable, IconSize } from '../types';
 export type PIconProps = BaseProps & {
     /**
-     * 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;
 };
 export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/inline-notification.wrapper.d.ts

@@ -2,98 +2,98 @@ import type { BaseProps } from '../../BaseProps';
 import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState } from '../types';
 export type PInlineNotificationProps = BaseProps & {
     /**
-     * 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;
     /**
-     * Emitted when the action button is clicked.
+     * Emitted when the user clicks the action button.
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the user clicks the dismiss button.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * State of the inline-notification.
+     * Sets the visual state — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: InlineNotificationState;
 };
 export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * 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;
     /**
-     * Emitted when the action button is clicked.
+     * Emitted when the user clicks the action button.
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the user clicks the dismiss button.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * State of the inline-notification.
+     * Sets the visual state — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: InlineNotificationState;