@porsche-design-system/components-react 3.27.2 → 3.28.0-rc.0

package/CHANGELOG.md

@@ -14,7 +14,32 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
-### [v3.27.2] - 2025-03-20
+### [3.28.0-rc.0] - 2025-04-11
+
+#### Added
+
+- `Input Password`: ([#3763](https://github.com/porsche-design-system/porsche-design-system/pull/3763))
+- `Drilldown`, `Drilldown Item`: CSS variable `--p-drilldown-grid-template` and `--p-drilldown-gap` (experimental)
+  ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
+- `Drilldown Item`: named slot `button` and `header` (experimental)
+  ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
+- `Drilldown Link`: (experimental) ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
+
+#### Changed
+
+- **Breaking Change** `Flyout Multilevel`, `Flyout Multilevel Item`: renamed (experimental) component to `Drilldown` and
+  `Drilldown Item` ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
+- **Breaking Change** `Drilldown Item` doesn't style slotted `<a>` tags anymore, instead use `Drilldown Link` or a
+  custom link ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
+
+#### Fixed
+
+- `aria` prop now supports a colon inside a value, e.g. `aria="{ 'aria-label': 'Always remember: yes you can!' }"`
+  ([#3680](https://github.com/porsche-design-system/porsche-design-system/pull/3680))
+
+### [3.27.3] - 2025-03-21
+
+### [3.27.2] - 2025-03-20
 
 ### [3.27.2-rc.0] - 2025-03-18
 

package/cjs/lib/components/{flyout-multilevel-item.wrapper.cjs → drilldown-item.wrapper.cjs}

@@ -6,9 +6,9 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
+const PDrilldownItem = /*#__PURE__*/ react.forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
+    const WebComponentTag = hooks.usePrefix('p-drilldown-item');
     const propsToSync = [cascade, identifier, label, primary, secondary];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -23,4 +23,4 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ cascade = false,
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutMultilevelItem = PFlyoutMultilevelItem;
+exports.PDrilldownItem = PDrilldownItem;

package/cjs/lib/components/drilldown-link.wrapper.cjs

@@ -0,0 +1,26 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PDrilldownLink = /*#__PURE__*/ react.forwardRef(({ active = false, aria, download, href, rel, target = '_self', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    const WebComponentTag = hooks.usePrefix('p-drilldown-link');
+    const propsToSync = [active, aria, download, href, rel, target];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['active', 'aria', 'download', 'href', 'rel', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PDrilldownLink = PDrilldownLink;

package/cjs/lib/components/{flyout-multilevel.wrapper.cjs → drilldown.wrapper.cjs}

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PDrilldown = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel');
+    const WebComponentTag = hooks.usePrefix('p-drilldown');
     const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -25,4 +25,4 @@ const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, ar
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutMultilevel = PFlyoutMultilevel;
+exports.PDrilldown = PDrilldown;

package/cjs/lib/components/input-password.wrapper.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PInputPassword = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-password');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), toggle, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputPassword = PInputPassword;

package/cjs/public-api.cjs

@@ -15,19 +15,21 @@ var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.c
 var crest_wrapper = require('./lib/components/crest.wrapper.cjs');
 var display_wrapper = require('./lib/components/display.wrapper.cjs');
 var divider_wrapper = require('./lib/components/divider.wrapper.cjs');
+var drilldown_wrapper = require('./lib/components/drilldown.wrapper.cjs');
+var drilldownItem_wrapper = require('./lib/components/drilldown-item.wrapper.cjs');
+var drilldownLink_wrapper = require('./lib/components/drilldown-link.wrapper.cjs');
 var fieldset_wrapper = require('./lib/components/fieldset.wrapper.cjs');
 var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.cjs');
 var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var flyoutMultilevel_wrapper = require('./lib/components/flyout-multilevel.wrapper.cjs');
-var flyoutMultilevelItem_wrapper = require('./lib/components/flyout-multilevel-item.wrapper.cjs');
 var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
 var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
+var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var link_wrapper = require('./lib/components/link.wrapper.cjs');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
 var linkSocial_wrapper = require('./lib/components/link-social.wrapper.cjs');
@@ -99,19 +101,21 @@ exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
 exports.PCrest = crest_wrapper.PCrest;
 exports.PDisplay = display_wrapper.PDisplay;
 exports.PDivider = divider_wrapper.PDivider;
+exports.PDrilldown = drilldown_wrapper.PDrilldown;
+exports.PDrilldownItem = drilldownItem_wrapper.PDrilldownItem;
+exports.PDrilldownLink = drilldownLink_wrapper.PDrilldownLink;
 exports.PFieldset = fieldset_wrapper.PFieldset;
 exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PFlyoutMultilevel = flyoutMultilevel_wrapper.PFlyoutMultilevel;
-exports.PFlyoutMultilevelItem = flyoutMultilevelItem_wrapper.PFlyoutMultilevelItem;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;
 exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;
 exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;

package/{ssr/esm/lib/components/flyout-multilevel-item.wrapper.d.ts → esm/lib/components/drilldown-item.wrapper.d.ts}

@@ -1,15 +1,15 @@
 import type { BaseProps } from '../../BaseProps';
-export type PFlyoutMultilevelItemProps = BaseProps & {
+export type PDrilldownItemProps = BaseProps & {
     /**
      * Private property set by the component itself.
      */
     cascade?: boolean;
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     * Unique identifier which controls if this item should be shown when the active-identifier on the drilldown is set to this value.
      */
     identifier: string;
     /**
-     * Label of the item.
+     * Renders back button, header section on mobile view and cascade button to reach a deeper level of the navigation structure.
      */
     label?: string;
     /**
@@ -21,17 +21,17 @@ export type PFlyoutMultilevelItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      */
     cascade?: boolean;
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     * Unique identifier which controls if this item should be shown when the active-identifier on the drilldown is set to this value.
      */
     identifier: string;
     /**
-     * Label of the item.
+     * Renders back button, header section on mobile view and cascade button to reach a deeper level of the navigation structure.
      */
     label?: string;
     /**

package/esm/lib/components/{flyout-multilevel-item.wrapper.mjs → drilldown-item.wrapper.mjs}

@@ -4,9 +4,9 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
+const PDrilldownItem = /*#__PURE__*/ forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-flyout-multilevel-item');
+    const WebComponentTag = usePrefix('p-drilldown-item');
     const propsToSync = [cascade, identifier, label, primary, secondary];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -21,4 +21,4 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ cascade = false, ident
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutMultilevelItem };
+export { PDrilldownItem };

package/esm/lib/components/drilldown-link.wrapper.d.ts

@@ -0,0 +1,56 @@
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, DrilldownLinkAriaAttribute, DrilldownLinkTarget } from '../types';
+export type PDrilldownLinkProps = BaseProps & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Add ARIA attributes (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    aria?: SelectedAriaAttributes<DrilldownLinkAriaAttribute>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    download?: string;
+    /**
+     * When providing an url then the component will be rendered as `<a>` otherwise the component expects a slotted anchor.
+     */
+    href?: string;
+    /**
+     * Specifies the relationship of the target object to the link object (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    target?: DrilldownLinkTarget;
+};
+export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Add ARIA attributes (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    aria?: SelectedAriaAttributes<DrilldownLinkAriaAttribute>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    download?: string;
+    /**
+     * When providing an url then the component will be rendered as `<a>` otherwise the component expects a slotted anchor.
+     */
+    href?: string;
+    /**
+     * Specifies the relationship of the target object to the link object (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     */
+    target?: DrilldownLinkTarget;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/drilldown-link.wrapper.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PDrilldownLink = /*#__PURE__*/ forwardRef(({ active = false, aria, download, href, rel, target = '_self', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    const WebComponentTag = usePrefix('p-drilldown-link');
+    const propsToSync = [active, aria, download, href, rel, target];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['active', 'aria', 'download', 'href', 'rel', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PDrilldownLink };

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

@@ -0,0 +1,56 @@
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail, Theme } from '../types';
+export type PDrilldownProps = BaseProps & {
+    /**
+     * Defines which drilldown-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<DrilldownAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
+    /**
+     * If true, the drilldown is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the drilldown color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PDrilldown: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Defines which drilldown-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<DrilldownAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
+    /**
+     * If true, the drilldown is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the drilldown color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/{flyout-multilevel.wrapper.mjs → drilldown.wrapper.mjs}

@@ -4,11 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PDrilldown = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = usePrefix('p-flyout-multilevel');
+    const WebComponentTag = usePrefix('p-drilldown');
     const propsToSync = [activeIdentifier, aria, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -23,4 +23,4 @@ const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, on
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutMultilevel };
+export { PDrilldown };

package/esm/lib/components/index.d.ts

@@ -12,19 +12,21 @@ export * from './content-wrapper.wrapper';
 export * from './crest.wrapper';
 export * from './display.wrapper';
 export * from './divider.wrapper';
+export * from './drilldown.wrapper';
+export * from './drilldown-item.wrapper';
+export * from './drilldown-link.wrapper';
 export * from './fieldset.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
-export * from './flyout-multilevel.wrapper';
-export * from './flyout-multilevel-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
+export * from './input-password.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';
 export * from './link-social.wrapper';

package/esm/lib/components/input-password.wrapper.d.ts

@@ -0,0 +1,176 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputPasswordAutoComplete, BreakpointCustomizable, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, Theme } from '../types';
+export type PInputPasswordProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputPasswordAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the password input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the password input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max length of the password input.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the password input.
+     */
+    minLength?: number;
+    /**
+     * The name of the password input.
+     */
+    name: string;
+    /**
+     * Emitted when the password input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputPasswordBlurEventDetail>) => void;
+    /**
+     * Emitted when the password input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputPasswordChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputPasswordInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the password input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the password input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputPasswordState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Show or hide password toggle for `input type="password"`.
+     */
+    toggle?: boolean;
+    /**
+     * The password input value.
+     */
+    value?: string;
+};
+export declare const PInputPassword: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputPasswordAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the password input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the password input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max length of the password input.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the password input.
+     */
+    minLength?: number;
+    /**
+     * The name of the password input.
+     */
+    name: string;
+    /**
+     * Emitted when the password input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputPasswordBlurEventDetail>) => void;
+    /**
+     * Emitted when the password input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputPasswordChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputPasswordInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the password input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the password input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputPasswordState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Show or hide password toggle for `input type="password"`.
+     */
+    toggle?: boolean;
+    /**
+     * The password input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-password.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputPassword = /*#__PURE__*/ forwardRef(({ autoComplete = '', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-password');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || useTheme(), toggle, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputPassword };