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

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,15 +3962,164 @@ 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)';
 
+const getThemedFormStateColors = (theme, state) => {
+    const themedColors = getThemedColors(theme);
+    return {
+        formStateColor: themedColors[`${state}Color`],
+        formStateHoverColor: themedColors[`${state}ColorDarken`],
+    };
+};
+
+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',
+            width: '100%',
+            height: child !== 'textarea'
+                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
+                : 'auto',
+            margin: 0,
+            outline: 0,
+            WebkitAppearance: 'none',
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+            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: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacingStaticXSmall,
+            position: 'relative',
+            '&__text': {
+                display: 'block',
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' })),
+                ...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]))`]: {
+                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                borderColor: addImportantToRule(formStateHoverColorDark || primaryColorDark),
+                            }),
+                        },
+                    },
+                }),
+            },
+            ...additionalLabelJssStyle,
+        },
+        ...(counterOrUnitOrIconStyles && {
+            [counterOrUnitOrIconStylesKey]: {
+                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
+                pointerEvents: 'none',
+                ...(isDisabled && {
+                    color: disabledColor,
+                    cursor: 'not-allowed',
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                    }),
+                }),
+            },
+        }),
+    };
+};
+
+const OPTION_HEIGHT = 40; // optgroups are higher and ignored
+const MULTI_SELECT_OPTION_HEIGHT = 44;
+const getNoResultsOptionJssStyle = () => ({
+    '&[role=status]': {
+        cursor: 'not-allowed',
+    },
+    '&__sr': getHiddenTextJssStyle(),
+});
+
 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
@@ -3971,15 +4132,20 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$Z = (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: {
@@ -3995,6 +4161,9 @@ const getComponentCss$Z = (size, compact, open, theme) => {
                 cursor: 'pointer',
                 textAlign: 'left',
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 ...textSmallStyle,
                 fontWeight: fontWeightSemiBold,
                 ...buildResponsiveStyles(size, (s) => ({
@@ -4025,10 +4194,16 @@ const getComponentCss$Z = (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,
@@ -4054,6 +4229,9 @@ const getComponentCss$Z = (size, compact, open, theme) => {
         },
         collapsible: {
             color: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+            }),
             display: 'grid',
             ...(open
                 ? {
@@ -4098,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$Y = (isOpen) => {
+const getComponentCss$$ = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4140,6 +4318,7 @@ const getComponentCss$Y = (isOpen) => {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
                 },
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
         },
@@ -4160,12 +4339,15 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$X = (direction) => {
+const getComponentCss$_ = (direction) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             div: {
                 display: 'flex',
@@ -4210,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': {
@@ -4217,6 +4400,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...addImportantToEachRule({
                     transform: 'translate3d(0,0,0)',
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 ...buildResponsiveStyles(stretch, (responsiveStretch) => ({
@@ -4233,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) => ({
@@ -4255,6 +4442,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...(active && {
                     ...frostedGlassStyle,
                     backgroundColor: hoverColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        backgroundColor: hoverColorDark,
+                    }),
                 }),
             },
             ...(!isDisabledOrLoading &&
@@ -4262,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,
@@ -4296,7 +4492,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$W = (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: {
@@ -4362,7 +4558,11 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                hyphens: 'auto',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             ...addImportantToEachRule({
                 '::slotted': {
@@ -4427,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
                 }))),
@@ -4467,7 +4668,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$V = (isDisabledOrLoading, ...args) => {
+const getComponentCss$Y = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4504,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 {
@@ -4513,6 +4715,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4558,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 && {
@@ -4588,9 +4800,10 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$U = (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: {
@@ -4599,6 +4812,11 @@ const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loadi
                 backgroundColor,
                 borderColor,
                 color: textColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundColor: backgroundColorDark,
+                    borderColor: borderColorDark,
+                    color: textColorDark,
+                }),
             }),
             ...(loading && !isPrimary && frostedGlassStyle),
         },
@@ -4611,6 +4829,7 @@ const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loadi
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
+                ...(isPrimary && !isHighContrastMode && { filter: 'invert(1)' }),
             },
         }),
         label: {
@@ -4621,6 +4840,11 @@ const getComponentCss$U = (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
             }),
@@ -4647,8 +4871,9 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$T = (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({
@@ -4658,6 +4883,7 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
                 gap: spacingFluidMedium,
                 flexDirection: 'column',
                 boxSizing: 'content-box',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             '::slotted(*)': {
@@ -4665,6 +4891,9 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
             },
             '::slotted(*:focus-visible)': addImportantToEachRule({
                 outline: `${borderWidthBase} solid ${focusColor}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    outlineColor: focusColorDark,
