@porsche-design-system/components-react 4.2.0-rc.2 → 4.2.0-rc.4

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.4] - 2026-06-10
+
+### Fixed
+
+- `Radio Group`: Prevent clicks on `label-after` slot from bubbling to the host element
+  ([#4477](https://github.com/porsche-design-system/porsche-design-system/pull/4477))
+- `Flyout`, `Modal`, `Sheet`: Prevent dialog elements from reserving layout space in closed state when placed within a
+  new stacking context ([#4494](https://github.com/porsche-design-system/porsche-design-system/pull/4494))
+
+## [4.2.0-rc.3] - 2026-06-09
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet`: content no longer disappears in Chromium when many elements with a frosted
+  `backdrop-filter` (e.g. `p-tag`) are rendered
+  ([#4490](https://github.com/porsche-design-system/porsche-design-system/pull/4490))
+
 ## [4.2.0-rc.2] - 2026-06-04
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.2.0-rc.2",
+  "version": "4.2.0-rc.4",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.2.0-rc.2"
+    "@porsche-design-system/components-js": "4.2.0-rc.4"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -4132,7 +4132,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.2.0-rc.2"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5899,15 +5899,20 @@ const getFunctionalComponentRequiredStyles = () => {
 };
 
 const getFunctionalComponentLabelAfterStyles = () => {
+    const labelAfterStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        '&::slotted(*)': {
+            ...addImportantToEachRule({
+                marginInlineStart: ref(spacingStaticXs),
+            }),
+        },
+    };
     return {
-        'slot[name="label-after"]': {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            '&::slotted(*)': {
-                ...addImportantToEachRule({
-                    marginInlineStart: ref(spacingStaticXs),
-                }),
-            },
+        'slot[name="label-after"]': labelAfterStyles,
+        '.label-after': {
+            display: labelAfterStyles.display,
+            verticalAlign: labelAfterStyles.verticalAlign,
         },
     };
 };
@@ -6061,18 +6066,14 @@ const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') =>
     };
 };
 const dialogBackdropResetJssStyle = {
-    position: 'fixed', // ua-style
-    inset: 0, // ua-style
-    margin: 0, // ua-style
-    padding: 0, // ua-style
-    border: 0, // ua-style
-    width: '100dvw', // ua-style
-    height: '100dvh', // ua-style
-    maxWidth: '100dvw', // ua-style
-    maxHeight: '100dvh', // ua-style
-    overflow: 'hidden', // ua-style
-    display: 'block', // ua-style
-    outline: 0, // ua-style (we always expect a focusable element to be within the dialog)
+    all: 'unset',
+    position: 'fixed',
+    inset: 0,
+    maxWidth: '100dvw',
+    maxHeight: '100dvh',
+    overflow: 'hidden',
+    display: 'block',
+    outline: 0, // we always expect a focusable element to be within the dialog
     '&::backdrop': {
         display: 'none', // ua-style (we can't use it atm because it's not animatable in all browsers)
     },
@@ -6081,12 +6082,15 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
+    const delay = ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration]);
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration])}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
+    const transition = `visibility 0s linear ${delay}, width 0s linear ${delay}, height 0s linear ${delay}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
     return {
         zIndex: 9999999, // fallback for fade out stacking until `overlay` + `allow-discrete` is supported in all browsers. It tries to mimic #top-layer positioning hierarchy.
         ...(isVisible
             ? {
+                width: '100dvw',
+                height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
                 background: ref(colorBackdrop),
@@ -6096,6 +6100,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 }),
             }
             : {
+                // When the dialog lives inside a new stacking context, it is no longer promoted to the #top-layer while closed.
+                // In that case it can reserve additional space and break the surrounding layout, so width and height are collapsed to zero.
+                // A future improvement could use `transition-behavior: allow-discrete` to toggle between `display: none` and `block`,
+                // but browser support is still insufficient and behaves inconsistently in Safari and Firefox.
+                width: '0px',
+                height: '0px',
                 visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
                 pointerEvents: 'none', // element can't be interacted with mouse
                 background: 'transparent',
@@ -6139,7 +6149,7 @@ const dialogBorderRadius = ref(radius3Xl);
 const dialogPaddingTop = ref(spacingFluidMd$1);
 const dialogPaddingBottom = `calc(${dialogBorderRadius} + ${ref(spacingFluidMd$1)})`;
 const dialogPaddingInline = ref(spacingFluidLg);
-const dialogGridJssStyle = () => {
+const dialogGridJssStyle = (clipPath = 'none') => {
     return {
         position: 'relative',
         display: 'grid',
@@ -6148,7 +6158,8 @@ const dialogGridJssStyle = () => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
-        overflow: 'clip',
+        // `overflow: clip` can't be used due to a Chromium bug that drops descendant backdrop-filter tiles (e.g. frosted p-tag); `clip-path` clips slotted content to the rounded corners without the faulty paint-containment box while keeping the scroll behavior intact
+        clipPath,
     };
 };
 const getDialogColorJssStyle = () => {
@@ -7334,11 +7345,20 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
             },
         },
         flyout: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(isPositionStart
+                ? `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)` // position 'start': round inline-end (right in LTR) corners only
+                : `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})` // position 'end': round inline-start (left in LTR) corners only
+            ),
             ...getDialogColorJssStyle(),
             width: ref(cssVariableWidth$2, 'auto'),
             minWidth: '320px',
             maxWidth: '100vw',
+            // `clip-path` uses physical corners, so mirror for RTL to keep parity with the logical border*Radius below
+            '&:dir(rtl)': {
+                clipPath: isPositionStart
+                    ? `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})`
+                    : `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)`,
+            },
             ...(isPositionStart
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
@@ -8147,7 +8167,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius})`),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
@@ -8158,6 +8178,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'stretch',
                     margin: 0,
                     borderRadius: 0,
+                    clipPath: 'none', // fullscreen has square corners, so disable corner clipping
                 }
                 : {
                     width: ref(cssVariableWidth$1, 'auto'),
@@ -9218,7 +9239,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`), // round top corners only
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',

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

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

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

@@ -10,7 +10,7 @@ const Label = ({ hasLabel, hasDescription, children,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
     splitChildren.splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), jsxRuntime.jsx("slot", { name: "label-after" })] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), stopClickPropagation ? (jsxRuntime.jsx("span", { className: "label-after", children: jsxRuntime.jsx("slot", { name: "label-after" }) })) : (jsxRuntime.jsx("slot", { name: "label-after" }))] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
 };
 
 exports.Label = Label;

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

