@patternfly/documentation-framework 6.18.7 → 6.19.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.19.0 (2025-08-26)
+
+
+### Features
+
+* **docs-framework:** add high contrast theme switcher ([#4749](https://github.com/patternfly/patternfly-org/issues/4749)) ([1a24fb2](https://github.com/patternfly/patternfly-org/commit/1a24fb234bbaee2d569c16b4b1a90609fe006ddf))
+
+
+
+
+
 ## 6.18.7 (2025-08-19)
 
 

package/components/example/example.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState, useCallback } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useLocation } from '@reach/router';
 import {
   Button,
@@ -6,16 +6,11 @@ import {
   Flex,
   CodeBlockCode,
   debounce,
-  Icon,
   Label,
   Switch,
-  Select,
-  SelectOption,
-  SelectList,
-  MenuToggle,
   Tooltip,
   Stack,
-  StackItem
+  StackItem,
 } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
@@ -24,9 +19,6 @@ import * as reactTableModule from '@patternfly/react-table';
 import * as reactTableDeprecatedModule from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 import { getParameters } from 'codesandbox/lib/api/define';
-const SunIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9-4.037 9-9 9Zm0-16c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7Zm0-4a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707Z"></path></svg>;
-const MoonIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16.457 30C8.485 30 2 23.515 2 15.543c0-5.93 3.715-11.345 9.243-13.476a.999.999 0 0 1 1.289 1.3 12.185 12.185 0 0 0-.843 4.487c0 6.869 5.588 12.457 12.457 12.457 1.56 0 3.07-.284 4.487-.844a.998.998 0 0 1 1.3 1.29C27.802 26.285 22.387 30 16.456 30ZM9.992 4.904C6.338 7.134 4 11.177 4 15.544 4 22.412 9.588 28 16.457 28c4.367 0 8.41-2.338 10.639-5.992a14.39 14.39 0 0 1-2.95.302c-7.971 0-14.457-6.485-14.457-14.456 0-1.003.102-1.989.303-2.95Z"></path></svg>;
-const DesktopIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M23.94 16a1 1 0 0 1-.992-.876 6.957 6.957 0 0 0-6.069-6.062 1 1 0 1 1 .242-1.985 8.953 8.953 0 0 1 7.812 7.8A.999.999 0 0 1 23.94 16ZM16 5a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707ZM16 24.875c-4.894 0-8.875-3.981-8.875-8.875a8.879 8.879 0 0 1 5.227-8.088.876.876 0 0 1 1.153 1.163 6.945 6.945 0 0 0-.63 2.925A7.133 7.133 0 0 0 20 19.125a6.948 6.948 0 0 0 2.925-.63.876.876 0 0 1 1.163 1.154A8.88 8.88 0 0 1 16 24.875Zm-4.785-14.153A7.135 7.135 0 0 0 8.875 16 7.133 7.133 0 0 0 16 23.125a7.13 7.13 0 0 0 5.278-2.34c-.419.06-.845.09-1.278.09-4.894 0-8.875-3.981-8.875-8.875 0-.433.03-.86.09-1.278Z"></path></svg>;
 import { ExampleToolbar } from './exampleToolbar.jsx';
 import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
 import {
@@ -35,92 +27,15 @@ import {
   getReactParams,
   getExampleClassName,
   getExampleId,
-  liveCodeTypes,
+  liveCodeTypes
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
-import { useTheme } from '../../hooks/useTheme';
+import { ThemeSelector } from '../themeSelector/themeSelector';
 
 const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
-// Full-screen theme selector component using shared theme hook
-const FullScreenThemeSelector = () => {
-  const { themeMode, setThemeMode, THEME_MODES } = useTheme();
-  const [isThemeSelectOpen, setIsThemeSelectOpen] = useState(false);
-
-  const handleThemeChange = (_event, selectedMode) => {
-    setThemeMode(selectedMode);
-    setIsThemeSelectOpen(false);
-  };
-
-  const getThemeDisplayText = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return 'Light';
-      case THEME_MODES.DARK:
-        return 'Dark';
-      default:
-        return 'System';
-    }
-  };
-
-  const getThemeIcon = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return SunIcon;
-      case THEME_MODES.DARK:
-        return MoonIcon;
-      default:
-        return DesktopIcon;
-    }
-  };
-
-  return (
-    <Select
-      id="ws-example-theme-select"
-      isOpen={isThemeSelectOpen}
-      selected={themeMode}
-      onSelect={handleThemeChange}
-      onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
-      toggle={(toggleRef) => (
-        <MenuToggle
-          ref={toggleRef}
-          onClick={() => setIsThemeSelectOpen(!isThemeSelectOpen)}
-          isExpanded={isThemeSelectOpen}
-          icon={<Icon size="lg">{getThemeIcon(themeMode)}</Icon>}
-          aria-label={`Theme selection, current: ${getThemeDisplayText(themeMode)}`}
-        />
-      )}
-      shouldFocusToggleOnSelect
-    >
-      <SelectList>
-        <SelectOption 
-          value={THEME_MODES.SYSTEM}
-          icon={DesktopIcon}
-          description="Follow system preference"
-        >
-          System
-        </SelectOption>
-        <SelectOption 
-          value={THEME_MODES.LIGHT}
-          icon={SunIcon}
-          description="Always use light mode"
-        >
-          Light
-        </SelectOption>
-        <SelectOption 
-          value={THEME_MODES.DARK}
-          icon={MoonIcon}
-          description="Always use dark mode"
-        >
-          Dark
-        </SelectOption>
-      </SelectList>
-    </Select>
-  );
-};
-
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -131,7 +46,7 @@ class ErrorBoundary extends React.Component {
     errorInfo._suppressLogging = true;
     this.setState({
       error: error,
-      errorInfo: errorInfo,
+      errorInfo: errorInfo
     });
   }
 
