@porsche-design-system/components-react 3.19.0-rc.0 → 3.19.0-rc.2

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.cjs');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), width, wrapContent, children })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), trimSpace, width, wrapContent, children })),
             }
             : {
                 children,

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

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var checkbox = require('../dsr-components/checkbox.cjs');
+
+const PCheckbox = react.forwardRef(({ checked = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-checkbox');
+    const propsToSync = [checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['checked', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(checkbox.DSRCheckbox, { checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCheckbox = PCheckbox;

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textarea = require('../dsr-components/textarea.cjs');
 
-const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
+const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
@@ -23,9 +23,10 @@ const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disab
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap })),
+                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap, children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -10,6 +10,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -3,15 +3,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../components/accordion.wrapper.cjs');
 require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
+var crest_wrapper = require('../components/crest.wrapper.cjs');
 require('../components/display.wrapper.cjs');
 require('../components/divider.wrapper.cjs');
 require('../components/fieldset.wrapper.cjs');
@@ -72,7 +73,7 @@ require('../components/text-list-item.wrapper.cjs');
 require('../components/textarea.wrapper.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
+var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
@@ -80,40 +81,35 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
 /**
- * @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
+ * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
+ * @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
  * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "title", "description": "Application name" }
  * @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
  * @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
  * @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
  *
- * @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
- * @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
- *
  * @experimental
  */
 class DSRCanvas extends react.Component {
     host;
     isDesktopView = false;
+    hasSidebarStart;
+    hasSidebarEnd;
     render() {
-        splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "canvas", children: [jsxRuntime.jsx("header", { part: "header", children: jsxRuntime.jsx("slot", { name: "header" }) }), jsxRuntime.jsx("main", { part: "main", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { part: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-start", 
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
+        const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx("aside", { className: "sidebar-start", 
                                                     // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                                                     // eslint-disable-next-line
                                                     /* @ts-ignore */
-                                                    inert: this.props.sidebarStartOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-start" })] }), jsxRuntime.jsxs("aside", { 
-                                                    // "part" is not valid in TS
-                                                    // eslint-disable-next-line
-                                                    /* @ts-ignore */
-                                                    part: "sidebar-end", 
+                                                    inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx("aside", { className: "sidebar-end", 
                                                     // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                                                     // eslint-disable-next-line
                                                     /* @ts-ignore */
-                                                    inert: this.props.sidebarEndOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] })] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) }), jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }))] })] }), this.props.children] }));
+                                                    inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -0,0 +1,108 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../components/accordion.wrapper.cjs');
+require('../components/banner.wrapper.cjs');
+require('../components/button.wrapper.cjs');
+require('../components/button-group.wrapper.cjs');
+require('../components/button-pure.wrapper.cjs');
+require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
+require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
+require('../components/checkbox-wrapper.wrapper.cjs');
+require('../components/content-wrapper.wrapper.cjs');
+require('../components/crest.wrapper.cjs');
+require('../components/display.wrapper.cjs');
+require('../components/divider.wrapper.cjs');
+require('../components/fieldset.wrapper.cjs');
+require('../components/fieldset-wrapper.wrapper.cjs');
+require('../components/flex.wrapper.cjs');
+require('../components/flex-item.wrapper.cjs');
+require('../components/flyout.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
+require('../components/grid.wrapper.cjs');
+require('../components/grid-item.wrapper.cjs');
+require('../components/heading.wrapper.cjs');
+require('../components/headline.wrapper.cjs');
+require('../components/icon.wrapper.cjs');
+require('../components/inline-notification.wrapper.cjs');
+require('../components/link.wrapper.cjs');
+require('../components/link-pure.wrapper.cjs');
+require('../components/link-social.wrapper.cjs');
+require('../components/link-tile.wrapper.cjs');
+require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
+require('../components/marque.wrapper.cjs');
+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');
+require('../components/radio-button-wrapper.wrapper.cjs');
+require('../components/scroller.wrapper.cjs');
+require('../components/segmented-control.wrapper.cjs');
+require('../components/segmented-control-item.wrapper.cjs');
+require('../components/select.wrapper.cjs');
+require('../components/select-option.wrapper.cjs');
+require('../components/select-wrapper.wrapper.cjs');
+var spinner_wrapper = require('../components/spinner.wrapper.cjs');
+require('../components/stepper-horizontal.wrapper.cjs');
+require('../components/stepper-horizontal-item.wrapper.cjs');
+require('../components/switch.wrapper.cjs');
+require('../components/table.wrapper.cjs');
+require('../components/table-body.wrapper.cjs');
+require('../components/table-cell.wrapper.cjs');
+require('../components/table-head.wrapper.cjs');
+require('../components/table-head-cell.wrapper.cjs');
+require('../components/table-head-row.wrapper.cjs');
+require('../components/table-row.wrapper.cjs');
+require('../components/tabs.wrapper.cjs');
+require('../components/tabs-bar.wrapper.cjs');
+require('../components/tabs-item.wrapper.cjs');
+require('../components/tag.wrapper.cjs');
+require('../components/tag-dismissible.wrapper.cjs');
+require('../components/text.wrapper.cjs');
+require('../components/text-field-wrapper.wrapper.cjs');
+require('../components/text-list.wrapper.cjs');
+require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea.wrapper.cjs');
+require('../components/textarea-wrapper.wrapper.cjs');
+require('../components/toast.wrapper.cjs');
+require('../components/wordmark.wrapper.cjs');
+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');
+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": "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 DSRCheckbox extends react.Component {
+    host;
+    // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
+    // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
+    internals;
+    checkboxInputElement;
+    formResetCallback() {
+        this.props.internals.setValidity({});
+        this.props.internals.setFormValue(undefined);
+    }
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const id = 'checkbox';
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, 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("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, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${label.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRCheckbox = DSRCheckbox;

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -10,6 +10,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');