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

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

@@ -155,6 +155,18 @@ const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL}
 
 const gridFullOffset = _gridPadding;
 
+const gridWideOffsetBase = _gridSafeZoneBase;
+
+const gridWideOffsetS = _gridSafeZoneS;
+
+const gridWideOffsetXXL = `calc(${_gridPadding} + ${_gridSafeZoneXXL})`;
+
+const gridWideOffset = {
+    base: gridWideOffsetBase,
+    s: gridWideOffsetS,
+    xxl: gridWideOffsetXXL,
+};
+
 const gridExtendedOffsetBase = _gridSafeZoneBase;
 
 const gridExtendedOffsetS = _getGridOffsetS('extended');
@@ -3629,7 +3641,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.0-rc.1"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -5162,6 +5174,18 @@ const getComponentCss$1j = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-px", "description": "Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInline = '--p-carousel-px';
+/**
+ * @css-variable {"name": "--p-carousel-ps", "description": "Defines the logical inline start padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-pe`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInlineStart = '--p-carousel-ps';
+/**
+ * @css-variable {"name": "--p-carousel-pe", "description": "Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInlineEnd = '--p-carousel-pe';
 /**
  * @css-variable {"name": "--p-carousel-prev-next-filter", "description": "CSS Filter applied to the navigation (prev/next buttons)", "defaultValue": "none"}
  */
@@ -5189,6 +5213,12 @@ const mediaQueryPointerCoarse = '@media (pointer: coarse)';
 const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
+    wide: gridWideOffset,
+    full: {
+        base: gridFullOffset,
+        s: gridFullOffset,
+        xxl: gridFullOffset
+    },
 };
 const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
