@porsche-design-system/components-react 3.33.0 → 3.34.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.34.0-rc.0] - 2026-04-01
+
+### Added
+
+- `Segmented Control`: `noWrap` property to render items inline with optional scroller
+  ([#4244](https://github.com/porsche-design-system/porsche-design-system/pull/4244))
+
+### Fixed
+
+- `Accordion`: missing `delegatesFocus`
+  ([#4238](https://github.com/porsche-design-system/porsche-design-system/pull/4238))
+
 ## [3.33.0] - 2026-03-09
 
 ## [3.33.0-rc.0] - 2026-03-04

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

@@ -6,17 +6,17 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -41,6 +41,10 @@ export type PSegmentedControlProps = BaseProps & {
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */
@@ -115,6 +119,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */

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

@@ -4,17 +4,17 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.33.0",
+  "version": "3.34.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.33.0"
+    "@porsche-design-system/components-js": "3.34.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -3643,7 +3643,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.33.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.34.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -10293,7 +10293,10 @@ const getComponentCss$v = (compact, isDisabled, isSelected, state, hasIcon, hasS
         }),
     });
 };
-const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, state, theme) => {
+
+const MIN_ITEM_WIDTH = 46;
+const MAX_ITEM_WIDTH = 220;
+const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, state, theme, noWrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -10308,11 +10311,13 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
-                ...buildResponsiveStyles(columns, (col) => ({
-                    gridTemplateColumns: col === 'auto'
-                        ? `repeat(auto-fit, ${maxWidth}px)`
-                        : `repeat(${col}, minmax(0, 1fr))`,
-                })),
+                ...(noWrap
+                    ? { gridAutoFlow: 'column', gridAutoColumns: 'max-content' }
+                    : buildResponsiveStyles(columns, (col) => ({
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${(maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && minWidth) || maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
+                    }))),
                 gap: '6px',
             },
         },
@@ -10330,6 +10335,11 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(noWrap && {
+            scroller: {
+                margin: `-${spacingStaticXSmall} 0`,
+            },
+        }),
     });
 };
 

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

@@ -3446,7 +3446,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.33.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.34.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console

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

@@ -7,24 +7,24 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var segmentedControl = require('../dsr-components/segmented-control.cjs');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme: theme || hooks.useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -22,7 +22,7 @@ class DSRAccordion extends react.Component {
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
         const style = minifyCss.minifyCss(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,13 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var label = require('./label.cjs');
 var stateMessage = require('./state-message.cjs');
+var scroller_wrapper = require('../components/scroller.wrapper.cjs');
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
@@ -35,9 +37,9 @@ 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 { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
-        const style = minifyCss.minifyCss(stylesEntry.getSegmentedControlCss(minWidth, maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { inert: this.props.disabled, disabled: this.props.disabled, ...utilsEntry.getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": utilsEntry.labelId, "aria-describedby": utilsEntry.descriptionId, className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
+        const itemWidths = this.props.noWrap ? undefined : { minWidth: 100, maxWidth: 100 };
+        const style = minifyCss.minifyCss(stylesEntry.getSegmentedControlCss(itemWidths?.minWidth, itemWidths?.maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme, this.props.noWrap));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { inert: this.props.disabled, disabled: this.props.disabled, ...utilsEntry.getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": utilsEntry.labelId, "aria-describedby": utilsEntry.descriptionId, className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.noWrap ? (jsxRuntime.jsx(scroller_wrapper.PScroller, { theme: this.props.theme, className: "scroller", children: jsxRuntime.jsx("slot", {}) })) : (jsxRuntime.jsx("slot", {})), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -3641,7 +3641,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.33.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.34.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -10291,7 +10291,10 @@ const getComponentCss$v = (compact, isDisabled, isSelected, state, hasIcon, hasS
         }),
     });
 };
-const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, state, theme) => {
+
+const MIN_ITEM_WIDTH = 46;
+const MAX_ITEM_WIDTH = 220;
+const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, state, theme, noWrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -10306,11 +10309,13 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
-                ...buildResponsiveStyles(columns, (col) => ({
-                    gridTemplateColumns: col === 'auto'
-                        ? `repeat(auto-fit, ${maxWidth}px)`
-                        : `repeat(${col}, minmax(0, 1fr))`,
-                })),
+                ...(noWrap
+                    ? { gridAutoFlow: 'column', gridAutoColumns: 'max-content' }
+                    : buildResponsiveStyles(columns, (col) => ({
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${(maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && minWidth) || maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
+                    }))),
                 gap: '6px',
             },
         },
@@ -10328,6 +10333,11 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(noWrap && {
+            scroller: {
+                margin: `-${spacingStaticXSmall} 0`,
+            },
+        }),
     });
 };
 

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

@@ -3444,7 +3444,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.33.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.34.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console

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

@@ -5,24 +5,24 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, theme: theme || useTheme(), value, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.mjs

@@ -20,7 +20,7 @@ class DSRAccordion extends Component {
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
         const style = minifyCss(getComponentCss$1p(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,11 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
+import '../../provider.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSegmentedControlCss as getComponentCss$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { descriptionId, labelId, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
+import { PScroller } from '../components/scroller.wrapper.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
@@ -33,9 +35,9 @@ 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 { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
-        const style = minifyCss(getComponentCss$u(minWidth, maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { inert: this.props.disabled, disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": labelId, "aria-describedby": descriptionId, className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
+        const itemWidths = this.props.noWrap ? undefined : { minWidth: 100, maxWidth: 100 };
+        const style = minifyCss(getComponentCss$u(itemWidths?.minWidth, itemWidths?.maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme, this.props.noWrap));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { inert: this.props.disabled, disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": labelId, "aria-describedby": descriptionId, className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.noWrap ? (jsx(PScroller, { theme: this.props.theme, className: "scroller", children: jsx("slot", {}) })) : (jsx("slot", {})), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -41,6 +41,10 @@ export type PSegmentedControlProps = BaseProps & {
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */
@@ -115,6 +119,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */