From a7884ec64b660f932a76c233b2145ace3a9c6b2c Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@webstackbuilders.com>
Date: Tue, 23 Dec 2025 00:02:59 +0300
Subject: [PATCH 1/2] Add carousel and hover/focus tooltips with description to
 theme picker

---
 _TODO.md                                      |  47 -----
 src/components/Header/index.astro             |   2 +-
 src/components/Navigation/index.astro         |   4 +-
 .../client/__tests__/index.spec.ts            |  35 +++-
 src/components/ThemePicker/client/index.ts    | 165 +++++++++++++++
 src/components/ThemePicker/index.astro        | 198 ++++++++++++------
 src/content/themes.json                       |   9 +
 src/styles/print.css                          |  43 ++++
 src/styles/themes.css                         |  84 ++++----
 9 files changed, 422 insertions(+), 165 deletions(-)

diff --git a/_TODO.md b/_TODO.md
index 91c8ccca7..9e177fc6f 100644
--- a/_TODO.md
+++ b/_TODO.md
@@ -210,50 +210,3 @@ Google Calendar, Apple Calendar,  Yahoo Calender,  Microsoft 365, Outlook, and T
 
 `https://github.com/add2cal/add-to-calendar-button`
 `https://add-to-calendar-button.com/`
-
-## Markdown
-
-## Code Block and Highlighting
-
-## Astro includes shiki, tweak config
-
-### Custom version of the code block integration from Astro Docs. "Beautiful code blocks for your Astro site". Applied to the code blocks created in `.mdx` files
-
-[`astro-code-blocks`](https://www.npmjs.com/package/@thewebforge/astro-code-blocks)
-
-
-#### Code tabs plugin so Javascript and Typescript examples can both be show.
-
-There can only be white space between two code blocks. Display name is set by `tabName` and can only contain characters in [A-Za-z0-9_]. Syntax for the first line of the code block is:
-
-```js [group:tabName]
-```
-
-`markdown-it-codetabs`
-
-#### Add copy button to code blocks
-
-`markdown-it-copy`
-
-Options for "copy" button added to code blocks
-
-```javascript
-const markdownCodeCopyConfig = {
-  /** Text shown on copy button */
-  btnText: `Copy`,
-  /** Text shown on copy failure */
-  failText: `Copy Failed`,
-  /** Text shown on copy success */
-  successText: `Success!`, // 'copy success' | copy-success text
-  /** Amount of time to show success message */
-  successTextDelay: 2000,
-  /** An HTML fragment included before <button> */
-  extraHtmlBeforeBtn: ``,
-  /** An HTML fragment included after <button> */
-  extraHtmlAfterBtn: ``,
-  /** Whether to show code language before the copy button */
-  showCodeLanguage: false,
-  /** Test to append after the copied text like a copyright notice */
-  attachText: ``,
-}
-```
diff --git a/src/components/Header/index.astro b/src/components/Header/index.astro
index 8b65e4eb6..4195c7810 100644
--- a/src/components/Header/index.astro
+++ b/src/components/Header/index.astro
@@ -64,7 +64,7 @@ const { path } = Astro.props
   {/* Theme picker toggle button to show modal */}
   <span
     id="header__theme-icon"
-    class="w-[calc(var(--header-icon-size)*2+0.5em)] lg:w-(--header-icon-size) relative z-(--z-content-overlay)"
+    class="ml-2 shrink-0 w-(--header-icon-size) relative z-(--z-content-overlay)"
   >
     <ThemeButton />
   </span>
diff --git a/src/components/Navigation/index.astro b/src/components/Navigation/index.astro
index 356126e18..352f3cfc0 100644
--- a/src/components/Navigation/index.astro
+++ b/src/components/Navigation/index.astro
@@ -13,13 +13,13 @@ const { path } = Astro.props
 <site-navigation class="contents" data-testid="site-navigation">
   <div id="mobile-nav-focus-container" class="contents">
     {/* Main Navigation Menu */}
-    <span id="header__main-nav" class="lg:z-(--z-nav) lg:flex-1 lg:mx-8">
+    <span id="header__main-nav" class="flex-1 min-w-0 lg:z-(--z-nav) lg:mx-8">
       <Menu path={path} />
     </span>
     {/* Mobile navigation toggle button to show menu on full-page splash screen */}
     <span
       id="header__nav-icon"
-      class="block fixed right-4 sm:right-6 top-2 z-(--z-mobile-close-btn) lg:hidden"
+      class="block shrink-0 z-(--z-content-overlay) lg:hidden"
     >
       <NavToggle />
     </span>
diff --git a/src/components/ThemePicker/client/__tests__/index.spec.ts b/src/components/ThemePicker/client/__tests__/index.spec.ts
index 7f381278b..a1b211af0 100644
--- a/src/components/ThemePicker/client/__tests__/index.spec.ts
+++ b/src/components/ThemePicker/client/__tests__/index.spec.ts
@@ -37,6 +37,12 @@ const getThemeModal = (root: ThemePickerElement) =>
 const getThemeCloseButton = (root: ThemePickerElement) =>
   queryElement<HTMLButtonElement>(root, '[data-theme-close]')
 const getThemeList = (root: ThemePickerElement) => queryElement<HTMLElement>(root, '#theme-menu')
+const getEmblaViewport = (root: ThemePickerElement) =>
+  queryElement<HTMLElement>(root, '[data-theme-embla-viewport]')
+const getEmblaPrevButton = (root: ThemePickerElement) =>
+  queryElement<HTMLButtonElement>(root, '[data-theme-embla-prev]')
+const getEmblaNextButton = (root: ThemePickerElement) =>
+  queryElement<HTMLButtonElement>(root, '[data-theme-embla-next]')
 const getThemeListItems = (root: ThemePickerElement) =>
   queryElements<HTMLLIElement>(root, '.themepicker__item')
 const getThemeButtons = (root: ThemePickerElement) =>
@@ -119,6 +125,19 @@ describe('ThemePicker Component', () => {
         const themes = themeButtons.map((btn) => btn.getAttribute('data-theme'))
         expect(themes).toContain('light')
         expect(themes).toContain('dark')
+        expect(themes).toContain('a11y')
+      })
+    })
+
+    it('should render embla viewport and nav buttons', async () => {
+      await renderThemePickerDom(({ element }) => {
+        const viewport = getEmblaViewport(element)
+        expect(viewport.classList.contains('embla__viewport')).toBe(true)
+
+        const prev = getEmblaPrevButton(element)
+        const next = getEmblaNextButton(element)
+        expect(prev.getAttribute('aria-label')).toBe('Previous theme')
+        expect(next.getAttribute('aria-label')).toBe('Next theme')
       })
     })
 