+                }),
                 outlineOffset: '2px',
             }),
             [selectorHeading]: addImportantToEachRule({
@@ -4679,6 +4908,9 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
             }),
             [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
                 color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
                 [mediaQueryS]: isHeaderAlignCenter
                     ? {
                         gridColumn: 2,
@@ -4735,7 +4967,6 @@ const getComponentCss$T = (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}`,
@@ -4750,6 +4981,7 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
                     },
                 }),
                 '&--draggable': {
+                    cursor: 'grab',
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
@@ -4767,7 +4999,7 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         },
         ...(hasPagination && {
-            ['pagination-container']: {
+            'pagination-container': {
                 ...buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
                     display: hasPaginationValue ? 'flex' : 'none',
                 })),
@@ -4787,7 +5019,16 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
             },
             bullet: {
                 borderRadius: borderRadiusSmall,
-                background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
+                ...(isHighContrastMode
+                    ? {
+                        background: canvasTextColor,
+                    }
+                    : {
+                        background: contrastMediumColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: contrastMediumColorDark,
+                        }),
+                    }),
                 ...(isInfinitePagination
                     ? {
                         width: '0px',
@@ -4801,13 +5042,13 @@ const getComponentCss$T = (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,
@@ -4823,8 +5064,17 @@ const getComponentCss$T = (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 && {
@@ -4842,14 +5092,6 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
     });
 };
 
-const getThemedFormStateColors = (theme, state) => {
-    const themedColors = getThemedColors(theme);
-    return {
-        formStateColor: themedColors[`${state}Color`],
-        formStateHoverColor: themedColors[`${state}ColorDarken`],
-    };
-};
-
 const getFunctionalComponentRequiredStyles = () => {
     return {
         required: {
@@ -4866,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'),
         },
     };
@@ -4873,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',
             }),
@@ -4907,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',
                 },
@@ -4914,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 && {
@@ -4932,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',
@@ -4950,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',
+            },
+        }),
     };
 };
 
@@ -4962,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$S = (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({
@@ -4978,11 +5285,17 @@ const getComponentCss$S = (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': {
@@ -4991,19 +5304,6 @@ const getComponentCss$S = (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',
-            },
-        }),
     }));
 };
 
@@ -5012,12 +5312,15 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$R = (width) => {
+const getComponentCss$U = (width) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         root: {
@@ -5051,7 +5354,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$Q = () => {
+const getComponentCss$T = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5062,6 +5365,7 @@ const getComponentCss$Q = () => {
                     outline: 0,
                     boxSizing: 'content-box',
                     ...getDimensionStyle,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5097,6 +5401,9 @@ ellipsis, theme) => {
         padding: 0,
         ...baseTextStyle,
         color: getThemedTypographyColor(theme, color),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: getThemedTypographyColor('dark', color),
+        }),
         textAlign: align,
         letterSpacing: 'normal',
         listStyleType: 'none',
@@ -5135,12 +5442,15 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$P = (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()),
@@ -5152,36 +5462,55 @@ const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$O = (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$N = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Q = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             fieldset: {
@@ -5195,6 +5524,9 @@ const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
                     padding: 0,
                     color: getThemedColors(theme).primaryColor,
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
                 },
             }),
         },
@@ -5207,11 +5539,12 @@ const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
                 display: 'block',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             fieldset: {
@@ -5224,6 +5557,9 @@ const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
                     margin: `0 0 ${spacingStaticMedium}`,
                     padding: 0,
                     color: getThemedColors(theme).primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
                 },
             }),
@@ -5247,7 +5583,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5269,10 +5605,10 @@ const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$K = (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,
@@ -5294,14 +5630,16 @@ const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
 const cssVariableMaxWidth = '--p-flyout-max-width';
 const maxWidthDefault = '1180px';
 const minWidthDefault = '320px';
-const getComponentCss$J = (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 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': {
@@ -5318,6 +5656,7 @@ const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     }),
                 ...getInsetJssStyle(),
                 ...getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration),
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             },
         }),
@@ -5328,12 +5667,18 @@ const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             }),
             justifyContent: 'flex-end',
             background: backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+            }),
             position: 'sticky',
             top: 0,
             zIndex: 1,
         },
         [headerShadowClass]: {
             boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px 5px 10px`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                boxShadow: `${scrollShadowColorDark} 0px 5px 10px`,
+            }),
         },
         ...(hasHeader && {
             'header-content': {
@@ -5347,6 +5692,10 @@ const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             border: `2px solid ${backgroundColor}`,
             borderRadius: '4px',
             background: backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: backgroundColorDark,
+                background: backgroundColorDark,
+            }),
             ...hoverMediaQuery({
                 '&:hover': {
                     background: darkThemeContrastHighColor,
@@ -5373,6 +5722,10 @@ const getComponentCss$J = (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,
@@ -5388,6 +5741,9 @@ const getComponentCss$J = (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 && {
@@ -5397,9 +5753,15 @@ const getComponentCss$J = (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 && {
@@ -5414,7 +5776,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$I = (size, offset) => {
+const getComponentCss$L = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5434,7 +5796,7 @@ const getComponentCss$I = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$H = (direction, wrap) => {
+const getComponentCss$K = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5443,6 +5805,7 @@ const getComponentCss$H = (direction, wrap) => {
                 width: 'auto',
                 marginLeft: gutter,
                 marginRight: gutter,
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
                 ...mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))),
             }),
@@ -5457,12 +5820,15 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$G = (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()),
@@ -5516,12 +5882,15 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$F = (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()),
@@ -5565,29 +5934,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%': {
@@ -5599,7 +5971,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$E = (color, size, theme) => {
+const getComponentCss$H = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -5608,7 +5980,10 @@ const getComponentCss$E = (color, size, theme) => {
             ':host': {
                 display: 'inline-block',
                 verticalAlign: 'top',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
             img: {
                 display: 'block',
@@ -5616,12 +5991,15 @@ const getComponentCss$E = (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.
                 }),
@@ -5665,6 +6043,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',
@@ -5690,11 +6071,12 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$D = (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,
@@ -5702,6 +6084,9 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
             'h5,p': {
                 margin: 0,
                 color: getThemedColors(theme).primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: getThemedColors('dark').primaryColor,
+                }),
             },
         },
         icon: getNotificationIconJssStyle(),
@@ -5716,8 +6101,9 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$C = (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',
@@ -5747,6 +6133,9 @@ const getComponentCss$C = (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,
@@ -5756,10 +6145,19 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$B = (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,
@@ -5788,6 +6186,9 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                 },
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&(a:focus:not(:focus-visible))::before': {
                     border: 0,
@@ -5801,7 +6202,7 @@ const getComponentCss$B = (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$A = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -5826,12 +6227,14 @@ const getComponentCss$A = (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': {
@@ -5848,7 +6251,7 @@ const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
     });
 };
 
-const getComponentCss$z = (...args) => {
+const getComponentCss$C = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
         'link-overlay': {
@@ -5869,7 +6272,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$y = (size) => {
+const getComponentCss$B = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5878,6 +6281,7 @@ const getComponentCss$y = (size) => {
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
                     outline: 0,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5957,7 +6361,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
         },
     };
 };
-const getComponentCss$x = (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';
@@ -5980,6 +6384,7 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                             visibility: 'hidden',
                             transition: 'visibility 0s linear .2s',
                         }),
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...getFrostedGlassBackgroundJssStyles(isOpen, duration),
                 }),
@@ -6078,21 +6483,24 @@ const getComponentCss$x = (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$w = (size, color, theme) => {
+const getComponentCss$z = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -6109,6 +6517,7 @@ const getComponentCss$w = (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,
                 }),
             },
@@ -6119,6 +6528,9 @@ const getComponentCss$w = (size, color, theme) => {
                 pointerEvents: 'none',
                 ...(!isColorInherit && {
                     filter: colorToFilterMap[theme][color],
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        filter: colorToFilterMap.dark[color],
+                    }),
                     ...(isHighContrastMode &&
                         getSchemedHighContrastMediaQuery({
                             filter: colorToFilterMap.light[color],
@@ -6132,6 +6544,286 @@ const getComponentCss$w = (size, color, 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({
+                scrollMarginTop: spacingStaticSmall,
+                ...hostHiddenStyles,
+            }),
+        },
+        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
+        },
+    });
+};
+
+/**
+ * Generates placeholder styles for an input element.
+ *
+ * @param {JssStyle} styles - The styles to apply to the placeholder.
+ * @returns {JssStyle} - The generated placeholder styles.
+ */
+const getPlaceholderJssStyle = (styles) => ({
+    '&::placeholder': styles,
+    '&::-webkit-input-placeholder': styles /* Chrome/Opera/Safari */,
+    '&::-moz-placeholder': styles /* Firefox 19+ */,
+    '&:-moz-placeholder': styles /* Firefox 18- */,
+});
+
+const inputYPadding = '13px';
+const selectorNativeSelect = '::slotted([slot=select])';
+const INPUT_HEIGHT_CALC = `${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2`;
+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': {
+            ...addImportantToEachRule({
+                ':host': {
+                    display: 'block',
+                    position: 'relative',
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                },
+                ...(isWithinForm && {
+                    [selectorNativeSelect]: {
+                        position: 'absolute',
+                        opacity: 0,
+                        height: '0px',
+                    },
+                }),
+            }),
+            ...getInputStyles(isDisabled, theme),
+        },
+        root: {
+            position: 'relative',
+        },
+        ...getListStyles$1(isOpen, direction, theme),
+        'input-container': {
+            display: 'flex',
+            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 && {
+                [isDirectionDown ? 'paddingBottom' : 'paddingTop']: '1px',
+                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
+                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            }),
+            ...(isDisabled && {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                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
+            ? {
+                label: {
+                    display: 'none',
+                },
+            }
+            : hasLabel &&
+                getLabelStyles('select', isDisabled, hideLabel, state, theme, undefined, {
+                    marginBottom: spacingStaticXSmall,
+                })),
+        icon: {
+            padding: `${inputYPadding} 15px`,
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            ...(isDisabled && { pointerEvents: 'none' }),
+        },
+        'reset-icon': {
+            padding: '4px',
+            margin: 'auto',
+        },
+        'toggle-icon': {
+            transform: 'rotate3d(0,0,1,0.0001deg)',
+            transition: getTransition('transform'),
+            '&--open': {
+                transform: 'rotate3d(0,0,1,180deg)',
+            },
+        },
+        'no-results': {
+            padding: `${spacingStaticSmall} 12px`,
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            boxSizing: 'border-box',
+            ...getNoResultsOptionJssStyle(),
+        },
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+        'sr-text': getHiddenTextJssStyle(),
+    });
+};
+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'),
+            padding: `${inputYPadding} ${spacingStaticMedium}`,
+            boxSizing: 'border-box',
+            border: 0,
+            outline: 0,
+            appearance: 'none',
+            background: 'transparent',
+            ...textSmallStyle,
+            textOverflow: 'ellipsis',
+            '&:disabled': {
+                cursor: 'not-allowed',
+            },
+            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',
+            margin: '0',
+            display: isOpen ? 'flex' : 'none',
+            flexDirection: 'column',
+            gap: spacingStaticSmall,
+            padding: '6px',
+            ...textSmallStyle,
+            zIndex: 10,
+            left: 0,
+            right: 0,
+            [isDirectionDown ? 'top' : 'bottom']: isDirectionDown
+                ? '100%'
+                : `calc((${INPUT_HEIGHT_CALC}) + 2 * ${borderWidthBase})`,
+            boxSizing: 'border-box',
+            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,
+            [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
+            [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'auto',
+            transition: getTransition('border-color'),
+            transform: 'translate3d(0,0,0)',
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+                borderColor: primaryColorDark,
+            }),
+        },
+    };
+};
+
 const mediaQueryMinS = getMediaQueryMin('s');
 // button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
 // and text scale 200% works (almost) on mobile viewports too
@@ -6140,13 +6832,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',
@@ -6192,10 +6888,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': {
@@ -6204,16 +6906,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,
+                    }),
                 },
             },
         },
