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

package/CHANGELOG.md

@@ -14,6 +14,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.0-rc.1] - 2024-04-17
+
+#### Added 
+
+- Partials: `getMetaTagsAndIconLinks`, `getComponentChunkLinks`, `getIconLinks` and `getFontLinks` support new format option `js`
+  ([#3179](https://github.com/porsche-design-system/porsche-design-system/pull/3179))
+
+### [3.15.0-rc.0] - 2024-04-05
+
+#### Changed
+
+- `Model Signature`: Enabling the use of hex colors, CSS gradients, CSS image and video masks. In addition, the size was
+  slightly adjusted. ([#3153](https://github.com/porsche-design-system/porsche-design-system/pull/3153))
+
+### Fixed
+
+- `Modal`: Missing box-shadow on sticky footer when slotted content changes
+  ([#3154](https://github.com/porsche-design-system/porsche-design-system/pull/3154))
+- `Select`: Hydration error in Next.js when using slotted `img`
+  ([#3162](https://github.com/porsche-design-system/porsche-design-system/pull/3162))
+- `Text Field Wrapper`, `Textarea Wrapper`: Dynamic changes of `showCounter` and `maxLength` are reflected. The counter
+  element dynamically adjusts to changes in the input value accurately.
+  ([#3084](https://github.com/porsche-design-system/porsche-design-system/pull/3084))
+
 ### [3.14.0] - 2024-03-25
 
 ### [3.14.0-rc.0] - 2024-03-25

package/cjs/lib/components/model-signature.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
+const PModelSignature = react.forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme || hooks.useTheme()];
+    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || hooks.useTheme()];
     hooks.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);
     const props = {
         ...rest,

package/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?: "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | undefined;
+    /**
+     * 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?: "auto" | "low" | "high" | undefined;
+    /**
+     * 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 | undefined;
     /**
      * Adapts the model of the component.
      */
     model?: "718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo" | undefined;
     /**
-     * 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 | undefined;
+    /**
+     * 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?: "inherit" | "small" | undefined;
     /**
      * Adapts color depending on theme.
      */
     theme?: "light" | "dark" | "auto" | undefined;
+} & {
+    children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/model-signature.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.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, ...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);
     const props = {
         ...rest,

package/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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.14.0",
+  "version": "3.15.0-rc.1",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.14.0"
+    "@porsche-design-system/components-js": "3.15.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -42,7 +42,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) {
@@ -3684,6 +3684,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',
@@ -3953,6 +3957,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: [
@@ -7035,64 +7043,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/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -42,7 +42,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) {
@@ -3247,6 +3247,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 &&
@@ -3546,7 +3552,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({
@@ -3735,9 +3741,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);
@@ -3998,6 +4003,7 @@ exports.getIconColor = getIconColor;
 exports.getInlineNotificationIconName = getInlineNotificationIconName;
 exports.getInnerManifest = getInnerManifest;
 exports.getListAriaAttributes = getListAriaAttributes;
+exports.getOptionAriaAttributes = getOptionAriaAttributes;
 exports.getRole = getRole;
 exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getSelectedOptionString = getSelectedOptionString;
@@ -4028,7 +4034,6 @@ exports.isTouchDevice = isTouchDevice;
 exports.isType = isType;
 exports.isUrl = isUrl;
 exports.isWithinForm = isWithinForm;
-exports.modelSignatureHeight = modelSignatureHeight;
 exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;

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

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var modelSignature = require('../dsr-components/model-signature.cjs');
 
-const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
+const PModelSignature = react.forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme || hooks.useTheme()];
+    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || hooks.useTheme()];
     hooks.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) {
@@ -24,9 +24,10 @@ const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', si
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(modelSignature.DSRModelSignature, { color, model, size, theme: theme || hooks.useTheme() })),
+                children: (jsxRuntime.jsx(modelSignature.DSRModelSignature, { color, fetchPriority, lazy, model, safeZone, size, theme: theme || hooks.useTheme(), children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         class: hooks.useMergedClass(elementRef, className),

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

@@ -88,11 +88,7 @@ class DSRFlyoutNavigationItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationItemCss(this.open, this.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.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 }), jsxRuntime.jsxs("div", { className: "scroller", 
-                                    // ignore needed for pipeline
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                    /* @ts-ignore */
-                                    inert: this.open ? null : '', children: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsxRuntime.jsx("h2", { className: "heading", children: this.props.label })] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) })] })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.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 }), jsxRuntime.jsxs("div", { className: "scroller", inert: this.open ? null : '', children: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsxRuntime.jsx("h2", { className: "heading", children: this.props.label })] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) })] })] })] }), this.props.children] }));
     }
 }
 

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

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

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

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

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

@@ -79,16 +79,6 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 class DSRModal extends react.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.splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
@@ -101,11 +91,7 @@ class DSRModal extends react.Component {
                                         'aria-label': this.props.heading,
                                         'aria-hidden': !this.props.open,
                                         ...utilsEntry.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 && (jsxRuntime.jsx("div", { className: "controls", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) })), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }))] }) }) })] }), this.props.children] }));
+                                    }), tabIndex: -1, inert: this.props.open ? null : '', children: [hasDismissButton && (jsxRuntime.jsx("div", { className: "controls", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) }, "heading")), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
@@ -10,8 +11,11 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 class DSRModelSignature extends react.Component {
     host;
     render() {
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModelSignatureCss(this.props.size, this.props.color, 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("img", { src: utilsEntry.getSvgUrl(this.props.model), height: utilsEntry.modelSignatureHeight, alt: this.props.model })] }) }));
+        splitChildren.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModelSignatureCss(this.props.model, this.props.safeZone, this.props.size, this.props.color, 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(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("img", { fetchpriority: fetchPriority, loading: loading, src: utilsEntry.getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }
 

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

@@ -24,7 +24,7 @@ require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
 require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
+var icon_wrapper = require('../components/icon.wrapper.cjs');
 require('../components/inline-notification.wrapper.cjs');
 require('../components/link.wrapper.cjs');
 require('../components/link-pure.wrapper.cjs');
@@ -75,14 +75,20 @@ var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
 class DSRSelectOption extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const { theme = 'light', selected, highlighted, hidden } = this.props;
-        minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectOptionCss(theme)));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectOptionCss(theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "option", className: {
+                                    option: true,
+                                    'option--selected': selected,
+                                    'option--highlighted': highlighted,
+                                    'option--disabled': this.props.disabled,
+                                }, ...utilsEntry.getOptionAriaAttributes(selected, this.props.disabled, hidden, !!this.props.value), children: [jsxRuntime.jsx("slot", {}), selected && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", "aria-hidden": "true", name: "check", color: this.props.disabled ? 'state-disabled' : 'primary', theme: theme }))] }) })] }), this.props.children] }));
     }
 }