@porsche-design-system/components-react 3.10.0-rc.4 → 3.10.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 +11 -0
  2. package/package.json +2 -2
  3. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +14 -18
  4. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs +4 -3
  5. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +14 -18
  6. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs +4 -3
package/CHANGELOG.md CHANGED
@@ -14,6 +14,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
14
14
 
15
15
  ### [Unreleased]
16
16
 
17
+ ### [3.10.0] - 2024-01-17
18
+
19
+ ### [3.10.0-rc.5] - 2024-01-16
20
+
21
+ #### Changed
22
+
23
+ - `visibility` css property can be overridden on all components, e.g. to make use of `visibility: hidden;`
24
+ ([#2988](https://github.com/porsche-design-system/porsche-design-system/pull/2988))
25
+ - `Carousel`: Named slot `header` renamed to `controls`
26
+ ([#2992](https://github.com/porsche-design-system/porsche-design-system/pull/2992))
27
+
17
28
  ### [3.10.0-rc.4] - 2024-01-15
18
29
 
19
30
  #### Added
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "3.10.0-rc.4",
3
+ "version": "3.10.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-rc.4"
20
+ "@porsche-design-system/components-js": "3.10.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
@@ -4202,7 +4202,7 @@ const getComponentCss$13 = (size, compact, open, theme) => {
4202
4202
  ...(open
4203
4203
  ? {
4204
4204
  gridTemplateRows: '1fr',
4205
- visibility: 'visible',
4205
+ visibility: 'inherit',
4206
4206
  transition: getTransition('grid-template-rows'),
4207
4207
  paddingBottom: compact ? spacingStaticSmall : '24px',
4208
4208
  }
@@ -4826,15 +4826,15 @@ const bulletInfiniteClass = 'bullet--infinite';
4826
4826
  const paginationBulletSize = '8px';
4827
4827
  const paginationInfiniteBulletSize = '4px';
4828
4828
  const paginationActiveBulletSize = '20px';
4829
- const selectorHeading = 'h2,::slotted([slot=heading])';
4830
- const selectorDescription = 'p,::slotted([slot=description])';
4829
+ const selectorHeading = 'h2,::slotted([slot="heading"])';
4830
+ const selectorDescription = 'p,::slotted([slot="description"])';
4831
4831
  const mediaQueryS = getMediaQueryMin('s');
4832
4832
  const mediaQueryXXL = getMediaQueryMin('xxl');
4833
4833
  const spacingMap = {
4834
4834
  basic: gridBasicOffset,
4835
4835
  extended: gridExtendedOffset,
4836
4836
  };
4837
- const getComponentCss$Z = (hasHeading, hasDescription, hasHeaderSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
4837
+ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
4838
4838
  const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
4839
4839
  const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
4840
4840
  const { canvasTextColor } = getHighContrastColors();
@@ -4851,17 +4851,12 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasHeaderSlot, headingSiz
4851
4851
  ...hostHiddenStyles,
4852
4852
  }),
4853
4853
  },
4854
- ...(hasHeaderSlot && {
4855
- ['slot[name="header"]']: {
4854
+ ...(hasControlsSlot && {
4855
+ ['slot[name="controls"]']: {
4856
4856
  display: 'block',
4857
4857
  gridColumnStart: 1,
4858
4858
  gridRowStart: 3,
4859
4859
  alignSelf: 'center', // ensures vertical alignment to prev/next buttons
4860
- ...(isHeaderAlignCenter && {
4861
- [getMediaQueryMax('s')]: {
4862
- justifySelf: 'center', // relevant for horizontal alignment of header on mobile view only
4863
- },
4864
- }),
4865
4860
  },
4866
4861
  }),
4867
4862
  ...addImportantToEachRule({
@@ -5745,7 +5740,7 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
5745
5740
  overflow: 'auto',
5746
5741
  // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation is closed
5747
5742
  // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
5748
- visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'visible'})`,
5743
+ visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
5749
5744
  transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
5750
5745
  // it's important to define background-color for each scroller to have correct scrollbar coloring
5751
5746
  backgroundColor,
@@ -5929,6 +5924,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
5929
5924
  ? {
5930
5925
  zIndex: 2,
5931
5926
  transform: 'translate3d(0, 0, 0)',
5927
+ // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-navigation itself, which is hidden on mobile
5932
5928
  visibility: `var(${cssVariableVisibility},visible)`,
5933
5929
  transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
5934
5930
  }
@@ -8187,12 +8183,12 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
8187
8183
  ...prefersColorSchemeDarkMediaQuery(theme, {
8188
8184
  background: `linear-gradient(to right, ${getGradient('dark', gradientColor)} 100%)`,
8189
8185
  }),
8190
- visibility: isPrevHidden ? 'hidden' : 'visible',
8186
+ visibility: isPrevHidden ? 'hidden' : 'inherit',
8191
8187
  '& button': {
8192
8188
  marginLeft: '8px',
8193
8189
  // hide buttons on mobile (actually devices not supporting hover)
8194
8190
  ...hoverMediaQuery({
8195
- visibility: isPrevHidden ? 'hidden' : 'visible',
8191
+ visibility: isPrevHidden ? 'hidden' : 'inherit',
8196
8192
  }),
8197
8193
  },
8198
8194
  },
@@ -8204,12 +8200,12 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
8204
8200
  ...prefersColorSchemeDarkMediaQuery(theme, {
8205
8201
  background: `linear-gradient(to left, ${getGradient('dark', gradientColor)} 100%)`,
8206
8202
  }),
8207
- visibility: isNextHidden ? 'hidden' : 'visible',
8203
+ visibility: isNextHidden ? 'hidden' : 'inherit',
8208
8204
  '& button': {
8209
8205
  marginRight: '8px',
8210
8206
  // hide buttons on mobile (actually devices not supporting hover)
8211
8207
  ...hoverMediaQuery({
8212
- visibility: isNextHidden ? 'hidden' : 'visible',
8208
+ visibility: isNextHidden ? 'hidden' : 'inherit',
8213
8209
  }),
8214
8210
  },
8215
8211
  },
@@ -9406,7 +9402,7 @@ const getComponentCss$c = (size, weight, theme) => {
9406
9402
  ...barJssStyle,
9407
9403
  right: '0px',
9408
9404
  bottom: isHighContrastMode ? '-4px' : '-6px',
9409
- visibility: 'visible',
9405
+ visibility: 'inherit',
9410
9406
  },
9411
9407
  // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
9412
9408
  [transformSelector('::slotted([role]:focus:focus-visible)::before')]: {
@@ -9437,7 +9433,7 @@ const getComponentCss$c = (size, weight, theme) => {
9437
9433
  ...barJssStyle,
9438
9434
  width: 0, // actual width and transform is set via inline css
9439
9435
  bottom: isHighContrastMode ? '0' : '-2px',
9440
- visibility: 'visible',
9436
+ visibility: 'inherit',
9441
9437
  transition: `${getTransition('transform', 'moderate')}, ${getTransition('width', 'moderate')}`,
9442
9438
  animation: `$hide 0s var(${cssVariableAnimationDuration},0.5s) forwards`, // auto hide bar after transition, needs to be a little longer in Safari
9443
9439
  },
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs CHANGED
@@ -94,7 +94,7 @@ class DSRCarousel extends react.Component {
94
94
  };
95
95
  const hasHeadingPropOrSlot = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
96
96
  const hasDescriptionPropOrSlot = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0);
97
- const hasHeaderSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
97
+ const hasControlsSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'controls').length > 0;
98
98
  const btnProps = {
99
99
  className: 'btn',
100
100
  type: 'button',
@@ -102,14 +102,15 @@ class DSRCarousel extends react.Component {
102
102
  theme: this.props.theme,
103
103
  // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
104
104
  };
105
- const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasHeaderSlot, this.props.headingSize, this.props.width,
105
+ const headingId = 'heading';
106
+ const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width,
106
107
  // flip boolean values of disablePagination since it is the inverse of pagination
107
108
  this.props.disablePagination
108
109
  ? typeof this.props.disablePagination === 'object'
109
110
  ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
110
111
  : !this.props.disablePagination
111
112
  : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
112
- 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: "heading", 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" })), hasHeaderSlot && jsxRuntime.jsx("slot", { name: "header" }), 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 ? 'heading' : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && [
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) && [
113
114
  jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }),
114
115
  jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }),
115
116
  ]] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
package/ssr/esm/components/dist/styles/esm/styles-entry.mjs CHANGED
@@ -4200,7 +4200,7 @@ const getComponentCss$13 = (size, compact, open, theme) => {
4200
4200
  ...(open
4201
4201
  ? {
4202
4202
  gridTemplateRows: '1fr',
4203
- visibility: 'visible',
4203
+ visibility: 'inherit',
4204
4204
  transition: getTransition('grid-template-rows'),
4205
4205
  paddingBottom: compact ? spacingStaticSmall : '24px',
4206
4206
  }
@@ -4824,15 +4824,15 @@ const bulletInfiniteClass = 'bullet--infinite';
4824
4824
  const paginationBulletSize = '8px';
4825
4825
  const paginationInfiniteBulletSize = '4px';
4826
4826
  const paginationActiveBulletSize = '20px';
4827
- const selectorHeading = 'h2,::slotted([slot=heading])';
4828
- const selectorDescription = 'p,::slotted([slot=description])';
4827
+ const selectorHeading = 'h2,::slotted([slot="heading"])';
4828
+ const selectorDescription = 'p,::slotted([slot="description"])';
4829
4829
  const mediaQueryS = getMediaQueryMin('s');
4830
4830
  const mediaQueryXXL = getMediaQueryMin('xxl');
4831
4831
  const spacingMap = {
4832
4832
  basic: gridBasicOffset,
4833
4833
  extended: gridExtendedOffset,
4834
4834
  };
4835
- const getComponentCss$Z = (hasHeading, hasDescription, hasHeaderSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
4835
+ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
4836
4836
  const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
4837
4837
  const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
4838
4838
  const { canvasTextColor } = getHighContrastColors();
@@ -4849,17 +4849,12 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasHeaderSlot, headingSiz
4849
4849
  ...hostHiddenStyles,
4850
4850
  }),
4851
4851
  },
4852
- ...(hasHeaderSlot && {
4853
- ['slot[name="header"]']: {
4852
+ ...(hasControlsSlot && {
4853
+ ['slot[name="controls"]']: {
4854
4854
  display: 'block',
4855
4855
  gridColumnStart: 1,
4856
4856
  gridRowStart: 3,
4857
4857
  alignSelf: 'center', // ensures vertical alignment to prev/next buttons
4858
- ...(isHeaderAlignCenter && {
4859
- [getMediaQueryMax('s')]: {
4860
- justifySelf: 'center', // relevant for horizontal alignment of header on mobile view only
4861
- },
4862
- }),
4863
4858
  },
4864
4859
  }),
4865
4860
  ...addImportantToEachRule({
@@ -5743,7 +5738,7 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
5743
5738
  overflow: 'auto',
5744
5739
  // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation is closed
5745
5740
  // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
5746
- visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'visible'})`,
5741
+ visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
5747
5742
  transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
5748
5743
  // it's important to define background-color for each scroller to have correct scrollbar coloring
5749
5744
  backgroundColor,
@@ -5927,6 +5922,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
5927
5922
  ? {
5928
5923
  zIndex: 2,
5929
5924
  transform: 'translate3d(0, 0, 0)',
5925
+ // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-navigation itself, which is hidden on mobile
5930
5926
  visibility: `var(${cssVariableVisibility},visible)`,
5931
5927
  transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
5932
5928
  }
@@ -8185,12 +8181,12 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
8185
8181
  ...prefersColorSchemeDarkMediaQuery(theme, {
8186
8182
  background: `linear-gradient(to right, ${getGradient('dark', gradientColor)} 100%)`,
8187
8183
  }),
8188
- visibility: isPrevHidden ? 'hidden' : 'visible',
8184
+ visibility: isPrevHidden ? 'hidden' : 'inherit',
8189
8185
  '& button': {
8190
8186
  marginLeft: '8px',
8191
8187
  // hide buttons on mobile (actually devices not supporting hover)
8192
8188
  ...hoverMediaQuery({
8193
- visibility: isPrevHidden ? 'hidden' : 'visible',
8189
+ visibility: isPrevHidden ? 'hidden' : 'inherit',
8194
8190
  }),
8195
8191
  },
8196
8192
  },
@@ -8202,12 +8198,12 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
8202
8198
  ...prefersColorSchemeDarkMediaQuery(theme, {
8203
8199
  background: `linear-gradient(to left, ${getGradient('dark', gradientColor)} 100%)`,
8204
8200
  }),
8205
- visibility: isNextHidden ? 'hidden' : 'visible',
8201
+ visibility: isNextHidden ? 'hidden' : 'inherit',
8206
8202
  '& button': {
8207
8203
  marginRight: '8px',
8208
8204
  // hide buttons on mobile (actually devices not supporting hover)
8209
8205
  ...hoverMediaQuery({
8210
- visibility: isNextHidden ? 'hidden' : 'visible',
8206
+ visibility: isNextHidden ? 'hidden' : 'inherit',
8211
8207
  }),
8212
8208
  },
8213
8209
  },
@@ -9404,7 +9400,7 @@ const getComponentCss$c = (size, weight, theme) => {
9404
9400
  ...barJssStyle,
9405
9401
  right: '0px',
9406
9402
  bottom: isHighContrastMode ? '-4px' : '-6px',
9407
- visibility: 'visible',
9403
+ visibility: 'inherit',
9408
9404
  },
9409
9405
  // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
9410
9406
  [transformSelector('::slotted([role]:focus:focus-visible)::before')]: {
@@ -9435,7 +9431,7 @@ const getComponentCss$c = (size, weight, theme) => {
9435
9431
  ...barJssStyle,
9436
9432
  width: 0, // actual width and transform is set via inline css
9437
9433
  bottom: isHighContrastMode ? '0' : '-2px',
9438
- visibility: 'visible',
9434
+ visibility: 'inherit',
9439
9435
  transition: `${getTransition('transform', 'moderate')}, ${getTransition('width', 'moderate')}`,
9440
9436
  animation: `$hide 0s var(${cssVariableAnimationDuration},0.5s) forwards`, // auto hide bar after transition, needs to be a little longer in Safari
9441
9437
  },
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs CHANGED
@@ -92,7 +92,7 @@ class DSRCarousel extends Component {
92
92
  };
93
93
  const hasHeadingPropOrSlot = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
94
94
  const hasDescriptionPropOrSlot = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0);
95
- const hasHeaderSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
95
+ const hasControlsSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'controls').length > 0;
96
96
  const btnProps = {
97
97
  className: 'btn',
98
98
  type: 'button',
@@ -100,14 +100,15 @@ class DSRCarousel extends Component {
100
100
  theme: this.props.theme,
101
101
  // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
102
102
  };
103
- const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Z(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasHeaderSlot, this.props.headingSize, this.props.width,
103
+ const headingId = 'heading';
104
+ const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Z(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width,
104
105
  // flip boolean values of disablePagination since it is the inverse of pagination
105
106
  this.props.disablePagination
106
107
  ? typeof this.props.disablePagination === 'object'
107
108
  ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
108
109
  : !this.props.disablePagination
109
110
  : this.props.pagination, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
110
- 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: "heading", children: this.props.heading }) : jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasHeaderSlot && jsx("slot", { name: "header" }), 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 ? 'heading' : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && [
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) && [
111
112
  jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }),
112
113
  jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }),
113
114
  ]] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({