@porsche-design-system/components-react 3.16.0 → 3.17.0-rc.1

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

@@ -39,6 +39,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,10 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ */
 class DSRLinkTile extends react.Component {
     host;
     render() {
@@ -94,9 +99,8 @@ 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.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] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileCss(this.props.aspectRatio, this.props.size, this.props.weight, 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("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("div", { className: "media", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "footer", children: [jsxRuntime.jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,12 +79,15 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ */
 class DSRLink extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,14 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "heading", "description": "Renders a heading section above the content area.", "isDeprecated": true }
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
 class DSRModal extends react.Component {
     host;
     render() {

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

@@ -8,6 +8,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for an img or video tag when using the model-signature as a mask." }
+ */
 class DSRModelSignature extends react.Component {
     host;
     render() {

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.cjs

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the option text." }
+ */
 class DSRMultiSelectOption extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -80,6 +81,14 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var stateMessage = require('./state-message.cjs');
 var label = require('./label.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." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the p-multi-select-option tags." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ *
+ * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRMultiSelect extends react.Component {
     host;
     isOpen = false;
@@ -87,6 +96,7 @@ class DSRMultiSelect extends react.Component {
     hasFilterResults = true;
     nativeSelect;
     multiSelectOptions = [];
+    multiSelectOptgroups = [];
     inputContainer;
     inputElement;
     listElement;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+
+/**
+ * @slot {"name": "", "description": "Default slot for the optgroup content." }
+ */
+class DSROptgroup extends react.Component {
+    host;
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const { theme = 'light', hidden } = this.props;
+        minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+    }
+}
+
+exports.DSROptgroup = DSROptgroup;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @controlled { "props": ["activePage"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRPagination extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -81,6 +82,13 @@ var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
 var loadingMessage = require('./loading-message.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." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ *
+ * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRPinCode extends react.Component {
     host;
     form;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the popover content." }
+ */
 class DSRPopover extends react.Component {
     host;
     open = false;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -80,6 +81,11 @@ var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
 var loadingMessage = require('./loading-message.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." }
+ * @slot {"name": "", "description": "Default slot for the input." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRRadioButtonWrapper extends react.Component {
     host;
     input;

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

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 
 const Required = () => {
-    return jsxRuntime.jsx("span", { className: "required", children: " *" });
+    return (jsxRuntime.jsxs("span", { className: "required", "aria-hidden": "true", children: [' ', "*"] }));
 };
 
 exports.Required = Required;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the scroller content." }
+ */
 class DSRScroller extends react.Component {
     host;
     isPrevHidden = true;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the content." }
+ */
 class DSRSegmentedControlItem extends react.Component {
     host;
     render() {

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

@@ -7,6 +7,11 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `p-segmented-control-item` tags." }
+ *
+ * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRSegmentedControl extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the option content." }
+ */
 class DSRSelectOption extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -81,6 +82,12 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var stateMessage = require('./state-message.cjs');
 var label = require('./label.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." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the `select` tag." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRSelectWrapper extends react.Component {
     host;
     select;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -80,6 +81,14 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var label = require('./label.cjs');
 var stateMessage = require('./state-message.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." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the `p-select-option` tags." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ *
+ * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRSelect extends react.Component {
     host;
     isOpen = false;
@@ -89,6 +98,7 @@ class DSRSelect extends react.Component {
     combobox;
     listElement;
     selectOptions = [];
+    selectOptgroups = [];
     form;
     isWithinForm;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
@@ -103,9 +113,8 @@ class DSRSelect extends react.Component {
         const dropdownId = 'list';
         const descriptionId = this.props.description ? 'description' : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
-        const ariaDescribedBy = descriptionId && selectMessageId
-            ? `${descriptionId} ${selectMessageId}`
-            : descriptionId || selectMessageId || undefined;
+        const initialStatusId = 'initial-status';
+        const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, 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("div", { 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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: utilsEntry.getSelectedOptionString(otherChildren) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.cjs

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the content." }
+ */
 class DSRStepperHorizontalItem extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `p-stepper-horizontal-item` tags." }
+ */
 class DSRStepperHorizontal extends react.Component {
     host;
     stepperHorizontalItems = [];

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -79,6 +80,11 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the label." }
+ *
+ * @controlled {"props": ["checked"], "event": "update"}
+ */
 class DSRSwitch extends react.Component {
     host;
     render() {

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table body content." }
+ */
 class DSRTableBody extends react.Component {
     host;
     render() {

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table cell content." }
+ */
 class DSRTableCell extends react.Component {
     host;
     render() {

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.cjs

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table head cell content." }
+ */
 class DSRTableHeadCell extends react.Component {
     host;
     render() {

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-row.cjs

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table head row content." }
+ */
 class DSRTableHeadRow extends react.Component {
     host;
     render() {

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table head content." }
+ */
 class DSRTableHead extends react.Component {
     host;
     render() {

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the table row content." }
+ */
 class DSRTableRow extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,10 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "caption", "description": "Shows a caption that describes the content of the table." }
+ * @slot {"name": "", "description": "Default slot for the table content." }
+ */
 class DSRTable extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,11 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `button` or `a` tags which will be rendered as tabs." }
+ *
+ * @controlled {"props": ["activeTabIndex"], "event": "update"}
+ */
 class DSRTabsBar extends react.Component {
     host;
     tabElements = [];

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the tab content." }
+ */
 class DSRTabsItem extends react.Component {
     host;
     render() {