@@ -5304,14 +5334,17 @@ const getComponentCss$1i = (gradientColor, hasHeading, hasDescription, hasContro
         },
         header: {
             display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
+            paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+            paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
             [mediaQueryS]: {
-                gridTemplateColumns: 'minmax(0px, 1fr) auto',
-                padding: `0 ${spacingMap[width].s}`,
+                gridTemplateColumns: 'minmax(0px,1fr) auto',
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                 ...(hasNavigation && { columnGap: spacingStaticMedium }),
             },
             [mediaQueryXXL]: {
-                padding: `0 ${spacingMap[width].xxl}`,
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
             },
         },
         nav: {
@@ -5343,12 +5376,16 @@ const getComponentCss$1i = (gradientColor, hasHeading, hasDescription, hasContro
                 position: 'relative',
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
-                    padding: `0 ${spacingMap[width].base}`,
+                    paddingBlock: '0px',
+                    paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+                    paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
                     [mediaQueryS]: {
-                        padding: `0 ${spacingMap[width].s}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                     },
                     [mediaQueryXXL]: {
-                        padding: `0 ${spacingMap[width].xxl}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
                     },
                 }),
                 '&--draggable': {
@@ -5578,13 +5615,13 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    '&(input:hover),label:hover~.wrapper &(input)': {
+                    '&(input:hover),.label-wrapper:hover~.wrapper &(input)': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    '&(input:checked:hover),label:hover~.wrapper &(input:checked)': {
+                    '&(input:checked:hover),.label-wrapper:hover~.wrapper &(input:checked)': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -5592,7 +5629,7 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'label:hover~.wrapper &(input)': supportsChromiumMediaQuery({
+                    '.label-wrapper:hover~.wrapper &(input)': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -5617,26 +5654,44 @@ const getFunctionalComponentRequiredStyles = () => {
     };
 };
 
-const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme, additionalDefaultJssStyle, additionalIsShownJssStyle) => {
+const getFunctionalComponentLabelAfterStyles = (isDisabledOrLoading, additionalIsDisabledJssStyle) => {
+    return {
+        'slot[name="label-after"]': {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            ...(isDisabledOrLoading && {
+                pointerEvents: 'none',
+                opacity: '0.4', // workaround: must be opacity because color tokens would not affect e.g. slotted `popover`
+                ...additionalIsDisabledJssStyle,
+            }),
+        },
+    };
+};
+const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
     const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     return {
+        'label-wrapper': {
+            ...buildResponsiveStyles(hideLabel, (isHidden) => ({
+                ...(!isHidden && { minWidth: 'fit-content' }), // ensures label contents don't shrink to zero in grid containers
+                ...getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle),
+            })),
+            ...additionalLabelWrapperJssStyle,
+        },
         label: {
             ...textSmallStyle,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
-            justifySelf: 'flex-start', // ensures label is not getting stretched by flex or grid context of its parent
             color: isDisabledOrLoading ? disabledColor : primaryColor,
             transition: getTransition('color'), // for smooth transitions between e.g. disabled state
-            ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle)),
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
+            display: 'inline',
             '&:empty': {
                 display: 'none', // prevents outer spacing caused by parents grid gap, in case no label value is defined (although it has to be set to be a11y compliant)
             },
-            '&+&': {
+            '&:is(span)': {
                 cursor: 'unset',
-                marginTop: `-${spacingStaticXSmall}`,
                 fontSize: fontSizeTextXSmall,
                 ...(!isDisabledOrLoading && {
                     color: contrastHighColor,
@@ -5644,6 +5699,8 @@ const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme
                         color: contrastHighColorDark,
                     }),
                 }),
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXSmall}` })),
+                marginTop: `-${spacingStaticXSmall}`,
             },
             ...additionalDefaultJssStyle,
         },
@@ -5765,7 +5822,7 @@ const getComponentCss$1h = (hideLabel, state, isDisabled, isLoading, theme) => {
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
             gridArea: '1/2',
-        }, {
+        }, null, {
             paddingTop: '2px', // compensate vertical alignment
             paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
         }),
@@ -5934,6 +5991,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             ...preventFoucOfNestedElementsStyles,
             input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
@@ -5971,13 +6029,13 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    'input:hover,label:hover~.wrapper input': {
+                    'input:hover,.wrapper:has(.label-wrapper:hover) input': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                    'input:checked:hover,.wrapper:has(.label-wrapper:hover) input:checked': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -5985,7 +6043,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'input:indeterminate:hover,label:hover~.wrapper input:indeterminate': {
+                    'input:indeterminate:hover,.wrapper:has(.label-wrapper:hover) input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedHoverColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColor)),
@@ -5995,7 +6053,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                             backgroundColor: 'transparent',
                         }),
                     },
-                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                    '.label-wrapper:hover~.wrapper input': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -6017,21 +6075,24 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
         },
         root: {
             display: 'grid',
-            gridTemplateColumns: 'auto minmax(0, 1fr)',
             rowGap: spacingStaticXSmall,
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
             }),
         },
         wrapper: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+        },
+        'input-wrapper': {
             ...textSmallStyle,
             minWidth: minimumTouchTargetSize,
             minHeight: minimumTouchTargetSize,
             justifyContent: 'center',
             alignItems: 'center',
+            alignSelf: 'flex-start', // in case label becomes multiline
             display: 'grid',
             gridArea: '1/1',
-            alignSelf: 'flex-start', // in case label becomes multiline
             height,
         },
         ...(isLoading && {
@@ -6047,16 +6108,13 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
         }),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
-            gridArea: '1/2',
             ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
-        }, {
+        }, null, {
             paddingTop,
             paddingInlineStart,
         }),
         // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state, {
-            gridColumn: '1/3',
-        }),
+        ...getFunctionalComponentStateMessageStyles(theme, state, {}),
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
     });
@@ -6098,7 +6156,7 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
         ...(!isLoading &&
             hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
+                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),.label-wrapper:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',.label-wrapper:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,
@@ -6218,6 +6276,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -6294,7 +6353,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, null, !disabled &&
             !readOnly &&
             hoverMediaQuery({
                 '&:hover~.wrapper': hoverStyles,
@@ -9272,6 +9331,7 @@ const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme)
                     [`${cssVarInternalOptgroupScaling}`]: scalingVar,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, scalingVar, theme),
@@ -9482,6 +9542,7 @@ const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, comp
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             // input
             ...inputStyles,
@@ -9703,7 +9764,7 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, theme) => {
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
             gridArea: '1/2',
-        }, {
+        }, null, {
             paddingTop: '2px', // compensate vertical alignment
             paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
         }),
@@ -9769,6 +9830,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
                 }),
                 display: 'block',
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             input: {
                 gridArea: '1/1',
                 borderRadius: '50%',
@@ -9825,13 +9887,13 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    'input:hover,label:hover~.wrapper input': {
+                    'input:hover,.wrapper:has(~.label-wrapper:hover) input': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                    'input:checked:hover,.wrapper:has(~.label-wrapper:hover) input:checked': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -9839,7 +9901,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                    '.wrapper:has(~.label-wrapper:hover) input': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes a chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -9868,7 +9930,6 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
         wrapper: {
             ...textSmallStyle,
             display: 'grid',
-            gridArea: '1/1',
             minWidth: minimumTouchTargetSize,
             minHeight: minimumTouchTargetSize,
             justifyContent: 'center',
@@ -9891,9 +9952,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, {
-            gridArea: '1/2',
-        }, {
+        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, null, null, {
             paddingTop,
             paddingInlineStart,
         }),
@@ -9906,7 +9965,7 @@ const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
 const groupRadioGroupDirectionJssStyles = {
     column: {
         flexFlow: 'column nowrap',
-        alignItems: 'stretch',
+        alignItems: 'start',
     },
     row: {
         flexFlow: 'row wrap',
@@ -9934,6 +9993,7 @@ const getComponentCss$x = (disabled, loading, hideLabel, state, compact, directi
                 }),
                 [`${cssVarInternalRadioGroupOptionScaling}`]: scalingVar,
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
@@ -9964,9 +10024,6 @@ const getComponentCss$x = (disabled, loading, hideLabel, state, compact, directi
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
             cursor: 'inherit',
-            '&:is(legend)': {
-                marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
-            },
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
@@ -10214,6 +10271,7 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
             'slot:not([name])': {
                 display: 'grid',
@@ -10259,7 +10317,7 @@ const getButtonStyles = (isOpen, state, theme) => {
                 margin: 0,
                 padding: 0,
                 background: 'transparent',
-                border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, // using border of styled select below for label:hover selector
+                border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, // using border of styled select below for .label-wrapper:hover selector
                 borderRadius: borderRadiusSmall,
                 outline: '0',
                 cursor: 'pointer',
@@ -10573,6 +10631,7 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme)
                     [`${cssVarInternalOptgroupScaling}`]: scalingVar,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('select', isOpen, isDisabled, state, scalingVar, theme),
@@ -11984,6 +12043,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, compact, co
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             textarea: {
                 resize,
@@ -12044,7 +12104,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, compact, co
             },
             ...hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                'textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
+                'textarea:not(:disabled):not(:focus):not([readonly]):hover,.label-wrapper:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,
@@ -12191,4 +12251,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1p as getAccordionCss, getComponentCss$1o as getBannerCss, getComponentCss$1k as getButtonCss, getComponentCss$1n as getButtonGroupCss, getComponentCss$1m as getButtonPureCss, getComponentCss$1l as getButtonTileCss, getComponentCss$1j as getCanvasCss, getComponentCss$1i as getCarouselCss, getComponentCss$1g as getCheckboxCss, getComponentCss$1h as getCheckboxWrapperCss, getComponentCss$1f as getContentWrapperCss, getComponentCss$1e as getCrestCss, getComponentCss$1d as getDisplayCss, getComponentCss$1c as getDividerCss, getComponentCss$1b as getDrilldownCss, getComponentCss$1a as getDrilldownItemCss, getComponentCss$19 as getDrilldownLinkCss, getComponentCss$17 as getFieldsetCss, getComponentCss$18 as getFieldsetWrapperCss, getComponentCss$16 as getFlagCss, getComponentCss$14 as getFlexCss, getComponentCss$15 as getFlexItemCss, getComponentCss$13 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$11 as getGridCss, getComponentCss$12 as getGridItemCss, getComponentCss$10 as getHeadingCss, getComponentCss$$ as getHeadlineCss, getComponentCss$_ as getIconCss, getComponentCss$Z as getInlineNotificationCss, getComponentCss$Y as getInputDateCss, getComponentCss$X as getInputEmailCss, getComponentCss$W as getInputMonthCss, getComponentCss$V as getInputNumberCss, getComponentCss$U as getInputPasswordCss, getComponentCss$T as getInputSearchCss, getComponentCss$S as getInputTelCss, getComponentCss$R as getInputTextCss, getComponentCss$Q as getInputTimeCss, getComponentCss$P as getInputUrlCss, getComponentCss$O as getInputWeekCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$4 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1p as getAccordionCss, getComponentCss$1o as getBannerCss, getComponentCss$1k as getButtonCss, getComponentCss$1n as getButtonGroupCss, getComponentCss$1m as getButtonPureCss, getComponentCss$1l as getButtonTileCss, getComponentCss$1j as getCanvasCss, getComponentCss$1i as getCarouselCss, getComponentCss$1g as getCheckboxCss, getComponentCss$1h as getCheckboxWrapperCss, getComponentCss$1f as getContentWrapperCss, getComponentCss$1e as getCrestCss, getComponentCss$1d as getDisplayCss, getComponentCss$1c as getDividerCss, getComponentCss$1b as getDrilldownCss, getComponentCss$1a as getDrilldownItemCss, getComponentCss$19 as getDrilldownLinkCss, getComponentCss$17 as getFieldsetCss, getComponentCss$18 as getFieldsetWrapperCss, getComponentCss$16 as getFlagCss, getComponentCss$14 as getFlexCss, getComponentCss$15 as getFlexItemCss, getComponentCss$13 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$11 as getGridCss, getComponentCss$12 as getGridItemCss, getComponentCss$10 as getHeadingCss, getComponentCss$$ as getHeadlineCss, getComponentCss$_ as getIconCss, getComponentCss$Z as getInlineNotificationCss, getComponentCss$Y as getInputDateCss, getComponentCss$X as getInputEmailCss, getComponentCss$W as getInputMonthCss, getComponentCss$V as getInputNumberCss, getComponentCss$U as getInputPasswordCss, getComponentCss$T as getInputSearchCss, getComponentCss$S as getInputTelCss, getComponentCss$R as getInputTextCss, getComponentCss$Q as getInputTimeCss, getComponentCss$P as getInputUrlCss, getComponentCss$O as getInputWeekCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$4 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

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

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

@@ -12,6 +12,7 @@ import { PSpinner } from '../components/spinner.wrapper.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 Component {
@@ -38,7 +39,7 @@ class DSRCheckbox extends Component {
         const { namedSlotChildren} = splitChildren(this.props.children);
         const id = 'checkbox';
         const style = minifyCss(getComponentCss$1g(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxs("div", { className: "wrapper", children: [jsx("input", { type: "checkbox", id: id, "aria-describedby": `${descriptionId} ${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 && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsxs("div", { className: "input-wrapper", children: [jsx("input", { type: "checkbox", id: id, "aria-describedby": `${descriptionId} ${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 && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. icon)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -7,6 +7,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}