@@ -6226,6 +6938,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 = {
@@ -6300,6 +7088,7 @@ const getComponentCss$u = (direction, theme) => {
                 ...addImportantToEachRule({
                     position: 'relative',
                     display: 'inline-block',
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 verticalAlign: 'top',
@@ -6396,19 +7185,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%',
@@ -6419,15 +7219,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];
@@ -6438,15 +7241,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 = {
@@ -6461,6 +7266,7 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             ':host': addImportantToEachRule({
                 display: 'block',
                 height: 'inherit',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             button: {
@@ -6475,15 +7281,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,
+                        }),
                     },
                 }),
             },
@@ -6526,6 +7338,9 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             },
             '&:focus::before': {
                 borderColor: focusColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: focusColorDark,
+                }),
             },
             '&:focus:not(:focus-visible)::before': {
                 borderColor: 'transparent',
@@ -6550,6 +7365,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',
@@ -6565,6 +7383,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',
@@ -6593,7 +7414,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({
@@ -6603,6 +7426,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%',
@@ -6614,7 +7438,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',
@@ -6624,6 +7451,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 },
                 '&:focus::before': {
                     borderColor: focusColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: focusColorDark,
+                    }),
                 },
                 '&:focus:not(:focus-visible)::before': {
                     borderColor: 'transparent',
@@ -6639,6 +7469,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                                 transition: getTransition('border-color'),
                                 '&:hover': {
                                     borderColor: hoverBorderColor,
+                                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                                        borderColor: hoverBorderColorDark,
+                                    }),
                                 },
                             })),
                     }),
