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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -3,12 +3,11 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextFieldWrapperCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
+import { LegacyLabel } from './legacy-label.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -51,8 +50,8 @@ class DSRTextFieldWrapper extends Component {
         const hasAction = hasLocateAction(this.props.actionIcon);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter, (this.props.isCounterVisible) && (jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
+        const style = minifyCss(getComponentCss$8(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter, (this.props.isCounterVisible) && (jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
                                             this.props.isWithinForm && this.props.submitButton ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
                                             createElement(PButtonPure, { ...buttonProps, key: "btn-clear", type: "button", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.mjs

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextListItemCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
@@ -12,7 +11,7 @@ class DSRTextListItem extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6()));
+        const style = minifyCss(getComponentCss$6());
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("span", { children: jsx("slot", {}) }) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.mjs

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextListCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isListTypeOrdered } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
@@ -14,7 +13,7 @@ class DSRTextList extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = isListTypeOrdered(this.props.listType || this.props.type) ? 'ol' : 'ul';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme)));
+        const style = minifyCss(getComponentCss$7(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.mjs

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getTextTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
@@ -30,7 +29,7 @@ class DSRText extends Component {
             right: 'end',
         };
         const TagType = getTextTagType(null, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), (alignDeprecationMap[this.props.align] || this.props.align), (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(getComponentCss$5(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), (alignDeprecationMap[this.props.align] || this.props.align), (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea-wrapper.mjs

@@ -2,9 +2,8 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextareaWrapperCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { Label } from './label.mjs';
+import { LegacyLabel } from './legacy-label.mjs';
 import { StateMessage } from './state-message.mjs';
 
 /**
@@ -23,8 +22,8 @@ class DSRTextareaWrapper extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
+        const style = minifyCss(getComponentCss$4(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea.mjs

@@ -2,10 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextareaCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { debounce } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { Label, descriptionId } from './label.mjs';
+import { debounce, descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 
 /**
@@ -33,7 +32,7 @@ class DSRTextarea extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme)));
+        const style = minifyCss(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("textarea", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, value: this.props.value, form: this.props.form, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, rows: this.props.rows, readOnly: this.props.readOnly, spellCheck: this.props.spellCheck, autoComplete: this.props.autoComplete, wrap: this.props.wrap }), this.props.hasCounter && (jsx("span", { className: "counter", "aria-hidden": "true", children: `${this.props.value.length}/${this.props.maxLength}` })), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/toast.mjs

@@ -1,7 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getToastCss as getComponentCss$1 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRToast extends Component {
@@ -9,7 +8,7 @@ class DSRToast extends Component {
     toastItemElement;
     render() {
         const toast = false;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$1().replace(/(:host {[\S\s]+?})[\S\s]+/, '$1')));
+        const style = minifyCss(getComponentCss$1().replace(/(:host {[\S\s]+?})[\S\s]+/, '$1'));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: toast })] }) }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/wordmark.mjs

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getWordmarkCss as getComponentCss } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
@@ -10,7 +9,7 @@ class DSRWordmark extends Component {
     render() {
         // optimized with SVGO, see docs in assets folder
         const svg = (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4500 300", children: [jsx("title", { children: "Porsche" }), jsx("path", { d: "M502 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h434zm6-143v65c0 7.8-4.2 12-12 12H68V66h428c7.8 0 12 4.2 12 12zm228 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h417c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H736zm411-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H742c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h405zm675-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-361v79h-68V0h502c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-428v89h428zm162-81c0-48.1 25.9-74 74-74h492v56h-486c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h422c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-492v-56h486c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-422c-48.1 0-74-25.9-74-74V74zm661 0c0-48.1 25.9-74 74-74h480v66h-474c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h474v66h-480c-48.1 0-74-25.9-74-74V74zM3817 0v300h-68V183h-407v117h-68V0h68v117h407V0h68zm156 56v66h527v56h-527v66h527v56h-595V0h595v56h-527z" })] }));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss(this.props.size, this.props.theme)));
+        const style = minifyCss(getComponentCss(this.props.size, this.props.theme));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (svg) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: svg })) })] }) }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -13,19 +13,21 @@ export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
 export { PCrest } from './lib/components/crest.wrapper.mjs';
 export { PDisplay } from './lib/components/display.wrapper.mjs';
 export { PDivider } from './lib/components/divider.wrapper.mjs';
+export { PDrilldown } from './lib/components/drilldown.wrapper.mjs';
+export { PDrilldownItem } from './lib/components/drilldown-item.wrapper.mjs';
+export { PDrilldownLink } from './lib/components/drilldown-link.wrapper.mjs';
 export { PFieldset } from './lib/components/fieldset.wrapper.mjs';
 export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs';
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
-export { PFlyoutMultilevel } from './lib/components/flyout-multilevel.wrapper.mjs';
-export { PFlyoutMultilevelItem } from './lib/components/flyout-multilevel-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';
 export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
 export { PLink } from './lib/components/link.wrapper.mjs';
 export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
 export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';

package/{esm/lib/components/flyout-multilevel-item.wrapper.d.ts → ssr/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/ssr/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/ssr/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/ssr/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/ssr/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/ssr/esm/lib/dsr-components/drilldown-item.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+import type { DrilldownItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+/**
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." } *
+ * @slot {"name": "header", "description": "Shows a custom header section on mobile view" } *
+ * @experimental
+ */
+export declare class DSRDrilldownItem extends Component<any> {
+    host: HTMLElement & DrilldownItemInternalHTMLProps;
+    private scroller;
+    private hasSlottedHeader;
+    private hasSlottedButton;
+    private get theme();
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/drilldown-link.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ *
+ * @experimental
+ */
+export declare class DSRDrilldownLink extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

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

@@ -1,15 +1,15 @@
 import { Component } from 'react';
 /**
- * @slot {"name": "", "description": "Default slot to render p-flyout-multilevel items." }
+ * @slot {"name": "", "description": "Default slot to render p-drilldown items." }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}
  * @controlled {"props": ["activeIdentifier"], "event": "update"}
  *
  * @experimental
  */
-export declare class DSRFlyoutMultilevel extends Component<any> {
+export declare class DSRDrilldown extends Component<any> {
     host: HTMLElement;
-    private flyoutMultilevelItemElements;
+    private drilldownItemElements;
     private primary;
     private isSecondaryDrawerVisible;
     private dialog;

package/ssr/esm/lib/dsr-components/input-password.d.ts

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
+export declare class DSRInputPassword extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private showPassword;
+    private inputElement;
+    private defaultValue;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    render(): JSX.Element;
+}