@chronogrove/ui 0.82.1 → 0.83.0

package/README.md

@@ -44,7 +44,7 @@ Prefer deep imports so bundles stay lean:
 | `@chronogrove/ui/widget-header`            | Widget section title row (optional Font Awesome icon, aside slot, optional metrics)                                                                                                                                                                                                                                                              |
 | `@chronogrove/ui/gatsby`                   | Color-mode Gatsby SSR/browser helpers                                                                                                                                                                                                                                                                                                            |
 
-**Additional subpaths:** The table lists the most common entry points. Also published: **`pagination`** (full bar; composes **`pagination-button`**), **`category-label`**, **`metric-badge`**, **`metric-card`**, **`muted-card-footer`**, **`status-card`**, **`widget-section`**, **`widget-call-to-action`**, **`external-link-icon`**. The authoritative list is **`package.json`** → **`exports`**.
+**Additional subpaths:** The table lists the most common entry points. Also published: **`pagination`** (full bar; composes **`pagination-button`**), **`category-label`**, **`metric-badge`**, **`metric-card`**, **`muted-card-footer`**, **`status-card`**, **`widget-section`**, **`widget-call-to-action`**, **`external-link-icon`**, **`thumbnail-strip`**, **`image-thumbnails`** (`optimizeSrc` for CDN resizing; Gatsby passes a Cloudinary helper). The authoritative list is **`package.json`** → **`exports`**.
 
 ## Next.js (App Router)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.82.1",
+  "version": "0.83.0",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
   "type": "module",
@@ -138,6 +138,14 @@
       "import": "./src/action-card-layout.js",
       "default": "./src/action-card-layout.js"
     },