@@ -6649,6 +7482,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
                 color: labelColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: labelColorDark,
+                }),
             },
         },
         ...(hasIcon && {
@@ -6676,146 +7512,19 @@ const getComponentCss$q = (maxWidth, columns) => {
                     gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
                 })),
                 gap: '6px',
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
         },
     });
 };
 
-const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
-    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    return {
-        [`::slotted(${child})`]: {
-            display: 'block',
-            width: '100%',
-            height: child !== 'textarea'
-                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
-                : 'auto',
-            margin: 0,
-            outline: 0,
-            WebkitAppearance: 'none',
-            appearance: 'none',
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            background: 'transparent',
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-            textIndent: 0,
-            color: primaryColor,
-            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
-            ...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,
-            },
-        }),
-        [`::slotted(${child}:focus)`]: {
-            borderColor: primaryColor,
-        },
-        [`::slotted(${child}:disabled)`]: {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-            WebkitTextFillColor: disabledColor,
-        },
-        ...(child !== 'select' && {
-            [`::slotted(${child}[readonly])`]: {
-                borderColor: contrastLowColor,
-                background: contrastLowColor,
-            },
-        }),
-    };
-};
-const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles) => {
-    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
-    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
-    return {
-        label: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: spacingStaticXSmall,
-            position: 'relative',
-            '&__text': {
-                display: 'block',
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' })),
-                ...textSmallStyle,
-                color: isDisabled ? disabledColor : primaryColor,
-                transition: getTransition('color'),
-                '&+&': {
-                    marginTop: `-${spacingStaticXSmall}`,
-                    fontSize: fontSizeTextXSmall,
-                    ...(!isDisabled && {
-                        color: contrastHighColor,
-                    }),
-                },
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
-                            (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
-                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
-                        },
-                    },
-                }),
-            },
-        },
-        ...(counterOrUnitOrIconStyles && {
-            [counterOrUnitOrIconStylesKey]: {
-                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
-                pointerEvents: 'none',
-                ...(isDisabled && {
-                    color: disabledColor,
-                    cursor: 'not-allowed',
-                }),
-            },
-        }),
-    };
-};
-
-const OPTION_HEIGHT = 40; // optgroups are higher and ignored
-const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
-    return getCss({
-        '@global': addImportantToEachRule({
-            ':host': {
-                display: 'block',
-                ...hostHiddenStyles,
-            },
-            ...getBaseChildStyles('select', state, theme, {
-                position: 'static',
-                zIndex: 0,
-                cursor: 'pointer',
-                padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}`,
-                ...(hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }),
-            }),
-        }),
-        root: {
-            display: 'block',
-            position: 'relative',
-        },
-        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
-            icon: {
-                position: 'absolute',
-                bottom: '13px',
-                right: '15px',
-                transform: 'rotate3d(0,0,1,0.0001deg)',
-                transition: getTransition('transform'),
-                '&--open': {
-                    transform: 'rotate3d(0,0,1,180deg)',
-                },
-            },
-        }),
-        ...getFunctionalComponentRequiredStyles(),
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-    });
-};
-
 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': {
@@ -6832,17 +7541,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,
@@ -6854,12 +7575,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: {
@@ -6883,23 +7610,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,
+                                }),
                             },
                         },
                     },
@@ -6912,6 +7661,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,
@@ -6924,7 +7676,8 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
 };
 const getListStyles = (direction, theme) => {
     const isDirectionDown = direction === 'down';
-    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, } = 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': {
@@ -6954,7 +7707,12 @@ 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),
+                }),
             },
         },
         option: {
@@ -6964,33 +7722,52 @@ const getListStyles = (direction, theme) => {
             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(),
-            '&[role=status]': {
-                cursor: 'not-allowed',
-            },
-            '&__sr': getHiddenTextJssStyle(),
+            ...getNoResultsOptionJssStyle(),
             ...hoverMediaQuery({
-                '&:not([aria-disabled]):not([role=status]):hover': {
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
                     color: isHighContrastMode ? highlightColor : primaryColor,
-                    background: backgroundSurfaceColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: contrastLowColorDark,
+                    }),
                 },
             }),
-            '&--highlighted, &--selected': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-                background: backgroundSurfaceColor,
-            },
             '&--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',
@@ -7009,9 +7786,11 @@ const getListStyles = (direction, theme) => {
         },
     };
 };
-const getComponentCss$o = (direction, isOpen, state, disabled, filter, 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({
@@ -7026,11 +7805,17 @@ const getComponentCss$o = (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,
+                            }),
                         },
                     })),
             },
@@ -7043,6 +7828,43 @@ const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) =>
         : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
 };
 
+const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                display: 'block',
+                ...colorSchemeStyles,
+                ...hostHiddenStyles,
+            },
+            ...getBaseChildStyles('select', state, theme, {
+                position: 'static',
+                zIndex: 0,
+                cursor: 'pointer',
+                padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}`,
+                ...(hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }),
+            }),
+        }),
+        root: {
+            display: 'block',
+            position: 'relative',
+        },
+        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
+            icon: {
+                position: 'absolute',
+                bottom: '13px',
+                right: '15px',
+                transform: 'rotate3d(0,0,1,0.0001deg)',
+                transition: getTransition('transform'),
+                '&--open': {
+                    transform: 'rotate3d(0,0,1,180deg)',
+                },
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -7056,12 +7878,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: {
@@ -7073,13 +7897,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',
@@ -7122,7 +7954,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"/>`;
@@ -7144,6 +7976,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;
@@ -7159,6 +7992,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({
@@ -7187,12 +8027,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 && {
@@ -7209,6 +8058,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': {
@@ -7232,7 +8084,10 @@ const getComponentCss$l = (size) => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         scroller: {
@@ -7272,11 +8127,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',
@@ -7305,8 +8163,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,
+                            }),
                         },
                     },
                 })),
