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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs

@@ -103,7 +103,7 @@ class DSRPinCode extends react.Component {
         this.inputElements = [];
         const currentInputId = 'current-input';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.isWithinForm, this.props.length, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [Array.from(Array(this.props.length), (_, index) => (jsxRuntime.jsx("input", { ...(utilsEntry.isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${label.labelId} ${label.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [Array.from(Array(this.props.length), (_, index) => (jsxRuntime.jsx("input", { ...(utilsEntry.isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${label.labelId} ${label.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
                                             , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.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.isWithinForm && jsxRuntime.jsx("slot", { name: "internal-input" }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.cjs

@@ -101,7 +101,7 @@ class DSRSelectWrapperDropdown extends react.Component {
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction === 'auto'
             ? 'down'
             : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
                             jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsxRuntime.jsx("span", { 
                                 /* @ts-ignore */

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.cjs

@@ -99,7 +99,7 @@ class DSRSelectWrapper extends react.Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperCss(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsxRuntime.jsx(selectWrapperDropdown_wrapper.PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), jsxRuntime.jsx(stateMessage.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] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsxRuntime.jsx(selectWrapperDropdown_wrapper.PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), jsxRuntime.jsx(stateMessage.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/dist/styles/esm/styles-entry.mjs

@@ -5510,7 +5510,8 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5541,6 +5542,21 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
     const indeterminateIconHoverColorDark = escapeHashCharacter(formStateHoverColorDark || primaryColorDark);
     const background = `transparent 0% 0% / ${fontLineHeight}`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
+    const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
+    // Adjusts padding to maintain consistent spacing when the checkbox is smaller than the minimum touch target size.
+    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
+    const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the checkbox, whichever is larger.
     return getCss({
         '@global': {
             ':host': {
@@ -5552,8 +5568,16 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
             },
             ...preventFoucOfNestedElementsStyles,
             input: {
-                width: fontLineHeight,
-                height: fontLineHeight,
+                position: 'relative',
+                '&::before': {
+                    // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
+                    // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
+                    content: '""',
+                    position: 'absolute',
+                    inset,
+                },
+                width: dimension,
+                height: dimension,
                 font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
                 display: 'block',
                 margin: 0,
@@ -5577,6 +5601,9 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
                 }),
                 gridArea: '1/1',
                 borderRadius: borderRadiusSmall,
+                ...addImportantToEachRule({
+                    backgroundSize: 'cover',
+                }),
             },
             ...(!isLoading
                 ? {
@@ -5682,17 +5709,23 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
             }),
         },
         wrapper: {
+            ...textSmallStyle,
+            minWidth: minimumTouchTargetSize,
+            minHeight: minimumTouchTargetSize,
+            justifyContent: 'center',
+            alignItems: 'center',
             display: 'grid',
             gridArea: '1/1',
             alignSelf: 'flex-start', // in case label becomes multiline
+            height,
         },
         ...(isLoading && {
             spinner: {
                 position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
                 gridArea: '1/1',
                 placeSelf: 'center',
-                width: fontLineHeight,
-                height: fontLineHeight,
+                width: dimension,
+                height: dimension,
                 font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
                 pointerEvents: 'none',
             },
@@ -5702,8 +5735,8 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
             gridArea: '1/2',
             ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
         }, {
-            paddingTop: '2px', // compensate vertical alignment
-            paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
+            paddingTop,
+            paddingInlineStart,
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state, {
@@ -9860,6 +9893,8 @@ const getColors$1 = (checked, disabled, loading, theme) => {
 const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
+    const toggleTransitionOffsetLtr = `calc(${fontLineHeight} - 2px)`;
+    const toggleTransitionOffsetRtl = `calc((${fontLineHeight} - 2px) * -1)`;
     return getCss({
         '@global': {
             ':host': {
@@ -9883,11 +9918,12 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
                 display: 'flex',
                 alignItems: 'center',
                 flexShrink: 0,
-                width: '48px',
-                height: '28px',
-                boxSizing: 'border-box',
+                width: `calc(${fontLineHeight} * 2 - ${borderWidthBase}*2)`,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                boxSizing: 'content-box',
                 border: `${borderWidthBase} solid ${buttonBorderColor}`,
-                borderRadius: '14px',
+                borderRadius: `calc((${fontLineHeight} + ${borderWidthBase}*2) / 2)`,
                 backgroundColor: buttonBackgroundColor,
                 cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
@@ -9939,14 +9975,14 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            width: '20px',
-            height: '20px',
+            width: `calc(${fontLineHeight} - ${borderWidthBase}*2)`,
+            height: `calc(${fontLineHeight} - ${borderWidthBase}*2)`,
             borderRadius: '50%',
             backgroundColor: toggleBackgroundColor,
             transition: `${getTransition('background-color')}, ${getTransition('transform')}`,
-            transform: `translate3d(${checked ? '22px' : '2px'}, 0, 0)`,
+            transform: `translate3d(${checked ? toggleTransitionOffsetLtr : '2px'}, 0, 0)`,
             '&:dir(rtl)': {
-                transform: `translate3d(${checked ? '-22px' : '-2px'}, 0, 0)`,
+                transform: `translate3d(${checked ? toggleTransitionOffsetRtl : '-2px'}, 0, 0)`,
             },
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 backgroundColor: toggleBackgroundColorDark,
@@ -9954,8 +9990,8 @@ const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, lo
         },
         ...(loading && {
             spinner: {
-                width: '28px',
-                height: '28px',
+                width: `calc(${fontLineHeight} + ${borderWidthBase}*2)`,
+                height: `calc(${fontLineHeight} + ${borderWidthBase}*2)`,
             },
         }),
         // .loading

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

@@ -5,22 +5,22 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRCheckbox } from '../dsr-components/checkbox.mjs';
 
-const PCheckbox = forwardRef(({ checked = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
+const PCheckbox = forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-checkbox');
-    const propsToSync = [checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['checked', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCheckbox, { checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRCheckbox, { checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme: theme || useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -5,6 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRContentWrapper } from '../dsr-components/content-wrapper.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');

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

@@ -5,6 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRFieldsetWrapper } from '../dsr-components/fieldset-wrapper.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset-wrapper');

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flex-item.wrapper.mjs

@@ -5,6 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRFlexItem } from '../dsr-components/flex-item.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlexItem = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flex-item');

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

@@ -5,6 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRFlex } from '../dsr-components/flex.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlex = forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flex');

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/grid-item.wrapper.mjs

@@ -5,6 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRGridItem } from '../dsr-components/grid-item.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGridItem = forwardRef(({ offset = 0, size = 1, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-grid-item');

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

@@ -5,6 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRGrid } from '../dsr-components/grid.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-grid');

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

@@ -5,6 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRHeadline } from '../dsr-components/headline.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-headline');

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-social.wrapper.mjs

@@ -5,6 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkSocial } from '../dsr-components/link-social.mjs';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 const PLinkSocial = forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');

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

@@ -98,7 +98,7 @@ class DSRCheckbox extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const id = 'checkbox';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact, 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, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxs("div", { className: "wrapper", children: [jsx("input", { type: "checkbox", id: id, "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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 }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

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

@@ -101,7 +101,7 @@ class DSRPinCode extends Component {
         this.inputElements = [];
         const currentInputId = 'current-input';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.isWithinForm, this.props.length, 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, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(Array(this.props.length), (_, index) => (jsx("input", { ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
+        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, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(Array(this.props.length), (_, index) => (jsx("input", { ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
                                             , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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.isWithinForm && jsx("slot", { name: "internal-input" }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

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

@@ -99,7 +99,7 @@ class DSRSelectWrapperDropdown extends Component {
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$r(this.props.direction === 'auto'
             ? 'down'
             : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
                             jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsx("span", { 
                                 /* @ts-ignore */

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

@@ -97,7 +97,7 @@ class DSRSelectWrapper extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, 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", {}), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsx(PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), 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] }));
+        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, 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", {}), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsx(PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), 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/lib/components/checkbox.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PCheckboxProps = BaseProps & {
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      */
     checked?: boolean;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Marks the checkbox as disabled.
      */
@@ -67,6 +71,10 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      */
     checked?: boolean;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Marks the checkbox as disabled.
      */

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -16,6 +16,7 @@ export type PContentWrapperProps = BaseProps & {
      */
     width?: ContentWrapperWidth;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore

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

@@ -26,6 +26,7 @@ export type PFieldsetWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.

package/ssr/esm/lib/components/flex-item.wrapper.d.ts

@@ -26,6 +26,7 @@ export type PFlexItemProps = BaseProps & {
      */
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.

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

@@ -26,6 +26,7 @@ export type PFlexProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.

package/ssr/esm/lib/components/grid-item.wrapper.d.ts

@@ -10,6 +10,7 @@ export type PGridItemProps = BaseProps & {
      */
     size?: BreakpointCustomizable<GridItemSize>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.

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

@@ -15,6 +15,7 @@ export type PGridProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.

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

@@ -26,6 +26,7 @@ export type PHeadlineProps = BaseProps & {
      */
     variant?: HeadlineVariant;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 export declare const PHeadline: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.

package/ssr/esm/lib/components/link-social.wrapper.d.ts

@@ -34,6 +34,7 @@ export type PLinkSocialProps = BaseProps & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 export declare const PLinkSocial: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.

package/ssr/esm/lib/types.d.ts

@@ -560,6 +560,7 @@ declare const TYPOGRAPHY_ALIGNS: readonly [
     "start",
     "center",
     "end",
+    "inherit",
     "left",
     "right"
 ];