npm - @porsche-design-system/components-react - Versions diffs - 3.0.0-alpha.0 → 3.0.0-alpha.2 - Mend

@porsche-design-system/components-react 3.0.0-alpha.0 → 3.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/ssr/esm/components/dist/utils/esm/utils-entry.js CHANGED Viewed

@@ -91,7 +91,7 @@ const fontHyphenationStyle = {
 const fontLineHeight = 'calc(6px + 2.125ex)';
-const fontSizeTextXSmall = '.875rem';
+const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
 const fontSizeTextSmall = '1rem';
@@ -129,7 +129,9 @@ function getMediaQueryMin(min) {
     return `@media(min-width:${breakpoint[min]})`;
 }
-const gridGap = 'clamp(16px, 3.6vw, 36px)';
+const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
+const gridGap = spacingFluidMedium;
 const gridWidthMin = '320px';
@@ -164,43 +166,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
 const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
 const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
 const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
+const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
-const _gridColumnSpan = 'span';
-const _cssVariableInternalGridSafeZone = '--pds-internal-grid-safe-zone';
-const getColumns = (repeat) => `repeat(${repeat}, minmax(0, 1fr))`;
-const getOuterColumn = () => `minmax(0, calc(var(${_cssVariableInternalGridSafeZone}) - ${gridGap}))`;
+const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
+const column = 'minmax(0, 1fr)';
+const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
+const getColumnSpan = (span) => `span ${span}`;
 const getGridTemplateColumns = (layout) => layout === 'mobile'
-    ? `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`
-    : `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`;
+    ? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
+    : `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
 ({
-    [_cssVariableInternalGridSafeZone]: gridSafeZoneBase,
-    [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 3`,
-    [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 3`,
-    [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 2`,
-    [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 4`,
-    [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 3`,
+    [_cssVariableGridSafeZone]: gridSafeZoneBase,
+    [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
+    [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
+    [_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
+    [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
+    [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
     display: 'grid',
     gridGap,
     gridTemplateColumns: getGridTemplateColumns('mobile'),
     minWidth: gridWidthMin,
     maxWidth: gridWidthMax,
     margin: 0,
-    padding: `0 max(0px, (100% - ${gridWidthMax}) / 2)`,
+    padding: `0 calc(50% - ${gridWidthMax} / 2)`,
     boxSizing: 'content-box',
     [getMediaQueryMin('s')]: {
-        // TODO: we should define those css variables in global scope by getInitialStyles() partial to reduce repetitive css declaration,
-        //  on the other hand, it's not necessary anymore as soon as CSS Subgrid is supported in all major browsers.
-        //  In addition, it wouldn't work in case only utilities are used without getInitialStyles() partials.
-        //  So maybe, keep it as is.
-        [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 7`,
-        [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
-        [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
-        [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
-        [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
+        [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
+        [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
+        [_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
+        [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
+        [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
         gridTemplateColumns: getGridTemplateColumns('desktop'),
     },
     [getMediaQueryMin('xxl')]: {
-        [_cssVariableInternalGridSafeZone]: gridSafeZoneXXL,
+        [_cssVariableGridSafeZone]: gridSafeZoneXXL,
     },
 });
@@ -3677,7 +3676,7 @@ const themeDark = {
     hoverColor: 'rgba(126, 127, 130, 0.20)',
     hoverColorDarken: '#606163',
     activeColor: 'rgba(126, 127, 130, 0.20)',
-    focusColor: '#0A0AFF',
+    focusColor: '#1E5BEB',
     disabledColor: '#7E7F82',
     errorColor: '#CB3333',
     errorColorDarken: '#9A2727',
@@ -5565,6 +5564,10 @@ win.document || { head: {} };
 (win.HTMLElement || class {
 });
+const isThemeDark = (theme) => {
+    return theme === 'dark';
+};
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -5592,7 +5595,7 @@ const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
     return Object.assign(Object.assign({}, parseAndGetAriaAttributes(aria)), getButtonBaseAriaAttributes(isDisabled, isLoading));
 };
 getMediaQueryMin('s');
-getMediaQueryMin('xl');
+getMediaQueryMin('xxl');
 typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
 const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -5653,12 +5656,12 @@ const getHeadlineTagType = (host, variant, tag) => {
     }
 };
-const CDN_BASE_URL$1 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/icons';
+const CDN_BASE_URL$2 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/icons';
 const ICONS_MANIFEST = { "360": "360.min.5f2fcac02969bc425484fe8d80e5a1c9.svg", "accessibility": "accessibility.min.295a9d53a11c42212b8cce594982dfd2.svg", "active-cabin-ventilation": "active-cabin-ventilation.min.030c46def7a7397091d920b65bc0da3c.svg", "add": "add.min.8578a2d10c79a78e398e963b506b6cb5.svg", "adjust": "adjust.min.cdb89f5c161a4c82328fe60e72a88c59.svg", "arrow-double-down": "arrow-double-down.min.3b17923187ef2114d1f17da042fc97ca.svg", "arrow-double-left": "arrow-double-left.min.bba22e26f025c439b600bf74f0566465.svg", "arrow-double-right": "arrow-double-right.min.14f743d4adb5467fc0e95ac7f6426e1f.svg", "arrow-double-up": "arrow-double-up.min.8e3b3e31d227366f916c91dcb6e1b466.svg", "arrow-down": "arrow-down.min.84e69acc6554637cc373b8a4f50ba991.svg", "arrow-first": "arrow-first.min.bc51317ecf4953a664870ebab5059775.svg", "arrow-head-down": "arrow-head-down.min.454c189f4914925447670d0ae9bd2043.svg", "arrow-head-left": "arrow-head-left.min.aa2da7b4dbbb8a28c046592290054e94.svg", "arrow-head-right": "arrow-head-right.min.fb602ae5cb51970770570a70287e77e9.svg", "arrow-head-up": "arrow-head-up.min.2c282619214e4f998e1ac64a61b5545b.svg", "arrow-last": "arrow-last.min.72553c4284717d4961f8bcf8d51e0303.svg", "arrow-left": "arrow-left.min.24e8467ef0f8f206f228a3d8d443d70b.svg", "arrow-right": "arrow-right.min.8fb7b42d2d08d60f918602aa28475c0b.svg", "arrow-up": "arrow-up.min.0bc737f7f2cc56ef65c5d33472e014b0.svg", "augmented-reality": "augmented-reality.min.290ff033e35774fd093e1ab8ed07e10f.svg", "battery-empty": "battery-empty.min.8594e37d3e67a95b85eb9935f02e69cf.svg", "battery-full": "battery-full.min.4c75acb5a64a6dd3116ede7b1859a6d6.svg", "bell": "bell.min.d69dc9a220dec323e758ccbff756b5b5.svg", "bookmark": "bookmark.min.0cb177c79674593133f6d3d384c5df4b.svg", "broadcast": "broadcast.min.edbfac03d4afdc964d350f54df79c6f3.svg", "calculator": "calculator.min.2518729352d3709e488e71dcbf449247.svg", "calendar": "calendar.min.588fabe880634ece974291f5adfee50d.svg", "camera": "camera.min.10af3a4fac8c289775390534a50606d0.svg", "car": "car.min.4eeec04c87a14bb5d3d316eeeee0185b.svg", "car-battery": "car-battery.min.2a619bbd456ad531c922bf8f51b70977.svg", "card": "card.min.06394222c7ca5d6c7e783d6f86f030a6.svg", "charging-active": "charging-active.min.915410d626a52a3a76b6bf498491c255.svg", "charging-state": "charging-state.min.c5cb87ef2808f824f352a6ebd9b9d4a9.svg", "charging-station": "charging-station.min.211fcf0f9a9bb50b6e83482ee588dda9.svg", "chart": "chart.min.267e23c07f47784c186c5119b870df76.svg", "chat": "chat.min.a8a52d1b8b463ee0e5a3b0d812c9a40c.svg", "check": "check.min.0cb26d9a5ee1d217e5054f1ad60ae3b4.svg", "city": "city.min.a99b88b51adda8244a2c72953a2f4ab4.svg", "climate": "climate.min.5d52b2880552275d9032afc0fa2b7296.svg", "climate-control": "climate-control.min.152235d2bf2b7ec6e1a3c40e6971c446.svg", "clock": "clock.min.bcea9f182e1fe861ea6e765650f79b38.svg", "close": "close.min.eefab6ef191882058f9ed548bd5a467e.svg", "closed-caption": "closed-caption.min.b93ac43c07223fda14249d2279823f6a.svg", "co2-emission": "co2-emission.min.788590454baa0f6c52dfc99a55fe0b85.svg", "compare": "compare.min.657a924ca48bf93d200d2e6539fa8050.svg", "configurate": "configurate.min.2d137bc6f43ee03587188b571c97aacd.svg", "country-road": "country-road.min.3ee2c1be9d063f5d7c5772fcc7ae2568.svg", "cubic-capacity": "cubic-capacity.min.b5df863671bdf059bce19eddc2990698.svg", "delete": "delete.min.fd9788c3a0842a7bb1d737c6de1969d1.svg", "disable": "disable.min.c3d85d4ed9738c077d19e524775dbd56.svg", "document": "document.min.d2db26d7049ab2180361c7ce40f52d57.svg", "download": "download.min.d7c63bcbadf4dd5b14c3c79a438d93f3.svg", "duration": "duration.min.9405be759f64c8253076f7e55c80c336.svg", "edit": "edit.min.06bde2175fafb58233fa1ce6d3d00f83.svg", "email": "email.min.eb8ff02812a48c5098d3c40614e8d9d7.svg", "error-filled": "error-filled.min.35d7da7cb866bcfd3a25859f8cd2246b.svg", "exclamation": "exclamation.min.6ca46945978bd4eb2a40dc29766b1882.svg", "external": "external.min.b804bef35446f6b3cb379c121de3f13d.svg", "filter": "filter.min.60f168332c7550dfdf714ed0507877b0.svg", "flash": "flash.min.e5a6de1239300a6104076ee67aec42ca.svg", "fuel-station": "fuel-station.min.0155159076984cccdbfe854eb4da3720.svg", "garage": "garage.min.463577e6a1ffac592b5aa7bec9a82d39.svg", "gift": "gift.min.eeb1a5871a4008bcafd9495fe11ec9bc.svg", "globe": "globe.min.50fd2c886a822673902bd106efc73c3f.svg", "grid": "grid.min.c36c5015115005dcb9c948f07af0be80.svg", "highway": "highway.min.ea773dcf33a43fa8e82beae96c1222b7.svg", "home": "home.min.2bdc01bb7c9b39fa5ef5a81c8c3f9f49.svg", "horn": "horn.min.77105eb430a033a3ffdf21f9fecd32de.svg", "image": "image.min.851c64681e1950312a934a723ca04a85.svg", "increase": "increase.min.45bfe421e86192da37c8cca4917c10c2.svg", "information": "information.min.d387e44cc786ca3df3702f429518a1d9.svg", "information-filled": "information-filled.min.1055e842bb7d89c061ff1b5f47ed6169.svg", "key": "key.min.37b5e8ff9fda430f855f4b82bfd03485.svg", "leaf": "leaf.min.ea91b1d04ade4c49640e89ade35c9d90.svg", "leather": "leather.min.ef9e664d2fc3c28171fbd3d93b079503.svg", "light": "light.min.5fa3dd77ee9c63e28614c4c7c4a6d39c.svg", "list": "list.min.ecaeee96ec6cf2f8c9028ea404113a9e.svg", "locate": "locate.min.c28bdf292bbf297eb8109a272e2ffb91.svg", "lock": "lock.min.d258c21c7217cd1342307c45ecd5176e.svg", "lock-open": "lock-open.min.2ef427e273635e3aab7601b0fe92e86e.svg", "logo-baidu": "logo-baidu.min.a8eb57b32e616b21820d86882835fe20.svg", "logo-delicious": "logo-delicious.min.fc2927d4979ffaed1f23160091e0975e.svg", "logo-digg": "logo-digg.min.d7340b3f22cf4a22a8ac3b472c16e0e2.svg", "logo-facebook": "logo-facebook.min.0c2e020d0b61d37e76e6bab67e4d149e.svg", "logo-foursquare": "logo-foursquare.min.b2699d993d9d731892ba01874c0e023d.svg", "logo-gmail": "logo-gmail.min.0c14069d86c2ba0a42c726d96f0cae9c.svg", "logo-google": "logo-google.min.c1f3931d74e40e5cdc875236b7e674a1.svg", "logo-hatena": "logo-hatena.min.021834899da6e6f6a9dd963f4fc3337c.svg", "logo-instagram": "logo-instagram.min.2f8c578e2472dc13b2f0ec8d1b936442.svg", "logo-kaixin": "logo-kaixin.min.8fb995689a3442669df37b5f375922fc.svg", "logo-kakaotalk": "logo-kakaotalk.min.988146b4cd8bced103fd8b5a9be064d8.svg", "logo-linkedin": "logo-linkedin.min.e4848fd4b74404e504fd1a4d5a25b960.svg", "logo-naver": "logo-naver.min.13f97e4c3ad4898d169904caa609f2d0.svg", "logo-pinterest": "logo-pinterest.min.101284bac1d7cf468719fccf416069df.svg", "logo-qq": "logo-qq.min.5d89ab35e4e00e81deadaa2fe0d51a5d.svg", "logo-qq-share": "logo-qq-share.min.01da8f9d6665f4529f349f88b4fb0cfc.svg", "logo-reddit": "logo-reddit.min.40dd42ee1368dbc74611afee4d3c9850.svg", "logo-skyrock": "logo-skyrock.min.9440a0e4a088cdfbfcc99bc91010768a.svg", "logo-sohu": "logo-sohu.min.d7a030336d712a2b44982e65071cd2bc.svg", "logo-tecent": "logo-tecent.min.fd1ec329327f4cbf5706c393df66af9d.svg", "logo-telegram": "logo-telegram.min.624fca36dd6f6c5b64bce6e617372d77.svg", "logo-tiktok": "logo-tiktok.min.9c5ffad4c76353afaa99feca9e4f2f0a.svg", "logo-tumblr": "logo-tumblr.min.9b77d06b659cee9d5f45015c33c23967.svg", "logo-twitter": "logo-twitter.min.ac4d6b189cd2a47e4fac75bedb76b5bd.svg", "logo-viber": "logo-viber.min.330fbae7d2683b7910d828cbe864f738.svg", "logo-vk": "logo-vk.min.727ba204a194c8cf1b7fc389ac1db14b.svg", "logo-wechat": "logo-wechat.min.0392ff30f188aa9f52480e965142474a.svg", "logo-weibo": "logo-weibo.min.3ded49004baea42d85fa6fcb9d79ccb1.svg", "logo-whatsapp": "logo-whatsapp.min.02c83d3cbde89763eee8fc3bcab02257.svg", "logo-xing": "logo-xing.min.6a5f5fde119a841823d0ef05293b3454.svg", "logo-yahoo": "logo-yahoo.min.622e886e777c08cf80c31dc99ca13f1a.svg", "logo-youku": "logo-youku.min.d35a5283c6d3094748f565c729f56d9f.svg", "logo-youtube": "logo-youtube.min.59c939904cbec0c7793289eb5e68cb99.svg", "logout": "logout.min.aa54756e3aec12f347fdec0a2905a232.svg", "map": "map.min.643551801bfc27a93438c30ebe1d1387.svg", "menu-dots-horizontal": "menu-dots-horizontal.min.94e0804e3a5a30a577cab6296ad8d15d.svg", "menu-dots-vertical": "menu-dots-vertical.min.7ec3f5be33dd3459d7a9bed9fdbe22d3.svg", "menu-lines": "menu-lines.min.30ff09f6e2ce846286dd136279636097.svg", "minus": "minus.min.00cca11ec9ce4bd913abba2059c3f10b.svg", "mobile": "mobile.min.71d3c0d7fb4349383562cc233478f7fb.svg", "moon": "moon.min.5c447b4013210e7c7723ca4b6fdbfa9f.svg", "oil-can": "oil-can.min.31978141ee5529f97833027b1e03294a.svg", "parking-brake": "parking-brake.min.f03105e84898f1db02c6fcbdd008bfcf.svg", "parking-light": "parking-light.min.968af68684df1220b15cff6616e8376e.svg", "pause": "pause.min.dd29b256b73311abf1549ed16fe7a47b.svg", "phone": "phone.min.e1a58c454ffe074b30a5bb16c75ff23f.svg", "pin": "pin.min.c6ce5ea394fd9cf9dca80a592e2aeae4.svg", "play": "play.min.703fb2dbebac16ea91a6524914626ae2.svg", "plug": "plug.min.02d79b2702ac5c41020b54bd9eedf523.svg", "plus": "plus.min.dd34f71292a547080b9247a72c1adda2.svg", "preheating": "preheating.min.96ccdd3d24b0634ca820dc894894a34d.svg", "printer": "printer.min.bcd50214772a8fcc1d0f0ae1205610bf.svg", "purchase": "purchase.min.70535cff1a085154ab49ab958fe91aae.svg", "question": "question.min.df469b72598d2dbfb458c46430c0690a.svg", "racing-flag": "racing-flag.min.1aee1d177d44aaaca113a8b7a81db573.svg", "refresh": "refresh.min.36ced59c8e8d06980d6ac20cca8a9057.svg", "replay": "replay.min.d4f212bf3d5f8fe166d78dba57eeacde.svg", "reset": "reset.min.e1ce71f684b6e83b9ed8182389bd407f.svg", "route": "route.min.49f1935d2a563b150bb382eb56a04972.svg", "rss": "rss.min.eaf3873673fcbff72833e7a77f9510f8.svg", "save": "save.min.6506e50ad89aee223e85fe52242c232e.svg", "screen": "screen.min.c17978f44a7bf9f7d80f178fd2b7d116.svg", "search": "search.min.f2755d61c24b6ad037f51d65588be308.svg", "send": "send.min.544f2b90e562b8582808f735846b1351.svg", "share": "share.min.b7b59aa7085cc865735acfd940480234.svg", "shopping-bag": "shopping-bag.min.9d99682e614f5bbb9760c1a0272bd1e0.svg", "shopping-cart": "shopping-cart.min.05a6c651afb21246daba2e941e8366cc.svg", "sidelights": "sidelights.min.996d591ee87247eae32968bf0b588d1e.svg", "snowflake": "snowflake.min.cf85d1b3c62e223ffb80d8c838d4f0b8.svg", "sort": "sort.min.d90a6657569305b9b09b0c6997b5b915.svg", "stack": "stack.min.d36295767f8e2540bbbf60278114ca09.svg", "star": "star.min.d7445429f599f915661e6c57841ae339.svg", "steering-wheel": "steering-wheel.min.c632bf7d06f41d68f0a95d76615f3981.svg", "stopwatch": "stopwatch.min.c90f1fde0961349fe79c0b077f7b0d41.svg", "subtract": "subtract.min.bb9f2dcb0c81ac7f216f6fe2ba916c09.svg", "success": "success.min.4401a4715549bd7dfaaa4f54684b2088.svg", "success-filled": "success-filled.min.c9cb3c66aebf9c4f40b897064f901335.svg", "sun": "sun.min.a68eb6225965558e4498d3d38c33d52a.svg", "switch": "switch.min.ab6c8b55ab119d9bd5170a1893a75ed2.svg", "tablet": "tablet.min.60e7c4ef821bf610d2b2d5b06c7e88b7.svg", "tachometer": "tachometer.min.348f8c5eed7c61993a864ebcffee98bd.svg", "truck": "truck.min.43f91b0320003695d8804cf6a8a86da4.svg", "upload": "upload.min.cf3aaf8fb27e339d26133cbd6a5332ca.svg", "user": "user.min.0f8dcfbe34322e7968b4b23e11d963f0.svg", "user-group": "user-group.min.87f6ca16e7174b9a8d1894283a8ff1d4.svg", "user-manual": "user-manual.min.0b87e500e3d747e67be964c47a3ae312.svg", "video": "video.min.107dfd64c6fd7398dd48b94d61b2fe11.svg", "view": "view.min.cd78cae7309f44d941e9264047e3efa0.svg", "view-off": "view-off.min.e27746517bdb4c2c9ae5f025c7e74991.svg", "volume-off": "volume-off.min.711d24824df04d61c3129bbdcdbfa083.svg", "volume-up": "volume-up.min.0a2ebc984c6b9d2f53c747f9ba2028f1.svg", "warning": "warning.min.04529c502dddce98f0ae2eec0bfb3432.svg", "warning-filled": "warning-filled.min.ee8effcdc653f660043f909b6f0c938b.svg", "weight": "weight.min.47ef0b98ca8ed590dd7d6e6c3f1bcd46.svg", "wifi": "wifi.min.14540859e9241374bd9d0c89eb85667b.svg", "work": "work.min.d17986d8fcff6a5fcd5e9925e838fade.svg", "wrench": "wrench.min.90e402dc170fe83de23e2c11588ba037.svg", "wrenches": "wrenches.min.990b074555825a218e86fd35397fc88c.svg", "zoom-in": "zoom-in.min.22fa9d7ee8748debc801fe910f2d3d01.svg", "zoom-out": "zoom-out.min.9408a4dc5786ed5a783a729e58ab3d6d.svg" };
 const isUrl = (str) => (str === null || str === void 0 ? void 0 : str.length) > 0 && /(\/)/.test(str);
 const DEFAULT_ICON_NAME = 'arrow-right';
 const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
-    const cdnBaseUrl = CDN_BASE_URL$1 ;
+    const cdnBaseUrl = CDN_BASE_URL$2 ;
     if (iconNameOrSource === null) {
         return buildIconUrl(DEFAULT_ICON_NAME);
     }
@@ -5690,15 +5693,24 @@ const getContentAriaAttributes = (state, labelId, descriptionId) => {
     };
 };
-const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
+const CDN_BASE_URL$1 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
 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" } } } };
-const cdnBaseUrl = CDN_BASE_URL ;
+const cdnBaseUrl = CDN_BASE_URL$1 ;
 const getInnerManifest = (trademark) => MARQUES_MANIFEST[`porscheMarque${trademark ? 'Trademark' : ''}`];
 const buildSrcSet = (innerManifest, size, format) =>
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 Object.entries(innerManifest[size])
     .map(([resolution, fileName]) => `${cdnBaseUrl}/${fileName[format]} ${resolution}`)
     .join();
+const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/model-signatures';
+const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.64611f93dc2fc9e234e25b88cca12593.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 getSvgUrl = (model) => {
+    const cdnBaseUrl = CDN_BASE_URL
+        ;
+    return `${cdnBaseUrl}/${MODEL_SIGNATURES_MANIFEST[model]}`;
+};
 // TODO: create enum
 const itemTypes = {
     PAGE: 'PAGE',
@@ -5930,11 +5942,12 @@ const isSortable = (active, direction) => {
 };
 const getThemeForIcon = (color, theme) => {
-    return ['neutral-contrast-high', 'primary'].includes(color) ? (theme === 'light' ? 'dark' : 'light') : theme;
+    return ['neutral-contrast-high', 'primary'].includes(color) ? (isThemeDark(theme) ? 'light' : 'dark') : theme;
 };
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
 const isWithinForm = (host) => !!getClosestHTMLElement(host, 'form');
 const hasLocateAction = (icon) => icon === 'locate';
+const isListTypeOrdered = (listType) => listType === 'ordered';
 const TEXT_TAGS = ['p', 'span', 'div', 'address', 'blockquote', 'figcaption', 'cite', 'time', 'legend'];
 const getTextTagType = (host, tag) => {
@@ -5946,4 +5959,4 @@ const getTextTagType = (host, tag) => {
     }
 };
-export { BREAKPOINTS, DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, attributeMutationMap, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getStepperHorizontalIconName, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isDisabledOrLoading, isResizeObserverDefined, isScrollable, isSortable, isStateCompleteOrWarning, isType, isUrl, isWithinForm, itemTypes, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };
+export { BREAKPOINTS, DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, TEXT_TAGS, attributeMutationMap, buildIconUrl, buildSrcSet, cdnBaseUrl, childrenMutationMap, createPaginationModel, createRange, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getLinkButtonThemeForIcon, getRole, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isDisabledOrLoading, isListTypeOrdered, isResizeObserverDefined, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isType, isUrl, isWithinForm, itemTypes, parseAndGetAriaAttributes, parseJSONAttribute, resizeMap, supportsConstructableStylesheets, tempDiv, tempIcon, tempLabel };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.js CHANGED Viewed

@@ -4,14 +4,14 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRCarousel } from '../dsr-components/carousel.js';
-const PCarousel = forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
+    const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PCarousel = forwardRef(({ description, disablePagination = false, heading,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCarousel, { ...{ description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent, children } })),
+                children: (jsx(DSRCarousel, { ...{ alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent, children } })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.js CHANGED Viewed

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/divider.wrapper.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRDivider } from '../dsr-components/divider.js';
-const PDivider = forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-divider');
     const propsToSync = [color, orientation, theme];

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/model-signature.wrapper.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRModelSignature } from '../dsr-components/model-signature.js';
+const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-model-signature');
+    const propsToSync = [color, model, size, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRModelSignature, { ...{ color, model, size, theme } })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+export { PModelSignature };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.js CHANGED Viewed

@@ -4,9 +4,7 @@ import { usePrefix, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 import { DSRTextListItem } from '../dsr-components/text-list-item.js';
-const PTextListItem = forwardRef((
-// @ts-ignore
-{ className, children, listType = 'unordered', orderType = 'numbered', ...rest }, ref) => {
+const PTextListItem = forwardRef(({ className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text-list-item');
     // @ts-ignore
@@ -19,7 +17,7 @@ const PTextListItem = forwardRef((
         ...(!process.browser
             ? {
                 ...{ "role": "listitem" },
-                children: (jsx(DSRTextListItem, { ...{ listType, orderType, children } })),
+                children: (jsx(DSRTextListItem, { ...{ children } })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/link-social.wrapper.js';
 import '../components/link-tile.wrapper.js';
 import '../components/marque.wrapper.js';
 import '../components/modal.wrapper.js';
+import '../components/model-signature.wrapper.js';
 import '../components/pagination.wrapper.js';
 import '../components/popover.wrapper.js';
 import '../components/radio-button-wrapper.wrapper.js';
@@ -57,7 +58,7 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getAccordionCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getAccordionCss as getComponentCss$T } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 class DSRAccordion extends Component {
     render() {
@@ -66,7 +67,7 @@ class DSRAccordion extends Component {
         const contentId = 'accordion-panel';
         const Heading = this.props.tag;
         // TODO: why .root div for a condition border-bottom style? could be applied on :host directly
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$T(this.props.size, this.props.compact, this.props.open, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "inherit", "aria-hidden": "true" })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.js CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/link-social.wrapper.js';
 import '../components/link-tile.wrapper.js';
 import '../components/marque.wrapper.js';
 import '../components/modal.wrapper.js';
+import '../components/model-signature.wrapper.js';
 import '../components/pagination.wrapper.js';
 import '../components/popover.wrapper.js';
 import '../components/radio-button-wrapper.wrapper.js';
@@ -57,12 +58,12 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getBannerCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getBannerCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 class DSRBanner extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.width)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.width)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PInlineNotification, { className: "root", state: this.props.state, persistent: this.props.persistent, theme: this.props.theme, children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0 && jsx("slot", { name: "title", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-group.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getButtonGroupCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getButtonGroupCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 class DSRButtonGroup extends Component {
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.direction)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/link-social.wrapper.js';
 import '../components/link-tile.wrapper.js';
 import '../components/marque.wrapper.js';
 import '../components/modal.wrapper.js';
+import '../components/model-signature.wrapper.js';
 import '../components/pagination.wrapper.js';
 import '../components/popover.wrapper.js';
 import '../components/radio-button-wrapper.wrapper.js';
@@ -57,7 +58,7 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getButtonPureCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getButtonPureCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 class DSRButtonPure extends Component {
@@ -73,8 +74,8 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'contrast-medium' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/link-social.wrapper.js';
 import '../components/link-tile.wrapper.js';
 import '../components/marque.wrapper.js';
 import '../components/modal.wrapper.js';
+import '../components/model-signature.wrapper.js';
 import '../components/pagination.wrapper.js';
 import '../components/popover.wrapper.js';
 import '../components/radio-button-wrapper.wrapper.js';
@@ -57,14 +58,14 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getButtonCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getButtonCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 import { getButtonAriaAttributes, getLinkButtonThemeForIcon, hasVisibleIcon, isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 class DSRButton extends Component {
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'contrast-medium' : 'primary', theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'disabled' : 'primary', theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/link-social.wrapper.js';
 import '../components/link-tile.wrapper.js';
 import '../components/marque.wrapper.js';
 import '../components/modal.wrapper.js';
+import '../components/model-signature.wrapper.js';
 import '../components/pagination.wrapper.js';
 import '../components/popover.wrapper.js';
 import '../components/radio-button-wrapper.wrapper.js';
@@ -57,7 +58,7 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getCarouselCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getCarouselCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 class DSRCarousel extends Component {
     constructor() {
@@ -74,9 +75,9 @@ class DSRCarousel extends Component {
             theme: this.props.theme,
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$N(this.props.wrapContent, this.props.disablePagination, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.width, this.props.disablePagination, this.props.alignHeader, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
-                                            ((this.props.description && jsx("p", { children: this.props.description })) || jsx("slot", { name: "description" })), jsxs("div", { className: "nav", children: [jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }), jsx(PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsx("div", { className: "pagination" })] })] }), this.props.children] }));
+                                            ((this.props.description && jsx("p", { children: this.props.description })) || jsx("slot", { name: "description" })), jsxs("div", { className: "nav", children: [jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }), jsx(PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), !this.props.disablePagination && jsx("div", { className: "pagination" })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.js CHANGED Viewed

@@ -3,14 +3,14 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getCheckboxWrapperCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getCheckboxWrapperCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 import { StateMessage } from './state-message.js';
 class DSRCheckboxWrapper extends Component {
     render() {
         var _a;
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled), this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$N(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {})] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/content-wrapper.js CHANGED Viewed

@@ -3,13 +3,13 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getContentWrapperCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getContentWrapperCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRContentWrapper extends Component {
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.width)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.width)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/display.js CHANGED Viewed

@@ -3,14 +3,14 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getDisplayCss as getComponentCss$K } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getDisplayCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 import { getDisplayTagType } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 class DSRDisplay extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = getDisplayTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$K(this.props.size, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.size, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx(TagType, { className: "root", children: jsx("slot", {}) }) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/divider.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getDividerCss as getComponentCss$J } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getDividerCss as getComponentCss$K } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 class DSRDivider extends Component {
     render() {
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.color, this.props.orientation, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$K(this.props.color, this.props.orientation, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("hr", {})] }) }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fieldset-wrapper.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getFieldsetWrapperCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getFieldsetWrapperCss as getComponentCss$J } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 import { StateMessage } from './state-message.js';
 import { Required } from './required.js';
@@ -12,7 +12,7 @@ class DSRFieldsetWrapper extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const messageId = 'message';
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), hasMessageValue && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flex-item.js CHANGED Viewed

@@ -3,13 +3,13 @@ import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
-import { getFlexItemCss as getComponentCss$H } from '../../../../../../components/dist/styles/esm/styles-entry.js';
+import { getFlexItemCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 class DSRFlexItem extends Component {
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$H(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
     }
 }