@@ -7315,6 +8180,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': {
@@ -7332,6 +8200,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',
@@ -7342,6 +8214,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')}`,
         },
@@ -7360,6 +8235,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)),
@@ -7405,6 +8283,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({
@@ -7412,12 +8291,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',
@@ -7572,11 +8460,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': {
@@ -7584,6 +8482,7 @@ const getComponentCss$c = (size, weight, theme) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     position: 'relative',
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7614,6 +8513,9 @@ const getComponentCss$c = (size, weight, theme) => {
                     cursor: 'pointer',
                     borderRadius: borderRadiusSmall,
                     zIndex: 0,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                    }),
                     ...hoverMediaQuery({
                         '&::before': {
                             content: '""',
@@ -7629,6 +8531,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
@@ -7646,6 +8551,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,
@@ -7683,20 +8591,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,
+                    }),
                 },
             }),
         },
@@ -7708,7 +8623,10 @@ const getComponentCss$a = () => {
         '@global': {
             ':host': {
                 display: 'block',
-                ...addImportantToEachRule(hostHiddenStyles),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
         },
         root: {
@@ -7746,14 +8664,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: {
@@ -7768,6 +8690,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,
@@ -7775,6 +8701,9 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 ...hoverMediaQuery({
                     '&:hover > .icon': {
                         backgroundColor: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundColor: hoverColorDark,
+                        }),
                     },
                 }),
             },
@@ -7784,6 +8713,9 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 display: 'block',
                 marginBottom: '-4px',
                 color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
                 fontSize: fontSizeTextXSmall,
             },
         }),
