@porsche-design-system/components-react 3.14.0 → 3.15.0-rc.1

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

@@ -95,6 +95,7 @@ class DSRTextFieldWrapper extends react.Component {
     hasCounter;
     isCounterVisible;
     hasUnit;
+    eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
@@ -110,8 +111,8 @@ class DSRTextFieldWrapper extends react.Component {
         const isTime = utilsEntry.isType(type, 'time');
         utilsEntry.isWithinForm(this.props.host);
         const hasAction = utilsEntry.hasLocateAction(this.props.actionIcon);
-        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
+        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, 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 (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, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), hasCounter , (this.props.isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsxRuntime.jsx(buttonPure_wrapper.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" })) : utilsEntry.showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxRuntime.jsxs(buttonPure_wrapper.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

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

@@ -15,6 +15,7 @@ class DSRTextareaWrapper extends react.Component {
     counterElement;
     ariaElement;
     hasCounter;
+    eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -40,7 +40,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperties(target, props) {
@@ -3682,6 +3682,10 @@ debounce(800, (el, ariaElement) => {
     ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
 });
 
+const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
+
+const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3951,6 +3955,10 @@ const getSchemedHighContrastMediaQuery = (light, dark) => {
     };
 };
 
+const forcedColorsMediaQuery = (style) => {
+    return { '@media (forced-colors: active)': style };
+};
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
     plugins: [
@@ -7033,64 +7041,63 @@ const getComponentCss$C = (isOpen, backdrop, isFullscreen, hasDismissButton, has
     });
 };
 
-const modelSignatureHeight = 36;
-
-const colorToFilterLight = {
-    primary: filterLightPrimary,
-    'contrast-low': filterLightContrastLow,
-    'contrast-medium': filterLightContrastMedium,
-    'contrast-high': filterLightContrastHigh,
-};
-const colorToFilterDark = {
-    primary: filterDarkPrimary,
-    'contrast-low': filterDarkContrastLow,
-    'contrast-medium': filterDarkContrastMedium,
-    'contrast-high': filterDarkContrastHigh,
+const getSvgUrl = (model) => {
+    return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
-const colorToFilterMap = {
-    auto: colorToFilterLight,
-    light: colorToFilterLight,
-    dark: colorToFilterDark,
+
+const cssVariableWidth = '--p-model-signature-width';
+const cssVariableHeight = '--p-model-signature-height';
+const cssVariableColor = '--p-model-signature-color';
+const { canvasTextColor: canvasTextColor$1 } = getHighContrastColors();
+const getThemedColor = (color, themedColors) => {
+    const colorMap = {
+        primary: themedColors.primaryColor,
+        inherit: 'black',
+        'contrast-low': themedColors.contrastLowColor,
+        'contrast-medium': themedColors.contrastMediumColor,
+        'contrast-high': themedColors.contrastHighColor,
+    };
+    return colorMap[color];
 };
-const getComponentCss$B = (size, color, theme) => {
+const getComponentCss$B = (model, safeZone, size, color, theme) => {
+    const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
-    const isColorInherit = color === 'inherit';
     return getCss({
         '@global': {
             ':host': {
                 display: 'inline-block',
                 verticalAlign: 'top',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                // width + height style can't be !important atm to be backwards compatible with e.g. `<p-model-signature size="inherit" style="height: 50px"/>`
+                width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : width + 'px'})`,
+                height: `var(${cssVariableHeight},auto)`,
                 ...addImportantToEachRule({
-                    maxWidth: '100%',
-                    maxHeight: '100%',
-                    ...(!isSizeInherit && {
-                        width: 'inherit',
-                        height: 'inherit',
-                        // TODO: we need a width map of all signatures to ensure same fluid behavior like implemented fro crest + wordmark
-                        maxHeight: `${modelSignatureHeight}px`,
+                    mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
+                    aspectRatio: `${width} / ${safeZone ? 36 : height}`, // 36px is the max-height for SVG model signature creation
+                    background: `var(${cssVariableColor},${getThemedColor(color, getThemedColors(theme))})`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: `var(${cssVariableColor},${getThemedColor(color, getThemedColors('dark'))})`,
+                    }),
+                    ...forcedColorsMediaQuery({
+                        background: canvasTextColor$1,
                     }),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            '::slotted(:is(img,video))': addImportantToEachRule({
+                display: 'block', // prevents unintended bottom white-space
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+            }),
+            // the <img /> is only needed for a11y compliance because of alt text and to handle the fetch priority
             img: {
-                display: 'block',
-                maxWidth: '100%',
-                maxHeight: '100%',
-                pointerEvents: 'none', // prevents image drag
-                ...(!isColorInherit && {
-                    filter: colorToFilterMap[theme][color],
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        filter: colorToFilterMap.dark[color],
-                    }),
-                    ...(isHighContrastMode &&
-                        getSchemedHighContrastMediaQuery({
-                            filter: colorToFilterMap.light[color],
-                        }, {
-                            filter: colorToFilterMap.dark[color],
-                        })),
-                }),
-                ...(isSizeInherit && { height: size }),
+                position: 'absolute', // prevents unintended bottom white-space
+                opacity: 0,
+                width: '1px',
+                height: '1px',
             },
         },
     });

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -40,7 +40,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperties(target, props) {
@@ -3245,6 +3245,12 @@ const getListAriaAttributes = (label, isRequired, hasFilter, isOpen, multiple =
         }),
     };
 };
+const getOptionAriaAttributes = (isSelected, isDisabled, isHidden, hasValue) => ({
+    ...(!isHidden && { 'aria-selected': isSelected ? 'true' : 'false' }),
+    'aria-disabled': isDisabled ? 'true' : null,
+    'aria-hidden': isHidden ? 'true' : null,
+    'aria-label': hasValue ? null : 'Empty value',
+});
 
 const attributeMutationMap = new Map();
 hasWindow &&
@@ -3544,7 +3550,7 @@ const ICONS_MANIFEST = { "360": "360.min.d3b2874981886b5ebece31655f92a3ad.svg",
 
 const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
 
-const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.d92dc0fe91e67bd51120d91c5cd1eb2f.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
+const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
 
 // NOTE: handpicked selection of plugins from jss-preset-default
 createJss({
@@ -3733,9 +3739,8 @@ Object.entries(innerManifest[size])
     .join();
 const buildImgSrc = (innerManifest) => `${getCDNBaseURL()}/marque/${innerManifest.medium['2x'].png}`;
 const getSvgUrl = (model) => {
-    return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model]}`;
+    return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
-const modelSignatureHeight = 36;
 
 const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 const getSelectedOptions = (options) => options.filter((option) => option.selected);
@@ -3960,4 +3965,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getRole, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, modelSignatureHeight, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };

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

@@ -5,13 +5,13 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRModelSignature } from '../dsr-components/model-signature.mjs';
 
-const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
+const PModelSignature = forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme || useTheme()];
+    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'fetchPriority', 'lazy', 'model', 'safeZone', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,9 +22,10 @@ const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = '
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRModelSignature, { color, model, size, theme: theme || useTheme() })),
+                children: (jsx(DSRModelSignature, { color, fetchPriority, lazy, model, safeZone, size, theme: theme || useTheme(), children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         class: useMergedClass(elementRef, className),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout-navigation-item.mjs

@@ -86,11 +86,7 @@ class DSRFlyoutNavigationItem extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.open, this.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxs("div", { className: "scroller", 
-                                    // ignore needed for pipeline
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                    /* @ts-ignore */
-                                    inert: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxs("div", { className: "scroller", inert: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -84,11 +84,7 @@ class DSRFlyoutNavigation extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("dialog", { 
-                            // ignore needed for pipeline
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("dialog", { inert: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -96,11 +96,7 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasFooter, hasSubFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
-                            // ignore needed for pipeline
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "wrapper", ...(hasSubFooter && { onScroll: this.props.updateShadow }), children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" })] }, "header"), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer")), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }, "sub-footer"))] }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "wrapper", ...(hasSubFooter && { onScroll: this.props.updateShadow }), children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" })] }, "header"), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer")), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }, "sub-footer"))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -77,16 +77,6 @@ import { parseAndGetAriaAttributes } from '../../../../../../components/dist/uti
 
 class DSRModal extends Component {
     host;
-    scrollContainerEl; // Necessary to avoid stacking background bug in safari
-    focusedElBeforeOpen;
-    dismissBtn;
-    hasHeader;
-    hasFooter;
-    footer;
-    dialog;
-    get hasDismissButton() {
-        return this.props.disableCloseButton ? false : this.props.dismissButton;
-    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
@@ -99,11 +89,7 @@ class DSRModal extends Component {
                                         'aria-label': this.props.heading,
                                         'aria-hidden': !this.props.open,
                                         ...parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, 
-                                    // ignore needed for pipeline
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                    /* @ts-ignore */
-                                    inert: this.props.open ? null : '', children: [hasDismissButton && (jsx("div", { className: "controls", children: jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) })), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }))] }) }) })] }), this.props.children] }));
+                                    }), tabIndex: -1, inert: this.props.open ? null : '', children: [hasDismissButton && (jsx("div", { className: "controls", children: jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) }, "heading")), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,15 +1,19 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+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 { getModelSignatureCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getSvgUrl, modelSignatureHeight } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getSvgUrl } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRModelSignature extends Component {
     host;
     render() {
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(this.props.size, this.props.color, this.props.theme)));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: getSvgUrl(this.props.model), height: modelSignatureHeight, alt: this.props.model })] }) }));
+        splitChildren(this.props.children);
+        const fetchPriority = this.props.fetchPriority !== 'auto' ? this.props.fetchPriority : null;
+        const loading = this.props.lazy === true ? 'lazy' : null;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(this.props.model, this.props.safeZone, this.props.size, this.props.color, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchpriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '../components/accordion.wrapper.mjs';
 import '../components/banner.wrapper.mjs';
 import '../components/button.wrapper.mjs';
@@ -22,7 +22,7 @@ import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';
 import '../components/headline.wrapper.mjs';
-import '../components/icon.wrapper.mjs';
+import { PIcon } from '../components/icon.wrapper.mjs';
 import '../components/inline-notification.wrapper.mjs';
 import '../components/link.wrapper.mjs';
 import '../components/link-pure.wrapper.mjs';
@@ -73,14 +73,20 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getSelectOptionCss as getComponentCss$p } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getOptionAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const { theme = 'light', selected, highlighted, hidden } = this.props;
-        minifyCss(stripFocusAndHoverStyles(getComponentCss$p(theme)));
-        return (jsx(Fragment, {}));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$p(theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "option", className: {
+                                    option: true,
+                                    'option--selected': selected,
+                                    'option--highlighted': highlighted,
+                                    'option--disabled': this.props.disabled,
+                                }, ...getOptionAriaAttributes(selected, this.props.disabled, hidden, !!this.props.value), children: [jsx("slot", {}), selected && (jsx(PIcon, { className: "icon", "aria-hidden": "true", name: "check", color: this.props.disabled ? 'state-disabled' : 'primary', theme: theme }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -93,6 +93,7 @@ class DSRTextFieldWrapper extends Component {
     hasCounter;
     isCounterVisible;
     hasUnit;
+    eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
@@ -108,8 +109,8 @@ class DSRTextFieldWrapper extends Component {
         const isTime = isType(type, 'time');
         isWithinForm(this.props.host);
         const hasAction = hasLocateAction(this.props.actionIcon);
-        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         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$7(disabled, 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 && [
                                             // TODO: create an own component, which would fix SSR support too

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

@@ -13,6 +13,7 @@ class DSRTextareaWrapper extends Component {
     counterElement;
     ariaElement;
     hasCounter;
+    eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};

package/ssr/esm/lib/components/model-signature.wrapper.d.ts

@@ -1,16 +1,28 @@
 import { type HTMLAttributes } from 'react';
-import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
 export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the color of the component.
      */
     color?: ModelSignatureColor;
+    /**
+     * Defines the fetch priority of the model signature. In the end it is just a recommendation to the browser, but it defines the priority on its own.
+     */
+    fetchPriority?: ModelSignatureFetchPriority;
+    /**
+     * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
+     */
+    lazy?: boolean;
     /**
      * Adapts the model of the component.
      */
     model?: ModelSignatureModel;
     /**
-     * Adapts the size of the component.
+     * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
+     */
+    safeZone?: boolean;
+    /**
+     * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
     size?: ModelSignatureSize;
     /**
@@ -23,16 +35,30 @@ export declare const PModelSignature: import("react").ForwardRefExoticComponent<
      * Adapts the color of the component.
      */
     color?: ModelSignatureColor;
+    /**
+     * Defines the fetch priority of the model signature. In the end it is just a recommendation to the browser, but it defines the priority on its own.
+     */
+    fetchPriority?: ModelSignatureFetchPriority;
+    /**
+     * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
+     */
+    lazy?: boolean;
     /**
      * Adapts the model of the component.
      */
     model?: ModelSignatureModel;
     /**
-     * Adapts the size of the component.
+     * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
+     */
+    safeZone?: boolean;
+    /**
+     * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
     size?: ModelSignatureSize;
     /**
      * Adapts color depending on theme.
      */
     theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/modal.d.ts

@@ -1,13 +1,5 @@
 import { Component } from 'react';
 export declare class DSRModal extends Component<any> {
     host: HTMLElement;
-    private scrollContainerEl;
-    private focusedElBeforeOpen;
-    private dismissBtn;
-    private hasHeader;
-    private hasFooter;
-    private footer;
-    private dialog;
-    private get hasDismissButton();
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/text-field-wrapper.d.ts

@@ -15,5 +15,6 @@ export declare class DSRTextFieldWrapper extends Component<any> {
     private hasCounter;
     private isCounterVisible;
     private hasUnit;
+    private eventListener;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/textarea-wrapper.d.ts

@@ -5,5 +5,6 @@ export declare class DSRTextareaWrapper extends Component<any> {
     private counterElement;
     private ariaElement;
     private hasCounter;
+    private eventListener;
     render(): JSX.Element;
 }

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

@@ -1025,16 +1025,56 @@ declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
 ];
 export type LinkTileProductAspectRatio = Extract<TileAspectRatio, (typeof TILE_PRODUCT_ASPECT_RATIOS)[number]>;
 declare const MODEL_SIGNATURES_MANIFEST: {
-    "718": string;
-    "911": string;
-    boxster: string;
-    cayenne: string;
-    cayman: string;
-    macan: string;
-    panamera: string;
-    taycan: string;
-    "turbo-s": string;
-    turbo: string;
+    "718": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    "911": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    boxster: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    cayenne: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    cayman: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    macan: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    panamera: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    taycan: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    "turbo-s": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    turbo: {
+        src: string;
+        width: number;
+        height: number;
+    };
 };
 declare const MARQUE_VARIANTS: readonly [
     "75-years",
@@ -1059,6 +1099,12 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 export type ModalBackdrop = Backdrop;
+declare const MODEL_SIGNATURE_FETCH_PRIORITY: readonly [
+    "low",
+    "high",
+    "auto"
+];
+export type ModelSignatureFetchPriority = (typeof MODEL_SIGNATURE_FETCH_PRIORITY)[number];
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"