@porsche-design-system/components-react 3.10.0 → 3.11.0

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 (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/package.json +2 -2
  3. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +42 -14
  4. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs +2 -5
  5. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +42 -14
  6. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs +2 -5
package/CHANGELOG.md CHANGED
@@ -14,6 +14,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
14
14
 
15
15
  ### [Unreleased]
16
16
 
17
+ ### [3.11.0] - 2024-01-30
18
+
19
+ ### [3.11.0-rc.0] - 2024-01-30
20
+
21
+ #### Fixed
22
+
23
+ - `Carousel`: Carousel does not work with single pointer event on smaller touch devices
24
+ ([#3003](https://github.com/porsche-design-system/porsche-design-system/pull/3003))
25
+ - `Carousel`: `Each child in a list should have a unique "key" prop` warning in Next.js SSR context
26
+ ([#3001](https://github.com/porsche-design-system/porsche-design-system/pull/3001))
27
+
28
+ #### Changed
29
+
30
+ - Scroll-lock used in `Flyout`, `Flyout Navigation` and `Modal` is based on `body { overflow: hidden; }` for all devices
31
+ ([#3013](https://github.com/porsche-design-system/porsche-design-system/pull/3013))
32
+ - `Toast`: Alignment reflects RTL (right-to-left) mode
33
+ ([#3010](https://github.com/porsche-design-system/porsche-design-system/pull/3010))
34
+ - `Carousel`: Pagination can be used for navigation & pagination has more spacing on touch devices
35
+ ([#3003](https://github.com/porsche-design-system/porsche-design-system/pull/3003))
36
+
17
37
  ### [3.10.0] - 2024-01-17
18
38
 
19
39
  ### [3.10.0-rc.5] - 2024-01-16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "3.10.0",
3
+ "version": "3.11.0",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "porsche",
@@ -17,7 +17,7 @@
17
17
  "license": "SEE LICENSE IN LICENSE",
18
18
  "homepage": "https://designsystem.porsche.com",
19
19
  "dependencies": {
20
- "@porsche-design-system/components-js": "3.10.0"
20
+ "@porsche-design-system/components-js": "3.11.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=17.0.0 <19.0.0",
package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs CHANGED
@@ -4819,17 +4819,26 @@ const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loadi
4819
4819
  }));
4820
4820
  };
4821
4821
 
4822
+ const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
4822
4823
  const carouselTransitionDuration = motionDurationModerate;
4823
- const bulletActiveClass = 'bullet--active';
4824
4824
  const paginationInfiniteStartCaseClass = 'pagination--infinite';
4825
+ const bulletClass = 'bullet';
4826
+ const bulletActiveClass = 'bullet--active';
4825
4827
  const bulletInfiniteClass = 'bullet--infinite';
4828
+ const paginationVisibleBulletCount = 5;
4826
4829
  const paginationBulletSize = '8px';
4827
4830
  const paginationInfiniteBulletSize = '4px';
4828
4831
  const paginationActiveBulletSize = '20px';
4832
+ const paginationGap = '8px';
4833
+ const paginationWidth = `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * ${paginationVisibleBulletCount - 1} + ${paginationGap} * ${paginationVisibleBulletCount - 1})`; // Width for one active bullet + width of inactive bullets + spacing
4834
+ const paginationInset = '8px'; // Used to increase clickable area on touch devices
4835
+ const paginationGapLarge = '16px';
4836
+ const paginationWidthLarge = `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * ${paginationVisibleBulletCount - 1} + ${paginationGapLarge} * ${paginationVisibleBulletCount - 1} + 2 * ${paginationInset})`; // Width for one active bullet + width of inactive bullets + spacing
4829
4837
  const selectorHeading = 'h2,::slotted([slot="heading"])';
4830
4838
  const selectorDescription = 'p,::slotted([slot="description"])';
4831
4839
  const mediaQueryS = getMediaQueryMin('s');
4832
4840
  const mediaQueryXXL = getMediaQueryMin('xxl');
4841
+ const mediaQueryPointerCoarse = '@media (pointer: coarse)';
4833
4842
  const spacingMap = {
4834
4843
  basic: gridBasicOffset,
4835
4844
  extended: gridExtendedOffset,
@@ -4924,6 +4933,7 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4924
4933
  gap: spacingStaticXSmall,
4925
4934
  alignSelf: 'flex-start', // relevant in case slot="header" becomes higher than nav group
4926
4935
  },
4936
+ filter: `var(${cssVariablePrevNextFilter}, none)`,
4927
4937
  },
4928
4938
  btn: {
4929
4939
  padding: spacingStaticSmall,
@@ -4979,8 +4989,12 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4979
4989
  })),
4980
4990
  position: 'relative',
4981
4991
  justifyContent: isInfinitePagination ? 'flex-start' : 'center',
4982
- width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`, // Width for five bullets (one active + spacing)
4983
- left: 'calc(50% - 42px)',
4992
+ width: paginationWidth,
4993
+ left: `calc(50% - (${paginationWidth}) / 2)`,
4994
+ [mediaQueryPointerCoarse]: {
4995
+ width: paginationWidthLarge,
4996
+ left: `calc(50% - ${paginationWidthLarge} / 2)`,
4997
+ },
4984
4998
  overflowX: 'hidden',
4985
4999
  },
4986
5000
  pagination: {
@@ -4988,10 +5002,23 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4988
5002
  alignItems: 'center',
4989
5003
  width: 'fit-content',
4990
5004
  height: paginationBulletSize, // Needed to avoid jumping when rewinding dynamically added slides
4991
- gap: spacingStaticSmall,
5005
+ gap: paginationGap,
5006
+ [mediaQueryPointerCoarse]: {
5007
+ height: `calc(${paginationBulletSize} + 2 * ${paginationInset})`,
5008
+ gap: paginationGapLarge,
5009
+ },
4992
5010
  transition: `transform ${carouselTransitionDuration}`,
4993
5011
  },
4994
- bullet: {
5012
+ [bulletClass]: {
5013
+ // Increase clickable area on touch devices
5014
+ [mediaQueryPointerCoarse]: {
5015
+ '&::before': {
5016
+ content: '""',
5017
+ position: 'absolute',
5018
+ inset: `-${paginationInset}`,
5019
+ },
5020
+ position: 'relative',
5021
+ },
4995
5022
  borderRadius: borderRadiusSmall,
4996
5023
  ...(isHighContrastMode
4997
5024
  ? {
@@ -5014,10 +5041,13 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5014
5041
  height: paginationBulletSize,
5015
5042
  transition: `background-color ${carouselTransitionDuration}, width ${carouselTransitionDuration}`,
5016
5043
  }),
5044
+ ...hoverMediaQuery({
5045
+ cursor: 'pointer',
5046
+ }),
5017
5047
  },
5018
5048
  ...(isInfinitePagination && {
5019
5049
  [paginationInfiniteStartCaseClass]: {
5020
- '& > .bullet:nth-child(-n+4)': {
5050
+ [`& > .${bulletClass}:nth-child(-n+4)`]: {
5021
5051
  width: paginationBulletSize,
5022
5052
  height: paginationBulletSize,
5023
5053
  },
@@ -5028,11 +5058,11 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5028
5058
  width: paginationInfiniteBulletSize,
5029
5059
  height: paginationInfiniteBulletSize,
5030
5060
  }),
5031
- '& ~ span': {
5061
+ [`& ~ .${bulletClass}`]: {
5032
5062
  width: paginationBulletSize,
5033
5063
  height: paginationBulletSize,
5034
5064
  },
5035
- [`& ~ .${bulletInfiniteClass} ~ span`]: {
5065
+ [`& ~ .${bulletInfiniteClass} ~ .${bulletClass}`]: {
5036
5066
  width: '0px',
5037
5067
  height: '0px',
5038
5068
  },
@@ -5052,11 +5082,11 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5052
5082
  height: paginationBulletSize,
5053
5083
  width: addImportantToRule(paginationActiveBulletSize),
5054
5084
  ...(isInfinitePagination && {
5055
- '& ~ span': {
5085
+ [`& ~ .${bulletClass}`]: {
5056
5086
  width: paginationBulletSize,
5057
5087
  height: paginationBulletSize,
5058
5088
  },
5059
- [`& ~ .${bulletInfiniteClass} ~ span`]: {
5089
+ [`& ~ .${bulletInfiniteClass} ~ .${bulletClass}`]: {
5060
5090
  width: '0px',
5061
5091
  height: '0px',
5062
5092
  },
@@ -9995,16 +10025,14 @@ const getComponentCss$1 = () => {
9995
10025
  '@global': {
9996
10026
  ':host': addImportantToEachRule({
9997
10027
  position: 'fixed',
9998
- left: gridExtendedOffsetBase,
9999
- right: gridExtendedOffsetBase,
10028
+ insetInline: gridExtendedOffsetBase,
10000
10029
  // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
10001
10030
  // In addition, a public css variable can be passed to overwrite the default position.
10002
10031
  [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
10003
10032
  bottom: `var(${cssVariablePositionBottomInternal})`,
10004
10033
  zIndex: TOAST_Z_INDEX,
10005
10034
  [getMediaQueryMin('s')]: {
10006
- left: '64px',
10007
- right: 'auto',
10035
+ insetInline: '64px auto',
10008
10036
  maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
10009
10037
  [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
10010
10038
  bottom: `var(${cssVariablePositionBottomInternal})`,
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs CHANGED
@@ -110,13 +110,10 @@ class DSRCarousel extends react.Component {
110
110
  ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
111
111
  : !this.props.disablePagination
112
112
  : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
113
- 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.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsxRuntime.jsx("h2", { id: headingId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, "aria-describedby": this.props.heading ? headingId : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && [
114
- jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }),
115
- jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }),
116
- ]] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
113
+ 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.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsxRuntime.jsx("h2", { id: headingId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, "aria-describedby": this.props.heading ? headingId : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
117
114
  'aria-label': this.props.heading,
118
115
  ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
119
- }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
116
+ }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
120
117
  }
121
118
  }
122
119
 
package/ssr/esm/components/dist/styles/esm/styles-entry.mjs CHANGED
@@ -4817,17 +4817,26 @@ const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loadi
4817
4817
  }));
4818
4818
  };
4819
4819
 
4820
+ const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
4820
4821
  const carouselTransitionDuration = motionDurationModerate;
4821
- const bulletActiveClass = 'bullet--active';
4822
4822
  const paginationInfiniteStartCaseClass = 'pagination--infinite';
4823
+ const bulletClass = 'bullet';
4824
+ const bulletActiveClass = 'bullet--active';
4823
4825
  const bulletInfiniteClass = 'bullet--infinite';
4826
+ const paginationVisibleBulletCount = 5;
4824
4827
  const paginationBulletSize = '8px';
4825
4828
  const paginationInfiniteBulletSize = '4px';
4826
4829
  const paginationActiveBulletSize = '20px';
4830
+ const paginationGap = '8px';
4831
+ const paginationWidth = `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * ${paginationVisibleBulletCount - 1} + ${paginationGap} * ${paginationVisibleBulletCount - 1})`; // Width for one active bullet + width of inactive bullets + spacing
4832
+ const paginationInset = '8px'; // Used to increase clickable area on touch devices
4833
+ const paginationGapLarge = '16px';
4834
+ const paginationWidthLarge = `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * ${paginationVisibleBulletCount - 1} + ${paginationGapLarge} * ${paginationVisibleBulletCount - 1} + 2 * ${paginationInset})`; // Width for one active bullet + width of inactive bullets + spacing
4827
4835
  const selectorHeading = 'h2,::slotted([slot="heading"])';
4828
4836
  const selectorDescription = 'p,::slotted([slot="description"])';
4829
4837
  const mediaQueryS = getMediaQueryMin('s');
4830
4838
  const mediaQueryXXL = getMediaQueryMin('xxl');
4839
+ const mediaQueryPointerCoarse = '@media (pointer: coarse)';
4831
4840
  const spacingMap = {
4832
4841
  basic: gridBasicOffset,
4833
4842
  extended: gridExtendedOffset,
@@ -4922,6 +4931,7 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4922
4931
  gap: spacingStaticXSmall,
4923
4932
  alignSelf: 'flex-start', // relevant in case slot="header" becomes higher than nav group
4924
4933
  },
4934
+ filter: `var(${cssVariablePrevNextFilter}, none)`,
4925
4935
  },
4926
4936
  btn: {
4927
4937
  padding: spacingStaticSmall,
@@ -4977,8 +4987,12 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4977
4987
  })),
4978
4988
  position: 'relative',
4979
4989
  justifyContent: isInfinitePagination ? 'flex-start' : 'center',
4980
- width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`, // Width for five bullets (one active + spacing)
4981
- left: 'calc(50% - 42px)',
4990
+ width: paginationWidth,
4991
+ left: `calc(50% - (${paginationWidth}) / 2)`,
4992
+ [mediaQueryPointerCoarse]: {
4993
+ width: paginationWidthLarge,
4994
+ left: `calc(50% - ${paginationWidthLarge} / 2)`,
4995
+ },
4982
4996
  overflowX: 'hidden',
4983
4997
  },
4984
4998
  pagination: {
@@ -4986,10 +5000,23 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
4986
5000
  alignItems: 'center',
4987
5001
  width: 'fit-content',
4988
5002
  height: paginationBulletSize, // Needed to avoid jumping when rewinding dynamically added slides
4989
- gap: spacingStaticSmall,
5003
+ gap: paginationGap,
5004
+ [mediaQueryPointerCoarse]: {
5005
+ height: `calc(${paginationBulletSize} + 2 * ${paginationInset})`,
5006
+ gap: paginationGapLarge,
5007
+ },
4990
5008
  transition: `transform ${carouselTransitionDuration}`,
4991
5009
  },
4992
- bullet: {
5010
+ [bulletClass]: {
5011
+ // Increase clickable area on touch devices
5012
+ [mediaQueryPointerCoarse]: {
5013
+ '&::before': {
5014
+ content: '""',
5015
+ position: 'absolute',
5016
+ inset: `-${paginationInset}`,
5017
+ },
5018
+ position: 'relative',
5019
+ },
4993
5020
  borderRadius: borderRadiusSmall,
4994
5021
  ...(isHighContrastMode
4995
5022
  ? {
@@ -5012,10 +5039,13 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5012
5039
  height: paginationBulletSize,
5013
5040
  transition: `background-color ${carouselTransitionDuration}, width ${carouselTransitionDuration}`,
5014
5041
  }),
5042
+ ...hoverMediaQuery({
5043
+ cursor: 'pointer',
5044
+ }),
5015
5045
  },
5016
5046
  ...(isInfinitePagination && {
5017
5047
  [paginationInfiniteStartCaseClass]: {
5018
- '& > .bullet:nth-child(-n+4)': {
5048
+ [`& > .${bulletClass}:nth-child(-n+4)`]: {
5019
5049
  width: paginationBulletSize,
5020
5050
  height: paginationBulletSize,
5021
5051
  },
@@ -5026,11 +5056,11 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5026
5056
  width: paginationInfiniteBulletSize,
5027
5057
  height: paginationInfiniteBulletSize,
5028
5058
  }),
5029
- '& ~ span': {
5059
+ [`& ~ .${bulletClass}`]: {
5030
5060
  width: paginationBulletSize,
5031
5061
  height: paginationBulletSize,
5032
5062
  },
5033
- [`& ~ .${bulletInfiniteClass} ~ span`]: {
5063
+ [`& ~ .${bulletInfiniteClass} ~ .${bulletClass}`]: {
5034
5064
  width: '0px',
5035
5065
  height: '0px',
5036
5066
  },
@@ -5050,11 +5080,11 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
5050
5080
  height: paginationBulletSize,
5051
5081
  width: addImportantToRule(paginationActiveBulletSize),
5052
5082
  ...(isInfinitePagination && {
5053
- '& ~ span': {
5083
+ [`& ~ .${bulletClass}`]: {
5054
5084
  width: paginationBulletSize,
5055
5085
  height: paginationBulletSize,
5056
5086
  },
5057
- [`& ~ .${bulletInfiniteClass} ~ span`]: {
5087
+ [`& ~ .${bulletInfiniteClass} ~ .${bulletClass}`]: {
5058
5088
  width: '0px',
5059
5089
  height: '0px',
5060
5090
  },
@@ -9993,16 +10023,14 @@ const getComponentCss$1 = () => {
9993
10023
  '@global': {
9994
10024
  ':host': addImportantToEachRule({
9995
10025
  position: 'fixed',
9996
- left: gridExtendedOffsetBase,
9997
- right: gridExtendedOffsetBase,
10026
+ insetInline: gridExtendedOffsetBase,
9998
10027
  // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
9999
10028
  // In addition, a public css variable can be passed to overwrite the default position.
10000
10029
  [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
10001
10030
  bottom: `var(${cssVariablePositionBottomInternal})`,
10002
10031
  zIndex: TOAST_Z_INDEX,
10003
10032
  [getMediaQueryMin('s')]: {
10004
- left: '64px',
10005
- right: 'auto',
10033
+ insetInline: '64px auto',
10006
10034
  maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
10007
10035
  [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
10008
10036
  bottom: `var(${cssVariablePositionBottomInternal})`,
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs CHANGED
@@ -108,13 +108,10 @@ class DSRCarousel extends Component {
108
108
  ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
109
109
  : !this.props.disablePagination
110
110
  : this.props.pagination, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
111
- return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsx("h2", { id: headingId, children: this.props.heading }) : jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, "aria-describedby": this.props.heading ? headingId : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && [
112
- jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }),
113
- jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }),
114
- ]] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
111
+ return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsx("h2", { id: headingId, children: this.props.heading }) : jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, "aria-describedby": this.props.heading ? headingId : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
115
112
  'aria-label': this.props.heading,
116
113
  ...parseAndGetAriaAttributes(this.props.aria),
117
- }), 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 ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx("div", { className: "pagination-container", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
114
+ }), 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 ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
118
115
  }
119
116
  }
120
117