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

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

@@ -531,14 +531,14 @@ var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symb
 
 var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _toPrimitive(input, hint) {
@@ -3742,9 +3742,13 @@ const themeDark = {
     infoSoftColorDarken: '#0C1A27',
     infoSoftColorLighten: '#1A3856'
 };
+const themeAuto = {
+    ...themeLight,
+};
 const themes = {
     'light': themeLight,
-    'dark': themeDark
+    'dark': themeDark,
+    'auto': themeAuto
 };
 /* Auto Generated End */
 const schemeHighContrastMerged = {
@@ -3876,6 +3880,10 @@ const hostHiddenStyles = {
     },
 };
 
+const colorSchemeStyles = {
+    colorScheme: 'light dark',
+};
+
 /**
  * utility to wrap jss styles parameter in `@media (hover: hover)`
  * which is used to not have hover styles on touch devices
@@ -3886,6 +3894,10 @@ const hoverMediaQuery = (style) =>
 ({ '@media(hover:hover)': style }) // used for prod build, yarn start and unit tests
     ; // used for staging build in e2e and vrt tests
 
+const prefersColorSchemeDarkMediaQuery = (theme, style) => {
+    return isThemeAuto(theme) && { '@media (prefers-color-scheme: dark)': style };
+};
+
 const getSchemedHighContrastMediaQuery = (light, dark) => {
     return {
         '@media (forced-colors: active) and (prefers-color-scheme: light)': light,
@@ -3950,10 +3962,6 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
-const isThemeDark = (theme) => {
-    return theme === 'dark';
-};
-
 const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
 const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
 
@@ -3967,7 +3975,9 @@ const getThemedFormStateColors = (theme, state) => {
 
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return {
         [`::slotted(${child})`]: {
             display: 'block',
@@ -3987,34 +3997,55 @@ const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
             textIndent: 0,
             color: primaryColor,
             transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+                color: primaryColorDark,
+            }),
             ...additionalDefaultJssStyle,
         },
         ...hoverMediaQuery({
             // with the media query the selector has higher priority and overrides disabled styles
             [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
                 borderColor: formStateHoverColor || primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: formStateHoverColorDark || primaryColorDark,
+                }),
             },
         }),
         [`::slotted(${child}:focus)`]: {
             borderColor: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: primaryColorDark,
+            }),
         },
         [`::slotted(${child}:disabled)`]: {
             cursor: 'not-allowed',
             color: disabledColor,
             borderColor: disabledColor,
             WebkitTextFillColor: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+                WebkitTextFillColor: disabledColorDark,
+            }),
         },
         ...(child !== 'select' && {
             [`::slotted(${child}[readonly])`]: {
                 borderColor: contrastLowColor,
                 background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: contrastLowColorDark,
+                    background: contrastLowColorDark,
+                }),
             },
         }),
     };
 };
 const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles, additionalLabelJssStyle) => {
     const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const { formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
     return {
         label: {
@@ -4028,18 +4059,26 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
                 ...textSmallStyle,
                 color: isDisabled ? disabledColor : primaryColor,
                 transition: getTransition('color'),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isDisabled ? disabledColorDark : primaryColorDark,
+                }),
                 '&+&': {
                     marginTop: `-${spacingStaticXSmall}`,
                     fontSize: fontSizeTextXSmall,
                     ...(!isDisabled && {
                         color: contrastHighColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            color: contrastHighColorDark,
+                        }),
                     }),
                 },
                 ...hoverMediaQuery({
                     '&:hover': {
-                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
-                            (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
+                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))`]: {
                             borderColor: addImportantToRule(formStateHoverColor || primaryColor),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                borderColor: addImportantToRule(formStateHoverColorDark || primaryColorDark),
+                            }),
                         },
                     },
                 }),
@@ -4053,6 +4092,9 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
                 ...(isDisabled && {
                     color: disabledColor,
                     cursor: 'not-allowed',
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                    }),
                 }),
             },
         }),
@@ -4061,50 +4103,6 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
 
 const OPTION_HEIGHT = 40; // optgroups are higher and ignored
 const MULTI_SELECT_OPTION_HEIGHT = 44;
-const getSelectOptionStyles = (theme, additionalOptionJssStyle) => {
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
-    const { highlightColor } = getHighContrastColors();
-    return {
-        option: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            color: contrastHighColor,
-            cursor: 'pointer',
-            textAlign: 'left',
-            wordBreak: 'break-word',
-            boxSizing: 'border-box',
-            borderRadius: borderRadiusSmall,
-            transition: ['background-color', 'color'].map(getTransition).join(),
-            ...getNoResultsOptionJssStyle(),
-            ...hoverMediaQuery({
-                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
-                    color: isHighContrastMode ? highlightColor : primaryColor,
-                    background: contrastLowColor,
-                },
-            }),
-            '&--selected': {
-                background: backgroundSurfaceColor,
-            },
-            '&--highlighted': {
-                background: contrastLowColor,
-            },
-            '&--highlighted, &--selected': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-            },
-            '&--disabled': {
-                cursor: 'not-allowed',
-                color: disabledColor,
-            },
-            '&--hidden': {
-                display: 'none',
-            },
-            ...additionalOptionJssStyle,
-        },
-    };
-};
 const getNoResultsOptionJssStyle = () => ({
     '&[role=status]': {
         cursor: 'not-allowed',
@@ -4114,6 +4112,14 @@ const getNoResultsOptionJssStyle = () => ({
 
 const hasDocument = typeof document !== 'undefined';
 
+const isThemeAuto = (theme) => {
+    return theme === 'auto';
+};
+
+const isThemeDark = (theme) => {
+    return theme === 'dark';
+};
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -4126,15 +4132,20 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$$ = (size, compact, open, theme) => {
+const getComponentCss$10 = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
                 ...(!compact && {
                     borderBottom: `1px solid ${contrastLowColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: contrastLowColorDark,
+                    }),
                 }),
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             button: {
@@ -4150,6 +4161,9 @@ const getComponentCss$$ = (size, compact, open, theme) => {
                 cursor: 'pointer',
                 textAlign: 'left',
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 ...textSmallStyle,
                 fontWeight: fontWeightSemiBold,
                 ...buildResponsiveStyles(size, (s) => ({
@@ -4180,10 +4194,16 @@ const getComponentCss$$ = (size, compact, open, theme) => {
                     },
                     '&:hover::before': {
                         background: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: hoverColorDark,
+                        }),
                     },
                 })),
                 '&:focus::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&:not(:focus-visible)::before': {
                     border: 0,
@@ -4209,6 +4229,9 @@ const getComponentCss$$ = (size, compact, open, theme) => {
         },
         collapsible: {
             color: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+            }),
             display: 'grid',
             ...(open
                 ? {
@@ -4253,7 +4276,7 @@ const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}m
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
 const topBottomFallback = '56px';
-const getComponentCss$_ = (isOpen) => {
+const getComponentCss$$ = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4295,6 +4318,7 @@ const getComponentCss$_ = (isOpen) => {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
                 },
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
         },
@@ -4315,12 +4339,15 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$Z = (direction) => {
+const getComponentCss$_ = (direction) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             div: {
                 display: 'flex',
@@ -4365,6 +4392,7 @@ const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
 const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return {
         '@global': {
@@ -4372,6 +4400,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...addImportantToEachRule({
                     transform: 'translate3d(0,0,0)',
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 ...buildResponsiveStyles(stretch, (responsiveStretch) => ({
@@ -4388,6 +4417,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             margin: 0,
             padding: 0,
             color: isDisabledOrLoading ? disabledColor : primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
+            }),
             outline: 0,
             ...textSmallStyle,
             ...mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
@@ -4410,6 +4442,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...(active && {
                     ...frostedGlassStyle,
                     backgroundColor: hoverColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        backgroundColor: hoverColorDark,
+                    }),
                 }),
             },
             ...(!isDisabledOrLoading &&
@@ -4417,11 +4452,17 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                     '&:hover::before': {
                         ...frostedGlassStyle,
                         backgroundColor: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundColor: hoverColorDark,
+                        }),
                     },
                 })),
             ...(!hasSlottedAnchor && {
                 '&:focus::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&:not(:focus-visible)::before': {
                     border: 0,
@@ -4451,7 +4492,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$Y = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$Z = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
@@ -4517,7 +4558,11 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                hyphens: 'auto',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             ...addImportantToEachRule({
                 '::slotted': {
@@ -4582,6 +4627,7 @@ background, align, compact, hasGradient, isDisabled) => {
                 maxWidth: pxToRemWithUnit(550),
                 margin: 0,
                 ...textLargeStyle,
+                hyphens: 'inherit',
                 ...mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
                     fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
                 }))),
@@ -4622,7 +4668,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$X = (isDisabledOrLoading, ...args) => {
+const getComponentCss$Y = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4659,6 +4705,7 @@ const getVariantColors = (variant, theme) => {
 const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, theme) => {
     const isPrimary = variant === 'primary';
     const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
+    const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
     return {
@@ -4668,6 +4715,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4713,8 +4761,17 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                         backgroundColor: backgroundColorHover,
                         borderColor: isHighContrastMode ? focusColor : borderColorHover,
                         ...(!isPrimary && frostedGlassStyle),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundColor: backgroundColorHoverDark,
+                            borderColor: borderColorHoverDark,
+                        }),
                     },
                 })),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: borderColorDark,
+                backgroundColor: backgroundColorDark,
+                color: textColorDark,
+            }),
         },
         label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
         ...(hasIcon && {
@@ -4743,9 +4800,10 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$W = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$X = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
+    const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), {
         root: {
@@ -4754,6 +4812,11 @@ const getComponentCss$W = (icon, iconSource, variant, hideLabel, disabled, loadi
                 backgroundColor,
                 borderColor,
                 color: textColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundColor: backgroundColorDark,
+                    borderColor: borderColorDark,
+                    color: textColorDark,
+                }),
             }),
             ...(loading && !isPrimary && frostedGlassStyle),
         },
@@ -4766,6 +4829,7 @@ const getComponentCss$W = (icon, iconSource, variant, hideLabel, disabled, loadi
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
+                ...(isPrimary && !isHighContrastMode && { filter: 'invert(1)' }),
             },
         }),
         label: {
@@ -4776,6 +4840,11 @@ const getComponentCss$W = (icon, iconSource, variant, hideLabel, disabled, loadi
         },
         icon: {
             transition: getTransition('opacity'),
+            ...(!disabled &&
+                isPrimary &&
+                !isHighContrastMode && {
+                filter: 'invert(1)',
+            }),
             ...(loading && {
                 opacity: 0, // use opacity for smooth transition between states
             }),
@@ -4802,8 +4871,9 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss({
@@ -4813,6 +4883,7 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
                 gap: spacingFluidMedium,
                 flexDirection: 'column',
                 boxSizing: 'content-box',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             '::slotted(*)': {
@@ -4820,6 +4891,9 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
             },
             '::slotted(*:focus-visible)': addImportantToEachRule({
                 outline: `${borderWidthBase} solid ${focusColor}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    outlineColor: focusColorDark,
+                }),
                 outlineOffset: '2px',
             }),
             [selectorHeading]: addImportantToEachRule({
@@ -4834,6 +4908,9 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
             }),
             [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 [mediaQueryS]: isHeaderAlignCenter
                     ? {
                         gridColumn: 2,
@@ -4890,7 +4967,6 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
             padding: '4px 0',
             margin: '-4px 0',
             '&__track': {
-                cursor: 'grab',
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
                     padding: `0 ${spacingMap[width].base}`,
@@ -4905,6 +4981,7 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
                     },
                 }),
                 '&--draggable': {
+                    cursor: 'grab',
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
@@ -4922,7 +4999,7 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         },
         ...(hasPagination && {
-            ['pagination-container']: {
+            'pagination-container': {
                 ...buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
                     display: hasPaginationValue ? 'flex' : 'none',
                 })),
@@ -4942,7 +5019,16 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
             },
             bullet: {
                 borderRadius: borderRadiusSmall,
-                background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
+                ...(isHighContrastMode
+                    ? {
+                        background: canvasTextColor,
+                    }
+                    : {
+                        background: contrastMediumColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: contrastMediumColorDark,
+                        }),
+                    }),
                 ...(isInfinitePagination
                     ? {
                         width: '0px',
@@ -4956,13 +5042,13 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
                     }),
             },
             ...(isInfinitePagination && {
-                [`${paginationInfiniteStartCaseClass}`]: {
-                    ['& > .bullet:nth-child(-n+4)']: {
+                [paginationInfiniteStartCaseClass]: {
+                    '& > .bullet:nth-child(-n+4)': {
                         width: paginationBulletSize,
                         height: paginationBulletSize,
                     },
                 },
-                [`${bulletInfiniteClass}`]: {
+                [bulletInfiniteClass]: {
                     // Necessary to override the bulletActiveClass sibling selector
                     ...addImportantToEachRule({
                         width: paginationInfiniteBulletSize,
@@ -4978,8 +5064,17 @@ const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHead
                     },
                 },
             }),
-            [`${bulletActiveClass}`]: {
-                background: isHighContrastMode ? canvasTextColor : primaryColor,
+            [bulletActiveClass]: {
+                ...(isHighContrastMode
+                    ? {
+                        background: canvasTextColor,
+                    }
+                    : {
+                        background: primaryColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: primaryColorDark,
+                        }),
+                    }),
                 height: paginationBulletSize,
                 width: addImportantToRule(paginationActiveBulletSize),
                 ...(isInfinitePagination && {
@@ -5013,6 +5108,9 @@ const getFunctionalComponentStateMessageStyles = (theme, state) => {
             marginTop: spacingStaticXSmall,
             ...textSmallStyle,
             color: getThemedFormStateColors(theme, state).formStateColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: getThemedFormStateColors('dark', state).formStateColor,
+            }),
             transition: getTransition('color'),
         },
     };
@@ -5020,20 +5118,32 @@ const getFunctionalComponentStateMessageStyles = (theme, state) => {
 
 const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     const { canvasTextColor } = getHighContrastColors();
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
     const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
     const uncheckedHoverColor = formStateHoverColor || primaryColor;
+    const uncheckedHoverColorDark = formStateHoverColorDark || primaryColorDark;
     const checkedColor = isHighContrastMode
         ? canvasTextColor
         : disabledOrLoading
             ? disabledColor
             : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
+    const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
     return {
         '@global': {
             ':host': addImportantToEachRule({
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
                 display: 'block',
             }),
@@ -5054,6 +5164,9 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                     background: `transparent 0% 0% / ${fontLineHeight}`,
                     transition: ['border-color', 'background-color'].map(getTransition).join(),
                     border: `2px solid ${uncheckedColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: uncheckedColorDark,
+                    }),
                     outline: 0,
                     cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 },
@@ -5061,16 +5174,27 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                     // background-image is merged in later
                     borderColor: checkedColor,
                     backgroundColor: checkedColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: checkedColorDark,
+                        backgroundColor: checkedColorDark,
+                    }),
                 },
                 ...(!disabledOrLoading && {
                     ...(!isHighContrastMode &&
                         hoverMediaQuery({
                             '&(input:hover), .text:hover ~ &(input)': {
                                 borderColor: uncheckedHoverColor,
+                                ...prefersColorSchemeDarkMediaQuery(theme, {
+                                    borderColor: uncheckedHoverColorDark,
+                                }),
                             },
                             '&(input:checked:hover), .text:hover ~ &(input:checked)': {
                                 borderColor: checkedHoverColor,
                                 backgroundColor: checkedHoverColor,
+                                ...prefersColorSchemeDarkMediaQuery(theme, {
+                                    borderColor: checkedHoverColorDark,
+                                    backgroundColor: checkedHoverColorDark,
+                                }),
                             },
                         })),
                     ...(!isDisabled && {
@@ -5079,6 +5203,9 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                             position: 'absolute',
                             ...getInsetJssStyle(-6),
                             border: `${borderWidthBase} solid ${focusColor}`,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                borderColor: focusColorDark,
+                            }),
                         },
                         '&(input:focus:not(:focus-visible))::before': {
                             borderColor: 'transparent',
@@ -5097,11 +5224,28 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
             cursor: disabledOrLoading ? 'default' : 'pointer',
             ...textSmallStyle,
             color: disabledOrLoading ? disabledColor : primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledOrLoading ? disabledColorDark : primaryColorDark,
+            }),
             transition: getTransition('color'),
             ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { padding: `2px 0 0 ${spacingStaticSmall}` })),
         },
         ...getFunctionalComponentRequiredStyles(),
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(isLoading && {
+            spinner: {
+                position: 'absolute',
+                top: `calc(${fontLineHeight}/2 + 2px)`,
+                left: `calc(${fontLineHeight}/2 + 2px)`,
+                transform: 'translate(-50%, -50%)',
+                height: fontLineHeight,
+                width: fontLineHeight,
+                padding: '2px',
+                fontFamily,
+                fontSize: '1rem',
+                cursor: 'not-allowed',
+            },
+        }),
     };
 };
 
@@ -5109,14 +5253,30 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$U = (hideLabel, state, isDisabled, isLoading, theme) => {
+const escapeHashCharacter = (colorString) => {
+    return colorString.replace('#', '%23');
+};
+
+const getCheckedSVGBackgroundImage$1 = (fill) => {
+    return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
+};
+const getIndeterminateSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
+};
+const getComponentCss$V = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
-        : getInvertedThemedColors(theme).primaryColor.replace(/#/g, '%23');
+        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = isHighContrastMode
+        ? canvasColor
+        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = isHighContrastMode
         ? canvasColor
-        : getThemedColors(theme).primaryColor.replace(/#/g, '%23');
+        : escapeHashCharacter(getThemedColors(theme).primaryColor);
+    const indeterminateIconColorDark = isHighContrastMode
+        ? canvasColor
+        : escapeHashCharacter(getThemedColors('dark').primaryColor);
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), {
         '@global': {
             '::slotted': addImportantToEachRule({
@@ -5125,11 +5285,17 @@ const getComponentCss$U = (hideLabel, state, isDisabled, isLoading, theme) => {
                 },
                 ...(!isLoading && {
                     '&(input:checked)': {
-                        backgroundImage: getInlineSVGBackgroundImage(`<path fill="${checkedIconColor}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`),
+                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+                        }),
                     },
                 }),
                 '&(input:indeterminate)': {
-                    backgroundImage: getInlineSVGBackgroundImage(`<path fill="${indeterminateIconColor}" d="m20,11v2H4v-2h16Z"/>`),
+                    backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColorDark),
+                    }),
                 },
                 ...(!isDisabled && {
                     '&(input:focus)::before': {
@@ -5138,19 +5304,6 @@ const getComponentCss$U = (hideLabel, state, isDisabled, isLoading, theme) => {
                 }),
             }),
         },
-        ...(isLoading && {
-            spinner: {
-                position: 'absolute',
-                top: `calc(${fontLineHeight}/2 + 2px)`,
-                left: `calc(${fontLineHeight}/2 + 2px)`,
-                transform: 'translate(-50%, -50%)',
-                height: fontLineHeight,
-                width: fontLineHeight,
-                fontFamily,
-                fontSize: '1rem',
-                cursor: 'not-allowed',
-            },
-        }),
     }));
 };
 
@@ -5159,12 +5312,15 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$T = (width) => {
+const getComponentCss$U = (width) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         root: {
@@ -5198,7 +5354,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$S = () => {
+const getComponentCss$T = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5209,6 +5365,7 @@ const getComponentCss$S = () => {
                     outline: 0,
                     boxSizing: 'content-box',
                     ...getDimensionStyle,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5244,6 +5401,9 @@ ellipsis, theme) => {
         padding: 0,
         ...baseTextStyle,
         color: getThemedTypographyColor(theme, color),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: getThemedTypographyColor('dark', color),
+        }),
         textAlign: align,
         letterSpacing: 'normal',
         listStyleType: 'none',
@@ -5282,12 +5442,15 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$R = (size, align, color, ellipsis, theme) => {
+const getComponentCss$S = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             '::slotted': {
                 [DISPLAY_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
@@ -5299,36 +5462,55 @@ const getComponentCss$R = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$Q = (color, orientation, theme) => {
+const getComponentCss$R = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
+    const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
         'contrast-low': contrastLowColor,
         'contrast-medium': contrastMediumColor,
         'contrast-high': contrastHighColor,
     };
+    const colorMapDark = {
+        'contrast-low': contrastLowColorDark,
+        'contrast-medium': contrastMediumColorDark,
+        'contrast-high': contrastHighColorDark,
+    };
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             hr: {
                 margin: 0,
                 padding: 0,
                 border: 'none',
                 textAlign: 'left',
-                background: isHighContrastMode ? getHighContrastColors().canvasTextColor : colorMap[color],
+                ...(isHighContrastMode
+                    ? {
+                        background: getHighContrastColors().canvasTextColor,
+                    }
+                    : {
+                        background: colorMap[color],
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: colorMapDark[color],
+                        }),
+                    }),
                 ...buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' }),
             },
         },
     });
 };
 
-const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Q = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             fieldset: {
@@ -5342,6 +5524,9 @@ const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
                     padding: 0,
                     color: getThemedColors(theme).primaryColor,
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
                 },
             }),
         },
@@ -5354,11 +5539,12 @@ const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$O = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             fieldset: {
@@ -5371,6 +5557,9 @@ const getComponentCss$O = (state, labelSize, hasLabel, theme) => {
                     margin: `0 0 ${spacingStaticMedium}`,
                     padding: 0,
                     color: getThemedColors(theme).primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
                 },
             }),
@@ -5394,7 +5583,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$N = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5416,10 +5605,10 @@ const getComponentCss$N = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$M = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$N = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
+            ':host': addImportantToEachRule(mergeDeep(colorSchemeStyles, hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
                 display: inlineResponsive ? 'inline-flex' : 'flex',
             })), buildResponsiveStyles(wrap, (flexWrapResponsive) => ({ flexWrap: flexWrapResponsive })), buildResponsiveStyles(direction, (flexDirectionResponsive) => ({
                 flexDirection: flexDirectionResponsive,
@@ -5438,20 +5627,26 @@ const headerShadowClass = 'header--shadow';
 const footerShadowClass$1 = 'footer--shadow';
 const flyoutTransitionDuration = '0.5s';
 const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
+const cssVariableWidth = '--p-flyout-width';
 const cssVariableMaxWidth = '--p-flyout-max-width';
 const maxWidthDefault = '1180px';
 const minWidthDefault = '320px';
-const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$M = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const { contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
     const isPositionLeft = position === 'left';
-    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge} ${spacingStaticMedium} ${spacingFluidLarge}`;
+    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge}`;
     const isDark = isThemeDark(theme);
     const shadowColor = isDark ? scrollShadowColorDark : scrollShadowColor;
-    const transparentColor = isDark ? 'rgba(14, 14, 18, 0)' : 'rgba(255, 255, 255, 0)';
+    const transparentColorDark = 'rgba(14, 14, 18, 0)';
+    const transparentColor = isDark ? transparentColorDark : 'rgba(255, 255, 255, 0)';
     return getCss({
         '@global': addImportantToEachRule({
             ':host': {
+                // needed for correct alignment of the Porsche Grid within the Flyout
+                '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
+                '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
                 display: 'flex',
                 position: 'fixed',
                 zIndex: FLYOUT_Z_INDEX,
@@ -5465,6 +5660,7 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     }),
                 ...getInsetJssStyle(),
                 ...getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration),
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             },
         }),
@@ -5475,12 +5671,18 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             }),
             justifyContent: 'flex-end',
             background: backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+            }),
             position: 'sticky',
             top: 0,
-            zIndex: 1,
+            zIndex: 2,
         },
         [headerShadowClass]: {
             boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px 5px 10px`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                boxShadow: `${scrollShadowColorDark} 0px 5px 10px`,
+            }),
         },
         ...(hasHeader && {
             'header-content': {
@@ -5494,6 +5696,10 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             border: `2px solid ${backgroundColor}`,
             borderRadius: '4px',
             background: backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: backgroundColorDark,
+                background: backgroundColorDark,
+            }),
             ...hoverMediaQuery({
                 '&:hover': {
                     background: darkThemeContrastHighColor,
@@ -5512,6 +5718,7 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                 overflowY: 'auto',
                 overscrollBehaviorY: 'none',
             }),
+            width: `var(${cssVariableWidth}, auto)`,
             height: '100%',
             minWidth: minWidthDefault,
             maxWidth: `var(${cssVariableMaxWidth}, ${maxWidthDefault})`,
@@ -5520,6 +5727,10 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             transform: isOpen ? 'initial' : `translate3d(${isPositionLeft ? '-100%' : '100%'}, 0, 0)`,
             transition: `opacity ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction} ${isOpen ? '0s' : flyoutTransitionDuration}, transform ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction}`,
             boxShadow: `${isPositionLeft ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                background: backgroundColorDark,
+            }),
         },
         content: {
             padding: contentPadding,
@@ -5535,6 +5746,9 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                 backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
                 backgroundAttachment: 'local, local, scroll, scroll',
                 overscrollBehaviorY: 'none',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundImage: `linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${scrollShadowColorDark}, ${transparentColorDark}), linear-gradient(to bottom, ${scrollShadowColorDark}, ${transparentColorDark})`,
+                }),
             }),
         },
         ...(hasFooter && {
@@ -5544,9 +5758,15 @@ const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                 position: 'sticky',
                 zIndex: 1,
                 bottom: 0,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                }),
             },
             [footerShadowClass$1]: {
                 boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px -5px 10px`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    boxShadow: `${scrollShadowColorDark} 0px -5px 10px`,
+                }),
             },
         }),
         ...(hasSubFooter && {
@@ -5561,7 +5781,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$K = (size, offset) => {
+const getComponentCss$L = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5581,7 +5801,7 @@ const getComponentCss$K = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$J = (direction, wrap) => {
+const getComponentCss$K = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5590,6 +5810,7 @@ const getComponentCss$J = (direction, wrap) => {
                 width: 'auto',
                 marginLeft: gutter,
                 marginRight: gutter,
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
                 ...mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))),
             }),
@@ -5604,12 +5825,15 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$I = (size, align, color, ellipsis, theme) => {
+const getComponentCss$J = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             '::slotted': {
                 [HEADING_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
@@ -5663,12 +5887,15 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$H = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$I = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             '::slotted': {
                 [HEADLINE_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
@@ -5712,29 +5939,32 @@ const sizeMap$2 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const filter = {
-    light: {
-        primary: filterLightPrimary,
-        'state-disabled': filterLightDisabled,
-        'contrast-low': filterLightContrastLow,
-        'contrast-medium': filterLightContrastMedium,
-        'contrast-high': filterLightContrastHigh,
-        'notification-success': filterLightNotificationSuccess,
-        'notification-warning': filterLightNotificationWarning,
-        'notification-error': filterLightNotificationError,
-        'notification-info': filterLightNotificationInfo,
-    },
-    dark: {
-        primary: filterDarkPrimary,
-        'state-disabled': filterDarkDisabled,
-        'contrast-low': filterDarkContrastLow,
-        'contrast-medium': filterDarkContrastMedium,
-        'contrast-high': filterDarkContrastHigh,
-        'notification-success': filterDarkNotificationSuccess,
-        'notification-warning': filterDarkNotificationWarning,
-        'notification-error': filterDarkNotificationError,
-        'notification-info': filterDarkNotificationInfo,
-    },
+const filterLight = {
+    primary: filterLightPrimary,
+    'state-disabled': filterLightDisabled,
+    'contrast-low': filterLightContrastLow,
+    'contrast-medium': filterLightContrastMedium,
+    'contrast-high': filterLightContrastHigh,
+    'notification-success': filterLightNotificationSuccess,
+    'notification-warning': filterLightNotificationWarning,
+    'notification-error': filterLightNotificationError,
+    'notification-info': filterLightNotificationInfo,
+};
+const filterDark = {
+    primary: filterDarkPrimary,
+    'state-disabled': filterDarkDisabled,
+    'contrast-low': filterDarkContrastLow,
+    'contrast-medium': filterDarkContrastMedium,
+    'contrast-high': filterDarkContrastHigh,
+    'notification-success': filterDarkNotificationSuccess,
+    'notification-warning': filterDarkNotificationWarning,
+    'notification-error': filterDarkNotificationError,
+    'notification-info': filterDarkNotificationInfo,
+};
+const filterMap = {
+    auto: filterLight,
+    light: filterLight,
+    dark: filterDark,
 };
 const forceRerenderAnimationStyle = {
     '0%': {
@@ -5746,7 +5976,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$G = (color, size, theme) => {
+const getComponentCss$H = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -5755,7 +5985,10 @@ const getComponentCss$G = (color, size, theme) => {
             ':host': {
                 display: 'inline-block',
                 verticalAlign: 'top',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             img: {
                 display: 'block',
@@ -5763,12 +5996,15 @@ const getComponentCss$G = (color, size, theme) => {
                 padding: 0,
                 pointerEvents: 'none',
                 ...(!isColorInherit && {
-                    filter: filter[theme][color],
+                    filter: filterMap[theme][color],
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        filter: filterMap.dark[color],
+                    }),
                     ...(isHighContrastMode &&
                         getSchemedHighContrastMediaQuery({
-                            filter: filter.light[color],
+                            filter: filterMap.light[color],
                         }, {
-                            filter: filter.dark[color],
+                            filter: filterMap.dark[color],
                         })),
                     WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
                 }),
@@ -5812,6 +6048,9 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
         placeItems: 'start',
         padding: spacingStaticMedium,
         background: getBackgroundColor(state, theme),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: getBackgroundColor(state, 'dark'),
+        }),
         borderRadius: borderRadiusSmall,
         ...(isHighContrastMode && {
             outline: '1px solid transparent',
@@ -5837,11 +6076,12 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$F = (state, hasAction, hasClose, theme) => {
+const getComponentCss$G = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             h5: headingSmallStyle,
@@ -5849,6 +6089,9 @@ const getComponentCss$F = (state, hasAction, hasClose, theme) => {
             'h5,p': {
                 margin: 0,
                 color: getThemedColors(theme).primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: getThemedColors('dark').primaryColor,
+                }),
             },
         },
         icon: getNotificationIconJssStyle(),
@@ -5863,8 +6106,9 @@ const getComponentCss$F = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$E = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
+    const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
         root: {
             textDecoration: underline ? 'underline' : 'none',
@@ -5894,6 +6138,9 @@ const getComponentCss$E = (icon, iconSource, active, stretch, size, hideLabel, a
                 },
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&(a:focus:not(:focus-visible))::before': {
                     border: 0,
@@ -5903,10 +6150,19 @@ const getComponentCss$E = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
+    const { focusColor: focusColorDark } = getThemedColors('dark');
     const { linkColor } = getHighContrastColors();
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), hasSlottedAnchor && {
+    const isPrimary = variant === 'primary';
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
+        icon: {
+            ...(isPrimary &&
+                !isHighContrastMode && {
+                filter: 'invert(1)',
+            }),
+        },
+    }, hasSlottedAnchor && {
         ...(isHighContrastMode && {
             root: {
                 borderColor: linkColor,
@@ -5935,6 +6191,9 @@ const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                 },
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&(a:focus:not(:focus-visible))::before': {
                     border: 0,
@@ -5948,7 +6207,7 @@ const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 // because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$C = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -5973,12 +6232,14 @@ const getComponentCss$C = (aspectRatio, weight, direction, hasDescription) => {
         heading: {
             margin: 0,
             ...textLargeStyle,
+            hyphens: 'inherit',
             ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
         },
         ...(hasDescription && {
             description: {
                 margin: '-12px 0 0 ',
                 ...textSmallStyle,
+                hyphens: 'inherit',
             },
         }),
         'link-group': {
@@ -5995,7 +6256,7 @@ const getComponentCss$C = (aspectRatio, weight, direction, hasDescription) => {
     });
 };
 
-const getComponentCss$B = (...args) => {
+const getComponentCss$C = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
         'link-overlay': {
@@ -6016,7 +6277,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$A = (size) => {
+const getComponentCss$B = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6025,6 +6286,7 @@ const getComponentCss$A = (size) => {
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6104,7 +6366,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
         },
     };
 };
-const getComponentCss$z = (isOpen, isFullscreen, hasDismissButton, hasHeader, hasFooter) => {
+const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, hasFooter) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
     const duration = isOpen ? '.6s' : '.2s';
     const contentPadding = '32px';
@@ -6127,6 +6389,7 @@ const getComponentCss$z = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                             visibility: 'hidden',
                             transition: 'visibility 0s linear .2s',
                         }),
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...getFrostedGlassBackgroundJssStyles(isOpen, duration),
                 }),
@@ -6225,21 +6488,24 @@ const getComponentCss$z = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
 
 const modelSignatureHeight = 36;
 
+const colorToFilterLight = {
+    primary: filterLightPrimary,
+    'contrast-low': filterLightContrastLow,
+    'contrast-medium': filterLightContrastMedium,
+    'contrast-high': filterLightContrastHigh,
+};
+const colorToFilterDark = {
+    primary: filterDarkPrimary,
+    'contrast-low': filterDarkContrastLow,
+    'contrast-medium': filterDarkContrastMedium,
+    'contrast-high': filterDarkContrastHigh,
+};
 const colorToFilterMap = {
-    light: {
-        primary: filterLightPrimary,
-        'contrast-low': filterLightContrastLow,
-        'contrast-medium': filterLightContrastMedium,
-        'contrast-high': filterLightContrastHigh,
-    },
-    dark: {
-        primary: filterDarkPrimary,
-        'contrast-low': filterDarkContrastLow,
-        'contrast-medium': filterDarkContrastMedium,
-        'contrast-high': filterDarkContrastHigh,
-    },
+    auto: colorToFilterLight,
+    light: colorToFilterLight,
+    dark: colorToFilterDark,
 };
-const getComponentCss$y = (size, color, theme) => {
+const getComponentCss$z = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -6256,6 +6522,7 @@ const getComponentCss$y = (size, color, theme) => {
                         // TODO: we need a width map of all signatures to ensure same fluid behavior like implemented fro crest + wordmark
                         maxHeight: `${modelSignatureHeight}px`,
                     }),
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6266,6 +6533,9 @@ const getComponentCss$y = (size, color, theme) => {
                 pointerEvents: 'none',
                 ...(!isColorInherit && {
                     filter: colorToFilterMap[theme][color],
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        filter: colorToFilterMap.dark[color],
+                    }),
                     ...(isHighContrastMode &&
                         getSchemedHighContrastMediaQuery({
                             filter: colorToFilterMap.light[color],
@@ -6279,7 +6549,10 @@ const getComponentCss$y = (size, color, theme) => {
     });
 };
 
-const getComponentCss$x = (theme) => {
+const getComponentCss$y = (theme) => {
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { highlightColor } = getHighContrastColors();
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6287,7 +6560,62 @@ const getComponentCss$x = (theme) => {
                 ...hostHiddenStyles,
             }),
         },
-        ...getSelectOptionStyles(theme),
+        option: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '12px',
+            padding: `${spacingStaticSmall} 12px`,
+            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            cursor: 'pointer',
+            textAlign: 'left',
+            wordBreak: 'break-word',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusSmall,
+            transition: ['background-color', 'color'].map(getTransition).join(),
+            ...getNoResultsOptionJssStyle(),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: contrastLowColorDark,
+                    }),
+                },
+            }),
+            '&--selected': {
+                background: backgroundSurfaceColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundSurfaceColorDark,
+                }),
+            },
+            '&--highlighted': {
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: contrastLowColorDark,
+                }),
+            },
+            '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+                }),
+            },
+            '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            },
+            '&--hidden': {
+                display: 'none',
+            },
+        },
         checkbox: {
             pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
         },
@@ -6310,9 +6638,11 @@ const getPlaceholderJssStyle = (styles) => ({
 const inputYPadding = '13px';
 const selectorNativeSelect = '::slotted([slot=select])';
 const INPUT_HEIGHT_CALC = `${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2`;
-const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, hasLabel, theme) => {
+const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, hasLabel, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, backgroundColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     const isDirectionDown = direction === 'down';
     return getCss({
         '@global': {
@@ -6320,6 +6650,7 @@ const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 ':host': {
                     display: 'block',
                     position: 'relative',
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 },
                 ...(isWithinForm && {
@@ -6338,19 +6669,25 @@ const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWi
         ...getListStyles$1(isOpen, direction, theme),
         'input-container': {
             display: 'flex',
-            background: backgroundColor,
             transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
             cursor: 'text',
             ...hoverMediaQuery({
                 '&:hover:not(.disabled)': {
                     borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                    }),
                 },
             }),
             ...(!isDisabled && {
                 '&:focus-within': {
                     borderColor: primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: primaryColorDark,
+                    }),
                 },
             }),
+            background: backgroundColor,
             border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
             borderRadius: borderRadiusSmall,
             ...(isOpen && {
@@ -6365,6 +6702,18 @@ const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 borderColor: disabledColor,
                 WebkitTextFillColor: disabledColor,
             }),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+                border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
+                ...(isOpen && {
+                    [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
+                }),
+                ...(isDisabled && {
+                    color: disabledColorDark,
+                    borderColor: disabledColorDark,
+                    WebkitTextFillColor: disabledColorDark,
+                }),
+            }),
         },
         ...buildResponsiveStyles(hideLabel, (isHidden) => isHidden
             ? {
@@ -6395,6 +6744,9 @@ const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWi
         'no-results': {
             padding: `${spacingStaticSmall} 12px`,
             color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
             boxSizing: 'border-box',
             ...getNoResultsOptionJssStyle(),
         },
@@ -6405,13 +6757,13 @@ const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWi
 };
 const getInputStyles = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     return {
         input: {
             flex: 1,
             minWidth: 0,
             height: `calc(${INPUT_HEIGHT_CALC})`,
             font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-            color: primaryColor,
             padding: `${inputYPadding} ${spacingStaticMedium}`,
             boxSizing: 'border-box',
             border: 0,
@@ -6423,14 +6775,23 @@ const getInputStyles = (isDisabled, theme) => {
             '&:disabled': {
                 cursor: 'not-allowed',
             },
-            '&:not(:focus)': getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
+            color: primaryColor,
             ...(isDisabled && getPlaceholderJssStyle({ color: disabledColor })),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                ...(isDisabled && getPlaceholderJssStyle({ color: disabledColorDark })),
+            }),
+            '&:not(:focus)': {
+                ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
+                ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
+            }, // Opacity fixes placeholder being shown lighter in firefox
         },
     };
 };
 const getListStyles$1 = (isOpen, direction, theme) => {
     const isDirectionDown = direction === 'down';
     const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return {
         listbox: {
             position: 'absolute',
@@ -6439,7 +6800,6 @@ const getListStyles$1 = (isOpen, direction, theme) => {
             flexDirection: 'column',
             gap: spacingStaticSmall,
             padding: '6px',
-            background: backgroundColor,
             ...textSmallStyle,
             zIndex: 10,
             left: 0,
@@ -6451,6 +6811,7 @@ const getListStyles$1 = (isOpen, direction, theme) => {
             maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`,
             overflowY: 'auto',
             WebkitOverflowScrolling: 'touch',
+            background: backgroundColor,
             border: `2px solid ${primaryColor}`,
             [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
             borderRadius: borderRadiusSmall,
@@ -6459,7 +6820,11 @@ const getListStyles$1 = (isOpen, direction, theme) => {
             scrollbarWidth: 'thin',
             scrollbarColor: 'auto',
             transition: getTransition('border-color'),
-            transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
+            transform: 'translate3d(0,0,0)',
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+                borderColor: primaryColorDark,
+            }),
         },
     };
 };
@@ -6472,13 +6837,17 @@ const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
-const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
+const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             nav: {
                 display: 'flex',
@@ -6524,10 +6893,16 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
                 outline: 0,
                 borderRadius: borderRadiusSmall,
                 borderColor: 'transparent',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 ...hoverMediaQuery({
                     '&:not([aria-disabled]):not(.ellipsis):hover': {
                         ...frostedGlassStyle,
                         background: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: hoverColorDark,
+                        }),
                     },
                 }),
                 '&:not(.ellipsis):focus:focus-visible::before': {
@@ -6536,16 +6911,26 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
                     ...getInsetJssStyle(-4),
                     border: `${borderWidthBase} solid ${focusColor}`,
                     borderRadius: borderRadiusMedium,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&[aria-current]': {
                     ...disabledCursorStyle,
                     color: primaryColor,
                     border: `${borderWidthBase} solid ${primaryColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                        borderColor: primaryColorDark,
+                    }),
                     '&:not(.ellipsis):focus::before': getInsetJssStyle(-6),
                 },
                 '&[aria-disabled]': {
                     ...disabledCursorStyle,
                     color: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                    }),
                 },
             },
         },
@@ -6558,6 +6943,82 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     });
 };
 
+const removeSlottedSelector = (styles) => Object.fromEntries(Object.entries(styles).map(([key, value]) => {
+    value = typeof value === 'object' ? removeSlottedSelector(value) : value;
+    return [key.replace(/::slotted\(([^,]+)\)/g, '$1'), value];
+}));
+const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(styles)
+    .filter(([key]) => key !== selector)
+    .map(([key, value]) => {
+    value = typeof value === 'object' ? removeStyles(selector, value) : value;
+    return [key, value];
+}));
+
+const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+    const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
+    const labelStyles = removeStyles('@media(hover:hover)', removeSlottedSelector(getLabelStyles('input', isDisabled, hideLabel, state, theme)));
+    const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getBaseChildStyles('input', state, theme, {
+        textAlign: 'center',
+        width: inputSize,
+        ...(length === 6 && {
+            [getMediaQueryMax('xs')]: {
+                width: `calc((276px - (${spacingStaticSmall} * 5)) / 6)`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
+            },
+        }),
+        ...(isLoading && {
+            opacity: 0.2,
+            cursor: 'not-allowed',
+        }),
+    })));
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                display: 'block',
+                ...colorSchemeStyles,
+                ...hostHiddenStyles,
+            }),
+            ...inputStyles,
+            ...(isWithinForm &&
+                addImportantToEachRule({
+                    '::slotted(input)': {
+                        position: 'absolute',
+                        height: inputSize,
+                        width: 0,
+                        opacity: 0,
+                    },
+                })),
+        },
+        ...(isLoading && {
+            spinner: {
+                width: '100%',
+                height: inputSize,
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+            },
+        }),
+        'input-container': {
+            display: 'flex',
+            position: 'relative',
+            gap: spacingStaticSmall,
+            flexWrap: 'wrap',
+            width: 'fit-content',
+        },
+        ...mergeDeep(labelStyles, {
+            label: {
+                ...buildResponsiveStyles(hideLabel, 
+                // workaround: since pin-code component is not wrapped into label tag it behaves differently
+                (isLabelHidden) => (isLabelHidden ? { display: 'none' } : { display: 'inline-flex' })),
+                marginBottom: spacingStaticXSmall,
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const { backgroundColor: backgroundColorThemeLight, primaryColor: primaryColorThemeLight } = getThemedColors('light');
 const { canvasColor, canvasTextColor } = getHighContrastColors();
 const directionPositionMap = {
@@ -6632,6 +7093,7 @@ const getComponentCss$u = (direction, theme) => {
                 ...addImportantToEachRule({
                     position: 'relative',
                     display: 'inline-block',
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 verticalAlign: 'top',
@@ -6728,19 +7190,30 @@ const getComponentCss$u = (direction, theme) => {
     });
 };
 
-const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
+const getCheckedSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
+};
+const getComponentCss$t = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = isHighContrastMode
         ? getHighContrastColors().canvasColor
-        : getInvertedThemedColors(theme).primaryColor.replace(/#/g, '%23');
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, false, theme), {
+        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = isHighContrastMode
+        ? getHighContrastColors().canvasColor
+        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), {
         '@global': {
             '::slotted': addImportantToEachRule({
                 '&(input)': {
                     borderRadius: '50%',
                 },
-                '&(input:checked)': {
-                    backgroundImage: getInlineSVGBackgroundImage(`<circle fill="${checkedIconColor}" cx="12" cy="12" r="6"/>`),
-                },
+                ...(!isLoading && {
+                    '&(input:checked)': {
+                        backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
+                        }),
+                    },
+                }),
                 ...(!isDisabled && {
                     '&(input:focus)::before': {
                         borderRadius: '50%',
@@ -6751,15 +7224,18 @@ const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
     }));
 };
 
+const gradientColorLight = {
+    'background-base': '255,255,255',
+    'background-surface': '238,239,242',
+};
+const gradientColorDark = {
+    'background-base': '14,14,18',
+    'background-surface': '33,34,37',
+};
 const gradientColorMap = {
-    light: {
-        'background-base': '255,255,255',
-        'background-surface': '238,239,242',
-    },
-    dark: {
-        'background-base': '14,14,18',
-        'background-surface': '33,34,37',
-    },
+    auto: gradientColorLight,
+    light: gradientColorLight,
+    dark: gradientColorDark,
 };
 const getGradient = (theme, gradientColorTheme) => {
     const gradientColor = gradientColorMap[theme][gradientColorTheme];
@@ -6770,15 +7246,17 @@ const getGradient = (theme, gradientColorTheme) => {
 };
 const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
-    const isDarkTheme = isThemeDark(theme);
+    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
+    const backgroundColorLight = {
+        'background-base': backgroundColor,
+        'background-surface': backgroundSurfaceColor,
+    };
     const backgroundColorMap = {
+        auto: backgroundColorLight,
+        light: backgroundColorLight,
         dark: {
-            'background-base': backgroundSurfaceColor,
-            'background-surface': backgroundColor,
-        },
-        light: {
-            'background-base': backgroundColor,
-            'background-surface': backgroundSurfaceColor,
+            'background-base': backgroundSurfaceColorDark,
+            'background-surface': backgroundColorDark,
         },
     };
     const actionPrevNextStyles = {
@@ -6793,6 +7271,7 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             ':host': addImportantToEachRule({
                 display: 'block',
                 height: 'inherit',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             button: {
@@ -6807,15 +7286,21 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                 outline: 0,
                 cursor: 'pointer',
                 background: backgroundColorMap[theme][gradientColor],
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorMap.dark[gradientColor],
+                }),
                 borderRadius: borderRadiusSmall,
                 ...frostedGlassStyle,
                 visibility: 'hidden',
-                ...(!isDarkTheme && dropShadowLowStyle),
+                ...(!isThemeDark(theme) && dropShadowLowStyle),
                 ...hoverMediaQuery({
                     transition: getTransition('background-color'),
                     '&:hover': {
                         ...frostedGlassStyle,
                         background: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: hoverColorDark,
+                        }),
                     },
                 }),
             },
@@ -6858,6 +7343,9 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             },
             '&:focus::before': {
                 borderColor: focusColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: focusColorDark,
+                }),
             },
             '&:focus:not(:focus-visible)::before': {
                 borderColor: 'transparent',
@@ -6882,6 +7370,9 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             gridArea: '1 / 1 / 1 / 1',
             justifyContent: 'flex-start',
             background: `linear-gradient(to right, ${getGradient(theme, gradientColor)} 100%)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: `linear-gradient(to right, ${getGradient('dark', gradientColor)} 100%)`,
+            }),
             visibility: isPrevHidden ? 'hidden' : 'visible',
             '& button': {
                 marginLeft: '8px',
@@ -6897,6 +7388,9 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             gridArea: '1 / 3 / 1 / 3',
             justifyContent: 'flex-end',
             background: `linear-gradient(to left, ${getGradient(theme, gradientColor)} 100%)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: `linear-gradient(to left, ${getGradient('dark', gradientColor)} 100%)`,
+            }),
             visibility: isNextHidden ? 'hidden' : 'visible',
             '& button': {
                 marginRight: '8px',
@@ -6925,7 +7419,9 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
 const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { focusColor } = getThemedColors(theme);
+    const { focusColor: focusColorDark } = getThemedColors('dark');
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
+    const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6935,6 +7431,7 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
             }),
             // All width relevant styling has to be kept in sync with the tempDiv of the p-segmented-control utils
             button: {
+                position: 'relative',
                 display: 'block',
                 height: '100%',
                 width: '100%',
@@ -6946,7 +7443,10 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 background: 'transparent',
                 color: buttonColor,
                 ...textSmallStyle,
-                position: 'relative',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: borderColorDark,
+                    color: buttonColorDark,
+                }),
                 '&::before': {
                     content: '""',
                     position: 'absolute',
@@ -6956,6 +7456,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 },
                 '&:focus::before': {
                     borderColor: focusColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&:focus:not(:focus-visible)::before': {
                     borderColor: 'transparent',
@@ -6971,6 +7474,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                                 transition: getTransition('border-color'),
                                 '&:hover': {
                                     borderColor: hoverBorderColor,
+                                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                                        borderColor: hoverBorderColorDark,
+                                    }),
                                 },
                             })),
                     }),
@@ -6981,6 +7487,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
                 color: labelColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: labelColorDark,
+                }),
             },
         },
         ...(hasIcon && {
@@ -7008,6 +7517,7 @@ const getComponentCss$q = (maxWidth, columns) => {
                     gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
                 })),
                 gap: '6px',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
         },
@@ -7017,7 +7527,9 @@ const getComponentCss$q = (maxWidth, columns) => {
 const dropdownPositionVar = '--p-internal-dropdown-position';
 const getButtonStyles = (direction, isOpen, state, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateHoverColor: formStateHoverColorDark, formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
     const isDirectionDown = direction === 'down';
     return {
         '@global': {
@@ -7034,17 +7546,29 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
                 outline: '0',
                 cursor: 'pointer',
                 transition: getTransition('border-color'),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark,
+                }),
                 '&:focus, &:focus ~ ul': {
                     borderColor: primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: primaryColorDark,
+                    }),
                 },
                 ...hoverMediaQuery({
                     '&:not(:disabled):not(:focus):hover': {
                         borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                        }),
                     },
                 }),
                 '&:disabled': {
                     cursor: 'not-allowed',
                     borderColor: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: disabledColorDark,
+                    }),
                 },
                 ...(isOpen && {
                     [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
@@ -7056,12 +7580,18 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
 };
 const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
     const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateHoverColor: formStateHoverColorDark, formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
     const isDirectionDown = direction === 'down';
     const placeHolderJssStyle = {
         opacity: 1,
         color: disabled ? disabledColor : primaryColor,
     };
+    const placeHolderDarkJssStyle = {
+        opacity: 1,
+        color: disabled ? disabledColorDark : primaryColorDark,
+    };
     return {
         '@global': {
             input: {
@@ -7085,23 +7615,45 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                 cursor: disabled ? 'not-allowed' : 'text',
                 color: primaryColor,
                 background: backgroundColor,
-                '&::placeholder': placeHolderJssStyle,
-                '&::-webkit-input-placeholder': placeHolderJssStyle,
-                '&::-moz-placeholder': placeHolderJssStyle,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                    background: backgroundColorDark,
+                }),
+                '&::placeholder': {
+                    ...placeHolderJssStyle,
+                    ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
+                },
+                '&::-webkit-input-placeholder': {
+                    ...placeHolderJssStyle,
+                    ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
+                },
+                '&::-moz-placeholder': {
+                    ...placeHolderJssStyle,
+                    ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
+                },
                 '&:not(:disabled):focus': {
                     opacity: 1,
                     '&+span, &~ ul': {
                         borderColor: primaryColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: primaryColorDark,
+                        }),
                     },
                 },
                 ...hoverMediaQuery({
                     '&:not(:disabled)': {
                         '&+span:hover': {
                             borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                            }),
                         },
                         '&:hover': {
                             '&+span, &~ul': {
                                 borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                                ...prefersColorSchemeDarkMediaQuery(theme, {
+                                    borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                                }),
                             },
                         },
                     },
@@ -7114,6 +7666,9 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                     pointerEvents: 'all',
                     cursor: disabled ? 'not-allowed' : 'pointer',
                     border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark,
+                    }),
                     borderRadius: borderRadiusSmall,
                     ...(isOpen && {
                         [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
@@ -7126,7 +7681,9 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
 };
 const getListStyles = (direction, theme) => {
     const isDirectionDown = direction === 'down';
-    const { primaryColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor, } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
     return {
         '@global': {
             ul: {
@@ -7155,15 +7712,72 @@ const getListStyles = (direction, theme) => {
                 scrollbarWidth: 'thin',
                 scrollbarColor: 'auto',
                 transition: getTransition('border-color'),
-                transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
+                transform: 'translate3d(0,0,0)',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                    borderColor: primaryColorDark,
+                    [isDirectionDown ? 'borderTopColor' : 'borderBottomColor']: addImportantToRule(contrastMediumColorDark),
+                }),
             },
         },
-        ...getSelectOptionStyles(theme, {
+        option: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '12px',
+            padding: `${spacingStaticSmall} 12px`,
+            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            cursor: 'pointer',
+            textAlign: 'left',
+            wordBreak: 'break-word',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusSmall,
+            transition: ['background-color', 'color'].map(getTransition).join(),
+            ...getNoResultsOptionJssStyle(),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: contrastLowColorDark,
+                    }),
+                },
+            }),
             '&--selected': {
                 cursor: 'default',
                 pointerEvents: 'none',
+                background: backgroundSurfaceColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundSurfaceColorDark,
+                }),
             },
-        }),
+            '&--highlighted': {
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: contrastLowColorDark,
+                }),
+            },
+            '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+                }),
+            },
+            '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            },
+            '&--hidden': {
+                display: 'none',
+            },
+        },
         optgroup: {
             display: 'block',
             padding: '3px 14px',
@@ -7179,7 +7793,9 @@ const getListStyles = (direction, theme) => {
 };
 const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -7194,11 +7810,17 @@ const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) =>
                 left: 0,
                 right: 0,
                 color: disabled ? disabledColor : formStateColor || contrastMediumColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabled ? disabledColorDark : formStateColorDark || contrastMediumColorDark,
+                }),
                 ...(!disabled &&
                     !isHighContrastMode &&
                     hoverMediaQuery({
                         '&(:hover)': {
                             color: formStateHoverColor || primaryColor,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                color: formStateHoverColorDark || primaryColorDark,
+                            }),
                         },
                     })),
             },
@@ -7216,6 +7838,7 @@ const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, them
         '@global': addImportantToEachRule({
             ':host': {
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             },
             ...getBaseChildStyles('select', state, theme, {
@@ -7260,12 +7883,14 @@ const getComponentCss$n = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = 'var(--p-animation-duration, 2s)';
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasColor, canvasTextColor } = getHighContrastColors();
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'inline-flex',
                 verticalAlign: 'top',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             svg: {
@@ -7277,13 +7902,21 @@ const getComponentCss$n = (size, theme) => {
             },
             circle: {
                 '&:first-child': {
+                    // TODO: High Contrast Mode should be handled within a local color helper function
                     stroke: isHighContrastMode ? canvasTextColor : contrastMediumColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        stroke: isHighContrastMode ? canvasTextColor : contrastMediumColorDark,
+                    }),
                     animation: `$rotate ${animationDuration} linear infinite`, // needs to rotate to eliminate stutter in safari
                 },
                 '&:last-child': {
                     transformOrigin: '0 0',
                     animation: `$dash ${animationDuration} ease-in-out infinite`,
+                    // TODO: High Contrast Mode should be handled within a local color helper function
                     stroke: isHighContrastMode ? canvasColor : primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        stroke: isHighContrastMode ? canvasColor : primaryColorDark,
+                    }),
                     strokeDasharray: strokeDasharray
                         ,
                     strokeLinecap: 'round',
@@ -7326,7 +7959,7 @@ const getComponentCss$n = (size, theme) => {
 
 const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     // # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
-    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: value.replace(/#/g, '%23') }), {});
+    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: escapeHashCharacter(value) }), {});
     const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
     const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
     const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
@@ -7348,6 +7981,7 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
 };
 const getComponentCss$m = (state, disabled, theme) => {
     const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const isStateCurrent = state === 'current';
     const isStateCurrentOrUndefined = !state || isStateCurrent;
     const isDisabled = !state || disabled;
@@ -7363,6 +7997,13 @@ const getComponentCss$m = (state, disabled, theme) => {
                                 invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
                                 disabledColor,
                             }, isStateCurrent)),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
+                                    primaryColor: primaryColorDark,
+                                    invertedBaseColor: getInvertedThemedColors('dark').primaryColor,
+                                    disabledColor: disabledColorDark,
+                                }, isStateCurrent)),
+                            }),
                         },
                     }), {})),
                 ...addImportantToEachRule({
@@ -7391,12 +8032,21 @@ const getComponentCss$m = (state, disabled, theme) => {
                     ...frostedGlassStyle,
                     background: hoverColor,
                 }),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isDisabled ? disabledColorDark : primaryColorDark,
+                    ...(isStateCurrent && {
+                        background: hoverColorDark,
+                    }),
+                }),
                 ...(!isDisabled &&
                     hoverMediaQuery({
                         transition: getTransition('background-color'),
                         '&:hover': {
                             ...frostedGlassStyle,
                             background: hoverColor,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                background: hoverColorDark,
+                            }),
                         },
                     })),
                 ...(isStateCurrentOrUndefined && {
@@ -7413,6 +8063,9 @@ const getComponentCss$m = (state, disabled, theme) => {
                     position: 'absolute',
                     ...getInsetJssStyle(),
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                     borderRadius: borderRadiusSmall,
                 },
                 '&:focus:not(:focus-visible)::after': {
@@ -7436,7 +8089,10 @@ const getComponentCss$l = (size) => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         scroller: {
@@ -7476,11 +8132,14 @@ const getColors$1 = (checked, disabled, loading, theme) => {
 };
 const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
+    const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
     const { focusColor } = getThemedColors(theme);
+    const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 outline: 0,
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
                 ...buildResponsiveStyles(stretch, (stretchValue) => ({
                     display: stretchValue ? 'block' : 'inline-block',
@@ -7509,8 +8168,15 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
                     '&:hover .switch': {
                         borderColor: buttonBorderColorHover,
                         backgroundColor: buttonBackgroundColorHover,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: buttonBorderColorHoverDark,
+                            backgroundColor: buttonBackgroundColorHoverDark,
+                        }),
                         '& .toggle': {
                             backgroundColor: toggleBackgroundColorHover,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                backgroundColor: toggleBackgroundColorHoverDark,
+                            }),
                         },
                     },
                 })),
@@ -7519,6 +8185,9 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
                 position: 'absolute',
                 ...getInsetJssStyle(-6),
                 border: `${borderWidthBase} solid ${focusColor}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: focusColorDark,
+                }),
                 borderRadius: '18px',
             },
             '&:not(:focus-visible) .switch::before': {
@@ -7536,6 +8205,10 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             backgroundColor: buttonBackgroundColor,
             cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
             transition: `${getTransition('background-color')},${getTransition('border-color')},${getTransition('color')}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: buttonBorderColorDark,
+                backgroundColor: buttonBackgroundColorDark,
+            }),
         },
         toggle: {
             position: 'absolute',
@@ -7546,6 +8219,9 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             display: 'block',
             borderRadius: '50%',
             backgroundColor: toggleBackgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                backgroundColor: toggleBackgroundColorDark,
+            }),
             transform: `translate3d(${checked ? '20px' : '0'}, 0, 0)`,
             transition: `${getTransition('background-color')},${getTransition('transform')}`,
         },
@@ -7564,6 +8240,9 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             minWidth: 0,
             minHeight: 0,
             color: textColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: textColorDark,
+            }),
             ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                 order: alignLabelValue === 'left' ? -1 : 0,
             })), buildResponsiveStyles(hideLabel, getHiddenTextJssStyle)),
@@ -7609,6 +8288,7 @@ const cssVariableTableBorderColor = '--p-internal-table-border-color';
 const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
 const getComponentCss$h = (theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = doGetThemedColors('dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7616,12 +8296,21 @@ const getComponentCss$h = (theme) => {
                 ...textSmallStyle,
                 color: primaryColor,
                 textAlign: 'left',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
             }),
             '::slotted(*)': addImportantToEachRule({
                 [cssVariableTableHoverColor]: hoverColor,
                 [cssVariableTableBorderColor]: contrastLowColor,
                 [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    [cssVariableTableHoverColor]: hoverColorDark,
+                    [cssVariableTableBorderColor]: contrastLowColorDark,
+                    [cssVariableTableHeadCellIconFilter]: 'invert(100%)',
+                }),
                 ...(isHighContrastMode &&
                     getSchemedHighContrastMediaQuery({
                         [cssVariableTableHeadCellIconFilter]: 'none',
@@ -7776,11 +8465,21 @@ const targetSelectors = ['a', 'button'];
 const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
 const getComponentCss$c = (size, weight, theme) => {
     const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const barJssStyle = {
         position: 'absolute',
         height: '2px',
         left: 0,
-        background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
+        ...(isHighContrastMode
+            ? {
+                background: getHighContrastColors().canvasTextColor,
+            }
+            : {
+                background: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: primaryColorDark,
+                }),
+            }),
     };
     return getCss({
         '@global': {
@@ -7788,6 +8487,7 @@ const getComponentCss$c = (size, weight, theme) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     position: 'relative',
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7818,6 +8518,9 @@ const getComponentCss$c = (size, weight, theme) => {
                     cursor: 'pointer',
                     borderRadius: borderRadiusSmall,
                     zIndex: 0,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                    }),
                     ...hoverMediaQuery({
                         '&::before': {
                             content: '""',
@@ -7833,6 +8536,9 @@ const getComponentCss$c = (size, weight, theme) => {
                     [transformSelector('::slotted([role]:hover)::before')]: {
                         ...frostedGlassStyle,
                         background: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: hoverColorDark,
+                        }),
                     },
                 }),
                 // basic invisible bar, that will be delayed via transition: visibility
@@ -7850,6 +8556,9 @@ const getComponentCss$c = (size, weight, theme) => {
                 // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
                 [transformSelector('::slotted([role]:focus:focus-visible)::before')]: {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 [transformSelector('::slotted([role]:not(:last-child))')]: {
                     marginRight: spacingStaticMedium,
@@ -7887,20 +8596,27 @@ const getComponentCss$c = (size, weight, theme) => {
 
 const getComponentCss$b = (theme) => {
     const { primaryColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, focusColor: focusColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
                 position: 'relative',
                 color: primaryColor,
-                ...hostHiddenStyles,
                 outline: 0,
+                ...hostHiddenStyles,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 '&(:focus:focus-visible)::before': {
                     content: '""',
                     position: 'absolute',
                     ...getInsetJssStyle(-4),
                     border: `${borderWidthBase} solid ${focusColor}`,
                     borderRadius: borderRadiusSmall,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
             }),
         },
@@ -7912,7 +8628,10 @@ const getComponentCss$a = () => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         root: {
@@ -7950,14 +8669,18 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
 
 const getComponentCss$9 = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
+    const themedColorsDark = getThemedColors('dark');
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastHighColor: contrastHighColorDark, } = themedColorsDark;
     const backgroundColor = getThemedBackgroundColor(color, themedColors);
+    const backgroundColorDark = getThemedBackgroundColor(color, themedColorsDark);
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'inline-block',
                 verticalAlign: 'top',
                 outline: 0,
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             button: {
@@ -7972,6 +8695,10 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 cursor: 'pointer',
                 background: backgroundColor,
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                    color: primaryColorDark,
+                }),
                 textAlign: 'left',
                 ...textSmallStyle,
                 outline: isHighContrastMode ? '1px solid transparent' : 0,
@@ -7979,6 +8706,9 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 ...hoverMediaQuery({
                     '&:hover > .icon': {
                         backgroundColor: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundColor: hoverColorDark,
+                        }),
                     },
                 }),
             },
@@ -7988,6 +8718,9 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 display: 'block',
                 marginBottom: '-4px',
                 color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
                 fontSize: fontSizeTextXSmall,
             },
         }),
@@ -8027,14 +8760,19 @@ const getColors = (themedColors, tagColor, theme) => {
 };
 const getComponentCss$8 = (tagColor, isFocusable, theme) => {
     const themedColors = getThemedColors(theme);
+    const themedColorsDark = getThemedColors('dark');
     const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundHoverColor: backgroundHoverColorDark, } = getColors(themedColorsDark, tagColor, 'dark');
     return getCss({
         '@global': {
             ':host': {
                 display: 'inline-flex',
                 verticalAlign: 'top',
                 whiteSpace: 'nowrap',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             span: {
                 display: 'flex',
@@ -8045,6 +8783,10 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                 borderRadius: borderRadiusSmall,
                 background: backgroundColor,
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                    color: primaryColorDark,
+                }),
                 font: textXSmallStyle.font,
                 ...(isHighContrastMode && {
                     outline: '1px solid transparent',
@@ -8054,6 +8796,9 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                         transition: getTransition('background-color'),
                         '&:hover': {
                             background: backgroundHoverColor,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                background: backgroundHoverColorDark,
+                            }),
                         },
                     })),
             },
@@ -8083,6 +8828,11 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
         icon: {
             marginLeft: '-2px',
             alignSelf: 'flex-start',
+            ...(['neutral-contrast-high', 'primary'].includes(tagColor) && {
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    filter: 'invert(1)',
+                }),
+            }),
         },
     });
 };
@@ -8120,6 +8870,7 @@ const getButtonOrIconOffsetHorizontal = (buttonOrIconAmount) => {
 };
 const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
@@ -8138,6 +8889,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     [cssVariableInputPaddingRight]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
                         ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
                         : spacingStaticMedium,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8185,6 +8937,9 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                 padding: unitPosition === 'suffix' ? `0 ${spacingStaticMedium} 0 10px` : `0 10px 0 ${spacingStaticMedium}`,
                 font: textSmallStyle.font,
                 color: contrastMediumColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastMediumColorDark,
+                }),
             },
         }),
         ...getFunctionalComponentRequiredStyles(),
@@ -8216,18 +8971,22 @@ const getComponentCss$6 = (type, theme) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     counterReset: counter,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
             'ol,ul': {
                 ...textSmallStyle,
-                color: getThemedColors(theme).primaryColor,
                 margin: 0,
                 padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) ${isOrderedList
                     ? `var(${cssVariableOrderedPaddingLeft},1.5rem)` // reserves space for ::before (root ordered list)
                     : `var(${cssVariableUnorderedPaddingLeft},.375rem)` // reserves space for ::marker "•" (root unordered list)
                 }`,
-                listStyleType: isOrderedList ? 'none' : `var(${cssVariableListStyleType},'•')`, // custom ::marker char for root unordered list
+                listStyleType: isOrderedList ? 'none' : `var(${cssVariableListStyleType},'•')`,
+                color: getThemedColors(theme).primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: getThemedColors('dark').primaryColor,
+                }),
             },
             // css selector for text-list-item
             '::slotted(*)': addImportantToEachRule({
@@ -8286,7 +9045,10 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             '::slotted': {
                 [TEXT_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
@@ -8301,10 +9063,12 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
 
 const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             ...mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
@@ -8326,6 +9090,9 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
                 zIndex: 1,
                 font: textSmallStyle.font,
                 color: contrastMediumColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastMediumColorDark,
+                }),
             },
         }),
         ...getFunctionalComponentRequiredStyles(),
@@ -8381,6 +9148,7 @@ const getComponentCss$1 = () => {
                     [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
                     bottom: `var(${cssVariablePositionBottomInternal})`,
                 },
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
@@ -8414,6 +9182,7 @@ const getComponentCss = (size, theme) => {
                             height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
                         },
                     }),
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8427,49 +9196,57 @@ const getComponentCss = (size, theme) => {
                 textDecoration: 'none',
                 ...focusPseudoJssStyle,
             },
-            svg: {
-                fill: isHighContrastMode ? getHighContrastColors().canvasTextColor : getThemedColors(theme).primaryColor,
-            },
+            svg: isHighContrastMode
+                ? {
+                    fill: getHighContrastColors().canvasTextColor,
+                }
+                : {
+                    fill: getThemedColors(theme).primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        fill: getThemedColors('dark').primaryColor,
+                    }),
+                },
         },
     });
 };
 
-exports.getAccordionCss = getComponentCss$$;
-exports.getBannerCss = getComponentCss$_;
-exports.getButtonCss = getComponentCss$W;
-exports.getButtonGroupCss = getComponentCss$Z;
-exports.getButtonPureCss = getComponentCss$Y;
-exports.getButtonTileCss = getComponentCss$X;
-exports.getCarouselCss = getComponentCss$V;
-exports.getCheckboxWrapperCss = getComponentCss$U;
-exports.getContentWrapperCss = getComponentCss$T;
-exports.getCrestCss = getComponentCss$S;
-exports.getDisplayCss = getComponentCss$R;
-exports.getDividerCss = getComponentCss$Q;
-exports.getFieldsetCss = getComponentCss$O;
-exports.getFieldsetWrapperCss = getComponentCss$P;
-exports.getFlexCss = getComponentCss$M;
-exports.getFlexItemCss = getComponentCss$N;
-exports.getFlyoutCss = getComponentCss$L;
+exports.getAccordionCss = getComponentCss$10;
+exports.getBannerCss = getComponentCss$$;
+exports.getButtonCss = getComponentCss$X;
+exports.getButtonGroupCss = getComponentCss$_;
+exports.getButtonPureCss = getComponentCss$Z;
+exports.getButtonTileCss = getComponentCss$Y;
+exports.getCarouselCss = getComponentCss$W;
+exports.getCheckboxWrapperCss = getComponentCss$V;
+exports.getContentWrapperCss = getComponentCss$U;
+exports.getCrestCss = getComponentCss$T;
+exports.getDisplayCss = getComponentCss$S;
+exports.getDividerCss = getComponentCss$R;
+exports.getFieldsetCss = getComponentCss$P;
+exports.getFieldsetWrapperCss = getComponentCss$Q;
+exports.getFlexCss = getComponentCss$N;
+exports.getFlexItemCss = getComponentCss$O;
+exports.getFlyoutCss = getComponentCss$M;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$J;
-exports.getGridItemCss = getComponentCss$K;
-exports.getHeadingCss = getComponentCss$I;
-exports.getHeadlineCss = getComponentCss$H;
-exports.getIconCss = getComponentCss$G;
-exports.getInlineNotificationCss = getComponentCss$F;
-exports.getLinkCss = getComponentCss$D;
-exports.getLinkPureCss = getComponentCss$E;
-exports.getLinkSocialCss = getComponentCss$D;
-exports.getLinkTileCss = getComponentCss$B;
-exports.getLinkTileModelSignatureCss = getComponentCss$C;
-exports.getMarqueCss = getComponentCss$A;
-exports.getModalCss = getComponentCss$z;
-exports.getModelSignatureCss = getComponentCss$y;
-exports.getMultiSelectCss = getComponentCss$w;
-exports.getMultiSelectOptionCss = getComponentCss$x;
-exports.getPaginationCss = getComponentCss$v;
+exports.getGridCss = getComponentCss$K;
+exports.getGridItemCss = getComponentCss$L;
+exports.getHeadingCss = getComponentCss$J;
+exports.getHeadlineCss = getComponentCss$I;
+exports.getIconCss = getComponentCss$H;
+exports.getInlineNotificationCss = getComponentCss$G;
+exports.getLinkCss = getComponentCss$E;
+exports.getLinkPureCss = getComponentCss$F;
+exports.getLinkSocialCss = getComponentCss$E;
+exports.getLinkTileCss = getComponentCss$C;
+exports.getLinkTileModelSignatureCss = getComponentCss$D;
+exports.getMarqueCss = getComponentCss$B;
+exports.getModalCss = getComponentCss$A;
+exports.getModelSignatureCss = getComponentCss$z;
+exports.getMultiSelectCss = getComponentCss$x;
+exports.getMultiSelectOptionCss = getComponentCss$y;
+exports.getPaginationCss = getComponentCss$w;
+exports.getPinCodeCss = getComponentCss$v;
 exports.getPopoverCss = getComponentCss$u;
 exports.getRadioButtonWrapperCss = getComponentCss$t;
 exports.getScrollerCss = getComponentCss$s;