@@ -212,7 +231,7 @@ describe('ThemePicker Component', () => {
         buttons.forEach((button) => {
           expect(button.hasAttribute('data-theme')).toBe(true)
           const theme = button.getAttribute('data-theme')
-          expect(['light', 'dark', 'holiday']).toContain(theme)
+          expect(['light', 'dark', 'holiday', 'a11y']).toContain(theme)
         })
       })
     })
@@ -223,6 +242,7 @@ describe('ThemePicker Component', () => {
       await renderThemePickerDom(({ element }) => {
         const list = getThemeList(element)
         expect(list.classList.contains('themepicker__list')).toBe(true)
+        expect(list.classList.contains('embla__container')).toBe(true)
       })
     })
 
@@ -301,18 +321,17 @@ describe('ThemePicker Component', () => {
   })
 
   describe('Responsive Design', () => {
-    it('should have horizontal scroll on theme list', async () => {
+    it('should use Embla viewport with overflow hidden', async () => {
       await renderThemePickerDom(({ element }) => {
-        const list = queryElement<HTMLElement>(element, '.themepicker__list')
-        expect(list.classList.contains('overflow-x-auto')).toBe(true)
-        expect(list.classList.contains('overflow-y-hidden')).toBe(true)
+        const viewport = getEmblaViewport(element)
+        expect(viewport.classList.contains('overflow-hidden')).toBe(true)
       })
     })
 
-    it('should have whitespace-nowrap for horizontal layout', async () => {
+    it('should render tooltip for themes with descriptions', async () => {
       await renderThemePickerDom(({ element }) => {
-        const list = queryElement<HTMLElement>(element, '.themepicker__list')
-        expect(list.classList.contains('whitespace-nowrap')).toBe(true)
+        const tooltips = queryElements<HTMLElement>(element, '[data-theme-tooltip]')
+        expect(tooltips.length).toBeGreaterThan(0)
       })
     })
   })
diff --git a/src/components/ThemePicker/client/index.ts b/src/components/ThemePicker/client/index.ts
index 486b7e69b..2fe52c9bc 100644
--- a/src/components/ThemePicker/client/index.ts
+++ b/src/components/ThemePicker/client/index.ts
@@ -5,6 +5,7 @@
  */
 
 import { LitElement } from 'lit'
+import EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel'
 import {
   setTheme,
   toggleThemePicker,
@@ -30,6 +31,14 @@ export const CLASSES = {
   active: 'is-active',
 }
 
+const THEME_PICKER_EMBLA_OPTIONS: EmblaOptionsType = {
+  loop: false,
+  align: 'center',
+  containScroll: 'trimSnaps',
+  skipSnaps: false,
+  dragFree: false,
+}
+
 /**
  * ThemePicker Custom Element (Lit-based)
  * Uses Light DOM (no Shadow DOM) with Astro-rendered templates
@@ -51,6 +60,16 @@ export class ThemePickerElement extends LitElement {
   private closeBtn!: HTMLButtonElement
   private themeSelectBtns!: NodeListOf<HTMLButtonElement>
 
+  private emblaViewport: HTMLElement | null = null
+  private emblaPrevBtn: HTMLButtonElement | null = null
+  private emblaNextBtn: HTMLButtonElement | null = null
+  private emblaApi: EmblaCarouselType | null = null
+  private emblaEvents: AbortController | null = null
+  private lastIsOpen: boolean | null = null
+  private lastTheme: ThemeId | null = null
+
+  private readonly emblaUpdateHandler = () => this.updateEmblaNavState()
+
   // Track View Transitions
   private isTransitioning = false
   private isInitialized = false
@@ -72,6 +91,11 @@ export class ThemePickerElement extends LitElement {
     }
   }
 
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.teardownEmbla()
+  }
+
   /**
    * Initialize the theme picker after DOM is ready
    */
@@ -124,6 +148,8 @@ export class ThemePickerElement extends LitElement {
 
     // Update active theme button
     this.updateActiveTheme(currentTheme)
+
+    this.syncThemeCarousel(isOpen, currentTheme)
   }
 
   /**
@@ -136,6 +162,145 @@ export class ThemePickerElement extends LitElement {
     this.toggleBtn = getThemePickerToggleBtn()
     this.closeBtn = getThemePickerCloseBtn(this)
     this.themeSelectBtns = getThemeSelectBtns(this)
+
+    this.emblaViewport = this.querySelector('[data-theme-embla-viewport]')
+    this.emblaPrevBtn = this.querySelector('[data-theme-embla-prev]')
+    this.emblaNextBtn = this.querySelector('[data-theme-embla-next]')
+  }
+
+  private syncThemeCarousel(isOpen: boolean, currentTheme: ThemeId): void {
+    const shouldInit = isOpen && !!this.emblaViewport
+
+    if (!shouldInit) {
+      if (this.lastIsOpen) {
+        this.teardownEmbla()
+      }
+      this.lastIsOpen = isOpen
+      this.lastTheme = currentTheme
+      return
+    }
+
+    const openChanged = this.lastIsOpen !== isOpen
+    const themeChanged = this.lastTheme !== currentTheme
+
+    if (openChanged) {
+      this.setupEmbla()
+      // Modal just opened; wait a frame so Embla sees correct sizing.
+      requestAnimationFrame(() => {
+        try {
+          this.emblaApi?.reInit()
+          this.updateEmblaNavState()
+          this.scrollThemeIntoView(currentTheme)
+        } catch (error) {
+          handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:reInit' })
+        }
+      })
+    } else if (themeChanged) {
+      this.scrollThemeIntoView(currentTheme)
+    }
+
+    this.lastIsOpen = isOpen
+    this.lastTheme = currentTheme
+  }
+
+  private setupEmbla(): void {
+    this.teardownEmbla()
+    if (!this.emblaViewport) return
+
+    try {
+      this.emblaApi = EmblaCarousel(this.emblaViewport, THEME_PICKER_EMBLA_OPTIONS)
+      this.updateEmblaNavState()
+
+      const emblaWithEvents = this.emblaApi as EmblaCarouselType & {
+        on: (_event: string, _handler: () => void) => EmblaCarouselType
+      }
+
+      emblaWithEvents.on('select', this.emblaUpdateHandler)
+      emblaWithEvents.on('reInit', this.emblaUpdateHandler)
+
+      this.emblaEvents = new AbortController()
+      const { signal } = this.emblaEvents
+
+      if (this.emblaPrevBtn) {
+        this.emblaPrevBtn.addEventListener('click', (event) => {
+          event.preventDefault()
+          try {
+            this.emblaApi?.scrollPrev()
+          } catch (error) {
+            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollPrev' })
+          }
+        }, { signal })
+      }
+
+      if (this.emblaNextBtn) {
+        this.emblaNextBtn.addEventListener('click', (event) => {
+          event.preventDefault()
+          try {
+            this.emblaApi?.scrollNext()
+          } catch (error) {
+            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollNext' })
+          }
+        }, { signal })
+      }
+    } catch (error) {
+      this.teardownEmbla()
+      handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:setup' })
+    }
+  }
+
+  private teardownEmbla(): void {
+    if (this.emblaEvents) {
+      this.emblaEvents.abort()
+      this.emblaEvents = null
+    }
+
+    if (this.emblaApi) {
+      this.emblaApi.destroy()
+      this.emblaApi = null
+    }
+  }
+
+  private updateEmblaNavState(): void {
+    if (!this.emblaApi || !this.emblaPrevBtn || !this.emblaNextBtn) return
+
+    const hasOverflow = this.emblaApi.scrollSnapList().length > 1
+    if (!hasOverflow) {
+      this.emblaPrevBtn.setAttribute('hidden', '')
+      this.emblaNextBtn.setAttribute('hidden', '')
+      this.emblaPrevBtn.setAttribute('disabled', 'true')
+      this.emblaNextBtn.setAttribute('disabled', 'true')
+      return
+    }
+
+    this.emblaPrevBtn.removeAttribute('hidden')
+    this.emblaNextBtn.removeAttribute('hidden')
+
+    if (this.emblaApi.canScrollPrev()) {
+      this.emblaPrevBtn.removeAttribute('disabled')
+    } else {
+      this.emblaPrevBtn.setAttribute('disabled', 'true')
+    }
+
+    if (this.emblaApi.canScrollNext()) {
+      this.emblaNextBtn.removeAttribute('disabled')
+    } else {
+      this.emblaNextBtn.setAttribute('disabled', 'true')
+    }
+  }
+
+  private scrollThemeIntoView(themeId: ThemeId): void {
+    if (!this.emblaApi) return
+
+    const buttons = Array.from(this.themeSelectBtns)
+    const index = buttons.findIndex(button => button.dataset['theme'] === themeId)
+    if (index < 0) return
+
+    try {
+      this.emblaApi.scrollTo(index, true)
+      this.updateEmblaNavState()
+    } catch (error) {
+      handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollToTheme' })
+    }
   }
 
   /**
diff --git a/src/components/ThemePicker/index.astro b/src/components/ThemePicker/index.astro
index a7bc77788..a01a61dd7 100644
--- a/src/components/ThemePicker/index.astro
+++ b/src/components/ThemePicker/index.astro
@@ -32,71 +32,139 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
     >
       {label}
     </h3>
-    <ul
-      id="theme-menu"
-      class:list={[
-        styles.list,
-        'themepicker__list',
-        'block mb-[0.25em] overflow-x-auto overflow-y-hidden py-4 px-6 pb-8 text-center whitespace-nowrap w-full',
-      ]}
-    >
-      {
-        themes.map(theme => (
-          <li
-            class:list={[
-              styles.item,
-              'themepicker__item',
-              'inline-block relative rounded-lg scale-100 ml-4 first:ml-0 hover:shadow-md hover:scale-105 hover:z-1',
-            ]}
-          >
-            <button
-              class="themepicker__selectBtn block p-4 rounded-lg border border-bg-offset w-full text-center bg-bg-offset"
-              aria-label={`select color theme ${theme.name}`}
-              data-theme={theme.id}
-            >
-              <span class="block text-text">{theme.name}</span>
-              <span class="block py-0.5">
-                <span
-                  class:list={[
-                    styles.hue,
-                    'themepicker__hue',
-                    'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-primary',
-                  ]}
-                />
-                <span
-                  class:list={[
-                    styles.hue,
-                    'themepicker__hue',
-                    'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-secondary',
-                  ]}
-                />
-                <span
-                  class:list={[
-                    styles.hue,
-                    'themepicker__hue',
-                    'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-border',
-                  ]}
-                />
-                <span
-                  class:list={[
-                    styles.hue,
-                    'themepicker__hue',
-                    'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text-offset',
-                  ]}
-                />
-                <span
-                  class:list={[
-                    styles.hue,
-                    'themepicker__hue',
-                    'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text',
-                  ]}
-                />
-              </span>
-            </button>
-          </li>
-        ))
-      }
-    </ul>
+
+    <div class="embla relative" role="region" aria-labelledby="theme-picker-label" data-theme-embla>
+      <div class="embla__viewport overflow-hidden" data-theme-embla-viewport>
+        <ul
+          id="theme-menu"
+          class:list={[
+            styles.list,
+            'themepicker__list',
+            'embla__container flex gap-4 justify-center py-4 px-6 pb-8 w-full',
+          ]}
+        >
+          {
+            themes.map(theme => (
+              <li
+                class:list={[
+                  styles.item,
+                  'themepicker__item',
+                  'embla__slide flex-[0_0_auto] min-w-0 relative rounded-lg scale-100 hover:shadow-md hover:scale-105 hover:z-1',
+                ]}
+              >
+                <button
+                  class="themepicker__selectBtn group block p-4 rounded-lg border border-bg-offset w-full text-center bg-bg-offset"
+                  aria-label={`select color theme ${theme.name}`}
+                  data-theme={theme.id}
+                >
+                  <span class="block text-text">
+                    <span class="inline-block relative">
+                      <span class="themepicker__themeName">{theme.name}</span>
+                      {
+                        theme.description && (
+                          <span
+                            class="themepicker__tooltip absolute left-full top-full ml-1 mt-1 z-20 max-w-xs whitespace-normal break-words rounded-md border border-border bg-bg-inverse px-2 py-1 text-xs text-bg opacity-0 pointer-events-none group-hover:opacity-100 group-focus:opacity-100 group-focus-visible:opacity-100"
+                            data-theme-tooltip
+                          >
+                            {theme.description}
+                          </span>
+                        )
+                      }
+                    </span>
+                  </span>
+
+                  <span class="block py-0.5">
+                    <span
+                      class:list={[
+                        styles.hue,
+                        'themepicker__hue',
+                        'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-primary',
+                      ]}
+                    />
+                    <span
+                      class:list={[
+                        styles.hue,
+                        'themepicker__hue',
+                        'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-secondary',
+                      ]}
+                    />
+                    <span
+                      class:list={[
+                        styles.hue,
+                        'themepicker__hue',
+                        'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-border',
+                      ]}
+                    />
+                    <span
+                      class:list={[
+                        styles.hue,
+                        'themepicker__hue',
+                        'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text-offset',
+                      ]}
+                    />
+                    <span
+                      class:list={[
+                        styles.hue,
+                        'themepicker__hue',
+                        'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text',
+                      ]}
+                    />
+                  </span>
+                </button>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+
+      <button
+        type="button"
+        class="themepicker__navBtn themepicker__navBtn--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-10 h-10 rounded-full bg-bg border-2 border-border shadow-lg hover:bg-primary hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
+        aria-label="Previous theme"
+        data-theme-embla-prev
+        hidden
+      >
+        <svg
+          class="w-5 h-5 text-text"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 19l-7-7 7-7"
+          />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="themepicker__navBtn themepicker__navBtn--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-10 h-10 rounded-full bg-bg border-2 border-border shadow-lg hover:bg-primary hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
+        aria-label="Next theme"
+        data-theme-embla-next
+        hidden
+      >
+        <svg
+          class="w-5 h-5 text-text"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 5l7 7-7 7"
+          />
+        </svg>
+      </button>
+    </div>
     <button
       class="themepicker__closeBtn bg-secondary border-none text-text flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-secondary-offset hover:text-text focus:bg-secondary-offset focus:text-text"
       type="button"
diff --git a/src/content/themes.json b/src/content/themes.json
index cc2cb8d4e..24de8e635 100644
--- a/src/content/themes.json
+++ b/src/content/themes.json
@@ -21,6 +21,15 @@
       "colors": {
         "backgroundOffset": "#00386d"
       }
+    },
+    {
+      "id": "a11y",
+      "name": "High Contrast",
+      "description": "High contrast theme targeting WCAG 2.2 SC 1.4.6 (Contrast (Enhanced))",
+      "category": "core",
+      "colors": {
+        "backgroundOffset": "#e5e7eb"
+      }
     }
   ]
 }
diff --git a/src/styles/print.css b/src/styles/print.css
index 1c23bcaed..a7770697a 100644
--- a/src/styles/print.css
+++ b/src/styles/print.css
@@ -1,4 +1,47 @@
 @media print {
+  html {
+    --theme-color-accent: #111827;
+    --theme-color-accent-bg: #e5e7eb;
+    --theme-color-bg: #fff;
+    --theme-color-bg-inverse: #000;
+    --theme-color-bg-offset: #f3f4f6;
+    --theme-color-border: #111827;
+    --theme-color-danger: #111827;
+    --theme-color-danger-bg: #e5e7eb;
+    --theme-color-info: #111827;
+    --theme-color-info-bg: #e5e7eb;
+    --theme-color-link-shadow: #000;
+    --theme-color-primary: #000;
+    --theme-color-primary-bg: #e5e7eb;
+    --theme-color-primary-bg-hover: #d1d5db;
+    --theme-color-primary-hover: #000;
+    --theme-color-primary-offset: #111827;
+    --theme-color-secondary: #374151;
+    --theme-color-secondary-bg: #e5e7eb;
+    --theme-color-secondary-offset: #111827;
+    --theme-color-share-highlight-bg: #e5e7eb;
+    --theme-color-share-highlight-bg-active: #000;
+    --theme-color-share-highlight-text: #000;
+    --theme-color-share-highlight-text-active: #fff;
+    --theme-color-share-highlight-tooltip-bg: #000;
+    --theme-color-share-highlight-tooltip-text: #fff;
+    --theme-color-success: #111827;
+    --theme-color-success-bg: #e5e7eb;
+    --theme-color-success-offset: #000;
+    --theme-color-text: #000;
+    --theme-color-text-offset: #374151;
+    --theme-color-twitter: #111827;
+    --theme-color-warning: #111827;
+    --theme-color-warning-bg: #e5e7eb;
+    --theme-color-warning-offset: #000;
+    --theme-shadow-active: 0 3px 12px -2px inset #0000004d;
+    --theme-shadow-hover: 0 7px 14px #0000001f, 0 3px 6px #0003;
+    --theme-shadow-md: 0 4px 6px #0000002b, 0 1px 3px #0003;
+    --theme-shadow-sm: 0 2px 16px #00000040;
+    --theme-shadow-text: 0 1px 3px #00000040;
+    --theme-shiki-theme: 'github-light';
+  }
+
   body {
     color: #222;
     display: block;
diff --git a/src/styles/themes.css b/src/styles/themes.css
index fa8727936..15240b33c 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -189,51 +189,51 @@
 
 /**
  * =============================================================================
- *  A11Y THEME (Accessibility - High Contrast)
+ *  HIGH CONTRAST THEME
  * =============================================================================
- * Placeholder using light theme colors. Will be updated with WCAG 1.4.6
- * Level AAA compliant colors (7:1 contrast ratio) in future enhancement.
+ * Grayscale palette intended for higher contrast (WCAG 2.2 SC 1.4.6).
+ * This theme is also used as the print palette.
  */
 [data-theme="a11y"] {
-  --theme-color-bg: #f3f4f6;
-  --theme-color-bg-offset: #e5e7eb;
-  --theme-color-bg-inverse: #001a39;
-  --theme-color-text: #374151;
-  --theme-color-text-offset: #9ca3af;
-  --theme-color-border: #f0f4ff;
-  --theme-color-primary: #006dca;
-  --theme-color-primary-offset: #00386d;
-  --theme-color-primary-bg: #dbeafe;
-  --theme-color-primary-bg-hover: #bfdbfe;
-  --theme-color-primary-hover: #0056a3;
-  --theme-color-secondary: #facc15;
-  --theme-color-secondary-offset: #ca8a04;
-  --theme-color-secondary-bg: #fef3c7;
-  --theme-color-success: #16a34a;
-  --theme-color-success-offset: #22c55e;
-  --theme-color-success-bg: #dcfce7;
-  --theme-color-info: #0891b2;
-  --theme-color-info-bg: #cffafe;
-  --theme-color-warning: #a16207;
-  --theme-color-warning-offset: #ca8a04;
-  --theme-color-warning-bg: #fef3c7;
-  --theme-color-danger: #dc2626;
-  --theme-color-danger-bg: #fecaca;
-  --theme-color-twitter: #1da1f2;
-  --theme-color-accent: #7c3aed;
-  --theme-color-accent-bg: #ede9fe;
-  --theme-color-link-shadow: #2563eb; /* blue-600 for link underline shadow */
-  --theme-color-share-highlight-text: #111827; /* gray-900 */
-  --theme-color-share-highlight-bg: #e5e7eb; /* gray-200 */
-  --theme-color-share-highlight-text-active: #fff; /* white */
-  --theme-color-share-highlight-bg-active: #2563eb; /* blue-600 */
-  --theme-color-share-highlight-tooltip-text: #fff; /* white */
-  --theme-color-share-highlight-tooltip-bg: #111827; /* gray-900 */
+  --theme-color-bg: #fff;
+  --theme-color-bg-offset: #f3f4f6;
+  --theme-color-bg-inverse: #000;
+  --theme-color-text: #000;
+  --theme-color-text-offset: #374151;
+  --theme-color-border: #111827;
+  --theme-color-primary: #000;
+  --theme-color-primary-offset: #111827;
+  --theme-color-primary-bg: #e5e7eb;
+  --theme-color-primary-bg-hover: #d1d5db;
+  --theme-color-primary-hover: #000;
+  --theme-color-secondary: #374151;
+  --theme-color-secondary-offset: #111827;
+  --theme-color-secondary-bg: #e5e7eb;
+  --theme-color-success: #111827;
+  --theme-color-success-offset: #000;
+  --theme-color-success-bg: #e5e7eb;
+  --theme-color-info: #111827;
+  --theme-color-info-bg: #e5e7eb;
+  --theme-color-warning: #111827;
+  --theme-color-warning-offset: #000;
+  --theme-color-warning-bg: #e5e7eb;
+  --theme-color-danger: #111827;
+  --theme-color-danger-bg: #e5e7eb;
+  --theme-color-twitter: #111827;
+  --theme-color-accent: #111827;
+  --theme-color-accent-bg: #e5e7eb;
+  --theme-color-link-shadow: #000;
+  --theme-color-share-highlight-text: #000;
+  --theme-color-share-highlight-bg: #e5e7eb;
+  --theme-color-share-highlight-text-active: #fff;
+  --theme-color-share-highlight-bg-active: #000;
+  --theme-color-share-highlight-tooltip-text: #fff;
+  --theme-color-share-highlight-tooltip-bg: #000;
   --theme-shiki-theme: 'github-light';
-  --theme-shadow-sm: 0 2px 16px #000026;
-  --theme-shadow-md: 0 4px 6px #32325d1c, 0 1px 3px #000014;
-  --theme-shadow-hover: 0 7px 14px #3232321a, 0 3px 6px #000014;
-  --theme-shadow-active: 0 3px 12px -2px inset #32323240;
-  --theme-shadow-text: 0 1px 3px #000026;
+  --theme-shadow-sm: 0 2px 16px #00000040;
+  --theme-shadow-md: 0 4px 6px #0000002b, 0 1px 3px #0003;
+  --theme-shadow-hover: 0 7px 14px #0000001f, 0 3px 6px #0003;
+  --theme-shadow-active: 0 3px 12px -2px inset #0000004d;
+  --theme-shadow-text: 0 1px 3px #00000040;
 }
 

From 11ef77ca0ff5bcf1d418882777b320727c86aae1 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@webstackbuilders.com>
Date: Tue, 23 Dec 2025 00:22:58 +0300
Subject: [PATCH 2/2] Fix test case for banner

---
 .../Banner/client/__tests__/selectors.spec.ts |  9 +++-
 src/components/ThemePicker/client/index.ts    | 50 +++++++++----------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/Consent/Banner/client/__tests__/selectors.spec.ts b/src/components/Consent/Banner/client/__tests__/selectors.spec.ts
index 8d1d82d43..a6fccdc9b 100644
--- a/src/components/Consent/Banner/client/__tests__/selectors.spec.ts
+++ b/src/components/Consent/Banner/client/__tests__/selectors.spec.ts
@@ -1,5 +1,5 @@
 
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import { TestError } from '@test/errors'
 import ConsentBanner from '@components/Consent/Banner/index.astro'
@@ -17,6 +17,13 @@ import {
 } from '@components/Consent/Banner/client/selectors'
 import { ClientScriptError } from '@components/scripts/errors'
 
+vi.mock('@components/scripts/store', () => ({
+  allowAllConsentCookies: vi.fn(),
+  hideConsentBanner: vi.fn(),
+  initConsentCookies: vi.fn(() => true),
+  showConsentBanner: vi.fn(),
+}))
+
 type ConsentBannerModule = WebComponentModule<ConsentBannerElement>
 
 const CONSENT_READY_TIMEOUT_MS = 2_000
diff --git a/src/components/ThemePicker/client/index.ts b/src/components/ThemePicker/client/index.ts
index 2fe52c9bc..b0adda617 100644
--- a/src/components/ThemePicker/client/index.ts
+++ b/src/components/ThemePicker/client/index.ts
@@ -64,7 +64,7 @@ export class ThemePickerElement extends LitElement {
   private emblaPrevBtn: HTMLButtonElement | null = null
   private emblaNextBtn: HTMLButtonElement | null = null
   private emblaApi: EmblaCarouselType | null = null
-  private emblaEvents: AbortController | null = null
+  private emblaControlsBound = false
   private lastIsOpen: boolean | null = null
   private lastTheme: ThemeId | null = null
 
@@ -218,29 +218,30 @@ export class ThemePickerElement extends LitElement {
       emblaWithEvents.on('select', this.emblaUpdateHandler)
       emblaWithEvents.on('reInit', this.emblaUpdateHandler)
 
-      this.emblaEvents = new AbortController()
-      const { signal } = this.emblaEvents
+      if (!this.emblaControlsBound) {
+        if (this.emblaPrevBtn) {
+          addButtonEventListeners(this.emblaPrevBtn, (event) => {
+            if (event.cancelable && !event.defaultPrevented) event.preventDefault()
+            try {
+              this.emblaApi?.scrollPrev()
+            } catch (error) {
+              handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollPrev' })
+            }
+          }, this)
+        }
 
-      if (this.emblaPrevBtn) {
-        this.emblaPrevBtn.addEventListener('click', (event) => {
-          event.preventDefault()
-          try {
-            this.emblaApi?.scrollPrev()
-          } catch (error) {
-            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollPrev' })
-          }
-        }, { signal })
-      }
+        if (this.emblaNextBtn) {
+          addButtonEventListeners(this.emblaNextBtn, (event) => {
+            if (event.cancelable && !event.defaultPrevented) event.preventDefault()
+            try {
+              this.emblaApi?.scrollNext()
+            } catch (error) {
+              handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollNext' })
+            }
+          }, this)
+        }
 
-      if (this.emblaNextBtn) {
-        this.emblaNextBtn.addEventListener('click', (event) => {
-          event.preventDefault()
-          try {
-            this.emblaApi?.scrollNext()
-          } catch (error) {
-            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollNext' })
-          }
-        }, { signal })
+        this.emblaControlsBound = true
       }
     } catch (error) {
       this.teardownEmbla()
@@ -249,11 +250,6 @@ export class ThemePickerElement extends LitElement {
   }
 
   private teardownEmbla(): void {
-    if (this.emblaEvents) {
-      this.emblaEvents.abort()
-      this.emblaEvents = null
-    }
-
     if (this.emblaApi) {
       this.emblaApi.destroy()
       this.emblaApi = null