@@ -7823,14 +8755,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',
@@ -7841,6 +8778,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',
@@ -7850,6 +8791,9 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                         transition: getTransition('background-color'),
                         '&:hover': {
                             background: backgroundHoverColor,
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                background: backgroundHoverColorDark,
+                            }),
                         },
                     })),
             },
@@ -7879,6 +8823,11 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
         icon: {
             marginLeft: '-2px',
             alignSelf: 'flex-start',
+            ...(['neutral-contrast-high', 'primary'].includes(tagColor) && {
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    filter: 'invert(1)',
+                }),
+            }),
         },
     });
 };
@@ -7916,6 +8865,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');
@@ -7934,6 +8884,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     [cssVariableInputPaddingRight]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
                         ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
                         : spacingStaticMedium,
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7981,6 +8932,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(),
@@ -8012,18 +8966,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({
@@ -8082,7 +9040,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()),
@@ -8097,10 +9058,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, {
@@ -8122,6 +9085,9 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
                 zIndex: 1,
                 font: textSmallStyle.font,
                 color: contrastMediumColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastMediumColorDark,
+                }),
             },
         }),
         ...getFunctionalComponentRequiredStyles(),
@@ -8177,6 +9143,7 @@ const getComponentCss$1 = () => {
                     [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
                     bottom: `var(${cssVariablePositionBottomInternal})`,
                 },
+                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
@@ -8210,6 +9177,7 @@ const getComponentCss = (size, theme) => {
                             height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
                         },
                     }),