+    "./thumbnail-strip": {
+      "import": "./src/thumbnail-strip.js",
+      "default": "./src/thumbnail-strip.js"
+    },
+    "./image-thumbnails": {
+      "import": "./src/image-thumbnails.js",
+      "default": "./src/image-thumbnails.js"
+    },
     "./gatsby": {
       "import": "./src/gatsby/index.js",
       "default": "./src/gatsby/index.js"

package/src/__snapshots__/image-thumbnails.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ImageThumbnails matches snapshot with custom maxImages 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1ud2rd2"
+  >
+    <div
+      class="css-1jg6seg"
+    >
+      <div
+        class="css-m0n9e0"
+      />
+    </div>
+    <div
+      class="css-1da34oq"
+    >
+      <div
+        class="css-1yk8ryr"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImageThumbnails matches snapshot with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1ud2rd2"
+  >
+    <div
+      class="css-1jg6seg"
+    >
+      <div
+        class="css-m0n9e0"
+      />
+    </div>
+    <div
+      class="css-1da34oq"
+    >
+      <div
+        class="css-1yk8ryr"
+      />
+    </div>
+    <div
+      class="css-1jg6seg"
+    >
+      <div
+        class="css-1udw8eu"
+      />
+    </div>
+    <div
+      class="css-1da34oq"
+    >
+      <div
+        class="css-dvh21o"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/__snapshots__/thumbnail-strip.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ThumbnailStrip matches snapshot with custom maxImages and size 1`] = `
+<DocumentFragment>
+  <div
+    class="css-dpp4jp"
+  >
+    <div
+      class="css-1p4ud4e"
+    >
+      <div
+        class="css-m0n9e0"
+      />
+    </div>
+    <div
+      class="css-zlkqv4"
+    >
+      <div
+        class="css-1yk8ryr"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ThumbnailStrip matches snapshot with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1httq4l"
+  >
+    <div
+      class="css-1jl8pr3"
+    >
+      <div
+        class="css-m0n9e0"
+      />
+    </div>
+    <div
+      class="css-f02gwb"
+    >
+      <div
+        class="css-1yk8ryr"
+      />
+    </div>
+    <div
+      class="css-44fsif"
+    >
+      <div
+        class="css-1udw8eu"
+      />
+    </div>
+    <div
+      class="css-ladzy1"
+    >
+      <div
+        class="css-dvh21o"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/color-mode/constants.js

@@ -1,6 +1,12 @@
 /** Theme UI localStorage key (aligned with theme-ui/color-mode). */
 export const THEME_UI_COLOR_MODE_STORAGE_KEY = 'theme-ui-color-mode'
 
+/** Default cookie name when `cookieName` is omitted from cross-domain color mode options. */
+export const CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME = 'chronogrove-theme-ui-color-mode'
+
+/** ~400 days; browser cookie eviction policies may apply earlier. */
+export const CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_MAX_AGE_SEC = 60 * 60 * 24 * 400
+
 /** Dispatched on route changes so hosts can reconcile React color-mode context with `localStorage`. */
 export const RECONCILE_COLOR_MODE_EVENT = 'theme-ui-reconcile-color-mode'
 

package/src/color-mode/cross-domain-color-mode-client-config.js

@@ -0,0 +1,33 @@
+import { CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME } from './constants.js'
+
+/**
+ * Browser-only config for {@link setChronogroveCrossDomainColorModeCookie} (must match the
+ * `crossDomainColorMode` passed into head inline scripts at build time). Set via
+ * {@link setChronogroveCrossDomainColorModeClientConfig} from Gatsby `onClientEntry`, Next
+ * `ChronogroveNextAppShell`, or your own bootstrap.
+ */
+
+let clientConfig = /** @type {{ registrableDomain?: string, cookieName?: string } | null} */ (null)
+
+export function setChronogroveCrossDomainColorModeClientConfig(next) {
+  if (next == null) {
+    clientConfig = null
+    return
+  }
+  if (typeof next !== 'object') {
+    return
+  }
+  const { registrableDomain, cookieName } = next
+  if (!registrableDomain || typeof registrableDomain !== 'string' || !registrableDomain.trim()) {
+    clientConfig = null
+    return
+  }
+  clientConfig = {
+    registrableDomain: registrableDomain.trim(),
+    cookieName: cookieName ?? CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+  }
+}
+
+export function getChronogroveCrossDomainColorModeClientConfig() {
+  return clientConfig
+}

package/src/color-mode/cross-domain-color-mode-client-config.spec.js

@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME } from './constants.js'
+import {
+  getChronogroveCrossDomainColorModeClientConfig,
+  setChronogroveCrossDomainColorModeClientConfig
+} from './cross-domain-color-mode-client-config.js'
+
+describe('cross-domain-color-mode-client-config', () => {
+  afterEach(() => {
+    setChronogroveCrossDomainColorModeClientConfig(null)
+  })
+
+  it('stores registrableDomain and optional cookieName', () => {
+    setChronogroveCrossDomainColorModeClientConfig({
+      registrableDomain: 'example.com',
+      cookieName: 'my-mode'
+    })
+    expect(getChronogroveCrossDomainColorModeClientConfig()).toEqual({
+      registrableDomain: 'example.com',
+      cookieName: 'my-mode'
+    })
+  })
+
+  it('uses default cookie name when cookieName is omitted', () => {
+    setChronogroveCrossDomainColorModeClientConfig({ registrableDomain: 'example.com' })
+    expect(getChronogroveCrossDomainColorModeClientConfig()?.cookieName).toBe(
+      CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+    )
+  })
+
+  it('clears config for null, invalid, or empty registrableDomain', () => {
+    setChronogroveCrossDomainColorModeClientConfig({ registrableDomain: 'example.com' })
+    setChronogroveCrossDomainColorModeClientConfig(null)
+    expect(getChronogroveCrossDomainColorModeClientConfig()).toBe(null)
+
+    setChronogroveCrossDomainColorModeClientConfig({ registrableDomain: '  ' })
+    expect(getChronogroveCrossDomainColorModeClientConfig()).toBe(null)
+
+    setChronogroveCrossDomainColorModeClientConfig('oops')
+    expect(getChronogroveCrossDomainColorModeClientConfig()).toBe(null)
+  })
+})

package/src/color-mode/cross-domain-color-mode-cookie-node.spec.js

