@neuravision/construct 2.1.1 → 2.1.2

package/behaviors/toggle-group.js

@@ -10,11 +10,12 @@ import {
   createControllerLifecycle,
   createDisposables,
   dispatch,
-  focusElement,
+  focusIntoView,
   getItemValue,
   isDisabled,
   nextEnabledIndex,
   orientationDelta,
+  warnAccessibility,
 } from './internal/dom.js';
 
 const controllers = new WeakMap();
@@ -91,12 +92,35 @@ export function createToggleGroupController(options) {
   if (focusIndex < 0) throw new TypeError('Toggle group controller requires at least one enabled item.');
   if (!allowEmpty && selected.size === 0) selected.add(values[focusIndex]);
 
-  const rootRole = root.getAttribute('role') ?? 'group';
+  /* Two supported state models:
+     - button model (default): aria-pressed toggle buttons in a group/toolbar
+     - radio model: role="radiogroup"/role="radio" markup with aria-checked,
+       selection following focus per the APG radio-group pattern.
+     Radio markup used to be silently rewritten to buttons while its stale
+     aria-checked kept announcing the original selection — now it is honored. */
+  const radioSemantics =
+    type === 'single' &&
+    (root.getAttribute('role') === 'radiogroup' ||
+      items.some((item) => item.getAttribute('role') === 'radio'));
+  if (type === 'multiple' && items.some((item) => item.getAttribute('role') === 'radio')) {
+    warnAccessibility(
+      'Toggle group: role="radio" items require type "single"; falling back to aria-pressed buttons.',
+    );
+  }
+
+  const rootRole = root.getAttribute('role') ?? (radioSemantics ? 'radiogroup' : 'group');
   attributes.set(root, 'role', rootRole);
   attributes.set(root, 'data-orientation', orientation);
   if (rootRole === 'toolbar') attributes.set(root, 'aria-orientation', orientation);
+  if (!root.hasAttribute('aria-label') && !root.hasAttribute('aria-labelledby')) {
+    warnAccessibility(
+      `Toggle group: the ${rootRole} element has neither aria-labelledby nor aria-label. ` +
+        'Grouping roles must expose an accessible name (WCAG 4.1.2).',
+    );
+  }
   items.forEach((item) => {
-    if (!isNativeButton(item)) attributes.set(item, 'role', 'button');
+    if (radioSemantics) attributes.set(item, 'role', 'radio');
+    else if (!isNativeButton(item)) attributes.set(item, 'role', 'button');
   });
 
   function currentValue() {
@@ -105,9 +129,15 @@ export function createToggleGroupController(options) {
   }
 
   function sync() {
+    /* An item disabled after init would otherwise strand the roving
+       tabindex and drop the whole group from the tab order. */
+    if (isDisabled(items[focusIndex])) {
+      const fallback = boundaryEnabledIndex(items);
+      if (fallback >= 0) focusIndex = fallback;
+    }
     items.forEach((item, index) => {
       const pressed = selected.has(values[index]);
-      attributes.set(item, 'aria-pressed', String(pressed));
+      attributes.set(item, radioSemantics ? 'aria-checked' : 'aria-pressed', String(pressed));
       attributes.set(item, 'data-state', pressed ? 'on' : 'off');
       attributes.set(item, 'tabindex', index === focusIndex && !isDisabled(item) ? '0' : '-1');
     });
@@ -185,7 +215,9 @@ export function createToggleGroupController(options) {
       event.preventDefault();
       focusIndex = nextIndex;
       sync();
-      focusElement(items[nextIndex]);
+      focusIntoView(items[nextIndex]);
+      /* APG radio group: selection follows focus. */
+      if (radioSemantics && !selected.has(values[nextIndex])) toggle(nextIndex, 'keyboard');
       return;
     }
 

package/behaviors/tooltip.js

@@ -7,6 +7,8 @@ import {
   dispatch,
   ensureId,
   eventTargetsOutside,
+  isComposingEvent,
+  warnAccessibility,
 } from './internal/dom.js';
 import { consumeTopOverlayEvent, pushOverlay } from './internal/overlay.js';
 
@@ -52,6 +54,14 @@ export function createTooltipController(options) {
   let focused = false;
   let touchOpened = false;
 
+  if (trigger.tabIndex < 0) {
+    warnAccessibility(
+      'Tooltip: the trigger is not keyboard-focusable, so keyboard and screen-reader ' +
+        'users can never open this tooltip (WCAG 2.1.1). Use a natively focusable ' +
+        'element or add tabindex="0".',
+    );
+  }
+
   const tooltipId = ensureId(tooltip, 'ct-tooltip', attributes);
   const describedBy = new Set((trigger.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean));
   describedBy.add(tooltipId);
@@ -165,7 +175,16 @@ export function createTooltipController(options) {
   });
   disposables.listen(trigger, 'focus', () => {
     focused = true;
-    scheduleOpen('focus', 0);
+    /* Open instantly for keyboard focus; pointer-driven focus (mouse click
+       on the trigger) is already covered by the hover path and would only
+       add noise. Engines without :focus-visible fall back to opening. */
+    let keyboardFocus = true;
+    try {
+      keyboardFocus = trigger.matches(':focus-visible');
+    } catch {
+      keyboardFocus = true;
+    }
+    if (keyboardFocus) scheduleOpen('focus', 0);
   });
   disposables.listen(trigger, 'blur', () => {
     focused = false;
@@ -182,7 +201,12 @@ export function createTooltipController(options) {
     }
   });
   disposables.listen(document, 'keydown', (event) => {
-    if (open && event.key === 'Escape' && consumeTopOverlayEvent(event, document, token)) {
+    if (
+      open &&
+      event.key === 'Escape' &&
+      !isComposingEvent(event) &&
+      consumeTopOverlayEvent(event, document, token)
+    ) {
       event.preventDefault();
       event.stopPropagation();
       closeTooltip('escape');

package/components/README.md

@@ -24,7 +24,9 @@ Example:
 - `data-loading="true"` as the button's visual loading hook; native buttons also require `disabled`
 - `aria-invalid="true"` for form errors
 - `aria-current="page"` for current pagination page
+- `aria-current="true"` for the current table row; `aria-selected="true"`/`data-state="selected"` for selected rows in grid contexts
 - `aria-selected="true"` for active tabs and selected datepicker days
+- `aria-sort="ascending|descending"` on the actively sorted column header
 - `aria-disabled="true"` when disabled but not using native `disabled`
 
 ARIA communicates state but does not block events. Prefer native `disabled` for form controls. For links and custom controls, suppress pointer and keyboard activation in application code when `aria-disabled="true"` is set. Add live-region attributes only to content that changes dynamically; static status labels do not need `aria-live`.
@@ -212,6 +214,37 @@ Content card with header, body, and footer:
 </section>
 ```
 
+### Datum Primitives
+
+The reference-line grammar from `components/datum.css` — Construct's orange signature as reusable
+structural vocabulary. All dimensions are component tokens (`--component-datum-*`).
+
+```html
+<div class="ct-eyebrow-set">
+  <p class="ct-eyebrow ct-eyebrow--numbered">Foundations</p>
+</div>
+
+<div class="ct-datum-scale" role="presentation"></div>
+
+<div class="ct-datum-scale ct-datum-scale--progress" role="progressbar"
+  aria-label="Upload" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
+  style="--ct-datum-scale-progress: 60%;"></div>
+
+<figure class="ct-datum-frame">…</figure>
+```
+
+- `ct-eyebrow` - Mono kicker with a leading datum tick; `--numbered` adds drawing-set sheet numbers
+  (scope with `ct-eyebrow-set`)
+- `ct-datum-scale` - Measured ruler line; decorative, mark it `role="presentation"`
+- `ct-datum-scale--progress` - The origin segment reports progress via `--ct-datum-scale-progress`;
+  pair with `role="progressbar"` and `aria-value*`
+- `ct-datum-frame` - Corner registration mark for figures, code samples, and media
+- `ct-card--datum`, active leading edges, the tab indicator, sorted table columns, and
+  `ct-chart__datum-line` speak the same grammar
+
+Orange is never text; edges use `brand-accent`, meaning-bearing fills use `brand-accent-strong`.
+One datum per surface — see `docs/guidelines.md`.
+
 ### Table
 
 Basic data table with variants:
@@ -248,6 +281,13 @@ Variants:
 
 Rows receive a visual hover affordance automatically on hover-capable pointers; no hover modifier exists.
 
+States (the datum grammar):
+- `tr[aria-current="true"]`, `tr[aria-selected="true"]`, or `tr[data-state="selected"]` marks the
+  current/selected row with a muted background and the orange leading edge. Use `aria-current` on
+  native tables; `aria-selected` is only valid on rows inside `role="grid"`/`role="treegrid"`.
+- `th[aria-sort="ascending|descending"]` underlines the actively sorted column header with the datum;
+  sort direction stays shape-encoded via the `ct-table__sort-indicator` arrows.
+
 ### Data Table
 
 Complex data table with header, toolbar, filters, and actions:

package/components/_shared.css

@@ -93,6 +93,9 @@
   background: var(--ct-control-bg-disabled);
   border-color: var(--color-border-subtle);
   color: var(--color-text-muted);
+  /* Disabled is fully colour-encoded above; cancel foundations' global
+     :disabled opacity so controls are not double-dimmed. */
+  opacity: 1;
 }
 
 :where(.ct-input, .ct-select, .ct-textarea, .ct-control)[aria-invalid='true'],
@@ -135,3 +138,11 @@
   --ct-control-font-size: var(--font-size-lg);
   --ct-control-line-height: var(--line-height-lg);
 }
+
+/* Per-file kill switch: standalone/core.css imports this file without
+   foundations.css and its global reduced-motion rule. */
+@media (prefers-reduced-motion: reduce) {
+  :where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
+    transition: none;
+  }
+}

package/components/accordion.css

@@ -116,6 +116,14 @@
   padding: 0 var(--space-4) var(--space-4);
 }
 
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ── */
+
+@media (pointer: coarse) {
+  .ct-accordion__trigger {
+    min-block-size: 44px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ct-accordion__icon,
   .ct-accordion__item::details-content {

package/components/app-shell-v2.css

@@ -170,6 +170,13 @@
   background: var(--ct-v2-surface-bg);
 }
 
+/* The shell owns its scroll container, so it can satisfy WCAG 2.4.11
+   itself: scrolled-to content clears the sticky toolbar. Override
+   --ct-shell-scroll-offset when the toolbar height is customized. */
+.ct-app-shell-v2__main:has(.ct-app-shell-v2__toolbar--sticky) {
+  scroll-padding-block-start: var(--ct-shell-scroll-offset, 64px);
+}
+
 
 /* ── Sidebar States ── */
 

package/components/app-shell.css

@@ -230,6 +230,13 @@
   background: var(--color-bg-canvas);
 }
 
+/* The shell owns its scroll container, so it can satisfy WCAG 2.4.11
+   itself: scrolled-to content clears the sticky page header. Override
+   --ct-shell-scroll-offset when the header height is customized. */
+.ct-app-shell__main:has(.ct-app-shell__page-header--sticky) {
+  scroll-padding-block-start: var(--ct-shell-scroll-offset, 64px);
+}
+
 
 
 /* ── Backdrop (Mobile Sidebar Overlay) ── */

package/components/banner.css

@@ -26,7 +26,8 @@
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   transition: opacity var(--duration-normal) var(--easing-standard),
-    transform var(--duration-normal) var(--easing-standard);
+    transform var(--duration-normal) var(--easing-standard),
+    visibility 0s linear 0s;
 }
 
 /* ---- Sub-elements ---- */
@@ -159,6 +160,8 @@
 
 /* ---- Positions ---- */
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--fixed-top {
   position: fixed;
   inset-block-start: 0;
@@ -167,6 +170,8 @@
   border-radius: 0;
 }
 
+/* Consumers: set --ct-scroll-offset-bottom on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--fixed-bottom {
   position: fixed;
   inset-block-end: 0;
@@ -175,6 +180,8 @@
   border-radius: 0;
 }
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--sticky {
   position: sticky;
   inset-block-start: 0;
@@ -211,9 +218,16 @@
 
 /* ---- State ---- */
 
+/* Delayed visibility (drawer.css pattern) removes the faded-out banner
+   from the accessibility tree and tab order once the fade completes;
+   reopening restores it instantly via the base transition. */
 .ct-banner[data-state='closed'] {
   opacity: 0;
+  visibility: hidden;
   pointer-events: none;
+  transition: opacity var(--duration-normal) var(--easing-standard),
+    transform var(--duration-normal) var(--easing-standard),
+    visibility 0s linear var(--duration-normal);
 }
 
 .ct-banner--fixed-top[data-state='closed'],
@@ -237,6 +251,23 @@
   }
 }
 
+/* ---- Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ---- */
+
+@media (pointer: coarse) {
+  /* The default close is --control-height-sm, which _shared.css remaps to
+     44px; only the fixed 24px compact close needs the checkbox.css-style
+     hit area. */
+  .ct-banner--compact .ct-banner__close {
+    position: relative;
+  }
+
+  .ct-banner--compact .ct-banner__close::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--icon-lg) - 44px) / 2);
+  }
+}
+
 /* ---- Reduced Motion ---- */
 
 @media (prefers-reduced-motion: reduce) {

package/components/card.css

@@ -11,6 +11,8 @@
   border-radius: var(--ct-card-radius);
   padding: var(--ct-card-padding);
   box-shadow: var(--ct-card-shadow);
+  /* The datum edge slides in on activation instead of popping. */
+  transition: box-shadow var(--duration-fast) var(--easing-standard);
 }
 
 .ct-card--sm {
@@ -104,18 +106,30 @@
 .ct-card--datum::before {
   content: '';
   position: absolute;
-  top: calc(-1 * var(--border-thin));
-  left: calc(-1 * var(--border-thin));
-  width: 18px;
-  height: 18px;
-  border-top: var(--border-medium) solid var(--color-brand-accent);
-  border-left: var(--border-medium) solid var(--color-brand-accent);
-  border-top-left-radius: var(--radius-lg);
+  inset-block-start: calc(-1 * var(--border-thin));
+  inset-inline-start: calc(-1 * var(--border-thin));
+  width: var(--component-datum-mark-size);
+  height: var(--component-datum-mark-size);
+  border-block-start: var(--border-medium) solid var(--color-brand-accent);
+  border-inline-start: var(--border-medium) solid var(--color-brand-accent);
+  border-start-start-radius: var(--radius-lg);
+  pointer-events: none;
 }
 
 .ct-card--active,
 .ct-card[data-state='active'] {
   /* The datum: an orange leading edge marks the active/current card,
-     consistent with .ct-list__item and .ct-sidebar active states. */
-  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent), var(--ct-card-shadow);
+     consistent with .ct-list__item and .ct-sidebar active states. The
+     ambient shadow stays first so the list interpolates against the
+     base card shadow and the edge can animate in. */
+  box-shadow: var(--ct-card-shadow), inset var(--component-datum-edge-width) 0 0 0 var(--color-brand-accent);
+}
+
+@media (forced-colors: active) {
+  /* The datum edge is an inset box-shadow, which forced colors drops —
+     re-encode it as a border. */
+  .ct-card--active,
+  .ct-card[data-state='active'] {
+    border-inline-start: var(--component-datum-edge-width) solid SelectedItem;
+  }
 }

package/components/chart.css

@@ -86,6 +86,27 @@
   fill: var(--color-text-secondary);
 }
 
+/* ── Datum reference line ──
+   Construct's signature applied to data: an orange reference line marks
+   a threshold, target, or "today". The dash pattern separates the
+   reference from data series without relying on hue, and the value it
+   encodes must also appear as text — in the label and in the chart's
+   data-table fallback — so the line itself stays supplementary. */
+.ct-chart__datum-line {
+  stroke: var(--color-brand-accent-strong);
+  stroke-width: var(--ct-chart-line-width);
+  stroke-dasharray: 6 4;
+}
+
+.ct-chart__datum-label {
+  fill: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 /* ── Line & area ── */
 .ct-chart__line {
   fill: none;
@@ -366,4 +387,9 @@
   .ct-chart__axis-line {
     stroke: GrayText;
   }
+
+  /* The datum reference line stays distinct from the dimmed chrome. */
+  .ct-chart__datum-line {
+    stroke: CanvasText;
+  }
 }

package/components/checkbox.css

@@ -98,6 +98,9 @@
   background: var(--color-bg-muted);
   border-color: var(--color-border-subtle);
   cursor: not-allowed;
+  /* Disabled is fully colour-encoded above; cancel foundations' global
+     :disabled opacity so the control is not double-dimmed. */
+  opacity: 1;
 }
 
 .ct-check__input:focus-visible,
@@ -119,3 +122,32 @@
   border-inline-end: 0;
   transform: scale(1);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-check__input,
+  .ct-radio__input,
+  .ct-check__input::before,
+  .ct-radio__input::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-check__input:checked,
+  .ct-check__input:indeterminate,
+  .ct-radio__input:checked {
+    border-color: ButtonText;
+  }
+
+  /* The tick and indeterminate dash are border-drawn and survive on their
+     own; the radio dot is background-drawn and would be forced to Canvas. */
+  .ct-radio__input:checked::before {
+    background: SelectedItem;
+    forced-color-adjust: none;
+  }
+
+  .ct-check__input:disabled,
+  .ct-radio__input:disabled {
+    border-color: GrayText;
+  }
+}

package/components/chip.css

@@ -35,7 +35,9 @@
   --ct-chip-padding-x: var(--space-2);
   --ct-chip-font-size: var(--font-size-xs);
   --ct-chip-line-height: var(--line-height-xs);
-  --ct-chip-remove-size: var(--icon-sm);
+  /* WCAG 2.2 SC 2.5.8: the remove button stays at least 24px in every
+     pointer context, so the small chip cannot shrink it below that. */
+  --ct-chip-remove-size: var(--icon-lg);
   --ct-chip-gap: var(--space-1);
 }
 
@@ -346,6 +348,17 @@
   .ct-chip {
     min-height: 44px;
   }
+
+  /* Hit area may extend past the chip edge, mirroring checkbox.css. */
+  .ct-chip__remove {
+    position: relative;
+  }
+
+  .ct-chip__remove::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--ct-chip-remove-size) - 44px) / 2);
+  }
 }
 
 /* ── Reduced motion ──────────────────────────────────────────── */
@@ -361,3 +374,18 @@
     transform: none;
   }
 }
+
+/* ── Forced colors ───────────────────────────────────────────── */
+
+@media (forced-colors: active) {
+  /* Mask-drawn glyphs and the status dot paint via background-color,
+     which forced colors resets — repaint them with system ink. The
+     selected checkmark is border-drawn and survives on its own. */
+  .ct-chip__icon--info,
+  .ct-chip__icon--success,
+  .ct-chip__icon--warning,
+  .ct-chip__icon--danger,
+  .ct-chip__dot {
+    background-color: CanvasText;
+  }
+}

package/components/combobox.css

@@ -374,6 +374,27 @@
   border-color: transparent;
 }
 
+/* Replacement indicator for the removed input outline (mirrors the --multi pattern) */
+.ct-combobox--inline:focus-within {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ── */
+
+@media (pointer: coarse) {
+  .ct-combobox__option {
+    min-block-size: 44px;
+  }
+
+  /* Hit area extends past the visual 24px trigger, mirroring checkbox.css. */
+  .ct-combobox__trigger::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--icon-lg) - 44px) / 2);
+  }
+}
+
 /* ── Reduced motion ──────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {

package/components/datepicker.css

@@ -79,10 +79,22 @@
   justify-items: center;
 }
 
+/* Rows keep grid placement on the shared 7-column grid. display: contents
+   once dropped element semantics in older engines; current Chromium/Firefox/
+   Safari expose role="row" on display: contents elements correctly. */
 .ct-datepicker__row {
   display: contents;
 }
 
+/* Optional gridcell wrapper (APG date-picker dialog markup): the cell is the
+   grid item and carries role="gridcell" + aria-selected; the day button
+   inside keeps its native button role. */
+.ct-datepicker__cell {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
 .ct-datepicker__weekday {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
@@ -115,9 +127,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__day[aria-selected='true'] {
+.ct-datepicker__day[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__day {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__day[data-outside='true'] {
@@ -158,13 +171,13 @@
 
 .ct-datepicker__day[data-range-start] {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
   border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
 
 .ct-datepicker__day[data-range-end] {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -172,6 +185,38 @@
   border-radius: var(--radius-sm);
 }
 
+/* ── Coarse pointers ────────────────────────────────────────────── */
+
+@media (pointer: coarse) {
+  /* Day cells may compress inside the min(90vw, …) popover; tap size
+     wins over the shared column width (44×44 policy). */
+  .ct-datepicker__day {
+    min-width: var(--control-height-calendar-day);
+    min-height: var(--control-height-calendar-day);
+  }
+}
+
+/* ── Forced colors ──────────────────────────────────────────────── */
+
+@media (forced-colors: active) {
+  /* Selection fills are background-only and would be stripped to Canvas —
+     re-encode with system selection colors (data-today's border and the
+     highlight outline survive on their own). */
+  .ct-datepicker__day[aria-selected='true'],
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__day,
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__month,
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__year,
+  .ct-datepicker__month[aria-selected='true'],
+  .ct-datepicker__year[aria-selected='true'],
+  .ct-datepicker__day[data-in-range],
+  .ct-datepicker__day[data-range-start],
+  .ct-datepicker__day[data-range-end] {
+    background: SelectedItem;
+    color: SelectedItemText;
+    forced-color-adjust: none;
+  }
+}
+
 /* ── Month grid (3×4) ───────────────────────────────────────────── */
 
 .ct-datepicker__month-grid {
@@ -205,9 +250,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__month[aria-selected='true'] {
+.ct-datepicker__month[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__month {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__month[data-highlighted] {
@@ -254,9 +300,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__year[aria-selected='true'] {
+.ct-datepicker__year[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__year {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__year[data-highlighted] {