+                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8223,54 +9191,64 @@ 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$Z;
-exports.getBannerCss = getComponentCss$Y;
-exports.getButtonCss = getComponentCss$U;
-exports.getButtonGroupCss = getComponentCss$X;
-exports.getButtonPureCss = getComponentCss$W;
-exports.getButtonTileCss = getComponentCss$V;
-exports.getCarouselCss = getComponentCss$T;
-exports.getCheckboxWrapperCss = getComponentCss$S;
-exports.getContentWrapperCss = getComponentCss$R;
-exports.getCrestCss = getComponentCss$Q;
-exports.getDisplayCss = getComponentCss$P;
-exports.getDividerCss = getComponentCss$O;
-exports.getFieldsetCss = getComponentCss$M;
-exports.getFieldsetWrapperCss = getComponentCss$N;
-exports.getFlexCss = getComponentCss$K;
-exports.getFlexItemCss = getComponentCss$L;
-exports.getFlyoutCss = getComponentCss$J;
+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$H;
-exports.getGridItemCss = getComponentCss$I;
-exports.getHeadingCss = getComponentCss$G;
-exports.getHeadlineCss = getComponentCss$F;
-exports.getIconCss = getComponentCss$E;
-exports.getInlineNotificationCss = getComponentCss$D;
-exports.getLinkCss = getComponentCss$B;
-exports.getLinkPureCss = getComponentCss$C;
-exports.getLinkSocialCss = getComponentCss$B;
-exports.getLinkTileCss = getComponentCss$z;
-exports.getLinkTileModelSignatureCss = getComponentCss$A;
-exports.getMarqueCss = getComponentCss$y;
-exports.getModalCss = getComponentCss$x;
-exports.getModelSignatureCss = getComponentCss$w;
-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;
 exports.getSegmentedControlCss = getComponentCss$q;
 exports.getSegmentedControlItemCss = getComponentCss$r;
-exports.getSelectWrapperCss = getComponentCss$p;
-exports.getSelectWrapperDropdownCss = getComponentCss$o;
+exports.getSelectWrapperCss = getComponentCss$o;
+exports.getSelectWrapperDropdownCss = getComponentCss$p;
 exports.getSpinnerCss = getComponentCss$n;
 exports.getStepperHorizontalCss = getComponentCss$l;
 exports.getStepperHorizontalItemCss = getComponentCss$m;