@porsche-design-system/components-react 3.4.0 → 3.5.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.5.0-rc.0] - 2023-07-21
+
+#### Added
+
+- `background` property to `Button Tile` and `Link Tile` component to adapt the description and link/button theme when
+  used on light background image ([#2669](https://github.com/porsche-design-system/porsche-design-system/pull/2669))
+- Breakpoint customizable property `columns` to `Segmented Control` to set the amount of columns
+  ([#2652](https://github.com/porsche-design-system/porsche-design-system/pull/2652))
+
+### Fixed
+
+- Alignment of `Icon` inside `Accordion` header
+  ([#2673](https://github.com/porsche-design-system/porsche-design-system/pull/2673))
+
 ### [3.4.0] - 2023-07-14
 
 ### [3.4.0-rc.0] - 2023-07-13

package/esm/lib/components/button-tile.wrapper.js

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/link-tile.wrapper.js

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/segmented-control.wrapper.js

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PSegmentedControl = forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, theme, value];
+    const propsToSync = [backgroundColor, columns, theme, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/button-tile.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of button and description.
@@ -13,6 +13,10 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Adapts the description and button theme when used on light background image.
+     */
+    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */
@@ -71,6 +75,10 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Adapts the description and button theme when used on light background image.
+     */
+    background?: "light" | "dark" | undefined;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

package/lib/components/button-tile.wrapper.js

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/grid-item.wrapper.d.ts

@@ -15,11 +15,11 @@ export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 1 | 6 | 8 | 9 | 10 | 11> | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 7 | 2 | 5 | 1 | 6 | 8 | 9 | 10 | 11> | undefined;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 1 | 6 | 12 | 8 | 9 | 10 | 11> | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 7 | 2 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/link-tile.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of link and description.
@@ -13,6 +13,10 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Adapts the description and link theme when used on light background image.
+     */
+    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */
@@ -67,6 +71,10 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Adapts the description and link theme when used on light background image.
+     */
+    background?: "light" | "dark" | undefined;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

package/lib/components/link-tile.wrapper.js

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/segmented-control.wrapper.d.ts

@@ -1,10 +1,14 @@
 import { type HTMLAttributes } from 'react';
-import type { SegmentedControlBackgroundColor, SegmentedControlUpdateEvent, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlUpdateEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
+    /**
+     * Sets the amount of columns.
+     */
+    columns?: BreakpointCustomizable<SegmentedControlColumns>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
@@ -27,6 +31,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: "background-surface" | "background-default" | undefined;
+    /**
+     * Sets the amount of columns.
+     */
+    columns?: BreakpointCustomizable<string | number> | undefined;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */

package/lib/components/segmented-control.wrapper.js

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, theme, value];
+    const propsToSync = [backgroundColor, columns, theme, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/types.d.ts

@@ -441,6 +441,11 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
+declare const THEMES: readonly [
+    "light",
+    "dark"
+];
+export type Theme = typeof THEMES[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1:1",
     "4:3",
@@ -459,6 +464,7 @@ declare const TILE_WEIGHTS: readonly [
     "semi-bold"
 ];
 export type TileWeight = (typeof TILE_WEIGHTS)[number];
+export type TileBackground = (typeof THEMES)[number];
 declare const TILE_ALIGNS: readonly [
     "top",
     "bottom"
@@ -490,11 +496,6 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
-declare const THEMES: readonly [
-    "light",
-    "dark"
-];
-export type Theme = typeof THEMES[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -615,6 +616,7 @@ export type ButtonTileIcon = LinkButtonIconName;
 export type ButtonTileType = ButtonType;
 export type ButtonTileAspectRatio = TileAspectRatio;
 export type ButtonTileSize = TileSize;
+export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
@@ -931,6 +933,7 @@ export type LinkTileTarget = LinkTarget;
 export type LinkTileAriaAttribute = LinkAriaAttribute;
 export type LinkTileAspectRatio = TileAspectRatio;
 export type LinkTileSize = TileSize;
+export type LinkTileBackground = TileBackground;
 export type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
@@ -1038,6 +1041,8 @@ export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROU
 export type SegmentedControlUpdateEvent = {
     value: string | number;
 };
+declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
+export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",

package/package.json

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

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

@@ -4042,8 +4042,10 @@ const getComponentCss$Z = (size, compact, open, theme) => {
         },
         'icon-container': {
             height: fontLineHeight,
+            width: fontLineHeight,
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'center',
         },
         icon: {
             width: fontLineHeight,
@@ -4412,7 +4414,7 @@ const sizeMap$5 = {
     default: { fontSize: fontSizeTextMedium },
 };
 const getButtonLinkTileStyles = (aspectRatio, size, weight, // to get deprecated semibold typed
-align, compact, hasGradient, isDisabled) => {
+background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return {
         ...mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
@@ -4424,6 +4426,9 @@ align, compact, hasGradient, isDisabled) => {
                     ...mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
                         fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
                     }))),
+                    ...buildResponsiveStyles(background, (b) => ({
+                        color: getThemedColors(b).primaryColor,
+                    })),
                 },
             },
             content: {
@@ -4433,6 +4438,7 @@ align, compact, hasGradient, isDisabled) => {
                     ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
                     : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
                 ...mergeDeep(hasGradient &&
+                    isThemeDark(background) &&
                     buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
                     ? {
                         alignItems: 'center',
@@ -6575,7 +6581,6 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 background: 'transparent',
                 color: buttonColor,
                 ...textSmallStyle,
-                overflowWrap: 'normal',
                 position: 'relative',
                 '&::before': {
                     content: '""',
@@ -6627,14 +6632,16 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$q = (maxWidth) => {
+const getComponentCss$q = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'grid',
                 gridAutoRows: '1fr',
-                gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`,
+                ...buildResponsiveStyles(columns, (col) => ({
+                    gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+                })),
                 gap: '6px',
                 ...hostHiddenStyles,
             }),

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

@@ -3962,6 +3962,7 @@ const { font: BUTTON_FONT } = textSmallStyle;
 const { font: LABEL_FONT } = textXSmallStyle;
 const ICON_SIZE = pxToRemWithUnit(24);
 const ICON_MARGIN = pxToRemWithUnit(4);
+['auto', ...Array.from({ length: 25 }, (_, i) => i + 1)];
 // Expect Porsche Next to be available and use sans-serif (wide font for safety buffer) as fallback
 const tempFont = 'Porsche Next, sans-serif';
 // temporary dom node to measure max-width of children content

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/button-tile.wrapper.js

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var buttonTile = require('../dsr-components/button-tile.js');
 
-const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
+const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(buttonTile.DSRButtonTile, { align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight, children })),
+                children: (jsxRuntime.jsx(buttonTile.DSRButtonTile, { align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile.wrapper.js

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var linkTile = require('../dsr-components/link-tile.js');
 
-const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
+const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(linkTile.DSRLinkTile, { align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
+                children: (jsxRuntime.jsx(linkTile.DSRLinkTile, { align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/segmented-control.wrapper.js

@@ -7,15 +7,15 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var segmentedControl = require('../dsr-components/segmented-control.js');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, theme, value];
+    const propsToSync = [backgroundColor, columns, theme, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -27,7 +27,7 @@ const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedContro
         ...(!process.browser
             ? {
                 ...{ "role": "group" },
-                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, theme, value, children })),
+                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, columns, theme, value, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-tile.js

@@ -74,7 +74,7 @@ class DSRButtonTile extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const buttonProps = {
-            theme: 'dark',
+            theme: this.props.background,
             variant: 'secondary',
             iconSource: this.props.iconSource,
             type: this.props.type,
@@ -84,7 +84,7 @@ class DSRButtonTile extends react.Component {
         };
         const button = (react.createElement(button_wrapper.PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: this.props.icon === 'none' ? 'arrow-right' : this.props.icon }, this.props.label));
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonTileCss(utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, this.props.compact, this.props.gradient, this.props.disabled)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonTileCss(utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.disabled)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "content", children: [jsxRuntime.jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.js

@@ -73,7 +73,7 @@ class DSRLinkTile extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const linkProps = {
-            theme: 'dark',
+            theme: this.props.background,
             variant: 'secondary',
             aria: this.props.aria,
         };
@@ -86,7 +86,7 @@ class DSRLinkTile extends react.Component {
         const link = (react.createElement(link_wrapper.PLink, { ...sharedLinkProps, ...linkProps, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const linkPure = (react.createElement(linkPure_wrapper.PLinkPure, { ...sharedLinkProps, ...linkProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: "arrow-right" }, this.props.label));
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileCss(this.props.aspectRatio, this.props.size, this.props.weight, // potentially breakpoint customizable, so we can't easily access the deprecation map
-        this.props.align, this.props.compact, this.props.gradient)));
+        this.props.background, this.props.align, this.props.compact, this.props.gradient)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "content", children: [jsxRuntime.jsx("a", { ...sharedLinkProps, className: "link-overlay", tabIndex: -1, "aria-hidden": "true" }), jsxRuntime.jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
     }
 }

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control.js

@@ -14,7 +14,7 @@ class DSRSegmentedControl extends react.Component {
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, selected: child.props?.value === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
             : child);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSegmentedControlCss(100)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSegmentedControlCss(100, this.props.columns)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), manipulatedChildren] }));
     }
 }

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

@@ -4040,8 +4040,10 @@ const getComponentCss$Z = (size, compact, open, theme) => {
         },
         'icon-container': {
             height: fontLineHeight,
+            width: fontLineHeight,
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'center',
         },
         icon: {
             width: fontLineHeight,
@@ -4410,7 +4412,7 @@ const sizeMap$5 = {
     default: { fontSize: fontSizeTextMedium },
 };
 const getButtonLinkTileStyles = (aspectRatio, size, weight, // to get deprecated semibold typed
-align, compact, hasGradient, isDisabled) => {
+background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return {
         ...mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
@@ -4422,6 +4424,9 @@ align, compact, hasGradient, isDisabled) => {
                     ...mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
                         fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
                     }))),
+                    ...buildResponsiveStyles(background, (b) => ({
+                        color: getThemedColors(b).primaryColor,
+                    })),
                 },
             },
             content: {
@@ -4431,6 +4436,7 @@ align, compact, hasGradient, isDisabled) => {
                     ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
                     : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
                 ...mergeDeep(hasGradient &&
+                    isThemeDark(background) &&
                     buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
                     ? {
                         alignItems: 'center',
@@ -6573,7 +6579,6 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 background: 'transparent',
                 color: buttonColor,
                 ...textSmallStyle,
-                overflowWrap: 'normal',
                 position: 'relative',
                 '&::before': {
                     content: '""',
@@ -6625,14 +6630,16 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$q = (maxWidth) => {
+const getComponentCss$q = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'grid',
                 gridAutoRows: '1fr',
-                gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`,
+                ...buildResponsiveStyles(columns, (col) => ({
+                    gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+                })),
                 gap: '6px',
                 ...hostHiddenStyles,
             }),

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

@@ -3960,6 +3960,7 @@ const { font: BUTTON_FONT } = textSmallStyle;
 const { font: LABEL_FONT } = textXSmallStyle;
 const ICON_SIZE = pxToRemWithUnit(24);
 const ICON_MARGIN = pxToRemWithUnit(4);
+['auto', ...Array.from({ length: 25 }, (_, i) => i + 1)];
 // Expect Porsche Next to be available and use sans-serif (wide font for safety buffer) as fallback
 const tempFont = 'Porsche Next, sans-serif';
 // temporary dom node to measure max-width of children content

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-tile.wrapper.js

@@ -5,13 +5,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRButtonTile } from '../dsr-components/button-tile.js';
 
-const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
+const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', c
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRButtonTile, { align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight, children })),
+                children: (jsx(DSRButtonTile, { align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile.wrapper.js

@@ -5,13 +5,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 import { DSRLinkTile } from '../dsr-components/link-tile.js';
 
-const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
+const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', com
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkTile, { align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
+                children: (jsx(DSRLinkTile, { align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/segmented-control.wrapper.js

@@ -5,15 +5,15 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.js';
 
-const PSegmentedControl = forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
+const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, theme, value];
+    const propsToSync = [backgroundColor, columns, theme, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -25,7 +25,7 @@ const PSegmentedControl = forwardRef(({ backgroundColor, onSegmentedControlChang
         ...(!process.browser
             ? {
                 ...{ "role": "group" },
-                children: (jsx(DSRSegmentedControl, { backgroundColor, theme, value, children })),
+                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, theme, value, children })),
             }
             : {
                 children,

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

@@ -72,7 +72,7 @@ class DSRButtonTile extends Component {
     render() {
         splitChildren(this.props.children);
         const buttonProps = {
-            theme: 'dark',
+            theme: this.props.background,
             variant: 'secondary',
             iconSource: this.props.iconSource,
             type: this.props.type,
@@ -82,7 +82,7 @@ class DSRButtonTile extends Component {
         };
         const button = (createElement(PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (createElement(PButtonPure, { ...buttonProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: this.props.icon === 'none' ? 'arrow-right' : this.props.icon }, this.props.label));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, this.props.compact, this.props.gradient, this.props.disabled)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.disabled)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsxs("div", { className: "content", children: [jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.js

@@ -71,7 +71,7 @@ class DSRLinkTile extends Component {
     render() {
         splitChildren(this.props.children);
         const linkProps = {
-            theme: 'dark',
+            theme: this.props.background,
             variant: 'secondary',
             aria: this.props.aria,
         };
@@ -84,7 +84,7 @@ class DSRLinkTile extends Component {
         const link = (createElement(PLink, { ...sharedLinkProps, ...linkProps, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const linkPure = (createElement(PLinkPure, { ...sharedLinkProps, ...linkProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: "arrow-right" }, this.props.label));
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z(this.props.aspectRatio, this.props.size, this.props.weight, // potentially breakpoint customizable, so we can't easily access the deprecation map
-        this.props.align, this.props.compact, this.props.gradient)));
+        this.props.background, this.props.align, this.props.compact, this.props.gradient)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsxs("div", { className: "content", children: [jsx("a", { ...sharedLinkProps, className: "link-overlay", tabIndex: -1, "aria-hidden": "true" }), jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control.js

@@ -12,7 +12,7 @@ class DSRSegmentedControl extends Component {
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, selected: child.props?.value === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
             : child);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(100)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(100, this.props.columns)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), manipulatedChildren] }));
     }
 }

package/ssr/lib/components/button-tile.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of button and description.
@@ -13,6 +13,10 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Adapts the description and button theme when used on light background image.
+     */
+    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */
@@ -71,6 +75,10 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Adapts the description and button theme when used on light background image.
+     */
+    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

package/ssr/lib/components/link-tile.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of link and description.
@@ -13,6 +13,10 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Adapts the description and link theme when used on light background image.
+     */
+    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */
@@ -67,6 +71,10 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Adapts the description and link theme when used on light background image.
+     */
+    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

package/ssr/lib/components/segmented-control.wrapper.d.ts

@@ -1,10 +1,14 @@
 import { type HTMLAttributes } from 'react';
-import type { SegmentedControlBackgroundColor, SegmentedControlUpdateEvent, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlUpdateEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
+    /**
+     * Sets the amount of columns.
+     */
+    columns?: BreakpointCustomizable<SegmentedControlColumns>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
@@ -27,6 +31,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
+    /**
+     * Sets the amount of columns.
+     */
+    columns?: BreakpointCustomizable<SegmentedControlColumns>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */

package/ssr/lib/types.d.ts

@@ -441,6 +441,11 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
+declare const THEMES: readonly [
+    "light",
+    "dark"
+];
+export type Theme = typeof THEMES[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1:1",
     "4:3",
@@ -459,6 +464,7 @@ declare const TILE_WEIGHTS: readonly [
     "semi-bold"
 ];
 export type TileWeight = (typeof TILE_WEIGHTS)[number];
+export type TileBackground = (typeof THEMES)[number];
 declare const TILE_ALIGNS: readonly [
     "top",
     "bottom"
@@ -490,11 +496,6 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
-declare const THEMES: readonly [
-    "light",
-    "dark"
-];
-export type Theme = typeof THEMES[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -615,6 +616,7 @@ export type ButtonTileIcon = LinkButtonIconName;
 export type ButtonTileType = ButtonType;
 export type ButtonTileAspectRatio = TileAspectRatio;
 export type ButtonTileSize = TileSize;
+export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
@@ -931,6 +933,7 @@ export type LinkTileTarget = LinkTarget;
 export type LinkTileAriaAttribute = LinkAriaAttribute;
 export type LinkTileAspectRatio = TileAspectRatio;
 export type LinkTileSize = TileSize;
+export type LinkTileBackground = TileBackground;
 export type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
@@ -1038,6 +1041,8 @@ export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROU
 export type SegmentedControlUpdateEvent = {
     value: string | number;
 };
+declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
+export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",