@@ -0,0 +1,28 @@
+/**
+ * @jest-environment node
+ */
+
+import {
+  getChronogroveCrossDomainColorModeFromCookie,
+  getHostnameForChronogroveCrossDomainCookie,
+  setChronogroveCrossDomainColorModeCookie,
+  shouldUseSecureChronogroveCrossDomainCookie
+} from './cross-domain-color-mode-cookie.js'
+
+describe('cross-domain color mode cookie (Node / SSR)', () => {
+  it('setChronogroveCrossDomainColorModeCookie returns without throwing when document is undefined', () => {
+    expect(() => setChronogroveCrossDomainColorModeCookie('dark')).not.toThrow()
+  })
+
+  it('getChronogroveCrossDomainColorModeFromCookie uses empty string when document is undefined', () => {
+    expect(getChronogroveCrossDomainColorModeFromCookie()).toBe(null)
+  })
+
+  it('getHostnameForChronogroveCrossDomainCookie() returns empty when global window is absent', () => {
+    expect(getHostnameForChronogroveCrossDomainCookie()).toBe('')
+  })
+
+  it('shouldUseSecureChronogroveCrossDomainCookie() is false when global window is absent', () => {
+    expect(shouldUseSecureChronogroveCrossDomainCookie()).toBe(false)
+  })
+})

package/src/color-mode/cross-domain-color-mode-cookie-set-http.spec.js

@@ -0,0 +1,42 @@
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"url":"http://app.example.com/"}
+ */
+
+import { CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME } from './constants.js'
+import { setChronogroveCrossDomainColorModeCookie } from './cross-domain-color-mode-cookie.js'
+
+const exampleDomain = { registrableDomain: 'example.com' }
+
+describe('setChronogroveCrossDomainColorModeCookie (http, cross-domain enabled)', () => {
+  let lastAssignment = ''
+  let originalDescriptor
+
+  beforeEach(() => {
+    lastAssignment = ''
+    originalDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie')
+    Object.defineProperty(document, 'cookie', {
+      configurable: true,
+      get() {
+        if (!lastAssignment) return ''
+        return lastAssignment.split(';')[0].trim()
+      },
+      set(value) {
+        lastAssignment = value
+      }
+    })
+  })
+
+  afterEach(() => {
+    if (originalDescriptor) {
+      Object.defineProperty(Document.prototype, 'cookie', originalDescriptor)
+    }
+  })
+
+  it('omits Secure when not on HTTPS', () => {
+    expect(window.location.protocol).toBe('http:')
+    setChronogroveCrossDomainColorModeCookie('default', exampleDomain)
+    expect(lastAssignment).toContain(`${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=default`)
+    expect(lastAssignment).not.toContain('Secure')
+  })
+})

package/src/color-mode/cross-domain-color-mode-cookie-set-https.spec.js

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"url":"https://www.example.com/path"}
+ */
+
+import { CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME } from './constants.js'
+import { setChronogroveCrossDomainColorModeCookie } from './cross-domain-color-mode-cookie.js'
+
+const exampleDomain = { registrableDomain: 'example.com' }
+
+describe('setChronogroveCrossDomainColorModeCookie (https, cross-domain enabled)', () => {
+  let lastAssignment = ''
+  let originalDescriptor
+
+  beforeEach(() => {
+    lastAssignment = ''
+    originalDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie')
+    Object.defineProperty(document, 'cookie', {
+      configurable: true,
+      get() {
+        if (!lastAssignment) return ''
+        return lastAssignment.split(';')[0].trim()
+      },
+      set(value) {
+        lastAssignment = value
+      }
+    })
+  })
+
+  afterEach(() => {
+    if (originalDescriptor) {
+      Object.defineProperty(Document.prototype, 'cookie', originalDescriptor)
+    }
+  })
+
+  it('sets Domain, SameSite, Max-Age, and Secure on HTTPS (assignment string)', () => {
+    expect(window.location.hostname).toBe('www.example.com')
+    setChronogroveCrossDomainColorModeCookie('dark', exampleDomain)
+    expect(lastAssignment).toContain(`${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=dark`)
+    expect(lastAssignment).toContain('Domain=.example.com')
+    expect(lastAssignment).toContain('SameSite=Lax')
+    expect(lastAssignment).toContain('Max-Age=')
+    expect(lastAssignment).toContain('Secure')
+  })
+
+  it('ignores invalid mode values', () => {
+    setChronogroveCrossDomainColorModeCookie('not-a-mode', exampleDomain)
+    expect(lastAssignment).toBe('')
+  })
+})