@@ -183,7 +98,7 @@ export const Example = ({
   // Content that appears between h3 and code block to explain example
   children,
   // Show dark theme switcher on full page examples
-  hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
+  hasThemeSwitcher = process.env.hasThemeSwitcher,
   // Show dark theme switcher on full page examples
   hasRTLSwitcher = process.env.hasRTLSwitcher,
   // Map of relative imports matched to their npm package import path (passed to Codesandbox)
@@ -191,7 +106,7 @@ export const Example = ({
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
-  sourceLink = '',
+  sourceLink = ''
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
@@ -202,9 +117,7 @@ export const Example = ({
   useEffect(() => {
     if (!isFullscreenPreview) return;
 
-    document.readyState === 'complete'
-      ? addPageLoadedClass()
-      : window.addEventListener('load', addPageLoadedClass);
+    document.readyState === 'complete' ? addPageLoadedClass() : window.addEventListener('load', addPageLoadedClass);
 
     return () => window.removeEventListener('load', addPageLoadedClass);
   }, []);
@@ -230,9 +143,7 @@ export const Example = ({
     ...reactCoreModule,
     ...reactTableModule,
     ...(source === 'react-next' ? reactCoreNextModule : {}),
-    ...(source === 'react-deprecated'
-      ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule }
-      : {}),
+    ...(source === 'react-deprecated' ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule } : {})
   };
 
   let livePreview = null;
@@ -248,8 +159,7 @@ export const Example = ({
     );
   } else {
     try {
-      const { code: transformedCode, hasTS } =
-        convertToReactComponent(editorCode);
+      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
       if (hasTS) {
         lang = 'ts';
       } else {
@@ -259,11 +169,7 @@ export const Example = ({
       const componentNames = Object.keys(scope);
       const componentValues = Object.values(scope);
 
-      const getPreviewComponent = new Function(
-        'React',
-        ...componentNames,
-        transformedCode
-      );
+      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
       const PreviewComponent = getPreviewComponent(React, ...componentValues);
 
       livePreview = (
@@ -282,13 +188,13 @@ export const Example = ({
     return (
       <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
-        {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
+        {(hasThemeSwitcher || hasRTLSwitcher) && (
           <Flex
             direction={{ default: 'column' }}
             gap={{ default: 'gapMd' }}
             className="ws-full-page-utils pf-v6-m-dir-ltr"
           >
-            {hasDarkThemeSwitcher && <FullScreenThemeSelector />}
+            {hasThemeSwitcher && <ThemeSelector id="ws-example-theme-select" />}
             {hasRTLSwitcher && (
               <Switch
                 id="ws-example-rtl-switch"
@@ -310,61 +216,49 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(
-          title,
-          editorCode,
-          scope,
-          lang,
-          relativeImports,
-          relPath,
-          sourceLink
-        )
+      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
   );
   const fullscreenLink =
-    loc.pathname.replace(/\/$/, '') +
-    (loc.pathname.endsWith(source) ? '' : `/${source}`) +
-    '/' +
-    slugger(title);
+    loc.pathname.replace(/\/$/, '') + (loc.pathname.endsWith(source) ? '' : `/${source}`) + '/' + slugger(title);
 
   const hasMetaText = isBeta || isDemo || isDeprecated || false;
-  const tooltips = (<React.Fragment>
-    {isBeta && (
-      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="blue">
-            Beta
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-    {isDemo && (
-      <Tooltip content="Demos show how multiple components can be used in a single design.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="purple">
-            Demo
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-    {isDeprecated && (
-      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="grey">
-            Deprecated
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-  </React.Fragment>);
-  const metaText = hasMetaText && tooltips
+  const tooltips = (
+    <React.Fragment>
+      {isBeta && (
+        <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="blue">
+              Beta
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+      {isDemo && (
+        <Tooltip content="Demos show how multiple components can be used in a single design.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="purple">
+              Demo
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+      {isDeprecated && (
+        <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="grey">
+              Deprecated
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+    </React.Fragment>
+  );
+  const metaText = hasMetaText && tooltips;
 
   return (
     <Stack hasGutter>
       <StackItem>
-        <AutoLinkHeader
-          metaText={metaText}
-          headingLevel="h3"
-        >
+        <AutoLinkHeader metaText={metaText} headingLevel="h3">
           {title}
         </AutoLinkHeader>
         {children}
@@ -378,22 +272,11 @@ export const Example = ({
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img
-                src={thumbnail.src}
-                width={thumbnail.width}
-                height={thumbnail.height}
-                alt={`${title} screenshot`}
-              />
+              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
             </a>
           </div>
         ) : (
-          <div
-            id={previewId}
-            className={css(
-              className,
-              isRTL && 'pf-v6-m-dir-rtl'
-            )}
-          >
+          <div id={previewId} className={css(className, isRTL && 'pf-v6-m-dir-rtl')}>
             {livePreview}
           </div>
         )}

package/components/index.js

@@ -10,3 +10,4 @@ export * from './topNav/topNav';
 export * from './link/link';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
+export * from './themeSelector/themeSelector';

package/components/themeSelector/themeSelector.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import {
+  Select,
+  SelectGroup,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuSearch,
+  MenuSearchInput,
+  ToggleGroup,
+  ToggleGroupItem,
+  Icon,
+  Divider
+} from '@patternfly/react-core';
+import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
+
+const SunIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="pf-v6-svg"
+    fill="var(--pf-t--global--icon--color--regular)"
+  >
+    <path d="M16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9-4.037 9-9 9Zm0-16c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7Zm0-4a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707Z"></path>
+  </svg>
+);
+const MoonIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="pf-v6-svg"
+    fill="var(--pf-t--global--icon--color--regular)"
+  >
+    <path d="M16.457 30C8.485 30 2 23.515 2 15.543c0-5.93 3.715-11.345 9.243-13.476a.999.999 0 0 1 1.289 1.3 12.185 12.185 0 0 0-.843 4.487c0 6.869 5.588 12.457 12.457 12.457 1.56 0 3.07-.284 4.487-.844a.998.998 0 0 1 1.3 1.29C27.802 26.285 22.387 30 16.456 30ZM9.992 4.904C6.338 7.134 4 11.177 4 15.544 4 22.412 9.588 28 16.457 28c4.367 0 8.41-2.338 10.639-5.992a14.39 14.39 0 0 1-2.95.302c-7.971 0-14.457-6.485-14.457-14.456 0-1.003.102-1.989.303-2.95Z"></path>
+  </svg>
+);
+const DesktopIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="pf-v6-svg"
+    fill="var(--pf-t--global--icon--color--regular)"
+  >
+    <path d="M23.94 16a1 1 0 0 1-.992-.876 6.957 6.957 0 0 0-6.069-6.062 1 1 0 1 1 .242-1.985 8.953 8.953 0 0 1 7.812 7.8A.999.999 0 0 1 23.94 16ZM16 5a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707ZM16 24.875c-4.894 0-8.875-3.981-8.875-8.875a8.879 8.879 0 0 1 5.227-8.088.876.876 0 0 1 1.153 1.163 6.945 6.945 0 0 0-.63 2.925A7.133 7.133 0 0 0 20 19.125a6.948 6.948 0 0 0 2.925-.63.876.876 0 0 1 1.163 1.154A8.88 8.88 0 0 1 16 24.875Zm-4.785-14.153A7.135 7.135 0 0 0 8.875 16 7.133 7.133 0 0 0 16 23.125a7.13 7.13 0 0 0 5.278-2.34c-.419.06-.845.09-1.278.09-4.894 0-8.875-3.981-8.875-8.875 0-.433.03-.86.09-1.278Z"></path>
+  </svg>
+);
+
+export const ThemeSelector = ({ id }) => {
+  const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR);
+  const {
+    mode: highContrastMode,
+    setMode: setHighContrastMode,
+    modes: highContrastModes
+  } = useTheme(THEME_TYPES.HIGH_CONTRAST);
+  const [isThemeSelectOpen, setIsThemeSelectOpen] = useState(false);
+
+  const handleThemeChange = (_event, selectedMode) => {
+    setThemeMode(selectedMode);
+    setIsThemeSelectOpen(false);
+  };
+
+  const handleHighContrastThemeSelection = (evt) => {
+    setHighContrastMode(evt.currentTarget.id);
+  };
+
+  const getThemeDisplayText = (mode) => {
+    switch (mode) {
+      case colorModes.LIGHT:
+        return 'Light';
+      case colorModes.DARK:
+        return 'Dark';
+      default:
+        return 'System';
+    }
+  };
+
+  const getThemeIcon = (mode) => {
+    switch (mode) {
+      case colorModes.LIGHT:
+        return SunIcon;
+      case colorModes.DARK:
+        return MoonIcon;
+      default:
+        return DesktopIcon;
+    }
+  };
+  return (
+    <Select
+      id={id}
+      isOpen={isThemeSelectOpen}
+      selected={themeMode}
+      onSelect={handleThemeChange}
+      onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsThemeSelectOpen(!isThemeSelectOpen)}
+          isExpanded={isThemeSelectOpen}
+          icon={<Icon size="lg">{getThemeIcon(themeMode)}</Icon>}
+          aria-label={`Theme selection, current: ${getThemeDisplayText(themeMode)}`}
+        />
+      )}
+      shouldFocusToggleOnSelect
+      onOpenChangeKeys={['Escape']}
+    >
+      <SelectGroup>
+        <SelectList aria-label="Light/Dark theme switcher">
+          <SelectOption value={colorModes.SYSTEM} icon={DesktopIcon} description="Follow system preference">
+            System
+          </SelectOption>
+          <SelectOption value={colorModes.LIGHT} icon={SunIcon} description="Always use light mode">
+            Light
+          </SelectOption>
+          <SelectOption value={colorModes.DARK} icon={MoonIcon} description="Always use dark mode">
+            Dark
+          </SelectOption>
+        </SelectList>
+      </SelectGroup>
+      <Divider />
+      <SelectGroup label="High Contrast">
+        <MenuSearch>
+          <MenuSearchInput>
+            <ToggleGroup aria-label="High contrast theme switcher">
+              <ToggleGroupItem
+                text="System"
+                buttonId={highContrastModes.SYSTEM}
+                isSelected={highContrastMode === highContrastModes.SYSTEM}
+                onChange={handleHighContrastThemeSelection}
+              />
+              <ToggleGroupItem
+                text="On"
+                buttonId={highContrastModes.ON}
+                isSelected={highContrastMode === highContrastModes.ON}
+                onChange={handleHighContrastThemeSelection}
+              />
+              <ToggleGroupItem
+                text="Off"
+                buttonId={highContrastModes.OFF}
+                isSelected={highContrastMode === highContrastModes.OFF}
+                onChange={handleHighContrastThemeSelection}
+              />
+            </ToggleGroup>
+          </MenuSearchInput>
+        </MenuSearch>
+      </SelectGroup>
+    </Select>
+  );
+};

package/hooks/useTheme.js

@@ -1,137 +1,174 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 
-const THEME_MODES = {
+const COLOR_MODES = {
   SYSTEM: 'system',
   LIGHT: 'light',
   DARK: 'dark'
 };
 
-const THEME_STORAGE_KEY = 'theme-preference';
-const DARK_MODE_CLASS = 'pf-v6-theme-dark';
+const HIGH_CONTRAST_MODES = {
+  SYSTEM: 'high-contrast-system',
+  ON: 'high-contrast-on',
+  OFF: 'high-contrast-off'
+};
 
-/**
- * Custom hook for managing theme state with system preference detection
- * @returns {Object} Theme state and controls
- * @returns {string} themeMode - Current theme mode ('system'|'light'|'dark')
- * @returns {Function} setThemeMode - Function to change theme mode
- * @returns {string} resolvedTheme - The actual applied theme ('light'|'dark')
- * @returns {Object} THEME_MODES - Available theme mode constants
- */
-export const useTheme = () => {
-  const getStoredThemeMode = () => {
-    if (typeof window === 'undefined' || !window.localStorage) {
-      return null;
+export const THEME_TYPES = {
+  COLOR: 'color',
+  HIGH_CONTRAST: 'high-contrast'
+};
+
+class ThemeManager {
+  constructor({ storageKey, modes, defaultMode, cssClass, classEnabledMode, mediaQueryString }) {
+    this.storageKey = storageKey;
+    this.modes = modes;
+    this.defaultMode = defaultMode;
+    this.cssClass = cssClass;
+    this.classEnabledMode = classEnabledMode;
+    this.mediaQueryString = mediaQueryString;
+    this.isBrowser = typeof window !== 'undefined' && window.matchMedia && window.localStorage;
+  }
+
+  getMediaQuery() {
+    if (!this.isBrowser) {
+      return;
     }
-    return localStorage.getItem(THEME_STORAGE_KEY);
-  };
+    return window.matchMedia(this.mediaQueryString);
+  }
 
-  const setStoredThemeMode = (mode) => {
-    if (typeof window === 'undefined' || !window.localStorage) {
+  getStoredValue() {
+    if (!this.isBrowser) {
       return;
     }
-    localStorage.setItem(THEME_STORAGE_KEY, mode);
-  };
+    return localStorage.getItem(this.storageKey);
+  }
 
-  const getResolvedTheme = (mode) => {
-    // SSR-safe check for window and matchMedia
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return 'light';
+  setStoredValue(value) {
+    if (!this.isBrowser) {
+      return;
     }
-    
-    if (mode === THEME_MODES.SYSTEM) {
-      try {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      } catch (error) {
-        // Fallback if matchMedia fails
-        console.warn('matchMedia not supported, defaulting to light theme');
-        return 'light';
-      }
+    localStorage.setItem(this.storageKey, value);
+  }
+
+  resolve() {
+    if (!this.isBrowser) {
+      return this.defaultMode;
     }
-    return mode;
-  };
 
-  const updateThemeClass = (resolvedTheme) => {
-    if (typeof window === 'undefined' || !document) {
+    if (window.matchMedia(this.mediaQueryString).matches) {
+      return this.classEnabledMode;
+    }
+    return this.defaultMode;
+  }
+
+  addClass() {
+    if (!this.isBrowser) {
+      return;
+    }
+    document.querySelector('html').classList.add(this.cssClass);
+  }
+
+  removeClass() {
+    if (!this.isBrowser) {
       return;
     }
-    
-    const htmlElement = document.querySelector('html');
-    if (!htmlElement) {
+    document.querySelector('html').classList.remove(this.cssClass);
+  }
+
+  updateClass(mode) {
+    if (!this.isBrowser) {
       return;
     }
-    
-    if (resolvedTheme === 'dark') {
-      htmlElement.classList.add(DARK_MODE_CLASS);
+
+    if (mode === this.modes.SYSTEM) {
+      if (this.resolve() === this.classEnabledMode) {
+        this.addClass();
+      } else {
+        this.removeClass();
+      }
     } else {
-      htmlElement.classList.remove(DARK_MODE_CLASS);
+      if (mode === this.classEnabledMode) {
+        this.addClass();
+      } else {
+        this.removeClass();
+      }
     }
-  };
+  }
+}
+
+const themeRegistry = new Map();
+
+const registerThemeManager = (themeType, manager) => {
+  themeRegistry.set(themeType, manager);
+};
+
+const colorThemeManager = new ThemeManager({
+  storageKey: 'theme-preference',
+  modes: COLOR_MODES,
+  defaultMode: COLOR_MODES.SYSTEM,
+  cssClass: 'pf-v6-theme-dark',
+  classEnabledMode: COLOR_MODES.DARK,
+  mediaQueryString: '(prefers-color-scheme: dark)'
+});
+
+const highContrastThemeManager = new ThemeManager({
+  storageKey: 'high-contrast-preference',
+  modes: HIGH_CONTRAST_MODES,
+  defaultMode: HIGH_CONTRAST_MODES.SYSTEM,
+  cssClass: 'pf-v6-theme-high-contrast',
+  classEnabledMode: HIGH_CONTRAST_MODES.ON,
+  mediaQueryString: '(prefers-contrast: more)'
+});
+
+registerThemeManager(THEME_TYPES.COLOR, colorThemeManager);
+registerThemeManager(THEME_TYPES.HIGH_CONTRAST, highContrastThemeManager);
+
+/**
+ * Unified theme hook that accepts a theme type parameter
+ * @param {string} themeType - The type of theme to manage (THEME_TYPES.COLOR, THEME_TYPES.HIGH_CONTRAST, instantiate and register new themes above as needed)
+ * @returns {Object} Theme state and controls specific to the theme type
+ */
+export const useTheme = (themeType) => {
+  if (!themeType) {
+    throw new Error('useTheme requires a theme type parameter. Use THEME_TYPES.COLOR or THEME_TYPES.HIGH_CONTRAST');
+  }
 
-  const [themeMode, setThemeModeState] = useState(() => {
-    const stored = getStoredThemeMode();
-    return stored && Object.values(THEME_MODES).includes(stored) ? stored : THEME_MODES.SYSTEM;
-  });
+  const theme = themeRegistry.get(themeType);
 
-  const [resolvedTheme, setResolvedTheme] = useState(() => getResolvedTheme(themeMode));
+  if (!theme) {
+    throw new Error(`Theme manager not found for theme type: ${themeType}`);
+  }
 
-  const setThemeMode = useCallback((newMode) => {
-    setThemeModeState(newMode);
-    setStoredThemeMode(newMode);
-    
-    const newResolvedTheme = getResolvedTheme(newMode);
-    setResolvedTheme(newResolvedTheme);
-    updateThemeClass(newResolvedTheme);
-  }, []);
+  const [mode, setMode] = useState(theme.getStoredValue());
+  const [resolvedTheme, setResolvedTheme] = useState(theme.resolve());
 
-  // Listen for system preference changes
   useEffect(() => {
-    // Enhanced SSR-safe check
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return;
-    }
+    theme.setStoredValue(mode);
+    theme.updateClass(mode);
+  }, [theme, mode, resolvedTheme]);
 
-    let mediaQuery;
-    try {
-      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    } catch (error) {
-      console.warn('matchMedia not supported, skipping system theme detection');
-      return;
-    }
-    
-    const handleSystemThemeChange = (e) => {
-      if (themeMode === THEME_MODES.SYSTEM) {
-        const newSystemTheme = e.matches ? 'dark' : 'light';
-        setResolvedTheme(newSystemTheme);
-        updateThemeClass(newSystemTheme);
-      }
-    };
+  const handlePreferenceChange = () => {
+    setResolvedTheme(theme.resolve());
+  };
+  const mediaQuery = theme.getMediaQuery();
 
-    // Check if addEventListener is available (some older browsers might not support it)
+  useEffect(() => {
     if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener('change', handleSystemThemeChange);
+      mediaQuery.addEventListener('change', handlePreferenceChange);
       return () => {
-        mediaQuery.removeEventListener('change', handleSystemThemeChange);
+        mediaQuery.removeEventListener('change', handlePreferenceChange);
       };
     } else if (mediaQuery.addListener) {
-      // Fallback for older browsers
-      mediaQuery.addListener(handleSystemThemeChange);
+      mediaQuery.addListener(handlePreferenceChange);
       return () => {
-        mediaQuery.removeListener(handleSystemThemeChange);
+        mediaQuery.removeListener(handlePreferenceChange);
       };
     }
-  }, [themeMode]);
-
-  // Initial theme application
-  useEffect(() => {
-    const initialResolvedTheme = getResolvedTheme(themeMode);
-    setResolvedTheme(initialResolvedTheme);
-    updateThemeClass(initialResolvedTheme);
-  }, [themeMode]);
+  }, [mediaQuery]);
 
   return {
-    themeMode,
-    setThemeMode,
+    mode,
+    setMode,
     resolvedTheme,
-    THEME_MODES
+    modes: theme.modes
   };
-}; 
+};

package/layouts/sideNavLayout/sideNavLayout.js

@@ -9,7 +9,6 @@ import {
   DropdownGroup,
   DropdownList,
   Divider,
-  Icon,
   Masthead,
   MastheadToggle,
   MastheadMain,
@@ -24,20 +23,14 @@ import {
   SkipToContent,
   Switch,
   SearchInput,
-  Select,
-  SelectOption,
-  SelectList,
   MastheadLogo
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
-const SunIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9-4.037 9-9 9Zm0-16c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7Zm0-4a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707Z"></path></svg>;
-const MoonIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16.457 30C8.485 30 2 23.515 2 15.543c0-5.93 3.715-11.345 9.243-13.476a.999.999 0 0 1 1.289 1.3 12.185 12.185 0 0 0-.843 4.487c0 6.869 5.588 12.457 12.457 12.457 1.56 0 3.07-.284 4.487-.844a.998.998 0 0 1 1.3 1.29C27.802 26.285 22.387 30 16.456 30ZM9.992 4.904C6.338 7.134 4 11.177 4 15.544 4 22.412 9.588 28 16.457 28c4.367 0 8.41-2.338 10.639-5.992a14.39 14.39 0 0 1-2.95.302c-7.971 0-14.457-6.485-14.457-14.456 0-1.003.102-1.989.303-2.95Z"></path></svg>;
-const DesktopIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M23.94 16a1 1 0 0 1-.992-.876 6.957 6.957 0 0 0-6.069-6.062 1 1 0 1 1 .242-1.985 8.953 8.953 0 0 1 7.812 7.8A.999.999 0 0 1 23.94 16ZM16 5a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707ZM16 24.875c-4.894 0-8.875-3.981-8.875-8.875a8.879 8.879 0 0 1 5.227-8.088.876.876 0 0 1 1.153 1.163 6.945 6.945 0 0 0-.63 2.925A7.133 7.133 0 0 0 20 19.125a6.948 6.948 0 0 0 2.925-.63.876.876 0 0 1 1.163 1.154A8.88 8.88 0 0 1 16 24.875Zm-4.785-14.153A7.135 7.135 0 0 0 8.875 16 7.133 7.133 0 0 0 16 23.125a7.13 7.13 0 0 0 5.278-2.34c-.419.06-.845.09-1.278.09-4.894 0-8.875-3.981-8.875-8.875 0-.433.03-.86.09-1.278Z"></path></svg>;
-import { SideNav, TopNav, GdprBanner } from '../../components';
+import { SideNav, TopNav, GdprBanner, ThemeSelector } from '../../components';
 import staticVersions from '../../versions.json';
 import { Footer } from '@patternfly/documentation-framework/components';
-import { useTheme } from '../../hooks/useTheme';
+import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
 
 export const RtlContext = createContext(false);
 
@@ -45,14 +38,11 @@ const HeaderTools = ({
   versions,
   hasVersionSwitcher,
   algolia,
-  hasDarkThemeSwitcher,
+  hasThemeSwitcher,
   hasRTLSwitcher,
   topNavItems,
   isRTL,
   setIsRTL,
-  themeMode,
-  setThemeMode,
-  THEME_MODES
 }) => {
   const latestVersion = versions.Releases.find((version) => version.latest);
   const previousReleases = Object.values(versions.Releases).filter((version) => !version.hidden && !version.latest);
@@ -60,7 +50,6 @@ const HeaderTools = ({
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [searchValue, setSearchValue] = React.useState('');
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
-  const [isThemeSelectOpen, setIsThemeSelectOpen] = useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
@@ -76,33 +65,6 @@ const HeaderTools = ({
     setIsSearchExpanded(!isSearchExpanded);
   };
 
-  const handleThemeChange = (_event, selectedMode) => {
-    setThemeMode(selectedMode);
-    setIsThemeSelectOpen(false);
-  };
-
-  const getThemeDisplayText = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return 'Light';
-      case THEME_MODES.DARK:
-        return 'Dark';
-      default:
-        return 'System';
-    }
-  };
-
-  const getThemeIcon = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return SunIcon;
-      case THEME_MODES.DARK:
-        return MoonIcon;
-      default:
-        return DesktopIcon;
-    }
-  };
-
   useEffect(() => {
     // reattach algolia to input each time search is expanded
     if (hasSearch && isSearchExpanded) {
@@ -156,49 +118,9 @@ const HeaderTools = ({
               <GithubIcon />
             </Button>
           </ToolbarItem>
-          {hasDarkThemeSwitcher && (
+          {hasThemeSwitcher && (
             <ToolbarItem>
-              <Select
-                id="ws-theme-select"
-                isOpen={isThemeSelectOpen}
-                selected={themeMode}
-                onSelect={handleThemeChange}
-                onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
-                toggle={(toggleRef) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    onClick={() => setIsThemeSelectOpen(!isThemeSelectOpen)}
-                    isExpanded={isThemeSelectOpen}
-                    icon={<Icon size="lg">{getThemeIcon(themeMode)}</Icon>}
-                    aria-label={`Theme selection, current: ${getThemeDisplayText(themeMode)}`}
-                  />
-                )}
-                shouldFocusToggleOnSelect
-              >
-                <SelectList>
-                  <SelectOption 
-                    value={THEME_MODES.SYSTEM}
-                    icon={DesktopIcon}
-                    description="Follow system preference"
-                  >
-                    System
-                  </SelectOption>
-                  <SelectOption 
-                    value={THEME_MODES.LIGHT}
-                    icon={SunIcon}
-                    description="Always use light mode"
-                  >
-                    Light
-                  </SelectOption>
-                  <SelectOption 
-                    value={THEME_MODES.DARK}
-                    icon={MoonIcon}
-                    description="Always use dark mode"
-                  >
-                    Dark
-                  </SelectOption>
-                </SelectList>
-              </Select>
+              <ThemeSelector id="ws-theme-select" />
             </ToolbarItem>
           )}
           {hasVersionSwitcher && (
@@ -290,7 +212,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
   const hasVersionSwitcher = process.env.hasVersionSwitcher;
-  const hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher;
+  const hasThemeSwitcher = process.env.hasThemeSwitcher;
   const hasRTLSwitcher = process.env.hasRTLSwitcher;
   const sideNavItems = process.env.sideNavItems;
   const topNavItems = process.env.topNavItems;
@@ -299,8 +221,8 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
-  
-  const { themeMode, setThemeMode, resolvedTheme, THEME_MODES } = useTheme();
+
+  const { resolvedTheme } = useTheme(THEME_TYPES.COLOR);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -388,14 +310,11 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             versions={versions}
             algolia={algolia}
             hasVersionSwitcher={hasVersionSwitcher}
-            hasDarkThemeSwitcher={hasDarkThemeSwitcher}
+            hasThemeSwitcher={hasThemeSwitcher}
             hasRTLSwitcher={hasRTLSwitcher}
             topNavItems={topNavItems}
             isRTL={isRTL}
             setIsRTL={setIsRTL}
-            themeMode={themeMode}
-            setThemeMode={setThemeMode}
-            THEME_MODES={THEME_MODES}
           />
         )}
       </MastheadContent>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.18.7",
+  "version": "6.19.0",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.265",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.266",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -87,5 +87,5 @@
     "braces": ">=3.0.3",
     "ssri": ">=8.0.1"
   },
-  "gitHead": "4b5a372f0f4b1cc37f0b9d1ecf24910ed11d5fbc"
+  "gitHead": "60954ecaf27cf8c2449a5284f3991bc3059870d7"
 }

package/scripts/webpack/webpack.base.config.js

@@ -12,7 +12,7 @@ module.exports = (_env, argv) => {
     hasFooter = false,
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
-    hasDarkThemeSwitcher = false,
+    hasThemeSwitcher = false,
     hasRTLSwitcher = false,
     componentsData = {},
     sideNavItems = [],
@@ -141,7 +141,7 @@ module.exports = (_env, argv) => {
         'process.env.hasFooter': JSON.stringify(hasFooter),
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
-        'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
+        'process.env.hasThemeSwitcher': JSON.stringify(hasThemeSwitcher),
         'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher),
         'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),