@@ -4130,7 +4130,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.2.0-rc.2"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.4"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5897,15 +5897,20 @@ const getFunctionalComponentRequiredStyles = () => {
 };
 
 const getFunctionalComponentLabelAfterStyles = () => {
+    const labelAfterStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        '&::slotted(*)': {
+            ...addImportantToEachRule({
+                marginInlineStart: ref(spacingStaticXs),
+            }),
+        },
+    };
     return {
-        'slot[name="label-after"]': {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            '&::slotted(*)': {
-                ...addImportantToEachRule({
-                    marginInlineStart: ref(spacingStaticXs),
-                }),
-            },
+        'slot[name="label-after"]': labelAfterStyles,
+        '.label-after': {
+            display: labelAfterStyles.display,
+            verticalAlign: labelAfterStyles.verticalAlign,
         },
     };
 };
@@ -6059,18 +6064,14 @@ const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') =>
     };
 };
 const dialogBackdropResetJssStyle = {
-    position: 'fixed', // ua-style
-    inset: 0, // ua-style
-    margin: 0, // ua-style
-    padding: 0, // ua-style
-    border: 0, // ua-style
-    width: '100dvw', // ua-style
-    height: '100dvh', // ua-style
-    maxWidth: '100dvw', // ua-style
-    maxHeight: '100dvh', // ua-style
-    overflow: 'hidden', // ua-style
-    display: 'block', // ua-style
-    outline: 0, // ua-style (we always expect a focusable element to be within the dialog)
+    all: 'unset',
+    position: 'fixed',
+    inset: 0,
+    maxWidth: '100dvw',
+    maxHeight: '100dvh',
+    overflow: 'hidden',
+    display: 'block',
+    outline: 0, // we always expect a focusable element to be within the dialog
     '&::backdrop': {
         display: 'none', // ua-style (we can't use it atm because it's not animatable in all browsers)
     },
@@ -6079,12 +6080,15 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
+    const delay = ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration]);
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isVisible ? '0s' : motionDurationMap[duration])}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
+    const transition = `visibility 0s linear ${delay}, width 0s linear ${delay}, height 0s linear ${delay}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
     return {
         zIndex: 9999999, // fallback for fade out stacking until `overlay` + `allow-discrete` is supported in all browsers. It tries to mimic #top-layer positioning hierarchy.
         ...(isVisible
             ? {
+                width: '100dvw',
+                height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
                 background: ref(colorBackdrop),
@@ -6094,6 +6098,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 }),
             }
             : {
+                // When the dialog lives inside a new stacking context, it is no longer promoted to the #top-layer while closed.
+                // In that case it can reserve additional space and break the surrounding layout, so width and height are collapsed to zero.
+                // A future improvement could use `transition-behavior: allow-discrete` to toggle between `display: none` and `block`,
+                // but browser support is still insufficient and behaves inconsistently in Safari and Firefox.
+                width: '0px',
+                height: '0px',
                 visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
                 pointerEvents: 'none', // element can't be interacted with mouse
                 background: 'transparent',
@@ -6137,7 +6147,7 @@ const dialogBorderRadius = ref(radius3Xl);
 const dialogPaddingTop = ref(spacingFluidMd$1);
 const dialogPaddingBottom = `calc(${dialogBorderRadius} + ${ref(spacingFluidMd$1)})`;
 const dialogPaddingInline = ref(spacingFluidLg);
-const dialogGridJssStyle = () => {
+const dialogGridJssStyle = (clipPath = 'none') => {
     return {
         position: 'relative',
         display: 'grid',
@@ -6146,7 +6156,8 @@ const dialogGridJssStyle = () => {
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
-        overflow: 'clip',
+        // `overflow: clip` can't be used due to a Chromium bug that drops descendant backdrop-filter tiles (e.g. frosted p-tag); `clip-path` clips slotted content to the rounded corners without the faulty paint-containment box while keeping the scroll behavior intact
+        clipPath,
     };
 };
 const getDialogColorJssStyle = () => {
@@ -7332,11 +7343,20 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
             },
         },
         flyout: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(isPositionStart
+                ? `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)` // position 'start': round inline-end (right in LTR) corners only
+                : `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})` // position 'end': round inline-start (left in LTR) corners only
+            ),
             ...getDialogColorJssStyle(),
             width: ref(cssVariableWidth$2, 'auto'),
             minWidth: '320px',
             maxWidth: '100vw',
+            // `clip-path` uses physical corners, so mirror for RTL to keep parity with the logical border*Radius below
+            '&:dir(rtl)': {
+                clipPath: isPositionStart
+                    ? `inset(0 round ${dialogBorderRadius} 0 0 ${dialogBorderRadius})`
+                    : `inset(0 round 0 ${dialogBorderRadius} ${dialogBorderRadius} 0)`,
+            },
             ...(isPositionStart
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
@@ -8145,7 +8165,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius})`),
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             ...buildResponsiveStyles(fullscreen, (fullscreenValue) => fullscreenValue
@@ -8156,6 +8176,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'stretch',
                     margin: 0,
                     borderRadius: 0,
+                    clipPath: 'none', // fullscreen has square corners, so disable corner clipping
                 }
                 : {
                     width: ref(cssVariableWidth$1, 'auto'),
@@ -9216,7 +9237,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
-            ...dialogGridJssStyle(),
+            ...dialogGridJssStyle(`inset(0 round ${dialogBorderRadius} ${dialogBorderRadius} 0 0)`), // round top corners only
             ...getDialogColorJssStyle(),
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',

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

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

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

@@ -8,7 +8,7 @@ const Label = ({ hasLabel, hasDescription, children,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
     splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxs(Fragment, { children: [hasLabel && (jsxs("div", { className: "label-wrapper", children: [jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) }), jsx("slot", { name: "label-after" })] })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
+    return (jsxs(Fragment, { children: [hasLabel && (jsxs("div", { className: "label-wrapper", children: [jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) }), stopClickPropagation ? (jsx("span", { className: "label-after", children: jsx("slot", { name: "label-after" }) })) : (jsx("slot", { name: "label-after" }))] })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
 };
 
 export { Label };

package/ssr/esm/lib/dsr-components/label.d.ts

@@ -14,8 +14,8 @@ type LabelProps = {
     isLoading?: boolean;
     isDisabled?: boolean;
     /**
-     * If true, clicking the label will not bubble to the host element,
-     * preventing duplicate handling on host click listeners.
+     * If true, clicks on the label use `htmlFor` only and do not bubble to the host.
+     * Clicks on the `label-after` slot are also stopped so they do not trigger host handlers (e.g. radio selection).
      */
     stopClickPropagation?: boolean;
 };