package/src/color-mode/cross-domain-color-mode-cookie-set-localhost.spec.js

@@ -0,0 +1,15 @@
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"url":"http://localhost:3000/"}
+ */
+
+import { setChronogroveCrossDomainColorModeCookie } from './cross-domain-color-mode-cookie.js'
+
+describe('setChronogroveCrossDomainColorModeCookie (localhost)', () => {
+  it('does not set when hostname is not under the registrable domain', () => {
+    expect(window.location.hostname).toBe('localhost')
+    document.cookie = ''
+    setChronogroveCrossDomainColorModeCookie('dark', { registrableDomain: 'example.com' })
+    expect(document.cookie).toBe('')
+  })
+})

package/src/color-mode/cross-domain-color-mode-cookie.js

@@ -0,0 +1,91 @@
+import {
+  CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_MAX_AGE_SEC,
+  CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+} from './constants.js'
+import { normalizeThemeUiColorMode } from './normalize.js'
+import { isHostnameUnderRegistrableDomain, validateRegistrableDomain } from './registrable-domain.js'
+
+/**
+ * Read `window.location.hostname` when `location` exists (for tests, pass a stub `globalWindow`).
+ * Call with **no arguments** to use the real `window`; passing `undefined` explicitly is treated as
+ * “no window” (tests only).
+ */
+export function getHostnameForChronogroveCrossDomainCookie(globalWindow) {
+  const win = arguments.length === 0 ? (typeof window !== 'undefined' ? window : undefined) : globalWindow
+  if (win == null || !win.location) {
+    return ''
+  }
+  return win.location.hostname || ''
+}
+
+/** Whether to append `Secure` to the cross-domain cookie (HTTPS only). */
+export function shouldUseSecureChronogroveCrossDomainCookie(globalWindow) {
+  const win = arguments.length === 0 ? (typeof window !== 'undefined' ? window : undefined) : globalWindow
+  return Boolean(win && win.location && win.location.protocol === 'https:')
+}
+
+/**
+ * Read a single cookie value from a `document.cookie`-style string (for tests and SSR-safe parsing).
+ */
+export function parseChronogroveColorModeCookie(
+  cookieString,
+  cookieName = CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+) {
+  if (!cookieString) {
+    return null
+  }
+  const parts = `; ${cookieString}`.split(`; ${cookieName}=`)
+  if (parts.length < 2) {
+    return null
+  }
+  const raw = parts.pop().split(';').shift()
+  if (raw == null || raw === '') {
+    return null
+  }
+  let decoded
+  try {
+    decoded = decodeURIComponent(raw.trim())
+  } catch {
+    decoded = raw.trim()
+  }
+  return normalizeThemeUiColorMode(decoded)
+}
+
+export function getChronogroveCrossDomainColorModeFromCookie(
+  cookieString = typeof document !== 'undefined' ? document.cookie : ''
+) {
+  return parseChronogroveColorModeCookie(cookieString)
+}
+
+/**
+ * Persist color mode for other subdomains of `options.registrableDomain`. No-op without `document`,
+ * without a valid `registrableDomain`, or when the current host is not under that domain.
+ *
+ * @param {string} mode
+ * @param {{ registrableDomain: string, cookieName?: string } | null | undefined} [options]
+ */
+export function setChronogroveCrossDomainColorModeCookie(mode, options) {
+  if (typeof document === 'undefined') {
+    return
+  }
+  const normalized = normalizeThemeUiColorMode(mode)
+  if (!normalized) {
+    return
+  }
+  const registrableDomain = options && validateRegistrableDomain(options.registrableDomain)
+  if (!registrableDomain) {
+    return
+  }
+  const hostname = getHostnameForChronogroveCrossDomainCookie()
+  if (!isHostnameUnderRegistrableDomain(hostname, registrableDomain)) {
+    return
+  }
+
+  const cookieName = options.cookieName ?? CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+  const value = encodeURIComponent(normalized)
+  let cookie = `${cookieName}=${value}; Path=/; Max-Age=${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_MAX_AGE_SEC}; SameSite=Lax; Domain=.${registrableDomain}`
+  if (shouldUseSecureChronogroveCrossDomainCookie()) {
+    cookie += '; Secure'
+  }
+  document.cookie = cookie
+}

package/src/color-mode/cross-domain-color-mode-cookie.spec.js

@@ -0,0 +1,120 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME } from './constants.js'
+import {
+  getChronogroveCrossDomainColorModeFromCookie,
+  getHostnameForChronogroveCrossDomainCookie,
+  parseChronogroveColorModeCookie,
+  setChronogroveCrossDomainColorModeCookie,
+  shouldUseSecureChronogroveCrossDomainCookie
+} from './cross-domain-color-mode-cookie.js'
+
+describe('getHostnameForChronogroveCrossDomainCookie', () => {
+  it('returns empty string when window is missing or has no location', () => {
+    expect(getHostnameForChronogroveCrossDomainCookie(undefined)).toBe('')
+    expect(getHostnameForChronogroveCrossDomainCookie(null)).toBe('')
+    expect(getHostnameForChronogroveCrossDomainCookie({})).toBe('')
+    expect(getHostnameForChronogroveCrossDomainCookie({ location: null })).toBe('')
+  })
+
+  it('returns hostname or empty when location exists', () => {
+    expect(getHostnameForChronogroveCrossDomainCookie({ location: { hostname: 'www.example.com' } })).toBe(
+      'www.example.com'
+    )
+    expect(getHostnameForChronogroveCrossDomainCookie({ location: { hostname: '' } })).toBe('')
+  })
+})
+
+describe('shouldUseSecureChronogroveCrossDomainCookie', () => {
+  it('is true only for https:', () => {
+    expect(shouldUseSecureChronogroveCrossDomainCookie(undefined)).toBe(false)
+    expect(shouldUseSecureChronogroveCrossDomainCookie({})).toBe(false)
+    expect(shouldUseSecureChronogroveCrossDomainCookie({ location: { protocol: 'http:' } })).toBe(false)
+    expect(shouldUseSecureChronogroveCrossDomainCookie({ location: { protocol: 'https:' } })).toBe(true)
+    expect(shouldUseSecureChronogroveCrossDomainCookie({ location: {} })).toBe(false)
+  })
+})
+
+describe('setChronogroveCrossDomainColorModeCookie', () => {
+  it('no-ops without options.registrableDomain', () => {
+    document.cookie = ''
+    setChronogroveCrossDomainColorModeCookie('dark')
+    setChronogroveCrossDomainColorModeCookie('dark', {})
+    setChronogroveCrossDomainColorModeCookie('dark', { registrableDomain: '  ' })
+    expect(document.cookie).toBe('')
+  })
+})
+
+describe('parseChronogroveColorModeCookie', () => {
+  it('returns normalized mode when cookie is present', () => {
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=dark`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe('dark')
+    expect(
+      parseChronogroveColorModeCookie(
+        `other=1; ${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=default`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe('default')
+  })
+
+  it('maps light to default', () => {
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=light`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe('default')
+  })
+
+  it('returns null for missing or invalid values', () => {
+    expect(parseChronogroveColorModeCookie('', CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME)).toBe(null)
+    expect(parseChronogroveColorModeCookie('other=1', CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME)).toBe(null)
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe(null)
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=nope`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe(null)
+  })
+
+  it('falls back to raw when decodeURIComponent throws', () => {
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=%`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe(null)
+  })
+
+  it('decodes URI-encoded values', () => {
+    expect(
+      parseChronogroveColorModeCookie(
+        `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=dark`,
+        CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME
+      )
+    ).toBe('dark')
+  })
+})
+
+describe('getChronogroveCrossDomainColorModeFromCookie', () => {
+  beforeEach(() => {
+    document.cookie = `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=; Path=/; Max-Age=0`
+  })
+
+  it('reads from document.cookie when called with no arguments', () => {
+    document.cookie = `${CHRONOGROVE_CROSS_DOMAIN_COLOR_MODE_COOKIE_NAME}=dark`
+    expect(getChronogroveCrossDomainColorModeFromCookie()).toBe('dark')
+  })
+})